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

.event {
  position: relative;

  display: flex;
  flex-direction: column;

  flex: 0 0 350px;

  min-width: 350px;

  overflow: hidden;

  border-radius: 24px;

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

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      .05
    );

  transition:
    transform .3s ease,
    box-shadow .3s ease,
    border-color .3s ease;

  &::before {
    content: "";

    position: absolute;

    inset: 0;

    background:
      radial-gradient(
        circle at top right,
        rgba(
          247,
          147,
          24,
          .08
        ),
        transparent 45%
      );

    opacity: 0;

    transition: .3s ease;

    pointer-events: none;
  }

  &:hover {
    transform: translateX(3px);

    border-color:
      rgba(
        255,
        255,
        255,
        .08
      );

    box-shadow:
      0 25px 60px
      rgba(
        0,
        0,
        0,
        .45
      );

    &::before {
      opacity: 1;
    }

    .event--top img {
      transform: scale(1.05);
    }
  }

  /* =======================
     IMAGE
  ======================= */

/* =======================
   IMAGE
======================= */

&--top {
  position: relative;

  height: 210px;

  overflow: hidden;

  img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: .5s ease;
  }

  &--overlay {
    position: absolute;

    inset: 0;

    z-index: 1;

    background:
      linear-gradient(
        180deg,
        rgba(0, 0, 0, .35) 0%,
        rgba(0, 0, 0, .45) 40%,
        rgba(0, 0, 0, .72) 100%
      );
  }

  &--status {
    position: absolute;

    top: 1rem;
    left: 1rem;

    z-index: 3;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: .3rem .6rem;

    border-radius: 999px;

    background:
      rgba(
        34,
        197,
        94,
        .18
      );

    backdrop-filter: blur(12px);

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

    color: #22c55e;

    font-size: .68rem !important;

    font-weight: 700 !important;

    letter-spacing: .08em;

    text-transform: uppercase;

    box-shadow:
      0 10px 25px
      rgba(
        34,
        197,
        94,
        .12
      );
  }
}

  /* =======================
     BODY
  ======================= */

  &--body {
    padding: 1.4rem;

    display: flex;
    flex-direction: column;

    flex: 1;

    h1 {
      color: #fff;

      font-size: 1rem;

      font-weight: 500;

      line-height: 1.5;

      margin-bottom: .75rem;
    }

    p {
      color:
        rgba(
          255,
          255,
          255,
          .62
        );

      font-size: .8rem;

      line-height: 1.8;

      margin-bottom: 1rem;
    }

    span {
      display: flex;

      align-items: center;

      gap: .6rem;

      color:
        rgba(
          255,
          255,
          255,
          .72
        );

      font-size: .78rem;

      margin-bottom: .7rem;

      svg {
        color: #f79318;

        flex-shrink: 0;
      }
    }

    /* =======================
       CAPACITY
    ======================= */

    &--progress {
      margin-top: 1rem;

      padding: 1rem;

      border-radius: 18px;

      background:
        rgba(
          255,
          255,
          255,
          .025
        );

      border:
        1px solid
        rgba(
          255,
          255,
          255,
          .05
        );

      .progress-bar {
        height: 8px;

        width: 100%;

        overflow: hidden;

        border-radius: 999px;

        background:
          rgba(
            255,
            255,
            255,
            .05
          );

        &__bought {
          height: 100%;

          border-radius: inherit;

          background:
            linear-gradient(
              90deg,
              #f79318,
              #ffb454
            );
        }
      }

      .progress-info {
        display: flex;

        justify-content: space-between;

        margin-top: .75rem;

        span {
          margin: 0;

          font-size: .72rem;

          color:
            rgba(
              255,
              255,
              255,
              .55
            );
        }
      }
    }
  }

/* =======================
   BUTTONS
======================= */

&--buttons {
  display: flex;

  gap: .75rem;

  padding: 0 1.4rem 1.4rem;

  margin-top: auto;

  button,
  a,
  div {
    flex: 1;

    min-height: 46px;

    height: 42px;

    padding: 0 1rem;

    border-radius: 14px;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    font-size: .8rem;

    font-weight: 600;

    transition: .25s ease;

    text-align: center;

    white-space: nowrap;
  }

  button {
    border: none;

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

    color: #111;

    &:hover {
      transform: translateY(-2px);
    }
  }

  a {
    text-decoration: none;

    background:
      rgba(
        255,
        255,
        255,
        .03
      );

    border:
      1px solid
      rgba(
        255,
        255,
        255,
        .05
      );

    color: #fff;
  }

  &--view {
    background:
      rgba(
        59,
        130,
        246,
        .08
      );

    border:
      1px solid
      rgba(
        59,
        130,
        246,
        .15
      );

    color: #60a5fa;
  }

  &--edit {
    background:
      rgba(
        34,
        197,
        94,
        .08
      );

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

    color: #22c55e;
  }

  &--delete {
    background:
      rgba(
        239,
        68,
        68,
        .08
      );

    border:
      1px solid
      rgba(
        239,
        68,
        68,
        .15
      );

    color: #ef4444;
  }
}

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

    flex: none;

    &--buttons {
      flex-direction: column;
      button,
      a,
      div {
        min-height: 42px;
        // height: 32px;
      }
    }
  }
}