/* Holy Albatross — binary inline/stack layout */
.ef-buttons {
	display: flex;
	flex-wrap: wrap;
	--btn-gap: var(--ef-gap-m);
	--btn-min-w: 150px;
	--btn-accent: var(--ef-color-primary);
	--btn-on-accent: var(--ef-color-white);
	--btn-accent-light: var(--ef-color-primary_light);
	gap: var(--btn-gap);
	--threshold: calc(var(--count) * var(--btn-min-w) + (var(--count) - 1) * var(--btn-gap));
}

.ef-buttons-item {
	flex-grow: 1;
	flex-basis: calc((var(--threshold) - 100%) * 999);
	min-width: min-content;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ef-gap-s);
	white-space: nowrap;
	padding: var(--ef-pad-m);
	border: var(--ef-border-s) solid transparent;
	border-radius: var(--ef-radius-m);
	font-size: 1rem;
	font-weight: var(--ef-weight-m);
	line-height: 1.5;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s;
	box-sizing: border-box;
}

.ef-buttons-item:focus-visible {
	outline: var(--ef-border-m) solid var(--btn-accent);
	outline-offset: var(--ef-border-m);
}

/* Primary — filled with accent */
.ef-buttons .ef-buttons-item--primary {
	background-color: var(--btn-accent);
	color: var(--btn-on-accent);
}

/* Secondary — outlined with accent */
.ef-buttons .ef-buttons-item--secondary {
	border-color: var(--btn-accent);
	color: var(--btn-accent);
}

/* Ghost — text only */
.ef-buttons .ef-buttons-item--ghost {
	color: var(--btn-accent);
}

.ef-buttons .ef-buttons-item--ghost:hover {
	background-color: var(--btn-accent-light);
}

/* Reset native button appearance */
button.ef-buttons-item {
	appearance: none;
	background: none;
	font: inherit;
}