@use "../../../../styles/abstracts/variables" as vars;
@use "../../../../styles/abstracts/mixins";

.signals {
  @include mixins.pageBase;
  &{
    width: 100%;
    overflow-x: hidden;
    background:
    radial-gradient(
      circle at top right,
      rgba(255, 140, 66, 0.05),
      transparent 35%
    ),
    #101012;
  }

  &__header {
    @include mixins.dashPageHeader;
  }

  &__tab {
    background: #1a1a1a;
    border: 1px solid vars.$col-border-lining;
    border-radius: 6px;
    margin: 1rem 0 1.5rem 0;
    display: flex;
    width: 100%;
    padding: 0.5rem !important;
    align-items: center;
    font-size: 0.8rem;
    font-weight: 500;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 20px;

    &--item {
      text-align: center;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      flex: 0 0 170px;
      color: vars.$col-white;
      text-align: center !important;

      @media only screen and (max-width: 1000px) {
        flex: 0 0 150px;
        width: 100%;
        font-size: 0.85rem;
      }

      &--active {
        background: vars.$col-orange;
        color: vars.$col-dark;
        border-radius: 6px;
        padding: 0.5rem 1rem;
        font-size: 0.85rem;
        font-weight: 500;
        text-align: center !important;

        @media only screen and (max-width: 1000px) {
          flex: 0 0 180px;
          font-size: 0.9rem;
          font-weight: 600;
        }
      }
    }
  }

  &__signals {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 20px;

    @media only screen and (max-width: 1000px) {
      flex-direction: column;
    }
  }

  .signal-skeleton {
  position: relative;

  width: 350px;
  flex: 0 0 350px;

  display: flex;
  flex-direction: column;

  padding: 1.8rem 1.5rem;

  border-radius: 24px;

  overflow: hidden;

  background:
    linear-gradient(
      180deg,
      rgba(22, 22, 24, 0.98) 0%,
      rgba(15, 15, 18, 1) 100%
    );

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.05
    );

  @media only screen and (max-width: 1000px) {
    width: 100%;
    flex: none;
  }

  &::before {
    content: "";

    position: absolute;

    top: 0;
    left: -150%;

    width: 70%;
    height: 100%;

    background:
      linear-gradient(
        90deg,
        transparent,
        rgba(
          255,
          255,
          255,
          0.06
        ),
        transparent
      );

    transform: skewX(-20deg);

    animation:
      signalShimmer
      1.8s
      infinite;
  }
}

/* ==========================
   TOP
========================== */

.skeleton-top {
  display: flex;

  justify-content: space-between;

  align-items: flex-start;

  margin-bottom: 1.2rem;
}

.skeleton-badge {
  width: 90px;

  height: 24px;

  border-radius: 999px;

  background: #262629;

  margin-bottom: 0.8rem;
}

.skeleton-title {
  width: 140px;

  height: 18px;

  border-radius: 8px;

  background: #2a2a2d;
}

.skeleton-winrate {
  width: 120px;

  height: 34px;

  border-radius: 999px;

  background:
    linear-gradient(
      180deg,
      rgba(34, 197, 94, 0.12),
      rgba(34, 197, 94, 0.05)
    );

  border:
    1px solid
    rgba(
      34,
      197,
      94,
      0.12
    );
}

/* ==========================
   DESCRIPTION
========================== */

.skeleton-description {
  margin-bottom: 1.3rem;
}

.skeleton-line {
  width: 100%;

  height: 12px;

  border-radius: 6px;

  background: #2a2a2d;

  margin-bottom: 0.7rem;
}

.skeleton-line-short {
  width: 72%;

  height: 12px;

  border-radius: 6px;

  background: #2a2a2d;
}

/* ==========================
   PRICING
========================== */

.skeleton-pricing {
  display: flex;

  flex-direction: column;

  gap: 0.85rem;

  margin-bottom: 1.6rem;

  padding: 0.7rem 1rem;

  border-radius: 18px;

  background:
    linear-gradient(
      180deg,
      rgba(
        255,
        255,
        255,
        0.025
      ),
      rgba(
        255,
        255,
        255,
        0.01
      )
    );

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.05
    );
}

.skeleton-price-row {
  display: flex;

  justify-content: space-between;

  align-items: center;

  padding-bottom: 0.85rem;

  border-bottom:
    1px solid
    rgba(
      255,
      255,
      255,
      0.05
    );

  &:last-child {
    border-bottom: none;

    padding-bottom: 0;
  }

  div:first-child {
    width: 70px;

    height: 10px;

    border-radius: 6px;

    background: #2a2a2d;
  }

  div:last-child {
    width: 90px;

    height: 12px;

    border-radius: 6px;

    background: #2a2a2d;
  }
}

/* ==========================
   BUTTON
========================== */

.skeleton-button {
  width: 100%;

  height: 44px;

  border-radius: 14px;

  margin-top: auto;

  background:
    linear-gradient(
      90deg,
      #2a2a2d,
      #343438,
      #2a2a2d
    );

  background-size: 300% 100%;
}

/* ==========================
   SHIMMER
========================== */

@keyframes signalShimmer {
  0% {
    left: -150%;
  }

  100% {
    left: 150%;
  }
}
}


::-webkit-scrollbar {
  display: none !important;
}