/* Toggle component: a pill segmented control (2026 refresh); icon-only when compact. */
.wp-block-palletways-color-mode-toggle {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 2px;
	border: 1.5px solid var(--wp--preset--color--surface-inverse);
	border-radius: var(--wp--custom--radius--pill, 999px);
	background-color: var(--wp--preset--color--surface);

	& .pw-toggle__option {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: var(--wp--custom--spacing--comp-x-xs, 4px);
		margin: 0;
		padding: 4px 12px;
		border: 0;
		border-radius: var(--wp--custom--radius--pill, 999px);
		background: none;
		color: var(--wp--preset--color--text-primary);
		font: inherit;
		font-size: var(--wp--preset--font-size--small);
		font-weight: 700;
		line-height: 1.28571;
		cursor: pointer;
		transition:
			background-color 0.15s,
			border-color 0.15s,
			color 0.15s;

		&:hover:not(.is-selected) {
			background-color: var(--wp--preset--color--surface-natural);
		}

		&.is-selected {
			background-color: var(--wp--preset--color--surface-inverse);
			color: var(--wp--preset--color--text-inverse);
		}
	}

	& .pw-toggle__icon {
		width: var(--wp--custom--icon-size--sm, 16px);
		height: var(--wp--custom--icon-size--sm, 16px);
		background-color: currentColor;
		mask: url("../../assets/icons/sun.svg") center / contain no-repeat;
	}

	& .pw-toggle__option--dark .pw-toggle__icon {
		mask-image: url("../../assets/icons/moon.svg");
	}

	&.is-compact .pw-toggle__label {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
	}
}

/* Sticky header once scrolled: the tiny (icon-only) toggle, as in HeaderNavigation. */
.is-scrolled .pw-site-header .wp-block-palletways-color-mode-toggle .pw-toggle__label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

/* Labels only while they show (wide header, not scrolled, or in the drawer);
   the icons stand in whenever the labels are hidden. */
@media (min-width: 1280px) {
	.wp-block-palletways-color-mode-toggle:not(.is-compact):not(.is-scrolled *) .pw-toggle__icon {
		display: none;
	}
}

.pw-drawer .wp-block-palletways-color-mode-toggle:not(.is-compact) .pw-toggle__icon {
	display: none;
}

/* -------------------------------------------------------------------------
 * Floating switcher (variant "floating"): a small round button at the right
 * edge of every page; it opens Light / Dark / System beside it. The theme
 * adds it next to the header (inc/design-system.php), so the older inline
 * toggles in the header and drawer are hidden.
 * ---------------------------------------------------------------------- */
.pw-site-header .wp-block-palletways-color-mode-toggle:not(.is-floating),
.pw-drawer .wp-block-palletways-color-mode-toggle:not(.is-floating) {
	display: none !important;
}

.wp-block-palletways-color-mode-toggle.is-floating {
	position: fixed;
	top: 50%;
	right: 12px;
	z-index: 60;
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	gap: 8px;
	padding: 0;
	border: 0;
	background: none;
	transform: translateY(-50%);

	& .pw-mode-fab {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		margin: 0;
		padding: 0;
		border: 1px solid light-dark(rgb(255 255 255 / 0.9), rgb(255 255 255 / 0.18));
		border-radius: 999px;
		background: light-dark(rgb(255 255 255 / 0.7), rgb(34 46 108 / 0.7));
		color: var(--wp--preset--color--text-primary);
		box-shadow: 0 6px 20px light-dark(rgb(12 31 107 / 0.14), rgb(0 0 0 / 0.35));
		-webkit-backdrop-filter: blur(14px) saturate(160%);
		backdrop-filter: blur(14px) saturate(160%);
		cursor: pointer;
		opacity: 0.85;
		transition: opacity 0.2s, transform 0.2s;

		&:hover,
		&[aria-expanded="true"] {
			opacity: 1;
			transform: scale(1.05);
		}
	}

	& .pw-mode-fab__icon,
	& .pw-mode-menu__icon {
		width: 18px;
		height: 18px;
		background-color: currentColor;
		mask: url("../../assets/icons/monitor.svg") center / contain no-repeat;
	}

	& .pw-mode-fab[data-choice="light"] .pw-mode-fab__icon,
	& .pw-mode-menu__option--light .pw-mode-menu__icon {
		mask-image: url("../../assets/icons/sun.svg");
	}

	& .pw-mode-fab[data-choice="dark"] .pw-mode-fab__icon,
	& .pw-mode-menu__option--dark .pw-mode-menu__icon {
		mask-image: url("../../assets/icons/moon.svg");
	}

	& .pw-mode-menu {
		display: flex;
		gap: 2px;
		padding: 4px;
		border: 1px solid light-dark(rgb(255 255 255 / 0.9), rgb(255 255 255 / 0.18));
		border-radius: 999px;
		background: light-dark(rgb(255 255 255 / 0.82), rgb(34 46 108 / 0.85));
		box-shadow: 0 8px 28px light-dark(rgb(12 31 107 / 0.16), rgb(0 0 0 / 0.4));
		-webkit-backdrop-filter: blur(16px) saturate(160%);
		backdrop-filter: blur(16px) saturate(160%);
		opacity: 0;
		visibility: hidden;
		transform: translateX(8px);
		transition: opacity 0.18s, transform 0.18s, visibility 0s linear 0.18s;
	}

	&.is-open .pw-mode-menu {
		opacity: 1;
		visibility: visible;
		transform: none;
		transition: opacity 0.18s, transform 0.18s;
	}

	& .pw-mode-menu__option {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		margin: 0;
		padding: 6px 12px;
		border: 0;
		border-radius: 999px;
		background: none;
		color: var(--wp--preset--color--text-primary);
		font: inherit;
		font-size: var(--wp--preset--font-size--small);
		font-weight: 700;
		white-space: nowrap;
		cursor: pointer;

		&:hover:not(.is-selected) {
			background: light-dark(rgb(12 31 107 / 0.06), rgb(255 255 255 / 0.08));
		}

		&.is-selected {
			background: var(--wp--preset--color--surface-inverse);
			color: var(--wp--preset--color--text-inverse);
		}
	}

	@media (max-width: 600px) {
		top: auto;
		bottom: 88px;
		transform: none;
	}
}

.editor-styles-wrapper .wp-block-palletways-color-mode-toggle.is-floating {
	position: static;
	transform: none;
}