@use 'pix-design-tokens/typography';

.login-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 440px;

  &__information {
    @extend %pix-body-s;

    color: var(--pix-neutral-900);
    text-align: center;
  }

  &__mandatory-information {
    @extend %pix-body-s;

    margin-top: var(--pix-spacing-4x);
    color: var(--pix-neutral-800);
    text-align: center;
  }

  &__error-message {
    @extend %pix-body-s;

    margin-top: var(--pix-spacing-6x);
    color: var(--pix-error-700);
    text-align: center;

    & a {
      text-decoration: underline;
    }
  }

  &__forgotten-password {
    @extend %pix-body-s;

    color: var(--pix-communication-dark);
    text-align: left;
  }

  &__recover-access-link {
    @extend %pix-body-s;

    text-align: left;
  }

  &__recover-access-message {
    @extend %pix-body-s;

    text-align: left;
  }

  &__invitation-error {
    @extend %pix-body-s;

    margin: 10px 0 16px 0;
    padding: 9px;
    color: var(--pix-error-700);
    text-align: center;
    border-radius: 3px;
  }

  &__input-container {
    display: flex;
    flex-direction: column;
    gap: var(--pix-spacing-4x);
    width: 100%;

    button[type="submit"] {
      width: 100%;
    }
  }
}
