.Root {
  color: var(--demo-neutral-fg);
  display: flex;
  flex-direction: column;
  gap: 0.375rem;

  &[data-readonly] {
    pointer-events: none;
  }
}

.Label {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  color: var(--demo-neutral-fg);
  user-select: none;
  &[data-disabled] {
    opacity: 0.5;
  }
}

.Control {
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
}

.Item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;

  &[data-disabled] {
    opacity: 0.5;
    filter: grayscale(100%);
  }

  &:focus-visible {
    outline: 2px solid var(--demo-coral-focus-ring);
    outline-offset: 2px;
    border-radius: 0.125rem;
  }
}

.ItemIndicator {
  position: relative;
  display: inline-flex;
  width: 1.25rem;
  height: 1.25rem;

  & svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  & [data-bg] {
    color: var(--demo-neutral-muted);
  }

  & [data-fg] {
    color: var(--demo-coral-solid);
    clip-path: inset(0 0 0 0);
  }

  &[data-half] [data-fg] {
    clip-path: inset(0 50% 0 0);
  }

  &:not([data-highlighted]) [data-fg] {
    clip-path: inset(0 100% 0 0);
  }
}
