/* ==========================================================================
   Login Page
   Extends grid-cards layout with centering (desktop) and background image
   ========================================================================== */

/* Background image - applies to all sizes */
.page-login {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Desktop only: center the grid */
@media (min-width: 481px) {
  .page-login {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100%;
  }

  .page-login .grid-cards {
    justify-content: center;
  }
}

/* ==========================================================================
   Login Card Modifier
   Extends .card-thing - removes clickable cursor
   ========================================================================== */

.login-card {
  cursor: default;
}

/* ==========================================================================
   Login Card Content Area
   ========================================================================== */

.login-card__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: var(--space-4);
}

.login-card__text {
  font-family: var(--font-primary);
  font-size: var(--text-normal-size);
  font-weight: var(--font-weight-regular);
  line-height: var(--text-normal-line-height);
  color: var(--np-color-on-surface);
  margin: 0 0 var(--space-2) 0;
}

.login-card__text:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   Login Form
   ========================================================================== */

.login-card__form {
  display: flex;
  flex-direction: column;
}

.login-card__input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  border: var(--border-width-thick) solid var(--np-color-inverse-surface);
  background: var(--np-color-surface);
  font-family: var(--font-primary);
  font-size: var(--text-normal-size);
  color: var(--np-color-on-surface);
  box-sizing: border-box;
}

.login-card__input::placeholder {
  color: var(--np-color-on-surface-variant);
}

.login-card__input:focus {
  outline: none;
  border-color: var(--pure-black);
}

/* Error message */
.login-card__error {
  display: none;
  padding: var(--space-2);
  margin-bottom: var(--space-4);
  background-color: var(--np-color-error-container);
  color: var(--np-color-on-error-container);
  font-size: var(--text-normal-size);
}

.login-card__error.show {
  display: block;
}

/* ==========================================================================
   Login Card Action (Bottom Bar)
   ========================================================================== */

.login-card__action {
  display: flex;
  height: var(--size-touch);
}

.login-card__submit {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--np-color-inverse-surface);
  color: var(--np-color-inverse-on-surface);
  border: none;
  cursor: pointer;
  font-family: var(--font-primary);
  font-size: var(--text-card-my-rec-size);
  font-weight: var(--font-weight-regular);
  line-height: var(--text-card-my-rec-line-height);
  letter-spacing: var(--text-card-my-rec-letter-spacing);
}