/* A one-field form that sits in a line of actions: label, control, button. */
@layer components {
  .inline-form {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);

    & label {
      font: var(--text-small);
      color: var(--color-muted);
      margin: 0;
    }

    & :where(input:not([type="submit"]), select) {
      inline-size: 8rem;
      min-block-size: auto;
      padding: var(--space-1) var(--space-2);
    }
  }
}