/*
 * Shared segmented control for the public SierraMet blocks.
 *
 * The variables deliberately resolve to a stable SierraMet blue instead of
 * currentColor: the active option must retain contrast even when a theme
 * changes the surrounding text colour.
 */
.sierramet-segmented-control {
	display: inline-flex;
	max-width: 100%;
}

.sierramet-segmented-control__button {
	min-height: 2.5rem;
	padding: 0.42rem 0.8rem;
	color: var(--sierramet-segmented-inactive-text, var(--sierramet-color-text, currentColor));
	font: inherit;
	font-size: 0.86em;
	font-weight: 650;
	background: var(--sierramet-segmented-surface, var(--sierramet-card-background, transparent));
	border: 1px solid var(--sierramet-segmented-border, var(--sierramet-color-border, currentColor));
	border-inline-start-width: 0;
	cursor: pointer;
	transition: background-color var(--sierramet-motion-duration, 120ms) ease, color var(--sierramet-motion-duration, 120ms) ease;
}

.sierramet-segmented-control__button:first-child {
	border-inline-start-width: 1px;
	border-radius: 0.45rem 0 0 0.45rem;
}

.sierramet-segmented-control__button:last-child {
	border-radius: 0 0.45rem 0.45rem 0;
}

.sierramet-segmented-control__button:is([aria-pressed="true"], [aria-selected="true"], .is-active) {
	position: relative;
	color: var(--sierramet-segmented-active-text, #fff);
	background: var(--sierramet-segmented-active-background, var(--sierramet-color-primary, #0057a8));
	border-color: var(--sierramet-segmented-active-background, var(--sierramet-color-primary, #0057a8));
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.sierramet-segmented-control__button:focus-visible {
	position: relative;
	z-index: 1;
	outline: 3px solid var(--sierramet-segmented-active-background, var(--sierramet-color-primary, #0057a8));
	outline-offset: 2px;
}

@media (max-width: 30rem) {
	.sierramet-segmented-control {
		display: flex;
		width: 100%;
	}

	.sierramet-segmented-control__button {
		flex: 1 1 0;
		min-width: 0;
		padding-inline: 0.55rem;
		white-space: nowrap;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sierramet-segmented-control__button {
		transition: none;
	}
}