/*
 * Source: assets/main.css lines 1281-1335
 * Purpose: Form field overrides and states
 */

.auth-form-input {
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-stroke-3);
  background-color: var(--color-background-1);
  width: 100%;
  height: 45px;
  padding-inline: 18px;
  padding-block: calc(var(--spacing) * 3);
  font-size: var(--text-tagline-1);
  line-height: var(--tw-leading, var(--text-tagline-1--line-height));
  --tw-font-weight: var(--font-weight-normal);
  font-weight: var(--font-weight-normal);
  color: var(--color-secondary);
  border-radius: 3.40282e38px;
  display: block;
}

.auth-form-input::placeholder {
  font-size: var(--text-tagline-2);
  line-height: var(--tw-leading, var(--text-tagline-2--line-height));
  --tw-font-weight: var(--font-weight-normal);
  font-weight: var(--font-weight-normal);
  color: #1a1a1c99;
}

@supports (color: color-mix(in lab, red, red)) {
  .auth-form-input::placeholder {
    color: color-mix(in oklab, var(--color-secondary) 60%, transparent);
  }
}

.auth-form-input:focus {
  --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  --tw-outline-style: none;
  outline-style: none;
}

.auth-form-input:where(.dark, .dark *) {
  border-color: var(--color-stroke-7);
  background-color: var(--color-background-6);
  color: var(--color-accent);
}

.auth-form-input:where(.dark, .dark *)::placeholder {
  color: #fcfcfc99;
}

@supports (color: color-mix(in lab, red, red)) {
  .auth-form-input:where(.dark, .dark *)::placeholder {
    color: color-mix(in oklab, var(--color-accent) 60%, transparent);
  }
}