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

.admin__signals {
  @include mixins.adminPageIntro;

  width: 100%;

  margin-top: 1rem;

  overflow: hidden;
}

/* ==========================================
   TABS
========================================== */

.admin__signals__tab {
  display: flex;

  align-items: center;

  gap: 0.8rem;

  overflow-x: auto;

  padding: 0.4rem;

  border-radius: 16px;

  background: rgba(255, 255, 255, 0.03);

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

  margin-bottom: 2rem;

  &::-webkit-scrollbar {
    display: none;
  }
}

.admin__signals__tab--item,
.admin__signals__tab--item--active {
  flex-shrink: 0;

  height: 42px;

  padding: 0 1rem;

  border-radius: 12px;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 0.8rem;

  font-weight: 500;

  cursor: pointer;

  transition: all 0.25s ease;
}

.admin__signals__tab--item {
  color: rgba(255, 255, 255, 0.7);

  &:hover {
    background: rgba(255, 255, 255, 0.05);
  }
}

.admin__signals__tab--item--active {
  background: variables.$col-orange;

  color: variables.$col-dark;
}

/* ==========================================
   CONTENT
========================================== */

.admin__signals__children {
  width: 100%;
}

.admin__signals__children--signals {
  display: flex;

  gap: 1.25rem;

  overflow-x: auto;

  padding-bottom: 1rem;

  &::-webkit-scrollbar {
    display: none;
  }

  > * {
    flex-shrink: 0;
  }
}

/* ==========================================
   PREMIUM SKELETON
========================================== */

.signalSkeleton {
  position: relative;

  width: 350px;

  flex: 0 0 350px;

  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);

  display: flex;

  flex-direction: column;

  gap: 0.9rem;

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

    flex: none;
  }

  &::before {
    content: "";

    position: absolute;

    top: 0;

    left: -150%;

    width: 50%;

    height: 100%;

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

    animation: shimmer 1.6s infinite;
  }
}

.signalSkeleton__badge,
.signalSkeleton__title,
.signalSkeleton__meta,
.signalSkeleton__description,
.signalSkeleton__descriptionShort,
.signalSkeleton__price,
.signalSkeleton__button {
  background: rgba(255, 255, 255, 0.06);

  border-radius: 8px;
}

.signalSkeleton__badge {
  width: 90px;

  height: 24px;
}

.signalSkeleton__title {
  width: 70%;

  height: 24px;
}

.signalSkeleton__meta {
  width: 120px;

  height: 34px;

  border-radius: 999px;
}

.signalSkeleton__description {
  width: 100%;

  height: 10px;
}

.signalSkeleton__descriptionShort {
  width: 65%;

  height: 10px;

  margin-bottom: 0.4rem;
}

.signalSkeleton__pricing {
  display: flex;

  flex-direction: column;

  gap: 0.75rem;

  padding: 1rem;

  border-radius: 16px;

  background: rgba(255, 255, 255, 0.03);

  margin-top: 0.5rem;
}

.signalSkeleton__price {
  width: 100%;

  height: 20px;
}

.signalSkeleton__button {
  width: 100%;

  height: 46px;

  margin-top: auto;

  border-radius: 14px;
}

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

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

  100% {
    left: 150%;
  }
}