/* Text fields: a label above, a 4px input on --surface-2 with a hairline, the accent
   focus ring, and one message line under it. The password field adds an eye toggle
   inside the box (docs/10). The .is-* classes mirror the pseudo-classes for the
   styleguide. */

.field {
  display: grid;
  gap: var(--s-2);
  min-width: 0;
  animation: enter var(--d-enter) var(--ease-enter) backwards;
}

.field__label {
  font-size: var(--fs-14);
  font-weight: 600;
}

.field__hint {
  font-size: var(--fs-14);
  color: var(--text-2);
}

.field__box {
  position: relative;
  display: flex;
  align-items: center;
}

.field__input {
  width: 100%;
  min-width: 0;
  height: var(--control-h);
  padding: 0 var(--s-3);
  border: 0;
  border-radius: var(--r-control);
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--text);
  font-size: var(--fs-16);
  transition:
    box-shadow var(--d-hover) var(--ease-state),
    background-color var(--d-hover) var(--ease-state),
    transform var(--d-press) var(--ease-state);
}

.field__input--mono {
  font-family: var(--font-mono);
  font-size: var(--fs-15);
  font-variant-ligatures: none;
  letter-spacing: .04em;
}

.field__input::placeholder {
  color: var(--text-2);
  opacity: 1;
}

.field__input:hover,
.field__input.is-hover {
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

.field__input:active,
.field__input.is-press {
  transform: scale(.995);
}

.field__input:focus-visible,
.field__input.is-focus {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  box-shadow: inset 0 0 0 1px var(--accent-ink);
}

.field__input:disabled,
.field__input.is-disabled {
  opacity: .55;
  cursor: not-allowed;
}

.field[data-state="bad"] .field__input {
  box-shadow: inset 0 0 0 1px var(--bad);
}

.field__msg {
  min-height: 1.55em;
  font-size: var(--fs-14);
  color: var(--text-2);
}

.field__msg:empty {
  min-height: 0;
}

.field[data-state="bad"] .field__msg {
  color: var(--bad);
}

.field[data-state="ok"] .field__msg {
  color: var(--ok);
}

/* Password: the eye sits inside the box and swaps to a struck eye while the
   password shows. */
.field--password .field__input {
  padding-right: calc(var(--control-h) + var(--s-1));
}

.eye {
  position: absolute;
  top: 4px;
  right: 4px;
  display: grid;
  place-items: center;
  width: calc(var(--control-h) - 8px);
  height: calc(var(--control-h) - 8px);
  padding: 0;
  border: 0;
  border-radius: var(--r-control);
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  transition:
    color var(--d-hover) var(--ease-state),
    background-color var(--d-hover) var(--ease-state),
    transform var(--d-press) var(--ease-state);
}

.eye:hover,
.eye.is-hover {
  color: var(--text);
  background: var(--wash);
}

.eye:active,
.eye.is-press {
  transform: scale(.92);
}

.eye__off,
.eye[aria-pressed="true"] .eye__on {
  display: none;
}

.eye[aria-pressed="true"] .eye__off {
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .field {
    animation-name: fade-in;
  }

  .field__input:active,
  .field__input.is-press,
  .eye:active,
  .eye.is-press {
    transform: none;
  }
}