.app-body--red {
  background-color: var(--op-color-primary-base);
}

.app-body--login {
  position: relative;
  overflow: hidden;
}

.home-page {
  display: grid;
  gap: var(--op-space-3x-large);
}

.login-page__path {
  z-index: -1;
  margin: auto;
  width: 80%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.login-form {
  --_login-form-max-width: calc(var(--op-size-unit) * 250);

  margin-top: var(--op-space-2x-large);
  margin-inline: auto;
  background: var(--op-color-primary-plus-one);
  backdrop-filter: blur(8px);
  border-radius: var(--op-radius-large);
  padding: var(--op-space-2x-large);
  max-width: var(--_login-form-max-width);
  width: 100%;
  text-align: left;

  /* Elements */

  .login-form__title {
    font-family: var(--op-font-family-secondary);
    font-size: var(--op-font-2x-large);
    margin-bottom: var(--op-space-large);
    color: var(--op-color-primary-on-base);
  }

  .login-form__message {
    font-size: var(--op-font-medium);
    margin-bottom: var(--op-space-large);
    color: var(--op-color-primary-on-base-alt);
  }

  .login-form__google {
    display: flex;
    justify-content: center;
    margin-bottom: var(--op-space-medium);
  }

  .login-form__divider {
    display: flex;
    align-items: center;
    gap: var(--op-space-medium);
    margin: var(--op-space-large) 0;
    color: var(--op-color-primary-on-base-alt);
    font-size: var(--op-font-small);
    text-transform: uppercase;
    letter-spacing: 0.05em;

    &::before,
    &::after {
      content: '';
      flex: 1;
      height: var(--op-border-width);
      background: var(--op-color-primary-plus-four);
    }
  }

  .login-form__links {
    margin-top: var(--op-space-large);
    display: flex;
    justify-content: space-between;
    gap: var(--op-space-medium);

    .login-form__link {
      color: var(--op-color-primary-on-base-alt);
      font-size: var(--op-font-small);
      text-decoration: underline;

      &:hover {
        color: var(--op-color-primary-on-base);
      }
    }
  }

  /* Optics form overrides for login theme */

  .form-label {
    color: var(--op-color-primary-on-base);
  }

  .form-control {
    border-color: var(--op-color-primary-plus-four);
    background: var(--op-color-primary-plus-two);
    color: var(--op-color-primary-on-base);

    &::placeholder {
      color: var(--op-color-primary-on-base-alt);
    }

    &:focus {
      border-color: var(--op-color-primary-on-base);
      box-shadow: 0 0 0 var(--op-space-3x-small) var(--op-color-primary-plus-four);
    }
  }

  .form-hint {
    color: var(--op-color-primary-on-base-alt);
  }

  .form-error {
    color: var(--op-color-primary-on-base-alt);
  }

  .form-group--error .form-control {
    border-color: var(--op-color-alerts-danger-base);
  }

  .form__actions {
    margin-top: var(--op-space-large);
  }
}