/* @import url("input.css"); */
/* @import url("button.css"); */

.login-form-wrapper {
  margin: 0 auto;
  max-width: 390px;
  max-width: max-content;
  display: grid;
  gap: var(--step-3);
  padding-top: var(--step-4);
  & form {
    padding: var(--step-2) var(--step-2);
    display: grid;
    gap: var(--step-2);
    &.checkbox {
      display: flex;
      gap: var(--step-2);
      padding: var(--step-1);
      align-items: center;
      & label {
        order: 1;
        font-size: var(--fs-base);
      }
      input[type="checkbox"] {
        width: 18px;
        aspect-ratio: 1/1;
        margin: 0;
        border: 1px solid var(--clr-neutral);
        border-radius: var(--br-sm);
        &:focus-visible {
          outline-color: var(--clr-primary);
        }
      }
    }
    & button {
      width: 100%;
      justify-content: center;
    }
  }
  & .login-error {
    color: var(--clr-alert-warning);
    font-size: var(--fs-sm);
  }
  & h2 {
    color: var(--clr-primary);
    text-transform: capitalize;
    font-size: var(--fs-4xl);
  }
  & p {
    font-size: var(--fs-base);
  }
  & h2,
  & p {
    font-family: var(--ff-secondary);
    text-align: center;
  }
}