/**
 * Theme switcher control (header).
 * Isolated from global checkbox styles in sitestyles.css.
 */

.header .theme-switch-item {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	align-self: center !important;
	flex: 0 0 auto !important;
	height: 2.5rem !important;
	margin: 0 0.55rem 0 0.2rem !important;
	padding: 0 !important;
	list-style: none;
	line-height: 0;
	vertical-align: middle;
}

.header .theme-switch {
	--ts-size: 15px;
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3em;
	height: 1.5em;
	font-size: var(--ts-size);
	line-height: 0;
	cursor: pointer;
	margin: 0;
	padding: 0;
	flex-shrink: 0;
	vertical-align: middle;
}

.header .theme-switch__icon {
	display: block;
	position: absolute;
	top: 0.375em;
	right: 0.375em;
	width: 0.75em;
	height: 0.75em;
	margin: 0;
	padding: 0;
	pointer-events: none;
	z-index: 2;
	transition: opacity 0.15s, transform 0.15s;
}

.header .theme-switch__icon polyline {
	transition: stroke-dashoffset 0.15s;
}

.header .theme-switch__icon--light,
.header .theme-switch__icon--light polyline {
	transition-delay: 0.15s;
}

.header .theme-switch__icon--dark {
	opacity: 0;
	transform: translateX(-0.75em) rotate(30deg) scale(0.75);
}

/* Beat global input[type=checkbox] rules from sitestyles.css */
.header input.theme-switch__input[type="checkbox"],
.header .theme-switch__input {
	display: block !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	position: relative !important;
	top: 0 !important;
	left: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	width: 3em !important;
	height: 1.5em !important;
	min-width: 3em !important;
	min-height: 1.5em !important;
	border: 0 !important;
	border-radius: 0.75em !important;
	background-color: hsl(210, 90%, 70%) !important;
	box-shadow: 0.125em 0.125em 0.25em hsla(223, 90%, 10%, 0.2) !important;
	outline: transparent !important;
	cursor: pointer !important;
	vertical-align: middle !important;
	-webkit-tap-highlight-color: transparent;
	transition: background-color 0.3s cubic-bezier(0.76, 0.05, 0.24, 0.95) !important;
}

.header input.theme-switch__input[type="checkbox"]:focus-visible {
	box-shadow:
		0 0 0 0.125em hsl(223, 90%, 50%),
		0.125em 0.125em 0.25em hsla(223, 90%, 10%, 0.2) !important;
}

.header input.theme-switch__input[type="checkbox"]::before,
.header input.theme-switch__input[type="checkbox"]::after,
.header input.theme-switch__input[type="checkbox"]:checked::before,
.header input.theme-switch__input[type="checkbox"]:checked::after {
	content: "" !important;
	display: block !important;
	position: absolute !important;
	box-sizing: border-box !important;
	border: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	z-index: auto !important;
	pointer-events: none !important;
	transform: none !important;
	transition: background-color 0.3s cubic-bezier(0.76, 0.05, 0.24, 0.95),
		transform 0.3s cubic-bezier(0.76, 0.05, 0.24, 0.95) !important;
}

.header input.theme-switch__input[type="checkbox"]::before {
	inset: 0 !important;
	left: 0 !important;
	top: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	width: auto !important;
	height: auto !important;
	border-radius: inherit !important;
	background-color: hsl(50, 90%, 50%) !important;
	mask-image: linear-gradient(120deg, #000 20%, transparent 80%) !important;
	-webkit-mask-image: linear-gradient(120deg, #000 20%, transparent 80%) !important;
}

.header input.theme-switch__input[type="checkbox"]::after {
	top: 0.125em !important;
	left: 0.125em !important;
	right: auto !important;
	bottom: auto !important;
	width: 1.25em !important;
	height: 1.25em !important;
	border-radius: 50% !important;
	background: #fff !important;
	background-color: #fff !important;
	box-shadow: 0.05em 0.05em 0.05em hsla(223, 90%, 10%, 0.1) !important;
	z-index: 1 !important;
}

.header input.theme-switch__input[type="checkbox"]:checked {
	background-color: hsl(290, 90%, 40%) !important;
}

.header input.theme-switch__input[type="checkbox"]:checked::before {
	background-color: hsl(220, 90%, 40%) !important;
	left: 0 !important;
	top: 0 !important;
	width: auto !important;
	height: auto !important;
	inset: 0 !important;
}

.header input.theme-switch__input[type="checkbox"]:checked::after {
	background: #000 !important;
	background-color: #000 !important;
	border: 0 !important;
	top: 0.125em !important;
	left: 0.125em !important;
	width: 1.25em !important;
	height: 1.25em !important;
	transform: translateX(1.5em) !important;
}

.header input.theme-switch__input[type="checkbox"]:checked ~ .theme-switch__icon--light,
.header input.theme-switch__input[type="checkbox"]:checked ~ .theme-switch__icon--light polyline {
	transition-delay: 0s;
}

.header input.theme-switch__input[type="checkbox"]:checked ~ .theme-switch__icon--light {
	opacity: 0;
	transform: translateX(-0.75em) rotate(-30deg) scale(0.75);
}

.header input.theme-switch__input[type="checkbox"]:checked ~ .theme-switch__icon--light polyline {
	stroke-dashoffset: 1.5;
}

.header input.theme-switch__input[type="checkbox"]:checked ~ .theme-switch__icon--dark {
	opacity: 1;
	transform: translateX(-1.5em);
	transition-delay: 0.15s;
}

.header .theme-switch__sr {
	overflow: hidden;
	position: absolute;
	width: 1px;
	height: 1px;
	clip: rect(0 0 0 0);
}