@use "@/src/assets/scss/variables" as *;
@use "@/src/assets/scss/partial" as *;

.HomeSliderWrapper {
  .SwiperSlider {
    overflow: hidden;

    .swiper {

      .swiper-button-prev,
      .swiper-button-next {
        width: 42px;
        height: 42px;
        border-radius: 100%;
        overflow: hidden;
        background-color: $secondaryColor;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        margin-top: 10px;

        @media (min-width: $xl) {
          width: 50px;
          height: 50px;
        }

        @media (min-width: $xxxl) {
          width: 57px;
          height: 57px;
        }

        &::before {
          content: "";
          position: absolute;
          display: inline-block;
          width: 18px;
          height: 18px;
          mask-size: contain;
          -webkit-mask-size: contain;
          mask-repeat: no-repeat;
          -webkit-mask-repeat: no-repeat;
          transition: all 0.3s ease-in-out;
          background-color: $whiteColor;

          @media (min-width: $xl) {
            width: 22px;
            height: 22px;
          }

          @media (min-width: $xxxl) {
            width: 24px;
            height: 24px;
          }
        }

        &::after {
          display: none;
        }
      }

      .swiper-button-prev {
        &::before {
          mask-image: url("../../../../public/images/icon-left-arrow.svg");
          -webkit-mask-image: url("../../../../public/images/icon-left-arrow.svg");
        }
      }

      .swiper-button-next {
        margin-left: 10px;

        @media (min-width: $lg) {
          margin-left: 16px;
        }

        &::before {
          mask-image: url("../../../../public/images/icon-right-arrow.svg");
          -webkit-mask-image: url("../../../../public/images/icon-right-arrow.svg");
        }
      }
    }
  }
}