/* Dark Light Toggle Studio - front-end */

/* ---------- shared ---------- */
.dlts-toggle {
	--dlts-track: #eef1f4;
	--dlts-track-border: #d3d9df;
	--dlts-ink: #5b6b73;
	--dlts-surface: #ffffff;
	--dlts-text: #1f2933;
}
[data-dlts-theme="dark"] .dlts-toggle {
	--dlts-track: #13282b;
	--dlts-track-border: #2b4b4d;
	--dlts-ink: #9bb3b3;
	--dlts-surface: #1b2227;
	--dlts-text: #e5e7eb;
}

.dlts-size-small  { --dlts-scale: .85; }
.dlts-size-medium { --dlts-scale: 1; }
.dlts-size-large  { --dlts-scale: 1.3; }

.dlts-toggle.dlts-toggle {
	all: unset;
	box-sizing: border-box;
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: calc(16px * var(--dlts-scale, 1));
	line-height: 1;
	vertical-align: middle;
	-webkit-tap-highlight-color: transparent;
}
.dlts-toggle *,
.dlts-toggle *::before,
.dlts-toggle *::after {
	box-sizing: border-box;
}
.dlts-toggle svg {
	display: block;
	flex: none;
	width: 1.15em;
	height: 1.15em;
}
.dlts-toggle .dlts-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.dlts-toggle.dlts-toggle:focus-visible,
.dlts-seg-btn.dlts-seg-btn:focus-visible {
	outline: 2px solid var(--dlts-accent, #2ca26a);
	outline-offset: 3px;
}

/* ---------- 1. pill (sun / moon) ---------- */
.dlts-style-pill.dlts-toggle {
	width: 5em;
	height: 2.6em;
	padding: .3em;
	border-radius: 999px;
	border: 1px solid var(--dlts-track-border);
	background: var(--dlts-track);
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, .08);
}
.dlts-style-pill .dlts-track {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: 100%;
}
.dlts-style-pill .dlts-thumb {
	position: absolute;
	left: 0;
	top: 50%;
	width: 2em;
	height: 2em;
	border-radius: 50%;
	background: var(--dlts-accent, #2ca26a);
	box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
	transform: translate(0, -50%);
	transition: transform .28s cubic-bezier(.4, 0, .2, 1);
}
[data-dlts-theme="dark"] .dlts-style-pill .dlts-thumb {
	transform: translate(calc(2.4em - 2px), -50%);
}
.dlts-style-pill .dlts-ico {
	position: relative;
	z-index: 1;
	width: 2em;
	height: 2em;
	color: var(--dlts-ink);
	transition: color .25s;
}
[data-dlts-theme="light"] .dlts-style-pill .dlts-ico-light,
[data-dlts-theme="dark"] .dlts-style-pill .dlts-ico-dark {
	color: #fff;
}
[data-dlts-theme="dark"] .dlts-style-pill .dlts-ico-dark svg path {
	fill: currentColor;
}

/* ---------- 2. slider ---------- */
.dlts-style-slider.dlts-toggle {
	width: 3.6em;
	height: 1.9em;
	padding: .2em;
	border-radius: 999px;
	background: #cbd5e1;
	transition: background-color .25s;
}
[data-dlts-theme="dark"] .dlts-style-slider.dlts-toggle {
	background: var(--dlts-accent, #2ca26a);
}
.dlts-style-slider .dlts-track {
	position: relative;
	width: 100%;
	height: 100%;
}
.dlts-style-slider .dlts-thumb {
	position: absolute;
	left: 0;
	top: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.5em;
	height: 1.5em;
	border-radius: 50%;
	background: #fff;
	color: #334155;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
	transform: translate(0, -50%);
	transition: transform .25s cubic-bezier(.4, 0, .2, 1);
}
[data-dlts-theme="dark"] .dlts-style-slider .dlts-thumb {
	transform: translate(1.7em, -50%);
}
.dlts-style-slider .dlts-thumb svg {
	width: .95em;
	height: .95em;
}
.dlts-style-slider .dlts-ico-dark,
[data-dlts-theme="dark"] .dlts-style-slider .dlts-ico-light {
	display: none;
}
[data-dlts-theme="dark"] .dlts-style-slider .dlts-ico-dark {
	display: inline-flex;
}

/* ---------- 3. round icon button ---------- */
.dlts-style-icon.dlts-toggle {
	width: 2.6em;
	height: 2.6em;
	border-radius: 50%;
	border: 1px solid var(--dlts-track-border);
	background: var(--dlts-surface);
	color: var(--dlts-text);
	transition: border-color .2s, color .2s, background-color .2s;
}
.dlts-style-icon.dlts-toggle:hover {
	border-color: var(--dlts-accent, #2ca26a);
	color: var(--dlts-accent, #2ca26a);
}

/* show the icon / label of the mode you will switch TO */
[data-dlts-theme="light"] :is(.dlts-style-icon, .dlts-style-button) :is(.dlts-ico-light, .dlts-label-light),
[data-dlts-theme="dark"] :is(.dlts-style-icon, .dlts-style-button) :is(.dlts-ico-dark, .dlts-label-dark) {
	display: none;
}

/* ---------- 4. button with label ---------- */
.dlts-style-button.dlts-toggle {
	gap: .55em;
	padding: .7em 1.15em;
	border-radius: 999px;
	border: 1px solid var(--dlts-track-border);
	background: var(--dlts-surface);
	color: var(--dlts-text);
	font-weight: 600;
	white-space: nowrap;
	transition: border-color .2s, color .2s, background-color .2s;
}
.dlts-style-button.dlts-toggle:hover {
	border-color: var(--dlts-accent, #2ca26a);
	color: var(--dlts-accent, #2ca26a);
}

/* ---------- 5. segmented ---------- */
.dlts-style-segmented.dlts-toggle {
	gap: .2em;
	padding: .25em;
	border-radius: 999px;
	border: 1px solid var(--dlts-track-border);
	background: var(--dlts-track);
	cursor: default;
}
.dlts-seg-btn.dlts-seg-btn {
	all: unset;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	gap: .45em;
	padding: .55em 1em;
	border-radius: 999px;
	cursor: pointer;
	color: var(--dlts-ink);
	font-size: .875em;
	font-weight: 600;
	line-height: 1;
	transition: background-color .25s, color .25s;
}
[data-dlts-theme="light"] .dlts-seg-btn[data-dlts-set="light"],
[data-dlts-theme="dark"] .dlts-seg-btn[data-dlts-set="dark"] {
	background: var(--dlts-accent, #2ca26a);
	color: #fff;
}

/* ---------- floating wrapper ---------- */
.dlts-floating {
	position: fixed;
	z-index: 99999;
}
.dlts-pos-bottom-right { right: 20px; bottom: 20px; }
.dlts-pos-bottom-left  { left: 20px;  bottom: 20px; }
.dlts-pos-top-right    { right: 20px; top: 20px; }
.dlts-pos-top-left     { left: 20px;  top: 20px; }
body.admin-bar .dlts-pos-top-right,
body.admin-bar .dlts-pos-top-left {
	top: 52px;
}

/* ---------- smooth switch (class is added by JS for a moment) ---------- */
html.dlts-transition,
html.dlts-transition *,
html.dlts-transition *::before,
html.dlts-transition *::after {
	transition: background-color .3s ease, color .3s ease, border-color .3s ease, fill .3s ease, stroke .3s ease, transform .28s cubic-bezier(.4, 0, .2, 1) !important;
}

@media (prefers-reduced-motion: reduce) {
	.dlts-toggle *,
	.dlts-toggle.dlts-toggle,
	html.dlts-transition,
	html.dlts-transition * {
		transition: none !important;
	}
}

/* ---------- site logo (light / dark) ---------- */
html:not([data-dlts-theme="dark"]) .dlts-logo-dark {
	display: none !important;
}
html[data-dlts-theme="dark"] .dlts-logo-light {
	display: none !important;
}
.dlts-logo-swapped {
	height: auto;
}