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

.authentication-password-reset-demand-form {
    input {
        padding: var(--pix-spacing-3x);
    }

    &__rule {
        @extend %pix-body-xs;

        color: var(--pix-neutral-500);
    }

    &__error {
        margin-top: var(--pix-spacing-4x);
    }

    &__input-block {
        margin-top: var(--pix-spacing-4x);

        .pix-input {
            width: 100%;
        }
    }

    &__button {
        width: 100%;
        margin-top: var(--pix-spacing-4x);
    }

    &__help {
      @extend %pix-body-m;

      display: flex;
      gap: var(--pix-spacing-2x);
      margin-top: var(--pix-spacing-8x);
      color: var(--pix-neutral-500);

      > a {
        color: var(--pix-neutral-800);
        font-weight: var(--pix-font-bold);
        text-decoration: underline;
      }

    }


}

.authentication-password-reset-demand-received-info {
    margin-top: var(--pix-spacing-6x);
    padding: var(--pix-spacing-6x);
    color: var(--pix-neutral-900);
    text-align: center;
    background-color: var(--pix-primary-10);
    border-radius: var(--pix-spacing-4x);

    &__heading {
        @extend %pix-title-xs;

        margin-top: var(--pix-spacing-8x);
    }

    &__message {
        @extend %pix-body-m;

        margin-top: var(--pix-spacing-4x);
    }

    &__help {
        @extend %pix-body-m;

        margin-top: var(--pix-spacing-4x);
    }
}
