@layer components {
#header > .a11y [aria-checked="false"] > * {
	transform: scaleX(-1);
	color: var(--color-primary);
}

#header > .a11y [aria-checked="false"] {
	background-color: color-mix(in srgb, var(--color-primary), transparent 75%);
}

#header > .a11y .a11y-icon {
	vertical-align: middle;
	margin-inline-start: 0.5ch;
	font-size: 1.225em;
}

#header > .a11y #a11y-menu button {
	padding: 0.325em 0.75em;
}

#header > .a11y .a11y-hidden {
	display: none;
}

@media (min-width: 744px) {
	#header > .a11y .a11y-hidden {
		display: inline-block;
	}
}

#header > .a11y .a11y-title {
	margin-block-end: 0;
}

button[type="button"][role="switch"] {
	vertical-align: middle;
	appearance: none;
	transition:
		background var(--transition),
		border var(--transition);
	border: var(--border-line-thick) color-mix(in srgb, transparent, var(--color-black) 32.5%);
	border-radius: 2em;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='rgba(0, 0, 0, 0.325)'/%3E%3C/svg%3E");
	background-position: left center;
	width: 3em;
	height: 1.5em;
}
button[type="button"][role="switch"][aria-checked="true"] {
	border-color: var(--color-accent);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='rgb(255, 255, 255)'/%3E%3C/svg%3E");
	background-position: right center;
	background-color: var(--color-accent);
}

#a11y-menu {
	transform: translateX(50%);
	opacity: 1;
	z-index: 1;
	transition: opacity var(--transition);
	inset-inline-end: 50%;
	border: var(--border-line) var(--color-text);
	background-color: var(--color-bg);
	font-size: 0.95em;
}

#a11y-menu[inert] {
	opacity: 0;
}

.a11y hr {
	margin-block: calc(var(--gutter) / 3);
}

.a11y .extra-lang {
	margin: 0;
	padding-block: 0.325em;
}

}