/* Environment switch (segmented pill) + sandbox banner. */

/*
 * The twelve Mercury design tokens these rules use, lifted from the design system's color-tokens.css and
 * resolved to literals (the source declares them through a base palette: --on-surfaces-warn was
 * var(--orange-400), and so on - the original chain is noted per line). Only the light theme is carried
 * over: the portal has no dark-mode support, so the source file's :root.dark block was unreachable. If
 * dark mode is ever added, take those overrides from the design system rather than inventing them.
 *
 * Names are kept identical to the design system so a future switch back to importing the full token file
 * is a delete of this block, with no change to the rules below.
 */
:root {
	--background-bg-positive: rgba(40, 133, 0, 1);        /* var(--green-500) */
	--background-bg-subtle: rgba(102, 102, 102, 0.1);
	--background-neutrals-white: rgba(255, 255, 255, 1);  /* var(--white) */
	--border-border-action: rgba(0, 102, 153, 1);         /* var(--cerulean-900) */
	--border-border-light: rgba(241, 243, 246, 1);        /* var(--gray-200) */
	--on-surfaces-body: rgba(59, 59, 59, 1);              /* var(--gray-800) */
	--on-surfaces-primary: rgba(36, 36, 36, 1);           /* var(--gray-900) */
	--on-surfaces-secondary: rgba(102, 102, 102, 1);      /* var(--gray-600) */
	--on-surfaces-warn: rgba(221, 120, 29, 1);            /* var(--orange-400) */
	--overlays-black-10: rgba(0, 0, 0, 0.1);
	--yellow-100: rgba(255, 237, 176, 1);
	--yellow-300: rgba(255, 215, 67, 1);
}

.env-toggle {
	display: inline-flex;
	padding: 2px;
	border-radius: 999px;
	background: var(--background-bg-subtle);
	border: 1px solid var(--border-border-light);
}

.env-toggle__seg {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 12px;
	border-radius: 999px;
	font-size: .8rem;
	font-weight: 600;
	white-space: nowrap;
	text-decoration: none;
	color: var(--on-surfaces-secondary);
}

.env-toggle__seg:hover {
	color: var(--on-surfaces-primary);
	text-decoration: none;
}

.env-toggle__seg:focus-visible {
	outline: 2px solid var(--border-border-action);
	outline-offset: 1px;
}

.env-toggle__seg.is-active {
	background: var(--background-neutrals-white);
	color: var(--on-surfaces-primary);
	box-shadow: 0 1px 2px var(--overlays-black-10);
}

/* Only the active segment shows a colored dot. */
.env-toggle__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: transparent;
}

.env-toggle__seg.is-active.env-prod .env-toggle__dot {
	background: var(--background-bg-positive);
}

.env-toggle__seg.is-active.env-sandbox .env-toggle__dot {
	background: var(--on-surfaces-warn);
}

.sandbox-banner {
	width: 100%;
	text-align: center;
	padding: 8px 16px;
	font-size: .85rem;
	color: var(--on-surfaces-body);
	background: var(--yellow-100);
	border-bottom: 1px solid var(--yellow-300);
}