/* axismundi/theme-switcher
 *
 * M3 visual treatment, consuming the Axismundi theme's design tokens
 * (--md-sys-color-*, --md-sys-state-*). Each token carries an M3 baseline
 * fallback so the control degrades gracefully under a non-Axismundi theme.
 *
 * - is-style-theme-cycle  -> a single M3 STANDARD icon button (the header default).
 * - default (3 buttons)   -> an M3 segmented control (styled in a later pass).
 */

.wp-block-axismundi-theme-switcher {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}

.wp-block-axismundi-theme-switcher .axismundi-theme-switcher__button {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
}

/* The Material Symbols rendering contract (1em box, overflow clip, ligatures,
 * axes, user-select) is owned by the Axismundi theme's icons.css; the switcher
 * inherits it and only chooses the icon name (render.php) and the per-style
 * font-size (below). notranslate / translate="no" / draggable="false" live on
 * the markup since CSS cannot express them. */

/* ----------------------------------------------------------------------------
 * Cycle button = M3 standard icon button (40x40, transparent, on-surface-variant).
 * State layer (hover/focus/pressed), keyboard-only focus ring, and the pressed
 * shape morph mirror the theme's .wp-element-button contract.
 * -------------------------------------------------------------------------- */
.wp-block-axismundi-theme-switcher.is-style-theme-cycle .axismundi-theme-switcher__button {
	box-sizing: border-box;
	inline-size: 40px;
	block-size: 40px;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 9999px;
	background-color: transparent;
	color: var(--md-sys-color-on-surface-variant, #49454f);
	cursor: pointer;
	transition:
		border-radius var(--md-sys-motion-duration-short3, 150ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)),
		background-color var(--md-sys-motion-duration-short3, 150ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
}
.wp-block-axismundi-theme-switcher.is-style-theme-cycle .axismundi-theme-switcher__button .material-symbols-outlined {
	font-size: 24px;
}
.wp-block-axismundi-theme-switcher.is-style-theme-cycle .axismundi-theme-switcher__button:hover .material-symbols-outlined,
.wp-block-axismundi-theme-switcher.is-style-theme-cycle .axismundi-theme-switcher__button:focus-visible .material-symbols-outlined,
.wp-block-axismundi-theme-switcher.is-style-theme-cycle .axismundi-theme-switcher__button:active .material-symbols-outlined {
	--md-icon-fill: 1;
}
.wp-block-axismundi-theme-switcher.is-style-theme-cycle .axismundi-theme-switcher__button:hover {
	background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant, #49454f) calc(var(--md-sys-state-hover-state-layer-opacity, 0.08) * 100%), transparent);
}
.wp-block-axismundi-theme-switcher.is-style-theme-cycle .axismundi-theme-switcher__button:focus {
	background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant, #49454f) calc(var(--md-sys-state-focus-state-layer-opacity, 0.1) * 100%), transparent);
}
.wp-block-axismundi-theme-switcher.is-style-theme-cycle .axismundi-theme-switcher__button:active {
	background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant, #49454f) calc(var(--md-sys-state-pressed-state-layer-opacity, 0.1) * 100%), transparent);
	border-radius: 8px;
}
.wp-block-axismundi-theme-switcher.is-style-theme-cycle .axismundi-theme-switcher__button:focus-visible {
	outline: 3px solid var(--md-sys-color-secondary, #625b71);
	outline-offset: 2px;
}
.wp-block-axismundi-theme-switcher.is-style-theme-cycle .axismundi-theme-switcher__button:focus:not(:focus-visible) {
	outline: none;
}
@media (prefers-reduced-motion: reduce) {
	.wp-block-axismundi-theme-switcher.is-style-theme-cycle .axismundi-theme-switcher__button {
		transition: none;
	}
}

.wp-block-axismundi-theme-switcher.is-style-theme-cycle .axismundi-theme-switcher__label,
.wp-block-axismundi-theme-switcher.is-style-theme-cycle .screen-reader-text {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ----------------------------------------------------------------------------
 * Default (no is-style-theme-cycle) = M3 segmented button control.
 * The three mode buttons (.wp-element-button) become a single connected,
 * outlined control; the active mode (aria-pressed=true) is the selected
 * segment. Plugin selectors (0,3,0) out-specify the theme's filled
 * .wp-element-button base (:where 0,1,0), incl. its pressed-radius morph.
 * -------------------------------------------------------------------------- */
.wp-block-axismundi-theme-switcher:not(.is-style-theme-cycle) {
	gap: 0;
	inline-size: fit-content;
	max-inline-size: 100%;
	border: 1px solid var(--md-sys-color-outline, #79747e);
	border-radius: 9999px;
}
.wp-block-axismundi-theme-switcher:not(.is-style-theme-cycle) .axismundi-theme-switcher__button {
	box-sizing: border-box;
	min-block-size: 40px;
	margin: 0;
	border: 0;
	border-radius: 0;
	padding-block: 0;
	padding-inline: 16px;
	gap: 0.4rem;
	justify-content: center;
	background-color: transparent;
	color: var(--md-sys-color-on-surface-variant, #49454f);
	font-size: 14px;
	line-height: 20px;
	font-weight: 500;
	letter-spacing: 0.1px;
	cursor: pointer;
	transition: background-color var(--md-sys-motion-duration-short3, 150ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
}
.wp-block-axismundi-theme-switcher:not(.is-style-theme-cycle) .axismundi-theme-switcher__button .material-symbols-outlined {
	font-size: 18px;
}
.wp-block-axismundi-theme-switcher:not(.is-style-theme-cycle) .axismundi-theme-switcher__button[aria-pressed="true"] .material-symbols-outlined {
	--md-icon-fill: 1;
}
.wp-block-axismundi-theme-switcher:not(.is-style-theme-cycle) .axismundi-theme-switcher__button + .axismundi-theme-switcher__button {
	border-inline-start: 1px solid var(--md-sys-color-outline, #79747e);
}
.wp-block-axismundi-theme-switcher:not(.is-style-theme-cycle) .axismundi-theme-switcher__button:first-child {
	border-start-start-radius: 9999px;
	border-end-start-radius: 9999px;
}
.wp-block-axismundi-theme-switcher:not(.is-style-theme-cycle) .axismundi-theme-switcher__button:last-child {
	border-start-end-radius: 9999px;
	border-end-end-radius: 9999px;
}
.wp-block-axismundi-theme-switcher:not(.is-style-theme-cycle) .axismundi-theme-switcher__button:hover {
	background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant, #49454f) calc(var(--md-sys-state-hover-state-layer-opacity, 0.08) * 100%), transparent);
}
.wp-block-axismundi-theme-switcher:not(.is-style-theme-cycle) .axismundi-theme-switcher__button:active {
	background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant, #49454f) calc(var(--md-sys-state-pressed-state-layer-opacity, 0.1) * 100%), transparent);
}
.wp-block-axismundi-theme-switcher:not(.is-style-theme-cycle) .axismundi-theme-switcher__button[aria-pressed="true"] {
	background-color: var(--md-sys-color-secondary-container, #e8def8);
	color: var(--md-sys-color-on-secondary-container, #1d192b);
}
.wp-block-axismundi-theme-switcher:not(.is-style-theme-cycle) .axismundi-theme-switcher__button[aria-pressed="true"]:hover {
	background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container, #1d192b) calc(var(--md-sys-state-hover-state-layer-opacity, 0.08) * 100%), var(--md-sys-color-secondary-container, #e8def8));
}
.wp-block-axismundi-theme-switcher:not(.is-style-theme-cycle) .axismundi-theme-switcher__button[aria-pressed="true"]:active {
	background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container, #1d192b) calc(var(--md-sys-state-pressed-state-layer-opacity, 0.1) * 100%), var(--md-sys-color-secondary-container, #e8def8));
}
.wp-block-axismundi-theme-switcher:not(.is-style-theme-cycle) .axismundi-theme-switcher__button:focus-visible {
	outline: 3px solid var(--md-sys-color-secondary, #625b71);
	outline-offset: -3px;
}
.wp-block-axismundi-theme-switcher:not(.is-style-theme-cycle) .axismundi-theme-switcher__button:focus:not(:focus-visible) {
	outline: none;
}
@media (prefers-reduced-motion: reduce) {
	.wp-block-axismundi-theme-switcher:not(.is-style-theme-cycle) .axismundi-theme-switcher__button {
		transition: none;
	}
}