.form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.field--inline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--field-inline-input-size, 8rem);
  gap: var(--space-xs);
  align-items: center;
}

.field--inline .field__label {
  display: -webkit-box;
  overflow: hidden;
  line-height: var(--line-height-label);
  -webkit-box-orient: vertical;
  line-clamp: var(--field-label-lines, 2);
  -webkit-line-clamp: var(--field-label-lines, 2);
}

.field--inline .field__hint,
.field--inline .field__error {
  grid-column: 1 / -1;
}

.field__label {
  margin-inline-start: var(--space-2xs);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-muted);
}

.field__input {
  inline-size: 100%;
  font-size: var(--font-size-body);
}

.field__input::placeholder {
  color: var(--color-text-muted);
}

.field__input:user-invalid,
.field--invalid .control {
  border-color: var(--color-negative);
  box-shadow: 0 0 0 var(--focus-ring-width)
    color-mix(in oklab, var(--color-negative), transparent 75%);
}

.field__hint,
.field__error {
  margin-inline-start: var(--space-2xs);
  font-size: var(--font-size-caption);
}

.field__hint {
  color: var(--color-text-muted);
}

.field__error {
  color: var(--color-negative);
  animation: field-error-enter var(--duration-enter) var(--easing-enter);
}

.field__error[data-leaving] {
  animation: field-error-leave var(--duration-leave) var(--easing-leave) forwards;
}

@keyframes field-error-enter {
  from {
    opacity: 0;
    translate: 0 calc(-1 * var(--space-2xs));
  }
}

@keyframes field-error-leave {
  to {
    opacity: 0;
    translate: 0 calc(-1 * var(--space-2xs));
  }
}