/*
 * PureCSS.com
 * https://purecss.com/examples/dark-light-mode/
 * A theme switcher using a checkbox, CSS custom properties, and no JS.
 */

.demo-dark-light-mode .theme-check {
		display: none;
	}

.demo-dark-light-mode .theme-toggle {
		display: inline-flex;
		align-items: center;
		gap: .75rem;
		cursor: pointer;
		user-select: none;
		font-size: .95rem;
	}

.demo-dark-light-mode .theme-track {
		width: 52px;
		height: 28px;
		background: var(--orange);
		border-radius: 999px;
		position: relative;
		transition: background .3s;
	}

:is(.demo-dark-light-mode .theme-track)::before {
			content: "☀️";
			position: absolute;
			top: 50%;
			left: 5px;
			transform: translateY(-50%);
			font-size: .9rem;
			transition: opacity .3s;
		}

:is(.demo-dark-light-mode .theme-track)::after {
			content: "";
			position: absolute;
			top: 3px;
			left: 3px;
			width: 22px;
			height: 22px;
			background: var(--surface);
			border-radius: 50%;
			box-shadow: 0 1px 4px rgba(0,0,0,.2);
			transition: transform .3s;
		}

.demo-dark-light-mode .theme-check:checked + .theme-toggle .theme-track {
		background: var(--surface-2);
	}

.demo-dark-light-mode .theme-check:checked + .theme-toggle .theme-track::before {
		content: "🌙";
	}

.demo-dark-light-mode .theme-check:checked + .theme-toggle .theme-track::after {
		transform: translateX(24px);
	}

.demo-dark-light-mode .theme-preview {
		margin-top: 1.25rem;
		padding: 1.25rem;
		border-radius: 10px;
		background: var(--orange-dim);
		color: var(--text);
		border: 2px solid var(--orange);
		font-size: .9rem;
		transition: background .3s, color .3s, border-color .3s;
	}

.demo-dark-light-mode .theme-check:checked ~ .theme-preview {
		background: var(--surface);
		color: var(--accent-dim);
		border-color: var(--accent);
	}