@layer components {
  .gv2-field {
    display: grid;
    gap: var(--gv2-space-2);
    min-inline-size: 0;
  }

  .gv2-field__label {
    color: var(--gv2-color-ink-muted);
    font-size: var(--gv2-text-xs);
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }

  .gv2-field__control {
    inline-size: 100%;
    min-block-size: var(--gv2-control-min-height);
    padding: var(--gv2-space-2) var(--gv2-space-3);
    border: 0.0625rem solid var(--gv2-color-line-strong);
    border-radius: var(--gv2-radius-md);
    background: var(--gv2-color-surface);
  }

  .gv2-field__control:hover {
    border-color: var(--gv2-color-ink-muted);
  }

  .gv2-field__control:focus {
    border-color: var(--gv2-color-focus);
  }

  .gv2-field__help,
  .gv2-field__error {
    font-size: var(--gv2-text-xs);
  }

  .gv2-field__help {
    color: var(--gv2-color-ink-muted);
  }

  .gv2-field__error {
    color: var(--gv2-color-negative);
  }
}