.root {
  display: grid;
  gap: var(--space-2);
}

.label {
  display: flex;
  align-items: center;
  color: var(--color-text-subtle);
  &:has(:disabled) {
    color: var(--color-text-subtle);
  }
}

.labelText {
}

.item {
  aspect-ratio: 1;
  width: 20px;
  border-radius: var(--radius-round);
  border: var(--border-size-1) solid var(--color-neutral-7);
  background-color: var(--color-neutral-2);
  margin-inline-end: var(--space-2);
}

.item:hover {
  background-color: var(--color-neutral-4);
}

.item[data-state="checked"] {
  border: var(--border-size-1) solid var(--color-accent-7);
}

.item:is(:focus, :focus-visible) {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-neutral-6);
}

.item:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent-9);
}

.icon {
  height: 100%;
  fill: currentColor;
  color: currentColor;
}