@import '../helpers/helpers';

.login-register-page {
  .returning-customer-wrapper,
  .new-customer-wrapper {
    @include make-col-ready;
    @include make-col(12);
  }

  .separator-wrapper {
    @include make-col(12);
    display: flex;
    font-size: 1.25rem;
    line-height: 1.5rem;
    justify-content: center;
    align-items: center;
    color: $blue-ocean;
    font-weight: 500;
    padding: 25px 0;
  }

  .returning-customer,
  .new-customer {
    background-color: $gray-bg;
    padding: 20px;
    height: 100%;

    .form-row {
      padding: 0;
    }
  }

  .returning-customer {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .login-header,
  .register-header {
    color: $blue-ocean;
    font-size: 24px;
    line-height: 28px;
    font-weight: 500;
  }

  .returning-customer__info,
  .new-customer__info {
    margin: 30px 0 40px;
  }

  .footer-block {
    margin-top: 40px;

    .submit-form-block {
      .btn {
        width: 100%;
        height: 40px;
      }

      .returning-customer__forgot-link {
        text-decoration: none;
        white-space: nowrap;
        height: 40px;
        line-height: 40px;
        margin-top: 10px;
        display: block;
      }
    }
  }
}

@include media-breakpoint-up(md) {
  .login-register-page {
    .returning-customer,
    .new-customer {
      padding: 60px;
    }

    .footer-block {
      .submit-form-block {
        .btn {
          width: 160px;
          margin-right: 5px;
        }

        .returning-customer__forgot-link {
          margin: 0;
          float: right;
        }
      }
    }
  }
}


@include media-breakpoint-only(lg) {
  .login-register-page {
    .returning-customer-wrapper,
    .new-customer-wrapper {
      .footer-block {
        .btn {
          width: 130px;
        }
      }
    } 
  }
}

@include media-breakpoint-up(lg) {
  .login-register-page {
    .returning-customer-wrapper,
    .new-customer-wrapper {
      @include make-col(47, 100);
    }

    .separator-wrapper {
      @include make-col(6, 100);
    }

    .new-customer {
      .footer-block {
        position: absolute;
        bottom: 60px;
      }
    }
  }
}