@include export-module('co-login-layout') {
  .co-login {
    display: block;
    font-family: $sc-login-font-family;
    font-size: $sc-login-font-size;
    padding: $sc-login-padding;
    .co-form {
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 100%;
    }
    .field-wrapper {
      display: flex;
      flex-direction: column;
      row-gap: $sc-login-fields-row-gap;
    }
    .login-submit-button {
      cursor: pointer;
      padding: 0;
      place-content: center;
      font-family: $sc-login-login-submit-button-font-family;
      font-size: $sc-login-login-submit-button-font-size;
      font-style: $sc-login-login-submit-button-font-style;
      margin: $sc-login-login-submit-button-margin;
      .label {
        text-transform: $sc-login-login-submit-button-text-transform;
      }
    }
    .login-extended-wrapper {
      display: flex;
      flex-direction: column;
      margin: $sc-login-login-extended-margin;
      .login-password-forget-text {
        cursor: pointer;
        font-family: $sc-login-password-forgotten-text-font-family;
        font-size: $sc-login-password-forgotten-text-font-size;
        font-style: $sc-login-password-forgotten-text-font-style;
        &.undefined-username {
          cursor: default;
          pointer-events: none;
        }
      }
      .login-no-username-text {
        font-family: $sc-login-no-username-text-font-family;
        font-size: $sc-login-no-username-text-font-size;
        font-style: $sc-login-no-username-text-font-style;
      }
    }
    .login-recaptcha {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: $sc-login-recaptcha-margin;
      &.hidden {
        display: none;
      }
    }
    .login-validation-error-message {
      font-size: $sc-login-login-incorrect-font-size;
      font-style: $sc-login-login-incorrect-font-style;
    }
    .login-mfa-code-entry {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20px;
      .co-form {
        align-items: center;
        gap: $sc-login-form-gap;
      }
      .co-button {
        width: 100%;
        place-content: center;
      }
      .footer {
        display: flex;
        width: 100%;
        justify-content: space-between;
        .back-button {
          .co-icon {
            height: 25px;
            width: 25px;
          }
          cursor: pointer;
          display: flex;
          align-items: center;
          gap: 15px;
        }
      }
    }
  }
}