/* 🚧 WIP 🚧: BEM naming convention and file organization cleanup need to be completed for these styles */
.cpap__prescriptions_personal-information {
  .cpap__prescriptions_personal-information__container {
    margin-bottom: 61px;
  }
  .cpap__prescriptions_personal-information__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    flex-wrap: wrap;
    h3 {
      font-size: var(--bs-body-font-size-24);
      font-weight: var(--bs-body-font-weight);
      line-height: var(--bs-body-line-height-32);
      color: var(--cpap-primary-soft-black);
      margin: 0;
    }
    .cpap__prescriptions_personal-information__add-prescription-button {
      @media (max-width: 767px) {
        width: 100%;
      }
      a {
        font-size: var(--bs-body-font-size);
        font-weight: var(--bs-body-font-weight-700);
        line-height: var(--bs-body-line-height-17);
        color: var(--cpap-primary-soft-black);
        border-radius: 28px;
        border: 1px solid var(--cpap-primary-orange);
        padding: 9px 24px;
        height: 40px;
        @media (max-width: 767px) {
          width: 100%;
          display: block;
          text-align: center;
          margin-top: 24px;
        }
      }
    }
  }
  .cpap__prescriptions_personal-information__list {
    display: flex;
    flex-direction: column;
    gap: 24px;
    .cpap__prescriptions_personal-information__empty-results {
      text-align: center;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .prescriptions-box {
      border-radius: 8px;
      border: 1px solid var(--cpap-stroke-gray);
      background: var(--cpap-primary-white);
      padding: 24px;
      box-shadow: 0px -4px 66px 0px rgba(0, 0, 0, 0.08);
      min-height: 187px;
      @media (max-width: 767px) {
        padding: 24px 16px;
      }
      > .cpap__prescriptions_personal-information__reupload-button {
        font-size: var(--bs-body-font-size);
        font-weight: var(--bs-body-font-weight-700);
        line-height: var(--bs-body-line-height-17);
        color: var(--cpap-primary-soft-black);
        text-decoration: none;
        position: relative;
        display: none;
        @media (max-width: 1023px) {
          display: inline-block;
          margin-top: 20px;
        }
        &::before {
          content: '';
          position: absolute;
          width: 100%;
          height: 1px;
          background: var(--cpap-primary-orange);
          bottom: -4px;
        }
      }
    }
    .prescription-pending {
      display: flex;
      align-items: center;
      justify-content: center;
      .prescription-pending-wrap {
        display: flex;
        flex-direction: column;
        gap: 8px;
        align-items: center;
        max-width: 648px;
      }
      span {
        font-size: var(--bs-body-font-size);
        font-weight: var(--bs-body-font-weight);
        line-height: var(--bs-body-line-height-17);
        color: #376071;
        border-radius: 99px;
        background: #d3e7ff;
        padding: 4px 16px;
      }
      p {
        font-size: var(--bs-body-font-size-18);
        font-weight: var(--bs-body-font-weight);
        line-height: var(--bs-body-line-height-24);
        color: var(--cpap-primary-soft-black);
        text-align: center;
      }
    }
    .prescriptions-box {
      .prescriptions-box-first {
        display: flex;
        gap: 32px;
        border-bottom: 1px solid #d9d9d9;
        padding-bottom: 24px;
        margin-bottom: 24px;
        @media (max-width: 1023px) {
          flex-wrap: wrap;
          gap: 20px;
          padding-bottom: 20px;
          margin-bottom: 20px;
        }
      }
      .prescriptions-box-second {
        display: flex;
        gap: 32px;
        @media (max-width: 1023px) {
          flex-wrap: wrap;
          gap: 20px;
          padding-bottom: 17px;
        }
      }
      .prescriptions-box-left {
        display: flex;
        gap: 32px;
        width: 100%;
        max-width: 68.34%;
        @media (max-width: 1023px) {
          max-width: 100%;
          flex-wrap: wrap;
          gap: 20px;
        }
      }
      .prescriptions-box-right {
        width: 100%;
        max-width: 31.66%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
        @media (max-width: 1023px) {
          max-width: 100%;
          justify-content: flex-start;
        }
        span {
          font-size: var(--bs-body-font-size);
          font-weight: var(--bs-body-font-weight);
          line-height: var(--bs-body-line-height-17);
          color: var(--cpap-text-text-gray);
          @media (max-width: 1023px) {
            order: 2;
          }
        }
        .valid {
          font-size: var(--bs-body-font-size);
          font-weight: var(--bs-body-font-weight);
          line-height: var(--bs-body-line-height-17);
          color: #477137;
          padding: 4px 16px;
          background: #dfffd3;
          border-radius: 23px;
          @media (max-width: 1023px) {
            order: 1;
          }
        }
        .invalid {
          font-size: var(--bs-body-font-size);
          font-weight: var(--bs-body-font-weight);
          line-height: var(--bs-body-line-height-17);
          color: #713737;
          padding: 4px 16px;
          background: #ffd3d3;
          border-radius: 23px;
          @media (max-width: 1023px) {
            order: 1;
          }
        }
        .expired {
          font-size: var(--bs-body-font-size);
          font-weight: var(--bs-body-font-weight);
          line-height: var(--bs-body-line-height-17);
          color: var(--cpap-text-text-gray);
          padding: 4px 16px;
          background: rgba(46, 46, 46, 0.05);
          border-radius: 23px;
          @media (max-width: 1023px) {
            order: 1;
          }
        }
        .cpap__prescriptions_personal-information__reupload-button {
          font-size: var(--bs-body-font-size);
          font-weight: var(--bs-body-font-weight-700);
          line-height: var(--bs-body-line-height-17);
          color: var(--cpap-primary-soft-black);
          text-decoration: none;
          position: relative;
          margin-right: 12px;
          @media (max-width: 1023px) {
            display: none;
          }
          &::before {
            content: '';
            position: absolute;
            width: 100%;
            height: 1px;
            background: var(--cpap-primary-orange);
            bottom: -4px;
          }
        }
      }
      .prescriptions-box-detail {
        width: 100%;
        max-width: 187px;
        @media (max-width: 1023px) {
          max-width: calc(50% - 16px);
        }
        span {
          font-size: var(--bs-body-font-size);
          font-weight: var(--bs-body-font-weight);
          line-height: var(--bs-body-line-height-17);
          color: var(--cpap-text-text-gray);
          margin-bottom: 4px;
          display: block;
        }
        div {
          font-size: var(--bs-body-font-size-16);
          font-weight: var(--bs-body-font-weight);
          line-height: var(--bs-body-line-height-24);
          color: var(--cpap-primary-soft-black);
        }
      }
    }
  }
}