@use "../../assets/stylesheets/base/colors" as *;
@use "../../assets/stylesheets/abstracts/mixins" as *;

#projects {
  .swiper {
    width: 100%;
    padding-top: 50px;
    padding-bottom: 50px;
    @include for-mobile {
      background-size: 150%;
      background-position: 50%;
    }

    &#active-slide-0 {
      background: radial-gradient(
        31.95% 51.75% at 50% 51.75%,
        rgba(255, 0, 92, 0.4) 0%,
        rgba(23, 23, 23, 0) 90%
      );
    }

    &#active-slide-1 {
      background: radial-gradient(
        31.95% 51.75% at 50% 51.75%,
        rgba(255, 0, 0, 0.5) 0%,
        rgba(23, 23, 23, 0) 90%
      );
    }
    &#active-slide-2 {
      background: radial-gradient(
        31.95% 51.75% at 50% 51.75%,
        rgba(255, 196, 105, 0.7) 0%,
        rgba(23, 23, 23, 0) 90%
      );
    }
    &#active-slide-3 {
      background: radial-gradient(
        31.95% 51.75% at 50% 51.75%,
        rgba(37, 192, 255, 0.9) 0%,
        rgba(23, 23, 23, 0) 90%
      );
    }
    &#active-slide-4 {
      background: radial-gradient(
        31.95% 51.75% at 50% 51.75%,
        rgba(0, 231, 10, 0.4) 0%,
        rgba(23, 23, 23, 0) 90%
      );
    }
    &#active-slide-5 {
      background: radial-gradient(
        31.95% 51.75% at 50% 51.75%,
        rgba(245, 194, 26, 0.4) 0%,
        rgba(23, 23, 23, 0) 90%
      );
    }

    @include for-tablets {
      &#active-slide-0,
      &#active-slide-1,
      &#active-slide-2,
      &#active-slide-3,
      &#active-slide-4,
      &#active-slide-5 {
        background-size: 150%;
        background-position: 50%;
      }
    }

    // &:before {
    //   content: "";
    //   width: 100%;
    //   height: 100%;
    //   position: absolute;
    // background: linear-gradient(
    //   90deg,
    //   rgba(17, 17, 17, 1) 0%,
    //   rgba(255, 255, 255, 0) 10%,
    //   rgba(255, 255, 255, 0) 90%,
    //   rgba(17, 17, 17, 1) 100%
    // );
    //   z-index: 4;
    //   pointer-events: none;
    // }
  }

  .swiper-container {
    padding-top: 50px;
    padding-bottom: 50px;
  }
  .swiper-slide {
    // width: 50%;

    background-position: center;
    background-size: cover;
    width: 300px;
    height: 300px;

    transition: all 0.5s;

    img {
      display: block;
      width: 100%;
    }

    h2 {
      width: max-content;
      margin-left: auto;
      margin-right: auto;
    }

    .img-wrap {
      position: relative;
    }

    p {
      &:last-of-type {
        text-align: center;
        color: $color-text-secondary;
        padding-top: 6px;
      }
    }

    img {
      margin: 0 auto;
      // width: 66%;
      // background: linear-gradient(
      //   90deg,
      //   rgba(0, 0, 0, 0) 0%,
      //   rgba(17, 17, 17, 1) 5%,
      //   rgba(17, 17, 17, 1) 95%,
      //   rgba(0, 0, 0, 0) 100%
      // );
    }

    .project-info {
      div {
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        padding-top: 33px;
        margin: 0 auto;
        width: 50%;
        white-space: nowrap;

        @include for-mobile {
          width: 66%;
        }

        p {
          margin: 0 29px;
          text-transform: uppercase;
          color: $color-accent-primary;
          padding: 0;
        }
      }
    }

    &:not(.swiper-slide-active) {
      h2 {
        opacity: 0;
      }

      .project-info {
        opacity: 0;
      }
    }
  }

  .swiper-slide-active {
    width: 600px;
    pointer-events: none;
  }
}