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

.my_events {
  margin-top: 1.5rem;

  width: 100%;

  &__container {
    overflow: hidden;

    border-radius: 24px;

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

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

    box-shadow:
      0 24px 60px
      rgba(0, 0, 0, 0.3);
  }

  /* ===================== */

  &__header {
    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 1.25rem 1.5rem;

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

    h3 {
      color: #fff;

      font-size: 0.95rem;

      font-weight: 650;
    }

    span {
      color: rgba(
        255,
        255,
        255,
        0.5
      );

      font-size: 0.75rem;
    }
  }

  /* ===================== */

  &__table {
    overflow-x: auto;
  }

  &__head {
    display: grid;

    grid-template-columns:
      220px
      minmax(220px, 1fr)
      120px
      140px
      140px
      140px;

    min-width: 980px;

    padding: 1rem 1.5rem;

    font-size: 0.72rem;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.08em;

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

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

  &__row {
    display: grid;

    grid-template-columns:
      220px
      minmax(220px, 1fr)
      120px
      140px
      140px
      140px;

    min-width: 980px;

    align-items: center;

    padding: 1rem 1.5rem;

    color: #fff;

    font-size: 0.8rem;

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

    transition: 0.25s ease;

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

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

  /* ===================== */

  .reference {
    font-family: monospace;

    font-size: 0.72rem;

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

  .event_name {
    font-weight: 600;

    color: #fff;
  }

  /* ===================== */

  .status_upcoming,
  .status_completed,
  .status_on-going {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 0.45rem 0.8rem;

    border-radius: 999px;

    font-size: 0.7rem;

    font-weight: 600;
  }

  .status_upcoming {
    background: rgba(
      250,
      204,
      21,
      0.08
    );

    border: 1px solid
      rgba(
        250,
        204,
        21,
        0.18
      );

    color: #facc15;
  }

  .status_on-going {
    background: rgba(
      34,
      197,
      94,
      0.08
    );

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

    color: #22c55e;
  }

  .status_completed {
    background: rgba(
      148,
      163,
      184,
      0.08
    );

    border: 1px solid
      rgba(
        148,
        163,
        184,
        0.18
      );

    color: #94a3b8;
  }

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

  &__skeletonRow {
    display: grid;

    grid-template-columns:
      220px
      minmax(220px, 1fr)
      120px
      140px
      140px
      140px;

    min-width: 980px;

    gap: 1rem;

    padding: 1rem 1.5rem;

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

  &__skeletonRef,
  &__skeletonTitle,
  &__skeletonSmall,
  &__skeletonBadge {
    height: 12px;

    border-radius: 999px;

    background: linear-gradient(
      90deg,
      rgba(255,255,255,.03),
      rgba(255,255,255,.08),
      rgba(255,255,255,.03)
    );

    background-size: 300% 100%;

    animation: shimmer 1.8s infinite;
  }

  &__skeletonTitle {
    width: 90%;
  }

  &__skeletonBadge {
    width: 80px;

    height: 28px;

    border-radius: 999px;
  }

  /* ===================== */

  &__pagination {
    margin-top: 1.5rem;
  }
}

@keyframes shimmer {
  100% {
    background-position: 300% 0;
  }
}