@import "../../shared/ui-components/styles/variables";

:host {
  display: block;
  font-family: Heebo;

  .login-title {
    font-weight: 500;
    font-size: 20px;
    color: #ffffff;
    margin-bottom: 20px;
  }

  .sub-title {
    text-align: left;
    font-size: 14px;
    color: #ffffff;
    margin: 32px 0 6px;
  }

  .username-input {

    input {
      background-color: $blue-800;
      color: #ffffff;
      width: 250px;
      padding-left: 0;
    }

    input:-webkit-autofill,
    input:-internal-autofill-previewed,
    input:-internal-autofill-selected {
      -webkit-box-shadow: 0 0 0 30px $blue-800 inset !important;
      -webkit-text-fill-color: white !important;
      border-radius: 0 !important;
    }

  }

  label {
    font-size: 11px;
    margin-bottom: 0;
    margin-top: 2px;
  }

  .btn {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 32px;
    margin-top: 16px;
    font-size: 14px;
    font-weight: 500;
    background-color: $blue-400;
    color: #ffffff;
    border: 0; /* this was 1px earlier */
    opacity: unset;

    &:hover {
      background-color: $blue-450;
      border: 0 solid transparent; /* this was 1px earlier */
    }

    &:disabled {
      background-color: #424b6b;
      color: $blue-600;
    }

    &.sso-btn {
      text-align: left;
      justify-content: left;
    }

    .spinner {
      position: absolute;
      left: 75px;
    }

    i {
      font-size: 20px;
      position: relative;
      top: -1px;
    }

    .btn-text {
      display: inline-flex;
      width: 130px;
      white-space: nowrap;
    }
  }

  .separator {
    display: flex;
    color: $blue-250;
    font-size: 11px;

    .line {
      border-bottom: 1px solid $blue-250;
      width: 104px;
      margin-bottom: 10px;
    }
  }

  ::ng-deep mat-form-field {

    .mat-form-field-label {
      top: 25px !important;
      margin: 0;
      overflow: unset;
      transform: translateY(-1.8em) scale(0.9) !important;
    }

    .mat-form-field-wrapper {
      padding-bottom: 16px !important;
      margin: 0 !important;
    }

    &.mat-form-field-appearance-outline.thin .mat-form-field-subscript-wrapper {
      margin-top: 6px;
    }
  }

  ::ng-deep mat-checkbox {
    .mat-checkbox-layout {
      display: flex;
      white-space: normal;
      align-items: flex-start;
    }

    .mat-checkbox-inner-container {
      margin: 6px 16px 0 0;
    }
  }
  .link, ::ng-deep a[href] {
    text-decoration: underline;
    cursor: pointer;
    color: #b9bdd4;

    &:hover {
      text-decoration: none;
      color: #ffffff;
    }
  }

  form {
    padding-bottom: 24px;
  }
}


.terms-of-use {
  display: flex;
  text-align: left;
  margin-top: 32px;
  font-size: 14px;

  mat-checkbox {
    margin-right: 10px;
  }
}

.errors {
  width: 250px;
  max-height: 100px;
  overflow: auto;
  margin-top: 16px;
  color: #ff6f81;
  text-align: left;
}

.field-wrapper {
  display: flex;
  flex-direction: column;
}

mat-radio-group {
  display: flex;
  flex-direction: column;
  margin: 15px 0;
}

mat-radio-button {
  margin: 5px;
}

mat-option {
  height: auto !important;
  padding: 8px 16px !important;
  line-height: 1.6em !important;
  white-space: normal !important;
}
