[data-toolbar] {
	--_toolbar-gap: var(--toolbar-gap-md);
	--_toolbar-padding-inline: var(--toolbar-padding-inline-md);
	--_toolbar-padding-block: var(--toolbar-padding-block-md);
	--_toolbar-control-height: var(--toolbar-control-height-md);
	--_toolbar-control-padding-inline: var(--toolbar-control-padding-inline-md);
	--_toolbar-control-gap: var(--toolbar-control-gap-md);
	--_toolbar-font-size: var(--toolbar-font-size-md);
	/* private: CONMUTADOR-IDENTITY by variant — the base branch reads the public,
	   and the second value IS the identity of the variant, not a knob: a `ghost`
	   toolbar is the one WITHOUT a fill (toolbar.md §5, signed: «la clase
	   conmutador de F2-B, quinto caso»). */
	--_toolbar-bg: var(--toolbar-bg);
	--_toolbar-border: var(--toolbar-border);
	/* private: same CONMUTADOR-IDENTITY — `outline` and `ghost` ARE shadowless
	   (toolbar.md §5, signed). */
	--_toolbar-shadow: var(--toolbar-shadow);

	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--_toolbar-gap);
	min-inline-size: 0;
	padding-block: var(--_toolbar-padding-block);
	padding-inline: var(--_toolbar-padding-inline);
	border: var(--toolbar-border-width) solid var(--_toolbar-border);
	border-radius: var(--toolbar-radius);
	background: var(--_toolbar-bg);
	box-shadow: var(--_toolbar-shadow);
	color: var(--toolbar-fg);
	font-family: var(--toolbar-font-family);
	font-size: var(--_toolbar-font-size);
	line-height: var(--toolbar-line-height);
}

[data-toolbar][data-size='xs'] {
	--_toolbar-gap: var(--toolbar-gap-xs);
	--_toolbar-padding-inline: var(--toolbar-padding-inline-xs);
	--_toolbar-padding-block: var(--toolbar-padding-block-xs);
	--_toolbar-control-height: var(--toolbar-control-height-xs);
	--_toolbar-control-padding-inline: var(--toolbar-control-padding-inline-xs);
	--_toolbar-control-gap: var(--toolbar-control-gap-xs);
	--_toolbar-font-size: var(--toolbar-font-size-xs);
}

[data-toolbar][data-size='sm'] {
	--_toolbar-gap: var(--toolbar-gap-sm);
	--_toolbar-padding-inline: var(--toolbar-padding-inline-sm);
	--_toolbar-padding-block: var(--toolbar-padding-block-sm);
	--_toolbar-control-height: var(--toolbar-control-height-sm);
	--_toolbar-control-padding-inline: var(--toolbar-control-padding-inline-sm);
	--_toolbar-control-gap: var(--toolbar-control-gap-sm);
	--_toolbar-font-size: var(--toolbar-font-size-sm);
}

[data-toolbar][data-size='lg'] {
	--_toolbar-gap: var(--toolbar-gap-lg);
	--_toolbar-padding-inline: var(--toolbar-padding-inline-lg);
	--_toolbar-padding-block: var(--toolbar-padding-block-lg);
	--_toolbar-control-height: var(--toolbar-control-height-lg);
	--_toolbar-control-padding-inline: var(--toolbar-control-padding-inline-lg);
	--_toolbar-control-gap: var(--toolbar-control-gap-lg);
	--_toolbar-font-size: var(--toolbar-font-size-lg);
}

/* outline: transparent fill, border + shadow stay visible. */
[data-toolbar][data-variant='outline'] {
	--_toolbar-bg: transparent;
	--_toolbar-shadow: none;
}

[data-toolbar][data-variant='ghost'] {
	--_toolbar-bg: transparent;
	--_toolbar-border: transparent;
	--_toolbar-shadow: none;
}

[data-toolbar][data-orientation='vertical'] {
	flex-direction: column;
	align-items: stretch;
}

[data-toolbar-group] {
	display: inline-flex;
	align-items: center;
	gap: var(--toolbar-group-gap);
	min-inline-size: 0;
}

[data-toolbar-group][data-orientation='vertical'] {
	flex-direction: column;
	align-items: stretch;
}

/* No [data-toolbar-button] chrome here: `Toolbar.Button` composes the canon
   <Button>, which owns its variant/hover/focus/disabled paint (A-112 — Button
   consumer pattern, rule 5). The bar paints only the controls that are ITS
   surface: Link and GroupItem. */
[data-toolbar-link],
[data-toolbar-group-item] {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	gap: var(--_toolbar-control-gap);
	min-inline-size: var(--_toolbar-control-height);
	block-size: var(--_toolbar-control-height);
	padding-inline: var(--_toolbar-control-padding-inline);
	border: var(--toolbar-control-border-width) solid var(--toolbar-control-border);
	border-radius: var(--toolbar-control-radius);
	background: var(--toolbar-control-bg);
	color: var(--toolbar-control-fg);
	font: inherit;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	outline: none;
	transition:
		background var(--toolbar-transition-duration) var(--toolbar-transition-ease),
		border-color var(--toolbar-transition-duration) var(--toolbar-transition-ease),
		color var(--toolbar-transition-duration) var(--toolbar-transition-ease),
		box-shadow var(--toolbar-transition-duration) var(--toolbar-transition-ease);
}

[data-toolbar-link]:hover,
[data-toolbar-group-item]:hover:not([data-disabled]) {
	border-color: var(--toolbar-hover-control-border);
	background-image: linear-gradient(var(--state-hover), var(--state-hover));
	color: var(--toolbar-hover-control-fg);
}

[data-toolbar-link]:focus-visible,
[data-toolbar-group-item]:focus-visible {
	outline: var(--focus-ring-width) solid var(--focus-ring-color);
	outline-offset: 0;
}

[data-toolbar-group-item][data-state='on'] {
	border-color: var(--toolbar-active-control-border);
	background: var(--toolbar-active-control-bg);
	color: var(--toolbar-active-control-fg);
}

[data-toolbar-group][data-disabled],
[data-toolbar-group-item][data-disabled] {
	cursor: default;
	opacity: var(--toolbar-disabled-opacity);
}

[data-toolbar-separator] {
	flex: 0 0 auto;
	border-radius: var(--toolbar-separator-radius);
	background: var(--toolbar-separator-bg);
}

[data-toolbar-separator][data-orientation='vertical'] {
	inline-size: var(--toolbar-separator-thickness);
	align-self: stretch;
	min-block-size: var(--toolbar-separator-length);
}

[data-toolbar-separator][data-orientation='horizontal'] {
	block-size: var(--toolbar-separator-thickness);
	inline-size: 100%; /* literal: identity — spans the bar's cross axis, the same job `align-self: stretch` does on the vertical twin. Its thickness and its floor ARE tokens. */
	min-inline-size: var(--toolbar-separator-length);
}

@media (prefers-reduced-motion: reduce) {
	[data-toolbar-link],
	[data-toolbar-group-item] {
		transition: none;
	}
}