.cpap__flyout-pcp {
  /* 👇 Nesting is required until we refactor the generic swiper classes. */
  .cpap__flyout-pcp__flyout {
    .cpap__flyout-pcp__container {
      .cpap__flyout-pcp__content-container {
        padding: 0;

        @media (max-width: 556px) {
          overflow: hidden;
        }

        .cpap__flyout-pcp__scroll-container {
          overflow: hidden;
        }
      }
    }
  }

  .cpap__flyout-pcp__carousel {
    height: 100%;

    .cpap__flyout-pcp__carousel-pagination-button {
      top: 12px;
      transform: none;
      margin: 0;

      &:hover {
        @media (max-width: 768px) {
          background: var(--cpap-primary-beige) !important;
          color: var(--cpap-primary-soft-black) !important;
          border-color: var(--cpap-stroke-gray) !important;
        }
      }

      &:active {
        background: var(--cpap-primary-beige) !important;
        color: var(--cpap-primary-soft-black) !important;
        border-color: var(--cpap-stroke-gray) !important;
      }
    }

    .cpap__flyout-pcp__carousel-pagination-button--prev {
      left: 24px;
    }

    .cpap__flyout-pcp__carousel-pagination-button--next {
      right: 24px;
    }

    /* 👇 Nesting is required until we refactor the generic swiper classes. */
    .cpap__flyout-pcp__carousel-content {
      height: 100%;

      .cpap__flyout-pcp__slide {
        background: var(--cpap-primary-white);
        cursor: initial;

        .cpap__flyout-pcp__carousel-title {
          font: 500 var(--cpap-typography-font-lg);
          padding: 18px 70px 22px 70px;
          text-align: center;
          background: var(--cpap-primary-beige);
          margin-bottom: 0;

          @media (max-width: 556px) {
            padding: 20px 70px 20px 70px;
          }
        }

        .cpap__flyout-pcp__carousel-body {
          padding: 32px 40px 56px 40px;
          overflow-y: auto;
          overflow-x: hidden;
          height: calc(100% - 64px);

          @media (max-width: 556px) {
            padding: 24px 20px 20px 20px;
          }

          /* 👇 These are all styles for dynamic page content injected from Shopify. These can not utilize the BEM naming convention. */
          p {
            margin-bottom: 16px;
            &.cpap__flyout-pcp__video {
              position: relative;

              .cpap__flyout-pcp__video-play-button {
                position: absolute;
                bottom: 16px;
                left: 16px;
                display: inline-block;
                font: var(--cpap-typography-font-s-bolder);
                padding: 10.5px 16px 10.5px 36px;
                background: rgba(46, 46, 46, 0.2);
                border-radius: 28px;
                color: var(--cpap-primary-white);
                &:before {
                  content: '';
                  width: 20px;
                  height: 20px;
                  background-image: url('./Media-Controls.svg');
                  background-repeat: no-repeat;
                  background-position: center;
                  background-size: contain;
                  position: absolute;
                  top: 50%;
                  left: 8px;
                  transform: translate(0, -50%);
                  z-index: 1;
                }
              }
            }

            strong {
              color: var(--cpap-primary-soft-black);
            }
          }

          li {
            color: var(--cpap-text-text-gray);

            strong {
              color: var(--cpap-primary-soft-black);
            }
          }

          iframe {
            width: 100% !important;
            height: 560px !important;
            pointer-events: none !important;

            @media (max-width: 556px) {
              height: calc(120vw - 40px) !important;
            }
          }

          blockquote {
            background: var(--cpap-accent-plum);
            border-radius: 8px;
            padding: 16px;
            display: flex;
            font-style: normal;
            align-items: center;
            margin-bottom: 16px;

            p,
            div {
              font: var(--cpap-typography-font-s-bold);
              color: var(--cpap-primary-white);
              font-weight: 400;

              &:last-child {
                margin-bottom: 0;
              }
            }

            &:before {
              content: '';
              width: 40px;
              height: 40px;
              background-image: url('./wind-svgrepo-com.svg');
              background-repeat: no-repeat;
              background-position: center;
              background-size: contain;
            }

            p,
            div {
              width: calc(100% - 40px);
              padding-left: 20px;
            }

            img {
              margin-bottom: 0;
            }
          }

          img {
            border-radius: 8px;
            max-width: 256px;
            display: inline-block;
            margin-bottom: 13px;
          }

          .inner-video-box {
            transform: translateZ(0px);
            max-width: 256px;

            .inner-video-box-box {
              transform: translateZ(0px);

              .video-active {
                padding-top: calc((344 / 256) * 100%);
              }
            }
          }

          a {
            text-decoration: underline !important;
          }
        }
      }
    }
  }
}