/* 🚧 WIP 🚧: BEM naming convention and file organization cleanup need to be completed for these styles */

/* 👇 Account access pages override the default footer styles */
footer {
  position: relative;
  margin-top: 0px;

  &:after {
    display: none;
  }

  &:before {
    content: '';
    width: 100%;
    position: absolute;
    height: 109px;
    background-image: url('./login-gradient.png');
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    top: 0;
    transform: translate(0, -100%);
    z-index: 9;

    @media (max-width: 768px) {
      height: 119px;
      background-image: url('./login-gradient-m.png');
    }
  }

  .top-footer-gradient {
    display: none !important;
  }
}

.page-register {
  footer:before {
    display: none !important;
  }
}

.cpap__account-access {
  position: relative;
  padding: 40px 0 40px 0;
  min-height: 751px;

  &:before {
    content: '';
    width: 100%;
    height: 109px;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
    background-image: url('./Gradient.png');
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
  }

  @media (max-width: 768px) {
    min-height: 797px;
  }

  * {
    font-family: var(--font-body-family);
  }

  .cpap__account-access__background-image {
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    z-index: 1;
  }
  .cpap__account-access__container {
    position: relative;
    z-index: 2;
  }

  h2 {
    text-align: center;
    font: 500 var(--cpap-typography-font-xl);
    margin-bottom: 24px;
  }

  .form-field-row {
    margin-bottom: 16px;
    label {
      color: var(--cpap-primary-soft-black);
      display: block;
      font: var(--cpap-typography-font-s-bold);
      margin: 0;
      padding: 0;
      margin-bottom: 4px;
    }
  }
  .cpap__account-access__input-container {
    position: relative;
    input {
      width: 100%;
      background: none;
      box-shadow: none;
      transition: all 0.2s;
      border: 1px solid var(--cpap-stroke-gray);
      border-radius: 8px;
      font: var(--cpap-typography-font-s-bold);
      color: var(--cpap-primary-soft-black);
      padding: 18px 15px;

      &::-webkit-input-placeholder {
        opacity: 1;
        color: var(--cpap-text-text-gray);
      }

      &:focus {
        border-color: var(--cpap-primary-soft-black);
      }
      &.is-error,
      &.invalid {
        border-color: var(--cpap-secondary-orange);
      }
      &:-moz-placeholder {
        opacity: 1;
        color: var(--cpap-text-text-gray);
      }
      &::-moz-placeholder {
        opacity: 1;
        color: var(--cpap-text-text-gray);
      }
      &:-ms-input-placeholder {
        opacity: 1;
        color: var(--cpap-text-text-gray);
      }
    }
    &.cpap__account-access__input-container--password {
      span {
        display: block;
        width: 20px;
        height: 20px;
        position: absolute;
        right: 16px;
        top: 50%;
        transform: translate(0, -50%);

        z-index: 1;
        cursor: pointer;
        transition: all 0.2s;

        &:hover {
          @media (min-width: 768.5px) {
            opacity: 0.7;
          }
        }
        &:active {
          opacity: 0.7;
        }
        &:before,
        &:after {
          content: '';
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          z-index: 1;

          background-repeat: no-repeat;
          background-position: center;
          background-size: contain;
          transition: all 0.2s;
        }
        &:before {
          background-image: url('./password-show.svg');
        }
        &:after {
          background-image: url('./password-hide.svg');
          opacity: 0;
        }
        &.is-active {
          &:before {
            opacity: 0;
          }
          &:after {
            opacity: 1;
          }
        }
      }
    }
  }

  .form-btn-row {
    margin-bottom: 8px;
    &:last-child {
      margin-bottom: 0;
    }
    button,
    a {
      display: block;
      width: 100%;
      text-align: center;
      font: var(--cpap-typography-font-s-bold-bolder);
      color: var(--cpap-primary-soft-black);
      background: var(--cpap-primary-white);
      border: 1px solid var(--cpap-primary-orange);
      border-radius: 28px;
      transition: all 0.2s;
      margin-top: 24px;
      padding: 10.5px 23px;
      &:hover {
        @media (min-width: 768.5px) {
          background: var(--cpap-primary-orange) ef;
          border-color: var(--cpap-primary-orange);
          color: var(--cpap-primary-soft-black);
        }
      }
      &:active {
        background: var(--cpap-primary-orange) ef;
        border-color: var(--cpap-primary-orange);
        color: var(--cpap-primary-soft-black);
      }
    }
    a {
      margin: 0;
      border-color: var(--cpap-stroke-gray);
      &:hover {
        @media (min-width: 768.5px) {
          border-color: var(--cpap-primary-orange);
        }
      }
      &:active {
        border-color: var(--cpap-primary-orange);
      }
    }
  }
  .form-forget-link-row,
  .form-link-row {
    text-align: center;
    margin-top: 16px;
    a {
      color: var(--cpap-primary-soft-black);
      font: var(--cpap-typography-font-s-bold-bolder);
      border-bottom: 1px solid var(--cpap-primary-orange);
      display: inline-block;
      padding-bottom: 4px;
      &:hover {
        @media (min-width: 768.5px) {
          opacity: 0.7;
        }
      }
      &:active {
        opacity: 0.7;
      }
    }
  }
  .form-text-row {
    font-weight: 400;
    font-size: 12px;
    line-height: 1.5;
    color: var(--cpap-text-text-gray);
    text-align: center;
    margin-top: 24px;
    a {
      text-decoration: underline;
      &:hover {
        @media (min-width: 768.5px) {
          opacity: 0.7;
        }
      }
      &:active {
        opacity: 0.7;
      }
    }
  }
  .cpap__account-access__password-requirements-container {
    ul {
      list-style: none;
      padding: 0;
      margin: 8px 0 16px 0;
      li {
        color: var(--cpap-primary-soft-black);
        font: var(--cpap-typography-font-s-bold);
        padding: 0;
        margin: 0;
        margin-bottom: 8px;
        font-weight: 400;
        &:before {
          display: none;
        }
      }
    }
  }
  p {
    color: var(--cpap-primary-soft-black);
    font: 500 var(--cpap-typography-font-md);
    margin-bottom: 16px;
  }
  h3 {
    font: 500 var(--cpap-typography-font-md);
    margin: 0;
    margin-bottom: 24px;

    span {
      display: inline-block;
      font: 500 var(--cpap-typography-font-lg);
      margin-bottom: 4px;
    }
  }

  .error-tips {
    border-radius: 8px;
    background: var(--cpap-primary-beige);
    padding: 16px;
    display: flex;
    align-items: flex-start;
    margin-bottom: 16px;
    color: var(--cpap-secondary-orange);
    font: var(--cpap-typography-font-s-bold);
    svg {
      margin-right: 8px;
      width: 20px;
    }
    .errors {
      width: calc(100% - 28px);
      ul {
        list-style: none;
        margin: 0;
        padding: 0;
        li {
          margin: 0;
          padding: 0;
          color: var(--cpap-secondary-orange);
          font: var(--cpap-typography-font-s-bold);
          &:before {
            display: none;
          }
        }
      }
    }
  }
  .cpap__account-access__error-container-dynamic {
    display: none;
    &.is-show {
      display: flex;
    }
    ul {
      li {
        display: none;
        &.is-show {
          display: block;
        }
      }
    }
  }
  .cpap__account-access__inner-container {
    max-width: 422px;
    margin: 0 auto;
    background: var(--cpap-primary-white);
    border-radius: 8px;
    padding: 24px;
    @media (max-width: 768px) {
      padding: 24px 16px;
    }
    .cpap__account-access__card {
      position: relative;
      .forgot-form-box {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s;
        &.is-show {
          position: static;
          opacity: 1;
          visibility: visible;
        }
        h2 {
          text-align: left;
        }
      }
      .cpap__account-access__login-form {
        transition: all 0.3s;
        &.is-hide {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          opacity: 0;
          visibility: hidden;
        }
        .form-btn-row {
          button {
            margin-top: 32px;
          }
        }
      }
      .cpap__account-access__registration-form {
        .form-btn-row {
          cursor: pointer;
          &:hover {
            button {
              @media (min-width: 768.5px) {
                background: var(--cpap-primary-orange) ef;
              }
            }
          }
          &:active {
            button {
              background: var(--cpap-primary-orange) ef;
            }
          }
          button {
            pointer-events: none;
          }
          &.is-active {
            button {
              pointer-events: all;
            }
          }
        }
      }
    }
  }
  .cpap__account-access__password-recovery-completed {
    h2 {
      text-align: left;
    }
  }
  .cpap__account-access__password-recovery {
    h2 {
      text-align: left;
    }
    .cpap__account-access__password-requirements-container ul li {
      color: var(--cpap-text-text-gray);
    }
    .form__message {
      display: none;
    }
    .form-btn-row {
      margin-top: 24px;
      position: relative;
      a,
      button {
        margin-top: 0;
      }
      button {
        opacity: 0;
        visibility: hidden;
      }
      &.is-show {
        button {
          opacity: 1;
          visibility: visible;
        }
      }
    }
    .error-tips {
      display: none;
      border: 2px solid var(--cpap-secondary-orange);
      border-radius: 8px;
      background: var(--cpap-primary-white);
      margin: 0;
      padding: 14px 22px 14px 22px;
      opacity: 0;
      visibility: hidden;
      transition: all 0.2s;
      @media (max-width: 1200px) {
        width: 100%;
        right: 0;
        top: -25px;
        padding: 7px 40px 7px 22px;
        align-items: center;
      }
      &.is-show {
        display: flex;
        opacity: 1;
        visibility: visible;
      }
      p {
        font: var(--cpap-typography-font-s-bold);
        color: var(--cpap-primary-soft-black);
        margin: 0;
        @media (max-width: 1200px) {
          width: calc(100% - 36px);
        }
      }
      ul {
        margin-bottom: 0px;
        list-style: none;
        padding-left: 0px;
      }
      svg {
        margin-right: 16px;
      }
      a {
        width: 20px;
        height: 20px;
        display: block;
        position: absolute;
        top: 50%;
        right: 22px;
        transform: translate(0, -50%);
        z-index: 2;
        &:before,
        &:after {
          content: '';
          width: 10px;
          height: 1px;
          background: var(--cpap-primary-soft-black);
          position: absolute;
          top: 50%;
          left: 50%;
        }
        &:before {
          transform: translate(-50%, -50%) rotate(45deg);
        }
        &:after {
          transform: translate(-50%, -50%) rotate(-45deg);
        }
      }
    }
  }
  .cpap__account-access__registration-form {
    .error-tips {
      ul {
        margin: 0;
        width: calc(100% - 36px);
        list-style: none;
        padding: 0;
        li {
          margin: 0;
          padding: 0;
          color: var(--cpap-secondary-orange);
          font: var(--cpap-typography-font-s-bold);
          display: block;
          font-weight: 400;
          &:before {
            display: none;
          }
        }
      }
    }
  }
}