/* 🚧 WIP 🚧: BEM naming convention needs to be completed for these styles */
.cpap__recommended-accessories {
  padding: 120px 26px 50px;

  .cpap__recommended-accessories__heading-title {
    width: 770px;
  }
  .cpap__recommended-accessories__title-container {
    max-width: 1416px;
    padding-top: 28px;
  }

  .cpap__recommended-accessories__list .recommended-accessories-card {
    padding: 24px;
    border-radius: 16px;
    background: var(--cpap-primary-white);
  }
  .cpap__recommended-accessories__list .recommended-accessories-card:hover {
    box-shadow: 0px -4px 30px 0px var(--cpap-overlay-box-multicolumn-shadow2);

    .favorite-icon {
      display: none !important;
    }
  }
  .recommended-accessories-text-container {
    min-height: 125px;
  }

  .cpap__recommended-accessories__list.swiper-wrapper {
    padding: 32px 0;
  }
  .recommended-accessories-card-main {
    padding: 0 16px;
    flex-basis: 25%;
  }
  .recommended-accessories-card:hover
    .recommended-accessories-img-container
    .recommended-accessories-img {
    animation: cpap-slide-up 7s linear infinite;
  }
  .cpap__recommended-accessories__list .recommended-accessories-img-container {
    max-width: 233px;
    height: 175px;
    margin-bottom: 20px;
  }
  .cpap__recommended-accessories__list .recommended-accessories-text-container .review-rating,
  .cpap__recommended-accessories__list
    .recommended-accessories-text-container
    .recommended-accessories-vendor {
    color: var(--cpap-text-text-gray);
  }
  .cpap__recommended-accessories__list
    .recommended-accessories-text-container
    .recommended-accessories-title,
  .cpap__recommended-accessories__list
    .recommended-accessories-text-container
    .recommended-accessories-price {
    color: var(--cpap-primary-soft-black);
  }
  .cpap__recommended-accessories__list
    .recommended-accessories-text-container
    .recommended-accessories-price {
    margin-bottom: 8px;
  }
  .cpap__recommended-accessories__list .recommended-accessories-text-container .review-rating-star {
    margin-right: 4px;
  }
  .cpap__recommended-accessories__list
    .cpap__recommended-accessories__add-to-cart-button-container {
    opacity: 0;
    visibility: hidden;
    transition: 0.5s ease-in-out;
  }
  .cpap__recommended-accessories__list .recommended-accessories-card .favorite-icon {
    top: 16px;
    right: 16px;
    display: none;
  }
  .cpap__recommended-accessories__list
    .recommended-accessories-card:hover
    .cpap__recommended-accessories__add-to-cart-button-container {
    opacity: 1;
    visibility: visible;
  }
  .cpap__recommended-accessories__list .recommended-accessories-card:hover .favorite-icon {
    display: block;
  }

  .swiper .swiper-button-prev,
  .swiper .swiper-button-next {
    position: absolute;
    z-index: 1;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border: 1px solid var(--cpap-primary-beige);
    border-radius: 100%;
    font-size: 0;
    padding: 0;
    background: transparent;
    transition: all 0.2s linear;
  }
  .swiper .swiper-button-prev {
    left: 17px;
  }
  .swiper .swiper-button-next {
    right: 31px;
  }
  .swiper .swiper-button-disabled {
    pointer-events: none;
    display: none !important;
  }
  .swiper .swiper-button-prev:before,
  .swiper .swiper-button-next:before {
    content: '';
    width: 6px;
    height: 6px;
    background: transparent;
    position: absolute;
    top: 50%;
    left: 50%;
    border-top: 1px solid var(--cpap-primary-soft-black);
    border-left: 1px solid var(--cpap-primary-soft-black);
    transition: all 0.2s linear;
  }
  .swiper .swiper-button-prev:before {
    transform: translate(-50%, -50%) rotate(-45deg);
  }
  .swiper .swiper-button-next:before {
    transform: translate(-50%, -50%) rotate(135deg);
  }
  @media only screen and (min-width: 1200px) {
    .swiper .swiper-button-prev:hover,
    .swiper .swiper-button-next:hover {
      background: var(--cpap-primary-orange);
      border-color: var(--cpap-primary-orange);
    }
    .swiper .swiper-button-prev:hover:before,
    .swiper .swiper-button-next:hover:before {
      border-color: var(--cpap-primary-white);
    }
  }
  .cpap__recommended-accessories__list .swiper-wrapper {
    padding: 0 9px;
  }
  .cpap__recommended-accessories__list .swiper-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    list-style-type: none;
    padding: 0;
    margin: 0;
  }
  .cpap__recommended-accessories__list .swiper-pagination-bullet {
    font-size: 0;
    width: 100%;
    max-width: 71px;
    height: 2px;
    background: var(--cpap-overlay-orange);
    border: none;
  }
  .cpap__recommended-accessories__list .swiper-pagination-bullet-active {
    background: var(--cpap-primary-orange);
  }
  @media only screen and (max-width: 1024px) {
    .recommended-accessories-card-main {
      flex-basis: 33.33%;
    }

    .swiper .swiper-button-next {
      right: 0;
    }
    .swiper .swiper-button-prev {
      left: 0;
    }
    .cpap__recommended-accessories__list
      .cpap__recommended-accessories__add-to-cart-button-container,
    .cpap__recommended-accessories__list .recommended-accessories-card:hover .favorite-icon {
      display: none;
    }
    .cpap__recommended-accessories__list .recommended-accessories-card:hover {
      box-shadow: none;
    }
  }
  @media only screen and (max-width: 767.98px) {
    .cpap__recommended-accessories__heading-title {
      width: 335px;
    }
    .recommended-accessories-card:hover
      .recommended-accessories-img-container
      .recommended-accessories-img {
      animation: none;
    }
    .cpap__recommended-accessories__list .recommended-accessories-img-container {
      margin-bottom: 16px;
    }
    .cpap__recommended-accessories__list .swiper-wrapper {
      padding: 32px 0 24px;
    }
    .swiper .swiper-button-prev,
    .swiper .swiper-button-next {
      display: none !important;
    }
  }
  @media only screen and (max-width: 579.98px) {
    .cpap__recommended-accessories__list .swiper-wrapper {
      padding: 0;
    }
    .recommended-accessories-card-main {
      width: 278px !important;
      padding: 0 8px;
      flex-basis: 50%;
    }
    .cpap__recommended-accessories__list .recommended-accessories-card {
      width: 278px;
      padding: 50px 16px 32px 16px;
    }
  }

  @media only screen and (min-width: 580px) {
    .swiper .swiper-pagination {
      display: none !important;
    }
  }
}