/*
 * ExploreGod pill-button component, ported from corporate-eg src/global/buttons.scss.
 * Applies to any element (button/input/a) carrying the .button class.
 * templates/omhelpdesk/base.twig's `a.button` legacy selector shares these tokens (see globals.css).
 */
.button {
	--button-background: var(--color-primary);
	--button-color: var(--color-light-intense);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	height: 2.5em;
	padding: 1.45em 1.25em;
	background-color: var(--button-background);
	color: var(--button-color);
	border: var(--border-width) solid var(--button-background);
	border-radius: var(--border-radius);
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
	font-family: var(--font-sans);
	font-size: clamp(0.9rem, 0.804rem + 0.429vw, 1.125rem);
	font-weight: 600;
	line-height: 1;
	transition: background-color 150ms, border-color 150ms;
}

.button:where(:hover, :focus) {
	--button-background: var(--color-primary-intense);
	color: var(--button-color);
}

.button[disabled] {
	filter: saturate(0);
	pointer-events: none;
	cursor: not-allowed;
}

.button-white {
	--button-background: var(--color-light-intense);
	--button-color: var(--color-navy);
}
.button-white:where(:hover, :focus) {
	--button-background: var(--color-gray);
	--button-color: var(--color-navy);
}

.button-navy {
	--button-background: var(--color-navy);
}
.button-navy:where(:hover, :focus) {
	--button-background: var(--color-navy-light);
}

.button-outline {
	--button-background: transparent;
	--button-color: var(--color-navy);
	border-color: currentColor;
}
.button-outline:where(:hover, :focus) {
	--button-color: var(--color-link-hover);
}

.button-group {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: var(--space-2) 0;
}