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

.events {
  @include pageBase;

  width: 100%;

  position: relative;

  overflow-x: hidden;

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

  &__tabs {
    display: flex;

    align-items: center;

    gap: 0.75rem;

    margin: 1.5rem 0 2rem;

    padding: 0.4rem;

    border-radius: 18px;

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

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

    width: fit-content;

    @media (max-width: 768px) {
      width: 100%;

      overflow-x: auto;
    }
  }

  &__tab,
  &__tabActive {
    height: 42px;

    padding: 0 1.25rem;

    border-radius: 12px;

    border: none;

    cursor: pointer;

    white-space: nowrap;

    font-size: 0.82rem;

    font-weight: 600;

    transition: all 0.25s ease;
  }

  &__tab {
    background: transparent;

    color: rgba(255, 255, 255, 0.65);

    &:hover {
      color: #fff;
    }
  }

  &__tabActive {
    background: linear-gradient(
      135deg,
      #f79318,
      #ffb454
    );

    color: #111;

    box-shadow:
      0 10px 25px rgba(247, 147, 24, 0.2);
  }

  /* ===================================
     EVENTS GRID
  =================================== */

  &__grid {
    display: grid;

    grid-template-columns:
      repeat(
        auto-fill,
        minmax(340px, 1fr)
      );

    gap: 1.5rem;

    align-items: stretch;

    @media (max-width: 768px) {
      grid-template-columns: 1fr;

      gap: 1rem;
    }
  }

  /* ===================================
     EMPTY
  =================================== */

  &__empty {
    margin-top: 2rem;
  }

  /* ===================================
     PAGINATION
  =================================== */

  &__pagination {
    display: flex;

    justify-content: center;

    margin-top: 1rem;

    padding-top: 1.5rem;

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

/* ===================================
   SKELETON CARD
=================================== */

.eventSkeleton {
  overflow: hidden;

  border-radius: 24px;

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

  position: relative;

  &::before {
    content: "";

    position: absolute;

    inset: 0;

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

    transform: translateX(-100%);

    animation: shimmer 1.8s infinite;

    z-index: 2;
  }

  &__image {
    position: relative;

    height: 220px;

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

  &__badge {
    position: absolute;

    top: 1rem;
    right: 1rem;

    width: 70px;
    height: 28px;

    border-radius: 999px;

    background: rgba(
      255,
      255,
      255,
      0.06
    );
  }

  &__body {
    padding: 1.4rem;
  }

  &__title {
    height: 18px;

    width: 70%;

    border-radius: 999px;

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

    margin-bottom: 1rem;
  }

  &__text {
    height: 12px;

    width: 100%;

    border-radius: 999px;

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

    margin-bottom: 0.65rem;
  }

  &__textShort {
    height: 12px;

    width: 75%;

    border-radius: 999px;

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

    margin-bottom: 1.25rem;
  }

  &__meta {
    height: 11px;

    width: 90%;

    border-radius: 999px;

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

    margin-bottom: 0.7rem;
  }

  &__metaShort {
    height: 11px;

    width: 60%;

    border-radius: 999px;

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

    margin-bottom: 1.25rem;
  }

  &__progress {
    height: 8px;

    width: 100%;

    border-radius: 999px;

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

    margin-bottom: 1.4rem;
  }

  &__buttons {
    display: flex;

    gap: 0.75rem;
  }

  &__button,
  &__buttonSecondary {
    flex: 1;

    height: 44px;

    border-radius: 14px;

    background: rgba(
      255,
      255,
      255,
      0.06
    );
  }

  &__buttonSecondary {
    background: rgba(
      255,
      255,
      255,
      0.04
    );
  }
}

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

@keyframes shimmer {
  100% {
    transform: translateX(100%);
  }
}