.root {
	display: inline-flex;
	background: var(--color-neutral-surface-minimal-idle-bg);
	border-radius: var(--component-radii-md);
}

.root-small {
	height: var(--size-control-small);
}

.root-medium {
	height: var(--size-control-medium);
}

.item {
	all: unset;
	background-color: transparent;
	border: var(--component-border-width-md) solid transparent;
	border-radius: calc(var(--component-radii-md) - var(--component-spacing-3xs));
	cursor: pointer;
	display: flex;
	gap: var(--component-spacing-xs);
	align-items: center;
	justify-content: center;
	padding: 0 var(--component-spacing-md);
	font: var(--font-label-sm);
	flex-grow: 1;
}

.item:hover {
	color: var(--color-neutral-canvas-default-fg-default);
}

.item[data-state='on'],
.item[aria-checked='true'] {
	/* TODO: We should have proper tokens for this, needs to stay high/at least mid contrast in both light and dark mode */
	background-color: #fff;
	color: #2e2e2e;
	border-color: var(--stroke-subtle);
}

.item:focus-visible {
	position: relative;
	box-shadow: var(--shadows-focus);
}

.itemIconOnly {
	aspect-ratio: 1;
	padding: 0;
}