/* 🚧 WIP 🚧: BEM naming convention and file organization cleanup need to be completed for these styles */
.cpap__product-specifications {
  .cpap__product-specifications__container
    .cpap__product-specifications__accordion-item
    .details-box
    h3 {
    font-weight: var(--bs-body-font-weight);
  }

  .cpap__product-specifications__specifications-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    color: var(--cpap-text-text-gray);
  }

  @media (max-width: 556px) {
    .cpap__product-specifications__specifications-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  .cpap__product-specifications__faqs {
    .cpap__product-specifications__faq-item {
      transform: translateZ(0px);
      border-top: 1px solid var(--cpap-stroke-gray);
      &:last-child {
        border-bottom: 1px solid var(--cpap-stroke-gray);
      }
      .cpap__product-specifications__faq-question {
        cursor: pointer;
        position: relative;
        &:before {
          content: '\e909';
          font-size: 12px;
          position: absolute;
          top: 50%;
          right: 0;
          transform: translate(0%, -50%) rotate(90deg);
          transition: all 0.2s;
          color: var(--cpap-primary-orange);
        }
        &.is-active {
          &:before {
            transform: translate(0%, -50%) rotate(270deg);
          }
        }
        h3 {
          font: 500 var(--cpap-typography-font-md);
          margin: 0;
          padding: 24px 28px 23px 0;
          transition: all 0.2s;
        }
        &:hover {
          &:before {
            @media (min-width: 768.5px) {
              opacity: 0.7;
            }
          }
        }
        &:active {
          &:before {
            opacity: 0.7;
          }
        }
      }
      .cpap__product-specifications__faq-answer {
        @supports (interpolate-size: allow-keywords) {
          height: 0;
          transition: height 0.3s ease-in-out;
        }
        @supports not (interpolate-size: allow-keywords) {
          max-height: 0;
          transition: max-height 0.3s ease-in-out;
        }
        overflow: hidden;
        will-change: height, margin, padding;
        transform: translateZ(0px);

        &.cpap__product-specifications__faq-answer--expanded {
          @supports (interpolate-size: allow-keywords) {
            height: calc-size(auto, size);
          }
          @supports not (interpolate-size: allow-keywords) {
            max-height: 140px;
          }
        }

        p {
          margin-bottom: 24px;
          a {
            text-decoration: none !important;
          }
        }
      }
    }
  }

  .cpap__product-specifications__container {
    margin: 83px 0 84px 0;
    color: var(--cpap-primary-soft-black);
    @media (max-width: 992px) {
      margin: 26px 0 25px 0;
    }
    .cpap__product-specifications__inner-container {
      max-width: 1212px;
    }
    .cpap__product-specifications__accordion-item {
      border-bottom: 1px solid var(--cpap-stroke-gray);
      &:last-child {
        border: none;
      }
      .cpap__product-specifications__accordion-header {
        position: relative;
        cursor: pointer;
        padding: 24px 110px 27px 0;
        @media (max-width: 992px) {
          padding: 11px 110px 11px 0;
          min-height: 71px;
          display: flex;
          align-items: center;
        }
        h2 {
          font: 500 var(--cpap-typography-font-md);
          margin: 0;
        }
        span {
          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;
          position: absolute;
          min-width: 91px;
          top: 50%;
          right: 0;
          transform: translate(0, -50%);
          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) {
            span {
              border-color: var(--cpap-primary-orange);
              background: var(--cpap-overlay-utility-orange);
            }
          }
        }
        &:active {
          span {
            border-color: var(--cpap-primary-orange);
            background: var(--cpap-overlay-utility-orange);
          }
        }
        &.is-active {
          span {
            &:after {
              transform: translate(0, -50%) rotate(0deg);
            }
          }
        }
      }

      .cpap__product-specifications__accordion-collapse {
        @supports (interpolate-size: allow-keywords) {
          height: 0;
          transition: height 0.3s ease-in-out;
        }
        @supports not (interpolate-size: allow-keywords) {
          max-height: 0;
          transition: max-height 0.3s ease-in-out;
        }
        &.cpap__product-specifications__accordion-collapse--no-transition {
          @supports (interpolate-size: allow-keywords) {
            transition: height 0s ease-in-out;
          }
          @supports not (interpolate-size: allow-keywords) {
            transition: max-height 0s ease-in-out;
          }
        }
        overflow: hidden;

        &.cpap__product-specifications__accordion-collapse--expanded {
          @supports (interpolate-size: allow-keywords) {
            height: calc-size(auto, size);
          }
          @supports not (interpolate-size: allow-keywords) {
            max-height: 1400px;
          }
        }

        strong {
          color: var(--cpap-primary-soft-black);
        }
        li {
          color: var(--cpap-text-text-gray);
        }
        p {
          font: var(--cpap-typography-font-s-bold);
          font-weight: 400;
          color: var(--cpap-text-text-gray);
          margin-bottom: 16px;
          @media (max-width: 992px) {
            padding-top: 0;
          }
        }
        a {
          text-decoration: underline;
          &:visited {
            color: var(--cpap-primary-soft-black) !important;
          }
        }
        .cpap__product-specifications__product-replacement-parts {
          a {
            text-decoration: none;
            &:visited {
              color: var(--bs-btn-disabled-color) !important;
            }

            &:hover {
              color: inherit !important;
            }
          }

          .cpap__product-parts__accordion {
            margin-top: 0px;
            padding: 0px 30px;

            @media (max-width: 767px) {
              padding: 0px 20px;
            }
          }

          .cpap__product-parts__accordion-item {
            &:first-child {
              border-top: unset;
            }

            &:last-child {
              border-bottom: unset;
            }
          }
        }
      }
      .details-box {
        margin-top: -2px;
        max-width: 648px;
        @media (max-width: 992px) {
          margin-top: 0;
        }
        h3 {
          font: var(--cpap-typography-font-s-bolder);
          margin-bottom: 0px;
          font-weight: 500;
        }
        p {
          font-weight: 400;
          margin-bottom: 16px;
          padding: 0;
        }
      }

      .cpap__product-specifications__faqs {
        margin-top: -2px;

        .cpap__product-specifications__faq-item {
          &:first-child {
            border-top: none;
          }
          &:last-child {
            border-bottom: none;
          }
          .cpap__product-specifications__faq-answer {
            p {
              font: 500 var(--cpap-typography-font-md);
              max-width: 647px;
              @media (max-width: 768px) {
                margin-bottom: 16px;
              }
            }
            ul {
              font: 400 var(--cpap-typography-font-md);
              color: var(--cpap-text-text-gray);
            }
            a {
              text-decoration: underline !important;
              &:visited {
                color: var(--cpap-primary-soft-black);
              }
            }
          }
        }
      }

      .cpap__product-specifications__specification-container {
        display: flex;
        flex-wrap: wrap;
        @media (max-width: 768px) {
          padding-top: 8px;
        }
        /* 👇 This class is added via JavaScript to Shopify metafield RTF content */
        .cpap__product-specifications__metafield-rich_text_field-container {
          padding-right: 33px;
          margin-bottom: 8px;
          span {
            font-weight: 700;
            margin-bottom: 8px;
            @media (max-width: 768px) {
              margin-bottom: 1px;
            }
          }
          p {
            font: var(--cpap-typography-font-s-bold);
            font-weight: 400;
            margin-bottom: 8px;
          }
          span {
            margin-bottom: 8px;
          }
        }
      }
    }
  }
}