// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
//
// Copyright (c) KALEIDOS INC Sucursal en España SL

@use "ds/_utils.scss" as *;
@use "ds/_sizes.scss" as *;
@use "ds/_borders.scss" as *;
@use "ds/typography.scss" as *;

.auth-form-wrapper {
  inline-size: 100%;
  padding-block-end: 0;
  display: grid;
  gap: var(--sp-m);

  // Native <form> inside auth-form-wrapper — no class available
  form {
    display: flex;
    flex-direction: column;
    gap: var(--sp-m);
    margin-block-start: var(--sp-m);
  }
}

.auth-title-wrapper {
  inline-size: 100%;
  padding-block-end: 0;
  display: grid;
  gap: var(--sp-s);
}

.separator {
  border-color: var(--color-background-quaternary);
  margin: 0;
}

.auth-title {
  @include use-typography("title-large");

  line-height: 1.2;
  color: var(--color-foreground-primary);
}

.auth-subtitle {
  @include use-typography("title-small");

  color: var(--color-foreground-secondary);
}

.auth-tagline {
  @include use-typography("title-small");

  margin: 0;
  color: var(--color-foreground-secondary);
}

.form-field {
  --input-width: 100%;
  --input-height: #{$sz-40};
  --input-min-width: 100%;
}

.buttons-stack {
  display: grid;
  gap: var(--sp-s);
}

.login-button,
.login-ldap-button {
  @include use-typography("headline-small");

  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  background-color: var(--color-accent-primary);
  border: $b-1 solid var(--color-accent-primary);
  color: var(--color-background-secondary);
  border-radius: $br-8;
  min-block-size: $sz-32;
  block-size: $sz-40;
  inline-size: 100%;

  &:disabled {
    background-color: var(--color-background-quaternary);
    border: 1px solid var(--color-background-quaternary);
    color: var(--color-foreground-disabled);
    cursor: unset;
  }
}

.go-back {
  display: flex;
  flex-direction: column;
  gap: var(--sp-m);
  padding: 0;
  border-block-start: none;
}

.go-back-link {
  background: none;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: $br-8;
  background-color: var(--color-background-tertiary);
  border: $b-1 solid var(--color-background-tertiary);
  color: var(--color-foreground-secondary);

  @include use-typography("headline-small");

  block-size: $sz-40;
}

.links {
  display: grid;
  gap: var(--sp-xxl);
}

.register,
.account,
.recovery-request,
.demo-account {
  display: flex;
  justify-content: center;
  gap: var(--sp-s);
  padding: 0;
}

.register-text,
.account-text,
.recovery-text,
.demo-account-text {
  @include use-typography("title-small");

  text-align: right;
  color: var(--color-foreground-secondary);
}

.register-link,
.account-link,
.recovery-link,
.forgot-pass-link,
.demo-account-link {
  @include use-typography("title-small");

  text-align: left;
  background-color: transparent;
  border: none;
  display: inline;
  color: var(--color-accent-primary);

  &:hover {
    text-decoration: underline;
  }
}

.forgot-password {
  display: flex;
  justify-content: flex-end;
}

.submit-btn,
.register-btn,
.recover-btn {
  @include use-typography("headline-small");

  background: none;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--color-accent-primary);
  border: $b-1 solid var(--color-accent-primary);
  color: var(--color-background-secondary);
  border-radius: $br-8;
  min-block-size: $sz-32;
  block-size: $sz-40;
  inline-size: 100%;

  &:disabled {
    background-color: var(--color-background-quaternary);
    border: $b-1 solid var(--color-background-quaternary);
    color: var(--color-foreground-disabled);
    cursor: unset;
  }
}

.login-btn {
  @include use-typography("title-small");

  display: flex;
  align-items: center;
  gap: px2rem(6);
  inline-size: 100%;
  border-radius: $br-8;
  background-color: var(--color-background-tertiary);
  color: var(--color-foreground-primary);

  span {
    padding-block-start: var(--sp-xxs);
  }

  &:hover {
    color: var(--color-foreground-primary);
    background-color: var(--color-background-quaternary);
  }

  &:disabled {
    background-color: var(--color-background-quaternary);
    border: 1px solid var(--color-background-quaternary);
    color: var(--color-foreground-disabled);
    cursor: unset;
  }
}

.auth-buttons {
  display: flex;
  gap: var(--sp-s);
}