@layer repui.components {
  :where(.rui-choice) {
    position: relative;
    display: inline-flex;
    align-items: flex-start;
    gap: 0.625rem;
    color: var(--rui-choice-text);
    cursor: pointer;
    font-family: var(--rui-font-family);
    line-height: var(--rui-text-body-line-height);
  }

  :where(.rui-choice__input) {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  :where(.rui-choice__control) {
    display: grid;
    inline-size: 1rem;
    block-size: 1rem;
    min-inline-size: 1rem;
    min-block-size: 1rem;
    flex: 0 0 1rem;
    place-items: center;
    box-sizing: border-box;
    margin-block-start: 0.25rem;
    border: 2px solid var(--rui-choice-border, var(--rui-color-border));
    border-radius: 0.25rem;
    background: var(--rui-choice-background, var(--rui-color-surface));
    color: var(--rui-choice-on-accent);
  }

  :where(.rui-choice__indicator) { display: block; opacity: 0; }

  :where(.rui-choice__input[type="checkbox"] + .rui-choice__control > .rui-choice__indicator) {
    inline-size: 0.5rem;
    block-size: 0.275rem;
    border-inline-start: 0.125rem solid currentColor;
    border-block-end: 0.125rem solid currentColor;
    transform: translateY(-0.0625rem) rotate(-45deg) scale(0.7);
  }

  :where(.rui-choice__input[type="checkbox"]:checked + .rui-choice__control) {
    border-color: var(--rui-choice-accent);
    background: var(--rui-choice-accent);
  }

  :where(.rui-choice__input[type="checkbox"]:checked + .rui-choice__control > .rui-choice__indicator) {
    opacity: 1;
    transform: translateY(-0.0625rem) rotate(-45deg) scale(1);
  }

  :where(.rui-choice__input[type="radio"] + .rui-choice__control) { border-radius: 50%; }
  :where(.rui-choice__input[type="radio"] + .rui-choice__control > .rui-choice__indicator) {
    inline-size: 0.5rem;
    block-size: 0.5rem;
    border-radius: 50%;
    background: var(--rui-choice-accent);
    transform: scale(0.5);
  }

  :where(.rui-choice__input[type="radio"]:checked + .rui-choice__control) {
    border-color: var(--rui-choice-accent);
  }

  :where(.rui-choice__input[type="radio"]:checked + .rui-choice__control > .rui-choice__indicator) {
    opacity: 1;
    transform: scale(1);
  }

  :where(.rui-choice__input:focus-visible + .rui-choice__control) {
    outline: var(--rui-focus-width) solid var(--rui-focus-color);
    outline-offset: 2px;
  }

  :where(.rui-choice__content) { display: flex; min-inline-size: 0; flex-direction: column; gap: 0.125rem; }
  :where(.rui-choice__label) { display: block; font-size: var(--rui-text-body-size); }
  :where(.rui-choice__description) { display: block; color: var(--rui-choice-muted); font-size: var(--rui-text-body-sm-size); }
  :where(.rui-choice--disabled) { color: var(--rui-choice-disabled); cursor: not-allowed; }
  :where(.rui-choice__input:disabled + .rui-choice__control) {
    border-color: var(--rui-choice-disabled-border);
    background: var(--rui-choice-disabled-background);
    color: var(--rui-choice-disabled-indicator);
  }
}