/*
 * Theme toggle button: a 44px icon button. Moon while the light theme is on,
 * sun while dark is on (data-mode). The name says what a click does ("Switch to
 * light theme") and no pressed state is exposed.
 * In the header it sits on the dark bar, in the drawer on the panel.
 */
.dnews-theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--space-2, 8px);
	min-width: 44px;
	min-height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--on-chrome, #fff);
	cursor: pointer;
}

/* Until the script runs the button keeps its space but is not shown. */
.dnews-theme-toggle[data-pending] {
	visibility: hidden;
}

.dnews-theme-toggle:hover {
	color: var(--wp--preset--color--accent, #ff5641);
}

.dnews-theme-toggle__icon {
	display: inline-flex;
}

.dnews-theme-toggle__sun,
.dnews-theme-toggle[data-mode="dark"] .dnews-theme-toggle__moon {
	display: none;
}

.dnews-theme-toggle[data-mode="dark"] .dnews-theme-toggle__sun {
	display: block;
}

/* The text label is for the drawer only (visually hidden elsewhere). */
.dnews-theme-toggle__label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px; /* Exempt from the spacing scale: visually-hidden pattern. */
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.dnews-overlay .dnews-theme-toggle {
	justify-content: flex-start;
	color: var(--wp--preset--color--text-strong, #212121);
	font: inherit;
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-weight: var(--wp--custom--type--label--weight, 700);
}

.dnews-overlay .dnews-theme-toggle__label {
	position: static;
	width: auto;
	height: auto;
	margin: 0;
	clip-path: none;
}