/**
 * CRO Global Theme Foundation
 * Accessible central theme preference control.
 */

.cro-gtf-theme-toggle {
	display: none;
	min-inline-size: 0;
	margin: 0;
	padding: 0;
	border: 0;
	color: var(--e-global-color-text_muted, currentColor);
	font: inherit;
}

html.cro-gtf-js .cro-gtf-theme-toggle {
	display: inline-flex;
}

.cro-gtf-theme-toggle__options {
	display: inline-flex;
	align-items: stretch;
	gap: 0;
}

.cro-gtf-theme-toggle__option {
	position: relative;
	display: inline-flex;
	margin: 0;
	cursor: pointer;
}

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

.cro-gtf-theme-toggle__option span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: 2.5rem;
	padding: 0.5rem 0.75rem;
	border-block: 1px solid
		var(--e-global-color-border_divider, currentColor);
	border-inline-start: 1px solid
		var(--e-global-color-border_divider, currentColor);
	background: var(--e-global-color-surface_badge, transparent);
	color: inherit;
	font: inherit;
	line-height: 1;
	cursor: pointer;
	user-select: none;
}

.cro-gtf-theme-toggle__option:first-child span {
	border-start-start-radius: 999px;
	border-end-start-radius: 999px;
}

.cro-gtf-theme-toggle__option:last-child span {
	border-inline-end: 1px solid
		var(--e-global-color-border_divider, currentColor);
	border-start-end-radius: 999px;
	border-end-end-radius: 999px;
}

.cro-gtf-theme-toggle__option input:checked + span {
	font-weight: 600;
	box-shadow: inset 0 0 0 2px currentColor;
}

.cro-gtf-theme-toggle__option input:focus-visible + span {
	position: relative;
	z-index: 1;
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.cro-gtf-theme-toggle__option span:hover {
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

html[data-cro-theme="dark"] .cro-gtf-theme-toggle {
	color: #f8fafc;
}

html[data-cro-theme="dark"] .cro-gtf-theme-toggle__option span {
	border-color: var(--cro-gtf-header-border, #5eead4);
	background: #172d2a;
	color: #f8fafc;
}

html[data-cro-theme="dark"]
	.cro-gtf-theme-toggle__option
	input:checked
	+ span {
	background: var(--cro-gtf-header-accent, #0f766e);
	color: #ffffff;
	box-shadow: inset 0 0 0 2px #99f6e4;
}

.cro-gtf-sr-only {
	position: absolute !important;
	inline-size: 1px !important;
	block-size: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	border: 0 !important;
}