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

.events {
  @include mixins.pageBase;
  &{
    width: 100%;
    overflow-x: hidden;
  }

  &__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;
      flex: 0 0 170px;
      color: vars.$col-white;

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

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

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

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

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

  /* ================= FILTER SECTION ================= */
  /* ================= FILTER SECTION ================= */
  &__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 1.5rem;
    padding: 0.8rem 0;

    &-group {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 0.75rem;
      color: vars.$col-white;

      span {
        font-weight: 500;
      }

      label {
        display: flex;
        align-items: center;
        gap: 6px;
        cursor: pointer;
        font-size: 0.75rem;

        input[type='checkbox'] {
          width: 14px;
          height: 14px;
          accent-color: vars.$col-orange;
          cursor: pointer;
        }
      }
    }
  }
}

.event-skeleton {
  background: #181818;
  border-radius: 6px;
  margin-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 0 0 320px;
  position: relative;
  overflow: hidden;
  cursor: default;

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

  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: -150%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.12),
      transparent
    );
    animation: shimmer 1.5s infinite;
    z-index: 1;
    transform: skewX(-20deg);
  }

  &__top {
    position: relative;
    height: 140px;  // approximate banner height
    border-radius: 6px 6px 0 0;
    background: #222;

    &__status {
      position: absolute;
      top: 1rem;
      right: 1rem;
      height: 24px;
      width: 70px;
      border-radius: 4px;
      background: #333;
    }
  }

  &__body {
    padding: 1.5rem;
    padding-bottom: 0;
    color: transparent; // hide actual text

    .skeleton-title {
      height: 20px;
      width: 60%;
      border-radius: 4px;
      background: #333;
      margin-bottom: 0.5rem;
    }

    .skeleton-intro {
      height: 14px;
      width: 90%;
      border-radius: 4px;
      background: #333;
      margin-bottom: 1rem;
    }

    .skeleton-line {
      height: 12px;
      width: 80%;
      border-radius: 4px;
      background: #333;
      margin-bottom: 0.4rem;
    }

    .skeleton-line.short {
      width: 50%;
    }
  }

  &__buttons {
    margin-top: 1rem;
    padding: 0 1.5rem;
    display: flex;
    gap: 10px;

    .skeleton-button {
      flex: 1;
      height: 36px;
      border-radius: 6px;
      background: #333;
      transition: none;
      margin-bottom: 2rem;
    }
  }
}

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