@layer components {
  .rs-choice {
    --rs-choice-size: var(--rs-line-height-body-3);
    --rs-choice-gap: var(--rs-unit-x2);
    display: inline-flex;
    align-items: center;
    gap: var(--rs-choice-gap);
    color: var(--rs-color-foreground-neutral);
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }

  .rs-choice > input {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    opacity: 0;
  }

  .rs-choice__mark {
    position: relative;
    display: inline-grid;
    place-items: center;
    inline-size: var(--rs-choice-size);
    block-size: var(--rs-choice-size);
    flex: none;
    border: 1px solid var(--rs-color-border-neutral);
    border-radius: var(--rs-radius-small);
    background: var(--rs-color-background-elevation-base);
    transition:
      background-color var(--rs-duration-fast) var(--rs-easing-standard),
      border-color var(--rs-duration-fast) var(--rs-easing-standard),
      box-shadow var(--rs-duration-fast) var(--rs-easing-standard);
  }

  .rs-choice[data-type="radio"] .rs-choice__mark,
  .rs-choice:has(input[type="radio"]) .rs-choice__mark {
    border-radius: 50%;
  }

  .rs-choice__mark::after {
    content: "";
    inline-size: calc(var(--rs-choice-size) * 0.45);
    block-size: calc(var(--rs-choice-size) * 0.45);
    border-radius: inherit;
    background: var(--rs-color-on-background-primary);
    opacity: 0;
    transform: scale(0);
    transition:
      opacity var(--rs-duration-fast) var(--rs-easing-standard),
      transform var(--rs-duration-fast) var(--rs-easing-standard);
  }

  .rs-choice:has(input[type="checkbox"]) .rs-choice__mark::after {
    inline-size: calc(var(--rs-choice-size) * 0.7);
    block-size: calc(var(--rs-choice-size) * 0.7);
    border-radius: 0;
    background: var(--rs-color-on-background-primary);
    mask: var(--rs-icon-check) center / contain no-repeat;
  }

  @media (hover: hover) and (pointer: fine) {
    .rs-choice:hover:not(:has(:disabled, :checked)) .rs-choice__mark {
      background: var(--rs-color-background-neutral-faded);
    }
  }

  .rs-choice:has(input:focus-visible) .rs-choice__mark {
    box-shadow: var(--rs-shadow-focus);
  }

  .rs-choice:has(input:checked) .rs-choice__mark,
  .rs-choice:has(input:indeterminate) .rs-choice__mark {
    border-color: var(--rs-color-background-primary);
    background: var(--rs-color-background-primary);
  }

  .rs-choice:has(input:checked) .rs-choice__mark::after {
    opacity: 1;
    transform: scale(1);
  }

  /* Indeterminate checkbox shows a horizontal bar instead of a check. */
  .rs-choice:has(input:indeterminate) .rs-choice__mark::after {
    inline-size: calc(var(--rs-choice-size) * 0.5);
    block-size: 1.5px;
    border-radius: var(--rs-radius-circular);
    background: var(--rs-color-on-background-primary);
    mask: none;
    opacity: 1;
    transform: scale(1);
  }

  .rs-choice:has(input:user-invalid) .rs-choice__mark {
    border-color: var(--rs-color-border-critical);
  }

  .rs-choice:has(input:disabled) {
    color: var(--rs-color-foreground-disabled);
    cursor: not-allowed;
  }

  .rs-choice:has(input:disabled) .rs-choice__mark {
    border-color: var(--rs-color-border-disabled);
    background: var(--rs-color-background-disabled-faded);
  }

  .rs-choice:has(input:disabled:checked) .rs-choice__mark,
  .rs-choice:has(input:disabled:indeterminate) .rs-choice__mark {
    border-color: transparent;
    background: var(--rs-color-background-disabled);
  }

  .rs-choice:has(input:disabled:checked) .rs-choice__mark::after,
  .rs-choice:has(input:disabled:indeterminate) .rs-choice__mark::after {
    background: var(--rs-color-foreground-disabled);
  }
}