swiper-slider {
  .swiper-slide {
    height: auto;
    max-width: var(--slider-item-width);

    &:last-child {
      margin-right: max(var(--calculated-section-spacing-inline), 50% - var(--container-max-width) / 2);
    }

    &:not(:last-child) {
      margin-right: 20px;
    }

    product-card,
    .collection-card,
    .content-over-media {
      height: 100%;
    }
  }

  .swiper-pagination.swiper-pagination-horizontal {
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 30px;
    color: rgba(var(--pagination-color), 1);

    &.buttons--dark-green {
      color: #004443;

      .swiper-pagination-bullet {
        background-color: rgba(0, 68, 67, 0.5);

        &.swiper-pagination-bullet-active {
          background-color: rgba(0, 68, 67, 1);
        }
      }
    }
  
    &.buttons--white {
      color: #fff;

      .swiper-pagination-bullet {
        background-color: rgba(255, 255, 255, 0.5);

        &.swiper-pagination-bullet-active {
          background-color: rgba(255, 255, 255, 1);
        }
      }
    }

    .swiper-pagination-bullet {
      width: 10px;
      height: 10px;
      opacity: 1;
      margin: 0;
      transition: all 0.15s ease;

      &::before {
        content: '';
        display: block;
        width: 25px;
        height: 25px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }

      &.swiper-pagination-bullet-active {
        width: 30px;
        border-radius: 30px;
      }
    }
  }

  .scrollbar__container {
    padding-top: 30px;
    padding-right: max(var(--calculated-section-spacing-inline), 50% - var(--container-max-width) / 2);
    display: flex;
    align-items: center;
    gap: var(--spacing-10);
  }

  .slider-buttons {
    display: none;
    align-items: center;
    gap: var(--spacing-4);
  }

  .swiper-pagination-progressbar.swiper-pagination-horizontal {
    position: relative;
    height: 2px;

    &.buttons--dark-green {
      background-color: rgba(0, 68, 67, 0.5);

      .swiper-pagination-progressbar-fill {
        background-color: rgba(0, 68, 67, 1);
      }
    }
  
    &.buttons--white {
      background-color: rgba(255, 255, 255, 0.5);

      .swiper-pagination-progressbar-fill {
        background-color: rgba(255, 255, 255, 1);
      }
    }
  }

  .circle-button {
    display: none;
  }

  &:hover {
    .circle-button {
      display: grid;
    }
  }
}

@media screen and (min-width: 700px) { 
  swiper-slider {
    .scrollbar__container {
      padding-top: 45px;
    }

    .slider-buttons {
      display: flex;
    }
  }
}

@media screen and (min-width: 980px) { 
  swiper-slider {
    .swiper-slide:not(:last-child) {
      margin-right: 30px;
    }

    .scrollbar__container {
      padding-top: 45px;
    }

    .slider-buttons {
      display: flex;
    }

    &[data-slides="3"] {
      .swiper-slide {
        width: calc(100% / 3 - 36px);
      }
    }
  }
}