/*
All button-like components.

- .btn base class
- Variants (primary, secondary, danger)
- Sizes
- States (hover, focus, disabled)

Only buttons. Not links pretending to be buttons unless they share the same class. No layout positioning here.
*/

.btn {
	--btn-bg: var(--c-accent);
	--btn-fg: var(--c-accent-contrast);
	--btn-bd: transparent;

	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--s-2);

	padding: 0.6em 0.95em;
	border-radius: var(--r-1);
	border: var(--b-1) solid var(--btn-bd);
	background: var(--btn-bg);
	color: var(--btn-fg);
	font-weight: 600;
	cursor: pointer;

	transition:
		transform var(--dur-1) var(--ease),
		filter var(--dur-1) var(--ease),
		box-shadow var(--dur-1) var(--ease);
}

.btn:hover {
	filter: brightness(0.98);
}
.btn:active {
	transform: translateY(1px);
}

.btn:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring), var(--shadow-1);
}

.btn[disabled],
.btn[aria-disabled='true'] {
	opacity: 0.55;
	cursor: not-allowed;
}

.btn--ghost {
	--btn-bg: transparent;
	--btn-fg: var(--c-text);
	--btn-bd: var(--c-border);
}

.btn--danger {
	--btn-bg: var(--c-danger);
	--btn-fg: #fff;
}

.btn--sm {
	font-size: var(--fs-0);
}
.btn--lg {
	font-size: var(--fs-2);
}

/* Button group (simple) */
.btn-group {
	display: inline-flex;
	gap: var(--s-2);
}