:root {
	color-scheme: light dark;
}

body {
	font-family:
		-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
		Cantarell, sans-serif;
	line-height: 1.6;
	color: CanvasText;
	background: Canvas;
	max-width: 1400px;
	margin: 0 auto;
	padding: 1rem;
}

h1 {
	font-size: 2rem;
	margin-block: 0 0.5rem;
}

h2 {
	font-size: 1.5rem;
	margin-block: 2rem 1rem;
	border-bottom: 2px solid;
	padding-bottom: 0.5rem;
}

h3 {
	font-size: 1.25rem;
	margin-block: 0 0.5rem;
}

p {
	margin-block: 0.5rem;
}

header {
	margin-block-end: 2rem;
}

header p {
	font-size: 1.1rem;
}

a {
	color: LinkText;
	text-decoration-skip-ink: auto;
}

code {
	background: ButtonFace;
	color: ButtonText;
	padding: 0.125rem 0.25rem;
	border-radius: 3px;
	font-family: ui-monospace, monospace;
	font-size: 0.9em;
}

.demo-section {
	margin-block: 2rem;
	padding: 1.5rem;
	background: ButtonFace;
	border: 1px solid ButtonBorder;
	border-radius: 8px;
}

.demo-section > p {
	margin-block-end: 1rem;
}

.code-demo-pair {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1rem;
	align-items: start;
	margin-block: 1rem;
}

.code-demo-pair > * {
	min-inline-size: 0;
}

pre {
	background: Field;
	color: FieldText;
	padding: 1rem;
	border-radius: 6px;
	overflow: auto;
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.4;
}

pre code {
	background: none;
	color: inherit;
	padding: 0;
	font-size: inherit;
}

pre code mark {
	background: Mark;
	color: MarkText;
	border-radius: 2px;
}

.demo {
	background: Canvas;
	color: CanvasText;
	padding: 1rem;
	border: 1px solid ButtonBorder;
	border-radius: 6px;
}

form-multi-switch {
	margin-block: 1rem;
}

button {
	font: inherit;
	min-block-size: 2.75rem;
	padding: 0.35em 0.8em;
	cursor: pointer;
}

output {
	display: block;
	overflow-wrap: anywhere;
}

.pill {
	--multi-switch-radius: 999px;
}

.branded {
	--multi-switch-border: #173f63;
	--multi-switch-background: #eef4ff;
	--multi-switch-color: #173f63;
	--multi-switch-selected-background: #173f63;
	--multi-switch-selected-color: #fff;
	--multi-switch-focus-color: #173f63;
}

.underline {
	--multi-switch-radius: 0;
	--multi-switch-border: transparent;
	--multi-switch-selected-background: Canvas;
	--multi-switch-selected-color: CanvasText;
}

.underline [data-multi-switch-choice] {
	border-block-end: 2px solid GrayText;
}

.underline [data-multi-switch-choice][data-selected] {
	border-block-end: 4px solid currentColor;
	box-shadow: none;
	font-weight: 700;
}

.sliding-highlight [data-multi-switch-group] {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sliding-highlight [data-multi-switch-group] > legend {
	grid-column: 1 / -1;
}

.sliding-highlight [data-multi-switch-group]::before {
	grid-area: 2 / 1;
	z-index: 0;
	border-radius: var(--multi-switch-radius, 0.5rem);
	background: var(--multi-switch-selected-background, Highlight);
	content: '';
	transition: transform 300ms ease;
}

.sliding-highlight [data-multi-switch-choice] {
	grid-row: 2;
	z-index: 1;
	margin: 0;
	border-color: transparent;
	background: transparent;
	color: var(--multi-switch-color, CanvasText);
	box-shadow: none;
}

.sliding-highlight [data-multi-switch-choice][data-selected] {
	color: var(--multi-switch-selected-color, HighlightText);
}

.sliding-highlight [data-value='list'] {
	grid-column: 1;
}

.sliding-highlight [data-value='grid'] {
	grid-column: 2;
}

.sliding-highlight [data-value='table'] {
	grid-column: 3;
}

.sliding-highlight
	[data-multi-switch-group]:has([data-value='grid'][data-selected])::before {
	transform: translateX(100%);
}

.sliding-highlight
	[data-multi-switch-group]:has([data-value='table'][data-selected])::before {
	transform: translateX(200%);
}

.sliding-highlight
	[data-multi-switch-group]:dir(rtl):has(
		[data-value='grid'][data-selected]
	)::before {
	transform: translateX(-100%);
}

.sliding-highlight
	[data-multi-switch-group]:dir(rtl):has(
		[data-value='table'][data-selected]
	)::before {
	transform: translateX(-200%);
}

@media (prefers-reduced-motion: reduce) {
	.sliding-highlight [data-multi-switch-group]::before {
		transition: none;
	}
}

.icons [data-multi-switch-choice]::before {
	content: '';
	inline-size: 1.4em;
	block-size: 1.4em;
	background: currentColor;
	mask: var(--choice-icon) center / contain no-repeat;
}

.icons [data-value='system'] {
	--choice-icon: url('./monitor.svg');
}

.icons [data-value='light'] {
	--choice-icon: url('./sun.svg');
}

.icons [data-value='dark'] {
	--choice-icon: url('./moon.svg');
}

.size-grid [data-multi-switch-group] {
	display: block;
}

.size-grid ul {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(3.25rem, 1fr));
	gap: 0.5rem;
	padding: 0;
	margin: 0;
	list-style: none;
}

.size-grid [data-multi-switch-choice] {
	inline-size: 100%;
	margin: 0;
	border-radius: 0.4rem;
}

.size-grid [data-disabled]::after {
	content: '';
	position: absolute;
	inset: 0.25rem;
	pointer-events: none;
	background: linear-gradient(
		135deg,
		transparent calc(50% - 1px),
		currentColor calc(50% - 1px),
		currentColor calc(50% + 1px),
		transparent calc(50% + 1px)
	);
}

@media (forced-colors: active) {
	.size-grid [data-disabled]::after {
		forced-color-adjust: none;
	}
}

.visually-hidden {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

#event-log {
	min-block-size: 8em;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

[data-view-preview][data-view='grid'] {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.5rem;
}

footer {
	margin-block-start: 3rem;
	padding-block-start: 2rem;
	border-top: 2px solid ButtonBorder;
	color: GrayText;
}

@media (min-width: 48rem) {
	.code-demo-pair {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 30rem) {
	body {
		padding: 0.5rem;
	}

	.demo-section {
		padding: 0.75rem;
	}
}