/* Native checkbox/radio controls retain their platform behavior. */
@layer components {
  :root {
    .ui-choice-group {
      display: grid;
      gap: 0.75rem;
      min-width: 0;
      margin: 0;
      padding: 0;
      border: 0;

      > legend {
        margin-bottom: 0.5rem;
      }
    }
    .ui-choice {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      font: var(--ui-field-font);
      color: var(--ink);
      cursor: pointer;

      > input {
        width: var(--ui-icon-size);
        height: var(--ui-icon-size);
        margin: 0;
        accent-color: var(--accent);
        cursor: inherit;

        &:focus-visible {
          outline: 2px solid var(--accent);
          outline-offset: 2px;
        }
      }
      &:has(:disabled) {
        opacity: 0.4;
        cursor: not-allowed;
      }
    }
  }
}