.segmented {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-1);
	padding: var(--spacing-1);
	background: var(--l2-background);
	border: 1px solid var(--l3-border);
	border-radius: var(--radius-2);
}

.segment {
	--button-height: 22px;
	--button-padding: 0 var(--spacing-3);
	--button-secondary-ghost-hover-foreground: var(--l2-foreground);
	--button-variant-ghost-background-color: transparent;
	border: none;
	--button-border-radius: calc(var(--radius-2) - 1px);
	transition:
		background 120ms ease,
		color 120ms ease;
}

.segment:not(.segmentActive):hover {
	--button-secondary-ghost-hover-foreground: var(--l2-foreground-hover);
	--button-variant-ghost-background-color: var(--l2-background);
}

.segmentIcon {
	display: inline-flex;
	align-items: center;
}

.segment.optAuto {
	--button-secondary-ghost-hover-foreground: var(--l1-foreground);
	--button-variant-ghost-background-color: var(--l3-background);
}

.segment.optGranted {
	--button-secondary-ghost-hover-foreground: var(--success-foreground);
	--button-variant-ghost-background-color: color-mix(
		in srgb,
		var(--accent-forest) 22%,
		transparent
	);
}

.segment.optDenied {
	--button-secondary-ghost-hover-foreground: var(--danger-foreground);
	--button-variant-ghost-background-color: color-mix(
		in srgb,
		var(--accent-cherry) 22%,
		transparent
	);
}

.segment.optDelay {
	--button-secondary-ghost-hover-foreground: var(--warning-foreground);
	--button-variant-ghost-background-color: color-mix(
		in srgb,
		var(--accent-amber) 22%,
		transparent
	);
}

.segment.optError {
	--button-secondary-ghost-hover-foreground: var(--danger-foreground);
	--button-variant-ghost-background-color: color-mix(
		in srgb,
		var(--accent-cherry) 22%,
		transparent
	);
}