/*
 * A label and its field on one line to write on. The line belongs to the row
 * rather than the field, so it runs under the label too, and the field inside
 * gives up its own box through the input variables. Focus thickens the line
 * instead of ringing a box that isn't there.
 */
.field {
  --input-background: transparent;
  --input-border-width: 0;
  --input-outline-size: 0;
  --input-padding: var(--size-1_5) 0;
  --input-radius: 0;

  align-items: baseline;
  border-block-end: 1px solid var(--color-border);
  column-gap: var(--size-1);
  display: flex;

  &:focus-within {
    border-block-end-color: var(--color-selected-dark);
    box-shadow: inset 0 -1px 0 var(--color-selected-dark);
  }

  /* The field has no border left to turn red, so the line does. */
  &:has(:user-invalid) {
    border-block-end-color: var(--color-text-negative);
  }
}

/* Sized with the field so the two read as one line of text. */
.field__label {
  color: var(--color-text-subtle);
  font-size: var(--input-font-size, var(--text-sm));
  white-space: nowrap;
}

.field__input {
  flex: 1;
  min-inline-size: 0;
}

/* A note about the field above, set off from the next one. */
.field__hint {
  color: var(--color-text-subtle);
  font-size: var(--text-sm);
  margin-block: var(--size-2) var(--size-4);
  text-wrap: pretty;
}

/* The scanner shows what it read beside its button, so the row holds both
   instead of a field to type into. */
.field--scanner {
  align-items: center;
  padding-block: var(--size-1_5);

  .barcode-scanner {
    flex: 1;
    min-inline-size: 0;
  }
}

.field__scan {
  --btn-block-size: var(--size-9);
  --btn-inline-size: var(--size-9);
  --btn-padding: 0;
  --btn-radius: var(--rounded-full);
}

/* Fields that belong to something else in the same form, like a new
   product's first variant, start a section of their own under a heading. */
.form__section {
  margin-block-start: var(--size-6);
}

.form__legend {
  font-weight: var(--font-semibold);
  margin-block-end: var(--size-1);
}