/* ==========================================================================
   BUILDERGRAPH — Reading Mode Switcher
   Color values for the POST content are applied by JS via setProperty().
   The pill itself uses --ng-bg / --ng-text (already on the wrapper) so it
   always contrasts correctly — no hardcoded colors, no mode-specific hacks.
   ========================================================================== */

/* --------------------------------------------------------------------------
   SWITCHER WIDGET PILL
   Uses --ng-bg and --ng-text from the parent wrapper so it always matches
   the current reading surface, whether color / light / dark.
   -------------------------------------------------------------------------- */

.bg-mode-switcher {
	display:       inline-flex;
	align-items:   center;
	gap:           2px;
	/* Tinted version of --ng-text so it sits naturally on --ng-bg */
	background:    rgba(128, 128, 128, 0.15);
	border-radius: 999px;
	padding:       3px;
	margin-top:    12px;
	position: fixed;
	top: 40px ;
	right: 60px;
}

/* Individual button — inherit text color from the scheme via --ng-text */
.bg-mode-btn {
	display:       inline-flex;
	align-items:   center;
	gap:           5px;
	margin: 0 !important;
	padding:       6px 12px;
	border:        none;
	border-radius: 999px;
	background:    transparent;
	/* Use --ng-text so label/icon always contrasts with the scheme bg */
	color:         var(--ng-text, #333);
	font-size:     12px;
	font-weight:   500;
	line-height:   1;
	cursor:        pointer;
	transition:    background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
	white-space:   nowrap;
	user-select:   none;
	-webkit-user-select: none;
}

.bg-mode-btn svg {
	flex-shrink: 0;
	display:     block;
}

/*
 * Active button: use --ng-bg as the chip background and --ng-text as text.
 * This inverts the relationship relative to the pill background, creating
 * a clear "selected" look without any hardcoded color.
 * A subtle border based on --ng-text ensures the chip is visible even when
 * --ng-bg and the pill background are close in lightness.
 */
.bg-mode-btn.is-active {
	background: var(--ng-bg, #fff);
	color:      var(--ng-text, #111);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2),
	            inset 0 0 0 1px rgba(128, 128, 128, 0.25);
}

/* Hover on inactive buttons */
.bg-mode-btn:not(.is-active):hover {
	background: rgba(128, 128, 128, 0.18);
}

/* Keyboard focus ring — uses --ng-link when available */
.bg-mode-btn:focus-visible {
	outline:        2px solid var(--ng-link, #4a90e2);
	outline-offset: 2px;
}

/* Collapse labels on very small screens */
@media (max-width: 480px) {
	.bg-mode-label {
		display: none;
	}
	.bg-mode-btn {
		padding: 7px 9px;
	}
}