/* stylelint-disable selector-class-pattern */
@use 'pix-design-tokens/typography';
@use "pix-design-tokens/colors";

.login-page {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: var(--pix-neutral-0);
  background: colors.$pix-primary-app-gradient;
}

.login-page__main {
  width: 400px;
  margin: 0 auto;
}

.login-page-header {
  height: 129px;
  margin-top: var(--pix-spacing-12x);
  text-align: center;

  &__logo {
    display: block;
    width: 173px;
    height: 63px;
    margin: 0 auto;
    margin-bottom: var(--pix-spacing-3x);
  }

  &__title {
    margin-bottom: var(--pix-spacing-4x);
  }
}

.login-page__section--login-form {
  margin: var(--pix-spacing-12x) 0;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: var(--pix-spacing-8x);
  padding: var(--pix-spacing-12x);
  background: var(--pix-neutral-0);
  border-radius: 10px;
  box-shadow: 0 10px 10px rgb(0 0 0 / 10%);

  &__information {
    color: var(--pix-color-neutral-0);
    font-size: 0.875rem;
  }

  &__oidc-connect-link {
    @extend %pix-body-s;

    display: flex;
    align-items: center;
    width: fit-content;
    margin: auto;
    font-weight: var(--pix-font-medium);
    background-color: var(--pix-neutral-0);
    border: 1px solid var(--pix-neutral-800);
    border-radius: 100px;

      &__logo {
        width: var(--pix-spacing-6x);
        margin: var(--pix-spacing-2x) var(--pix-spacing-3x);
      }

      &__label {
      padding: var(--pix-spacing-3x);
      color: var(--pix-neutral-800);

      &:focus,
      &:hover,
      &:focus-within {
        color: var(--pix-neutral-0);
        background-color: var(--pix-primary-500);
        border-radius: 0 100px 100px 0;
      }
    }
  }
}

.login-form__error {
  color: var(--pix-error-500);
  font-size: 0.875rem;
}

.login-form__button {
  width: 100%;
}
