/* Form fields: a label over its control, checkbox rows, joined input groups and the submit bar. */
@layer components {
  .field > label,
  .field > legend {
    display: block;
  }

  .check {
    display: flex;
    min-height: 1.5rem;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
  }

  .input-group {
    display: flex;
    flex: 1 1 11rem;

    & > span {
      padding: var(--space-1) var(--space-3);
      background-color: var(--color-surface-strong);
      border: var(--border);
      border-inline-end: 0;
      border-start-start-radius: var(--radius);
      border-end-start-radius: var(--radius);
      white-space: nowrap;
    }

    & > input {
      min-width: 0;
      border-start-start-radius: 0;
      border-end-start-radius: 0;
    }
  }

  .form-actions {
    padding: var(--space-4) var(--space-4) var(--space-4) clamp(var(--space-4), 13vw, 150px);
    background-color: var(--color-surface-subtle);
    border-block-start: var(--border-width) solid var(--color-surface-strong);
  }
}