/* 🚧 WIP 🚧: BEM naming convention and file organization cleanup need to be completed for these styles */
.cpap__testimonial-sleep-stories {
  margin-bottom: 120px;
  overflow: hidden;
  @media (max-width: 768px) {
    margin-bottom: 72px;
  }
  .cpap__testimonial-sleep-stories__container {
    max-width: 1140px;
  }
  .cpap__testimonial-sleep-stories__header-container {
    text-align: center;
    max-width: 659px;
    margin: 0 auto;
    padding-bottom: 0px;
    @media (max-width: 768px) {
      padding-bottom: 0;
      margin-bottom: 32px;
    }
    h2 {
      color: var(--cpap-primary-soft-black);
      margin-bottom: 32px;
      @media (max-width: 768px) {
        margin-bottom: 16px;
      }
    }
    p {
      color: var(--cpap-text-text-gray);
      font: 500 var(--cpap-typography-font-md);
      margin-bottom: 0px;
    }
  }

  .cpap__testimonial-sleep-stories__read-more-button {
    display: inline-block;
    border-radius: 28px;
    border: 1px solid var(--cpap-stroke-gray);
    font: var(--cpap-typography-font-s-bolder);

    color: var(--cpap-primary-soft-black);
    padding: 10.5px 37px 10.5px 16px;
    min-width: 91px;
    position: relative;
    background: var(--cpap-primary-white);
    transition: all 0.2s;
    &:before,
    &:after {
      content: '';
      width: 10px;
      height: 1px;
      background: var(--cpap-primary-soft-black);
      position: absolute;
      top: 50%;
      right: 15px;
      transform: translate(0, -50%);
      transition: all 0.2s;
    }
    &:after {
      transform: translate(0, -50%) rotate(90deg);
    }
    &:hover {
      @media (min-width: 768.5px) {
        background: var(--cpap-overlay-utility-orange);
      }
    }
    &:active {
      background: var(--cpap-overlay-utility-orange);
    }
  }
  .cpap__testimonial-sleep-stories__carousel {
    padding: 48px 0 50px 0;
    @media (max-width: 768px) {
      overflow: initial;
      padding: 0 0 28px 0;
    }
    .swiper-button-prev,
    .swiper-button-next {
      border: none;
      background: none;
      width: calc(50% - 266px);
      top: 0;
      transform: none;
      border-radius: 0;
      height: 100%;

      &:before {
        display: none;
      }
    }
    .swiper-button-prev {
      background: linear-gradient(90deg, #ffffff, rgba(255, 255, 255, 0)) !important;
    }
    .swiper-button-next {
      background: linear-gradient(90deg, rgba(255, 255, 255, 0), #ffffff) !important;
    }
    .swiper-slide {
      opacity: 0;
      position: relative;
      transition: all 0.3s;
      @media (max-width: 992px) {
        opacity: 1;
      }
      &:before {
        content: '';
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        background: conic-gradient(
          from 180deg at 50% 50%,
          #afff93 -38.19deg,
          #afff93 40.59deg,
          #c0f2fd 133.33deg,
          #c0f2fd 229.64deg,
          #afff93 321.81deg,
          #afff93 400.59deg
        );
        filter: blur(16px);
        opacity: 0;
        transition: all 0.3s;
      }
      &.swiper-slide-prev,
      &.swiper-slide-next {
        opacity: 0.2;
      }
      /* 👇 The following is a Swiper.js  overrides and therefore can't utilize the BEM naming convention */
      &.swiper-slide-active {
        opacity: 1;
        &:before {
          opacity: 1;
        }
        .cpap__testimonial-sleep-stories__card-body {
          .cpap__testimonial-sleep-stories__read-more-button {
            opacity: 1;
          }
        }
      }

      .swiper-slide-box {
        background: var(--cpap-primary-white);
        padding: 23px 40px 24px 40px;
        border: 1px solid var(--cpap-stroke-gray);
        border-radius: 8px;
        position: relative;
        z-index: 2;
        @media (max-width: 768px) {
          padding: 16px 16px 20px 16px;
        }
      }
      p {
        font-weight: 400;
        font-size: 17px;
        line-height: 26px;
        color: var(--cpap-primary-soft-black);
        margin: 0;
      }
      .cpap__testimonial-sleep-stories__card-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 19px;
        @media (max-width: 768px) {
          margin-bottom: 16px;
        }
        span {
          display: inline-block;
          padding: 8px 13px;
          font: var(--cpap-typography-font-md);
          color: var(--cpap-primary-soft-black);
          background: rgba(46, 46, 46, 0.05);
          border-radius: 20px;
          transform: translate(16px, -2px);
          @media (max-width: 768px) {
            transform: none;
          }
        }
      }
      .cpap__testimonial-sleep-stories__card-body {
        text-align: center;
        p {
          text-align: left;

          @media (max-width: 768px) {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 9;
            word-wrap: break-word;
          }
        }
        .cpap__testimonial-sleep-stories__read-more-button {
          margin-top: 20px;
          padding: 11.5px 38px 11.5px 16px;
          @media (max-width: 768px) {
            margin-top: 16px;
          }
          @media (min-width: 768.5px) {
            opacity: 0;
          }
          span {
            @media (max-width: 768px) {
              display: none;
            }
          }
        }
      }
    }
  }
}