.caps-lock-warning {
  color: var(--danger);
  font-size: $font-down-1;
  font-weight: bold;
}

.discourse-no-touch #login-form {
  margin: 0;
}

.discourse-touch .caps-lock-warning {
  display: none;
}

#discourse-modal.login-modal-body:not(.has-alt-auth) .modal-inner-container {
  max-width: 28em; // prevents long alerts from expanding the modal width
}

.login-modal:not(.hidden).has-alt-auth.no-local-login {
  min-width: fit-content;
  background: var(--secondary);
  #login-buttons:not(.hidden) {
    .btn.btn-social,
    .btn {
      border: 1px solid var(--primary-low-mid);
      &:hover,
      &:focus {
        background: var(--primary-very-low);
      }
    }
  }
}

// Create Account + Login
.d-modal.create-account,
.d-modal.login-modal,
.invites-show {
  .modal-inner-container {
    position: relative;
  }
  .modal-body {
    padding: 0;
  }
  .modal-header {
    border-bottom: none;
    padding: 0;
    position: absolute;
    top: 1em;
    right: 1em;
    z-index: z("max");
  }
  #modal-alert {
    box-sizing: border-box;
    display: inline-block;
    // if you want to use flexbox here make sure child elements like <b> don't cause line breaks
    padding: 1em 3.5em 1em 1em; // large right padding to make sure long text isn't under the close button
    width: 100%;
    max-width: 100%;
    margin-bottom: 0;
    min-height: 35px;
  }
  #modal-alert:empty {
    display: none;
  }
  .login-welcome-header {
    z-index: z("modal", "content");
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr;
    background: var(--secondary);
    .login-title {
      margin-bottom: 0;
    }
    .login-subheader {
      align-self: start;
      margin: 0;
    }
    .waving-hand {
      width: 35px;
      height: 35px;
      margin-left: 1em;
      align-self: center;
    }
  }
  #login-buttons {
    .btn {
      background-color: #ffffff;
      color: #000000;
      justify-content: flex-start;
      min-width: fit-content;
      margin-bottom: 0.5em;
    }
  }
  .modal-footer {
    .btn-primary {
      margin-right: 1.5em;
    }
    .inline-spinner {
      display: inline-flex;
    }
  }
  .modal-body.no-local-login + .modal-footer {
    display: none;
  }
  &.awaiting-approval {
    display: none;
  }

  .no-local-logins {
    // when third-party auth is available, but not local logins
    .login-left-side,
    .login-welcome-header {
      padding: 3em 1em 3em 3em;
    }
  }
}

// Login Form Styles
.login-modal:not(.hidden),
.create-account {
  #login-form,
  .login-form {
    .input-group {
      position: relative;
      display: flex;
      flex-direction: column;
      margin-bottom: 0.8em;
      &:last-child {
        margin-bottom: 2em;
      }
      input {
        padding: 0.75em 0.77em;
        border-radius: 0.25em;
        min-width: 250px;
        box-shadow: none;
        margin-bottom: 0.25em;
      }
      input:focus {
        outline: none;
        border: 1px solid var(--tertiary);
        box-shadow: 0 0 0 2px rgba(var(--tertiary-rgb), 0.25);
      }
      label.more-info {
        color: var(--primary-medium);
        min-height: 1.4em; // prevents height increase due to tips
      }
      label.alt-placeholder {
        color: var(--primary-medium);
        font-size: 16px;
        font-weight: normal;
        position: absolute;
        pointer-events: none;
        left: 1em;
        top: 10px;
        box-shadow: 0 0 0 0px rgba(var(--tertiary-rgb), 0);
        transition: 0.2s ease all;
      }
      input:focus + label.alt-placeholder,
      input.value-entered + label.alt-placeholder {
        top: -8px;
        left: calc(1em - 0.25em);
        background-color: var(--secondary);
        padding: 0 0.25em 0 0.25em;
        font-size: $font-down-1;
        color: var(--primary-medium);
      }
      input.alt-placeholder:invalid {
        color: var(--primary);
      }

      #email-login-link {
        transition: opacity 0.5s;

        &.no-login-filled {
          opacity: 0;
          visibility: hidden;
        }
      }

      #forgot-password-link,
      #email-login-link {
        font-size: $font-down-1;
      }

      .tip:not(:empty) + label.more-info {
        display: none;
      }
    }

    #second-factor {
      input {
        width: 100%;
        padding: 0.75em 0.5em;
        border-radius: 0.25em;
        min-width: 250px;
        box-shadow: none;
        margin-bottom: 2em;
      }
      input:focus {
        outline: none;
        border: 1px solid var(--tertiary);
        box-shadow: 0 0 0 2px rgba(var(--tertiary-rgb), 0.25);
      }
    }

    // user fields input groups will
    // be styled differently
    .user-fields .input-group {
      .user-field {
        &.text {
          label.control-label {
            color: var(--primary-medium);
            font-size: 16px;
            position: absolute;
            pointer-events: none;
            left: 1em;
            top: 12px;
            transition: 0.2s ease all;
            max-width: calc(100% - 2em);
            white-space: nowrap;
            display: inline-block;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          &.value-entered label.control-label,
          label.control-label.value-entered {
            top: -8px;
            left: calc(1em - 0.25em);
            background-color: var(--secondary);
            padding: 0 0.25em 0 0.25em;
            font-size: 14px;
            color: var(--primary-high);
          }
        }
        .controls .checkbox-label {
          input[type="checkbox"].ember-checkbox {
            width: 1em !important;
            min-width: unset;
          }
        }
      }
    }
  }
}

#login-link,
#new-account-link {
  cursor: pointer;
  padding-left: 0;
  text-align: left;
  // the second button can wrap in some locales, and this helps alignment
}

.create-account {
  .disclaimer {
    color: var(--primary-medium);
    margin-top: 0.5em;
  }

  .create-account-body {
    max-width: 40em;
  }

  .user-field {
    input[type="text"] {
      margin-bottom: 0;
      width: 100%;
    }
    .select-kit {
      width: 100%;
    }
    .controls {
      .instructions {
        margin-top: 0.15em;
        color: var(--primary-medium);
        line-height: $line-height-medium;
      }
    }
  }
}

.password-reset {
  .instructions {
    label {
      color: var(--primary-medium);
    }
  }
}

.invites-show {
  .two-col {
    position: relative;
    display: flex;
    margin-top: 5px;
  }

  #login-buttons {
    .btn {
      background-color: var(--primary-low);
      color: var(--primary);
    }
  }

  .col-image {
    position: relative;
    margin-right: 20px;
    @media screen and (max-width: 600px) {
      display: none;
    }
  }

  form {
    margin-top: 24px;
    button.btn-primary {
      margin-top: 10px;
    }
    label:not(.checkbox-label) {
      font-weight: bold;
    }
    .controls,
    .input {
      margin-bottom: 10px;
    }
    .instructions {
      color: var(--primary-medium);
      margin: 0;
      font-size: $font-down-1;
      font-weight: normal;
      line-height: $line-height-medium;
    }
    .tip {
      padding-left: 5px;
    }
  }
}

.auth-message {
  padding: 0 15px 15px 15px;
  &:empty {
    padding: 0;
  }
}

// alternate login / create new account buttons should be de-emphasized

button#login-link,
button#new-account-link {
  background: transparent;
  color: var(--primary-high);
}

#security-key {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  p {
    margin: 0;
    font-size: $font-0;
  }
  a {
    display: inline-block;
    padding: 1em 0.5em 1em 0;
    color: var(--tertiary);
  }
}