@layer components {
  .bar--gate {
    flex-direction: row;
    align-items: center;
    gap: var(--inline-space-half);
  }

  /* The bar is 2.65rem tall: the field's default padding leaves it touching both edges. */
  .bar--gate .input {
    --input-background: var(--color-canvas);
    --input-padding: 0.3em 0.8em;

    flex: 1 1 auto;
    max-inline-size: 40rem;
  }
}