/* Layered so unlayered author styles always win */
@layer solar-eclipse-toggle {
	/* Light page: colored for the dark theme it switches to */
	solar-eclipse-toggle {
		--_color: var(--se-light-color, hsl(231, 40%, 32%));
		--_border: var(--se-light-border, hsl(231, 40%, 32%));
		--_icon: var(--se-light-icon, hsl(231, 45%, 30%));
		--_hover: var(--se-light-hover, hsl(231 25% 65% / .15));
		/* SYSTEM: light text on a darker, muted (mixed with dark gray) version of the theme color */
		--_system-bg: var(--se-light-system-bg, color-mix(in oklab, var(--_color), #333 40%));
		--_system-color: var(--se-light-system-color, color-mix(in oklab, var(--_color) 10%, white));
		--_padding-block: .3em;
		--_padding-inline: .6em;
		display: inline-flex;
	}

	/* Fills the component’s min-width, set by JavaScript so toggling SYSTEM doesn’t resize the button */
	solar-eclipse-toggle > button {
		flex-grow: 1;
		/* Labels stack in the first column, SYSTEM (when shown) takes the second */
		display: inline-grid;
		grid-template-columns: 1fr auto;
		align-items: center;
		padding: var(--_padding-block) var(--_padding-inline);
		border: 2px solid var(--_border);
		border-radius: 6.25em;
		/* Clips SYSTEM’s background to the rounded corners */
		overflow: hidden;
		background-color: transparent;
		color: var(--_color);
		font: inherit;
		font-weight: 600;
		white-space: nowrap;
		cursor: pointer;
		transition: color .15s ease-in-out, border-color .15s ease-in-out, background-color .15s ease-in-out;
	}
	solar-eclipse-toggle > button:enabled:hover {
		background-color: var(--_hover);
	}
	solar-eclipse-toggle > button:disabled {
		cursor: not-allowed;
		filter: grayscale(1);
	}
	solar-eclipse-toggle > button:focus-visible {
		outline: 3px solid var(--se-focus, #89deff);
		outline-offset: 2px;
	}

	solar-eclipse-toggle svg {
		width: 1em;
		height: 1em;
		fill: currentColor;
		color: var(--_icon);
	}
	/* Every label shares one cell so the width never changes, with the icon on the left and text centered in the rest */
	solar-eclipse-toggle > button > :not(.se-system) {
		grid-area: 1 / 1;
		display: grid;
		grid-template-columns: auto 1fr;
		align-items: center;
		column-gap: .4em;
		text-align: center;
		visibility: hidden;
	}
	/* Full-height divider and background for SYSTEM, pulled through the button’s block and end padding */
	.se-system {
		display: none;
		grid-area: 1 / 2;
		align-self: stretch;
		align-items: center;
		margin-block: calc(-1 * var(--_padding-block) / .7);
		margin-inline: calc(.4em / .7) calc(-1 * var(--_padding-inline) / .7);
		padding-inline: .5em;
		background-color: var(--_system-bg);
		color: var(--_system-color);
		border-inline-start: 1px solid var(--_border);
		font-size: .7em;
		letter-spacing: .05em;
		line-height: 1.2;
		text-transform: uppercase;
	}
	.se-status {
		clip-path: inset(50%);
		height: 1px;
		overflow: hidden;
		position: absolute;
		white-space: nowrap;
		width: 1px;
	}

	/* Before JavaScript, and while JavaScript measures the button */
	solar-eclipse-toggle:not(:defined) .se-label-unknown {
		visibility: visible;
	}
	solar-eclipse-toggle:is(:not(:defined), [data-se-measure]) .se-system {
		display: flex;
	}

	/* The label previews the theme the button switches to */
	solar-eclipse-toggle:defined .se-label-dark {
		visibility: visible;
	}

	/* Dark page: from the system preference, unless a default or override says light */
	@media (prefers-color-scheme: dark) {
		:root:not([data-theme-default="light"], [data-theme="light"]) {
			& solar-eclipse-toggle {
				--_color: var(--se-dark-color, hsl(43, 90%, 65%));
				--_border: var(--se-dark-border, hsl(43, 74%, 42%));
				--_icon: var(--se-dark-icon, hsl(43, 90%, 50%));
				--_hover: var(--se-dark-hover, hsl(43 74% 42% / .2));
				--_system-bg: var(--se-dark-system-bg, color-mix(in oklab, var(--_color), #2a2a2a 65%));
				--_system-color: var(--se-dark-system-color, color-mix(in oklab, var(--_color) 10%, white));
			}
			& solar-eclipse-toggle:defined .se-label-dark {
				visibility: hidden;
			}
			& solar-eclipse-toggle:defined .se-label-light {
				visibility: visible;
			}
		}
	}
	/* Dark page: from an override or a dark default */
	:root[data-theme="dark"],
	:root[data-theme-default="dark"]:not([data-theme="light"]) {
		& solar-eclipse-toggle {
			--_color: var(--se-dark-color, hsl(43, 90%, 65%));
			--_border: var(--se-dark-border, hsl(43, 74%, 42%));
			--_icon: var(--se-dark-icon, hsl(43, 90%, 50%));
			--_hover: var(--se-dark-hover, hsl(43 74% 42% / .2));
			--_system-bg: var(--se-dark-system-bg, color-mix(in oklab, var(--_color), #2a2a2a 65%));
			--_system-color: var(--se-dark-system-color, color-mix(in oklab, var(--_color) 10%, white));
		}
		& solar-eclipse-toggle:defined .se-label-dark {
			visibility: hidden;
		}
		& solar-eclipse-toggle:defined .se-label-light {
			visibility: visible;
		}
	}

	/* SYSTEM marks a return to the default theme (or the system theme, without a valid default) */
	:root[data-theme-default="light"][data-theme="dark"],
	:root[data-theme-default="dark"][data-theme="light"] {
		& solar-eclipse-toggle:defined .se-system {
			display: flex;
		}
	}
	@media (prefers-color-scheme: light) {
		:root:not([data-theme-default="light"], [data-theme-default="dark"])[data-theme="dark"] solar-eclipse-toggle:defined {
			& .se-system {
				display: flex;
			}
		}
	}
	@media (prefers-color-scheme: dark) {
		:root:not([data-theme-default="light"], [data-theme-default="dark"])[data-theme="light"] solar-eclipse-toggle:defined {
			& .se-system {
				display: flex;
			}
		}
	}
}