/**
 * Button system. Scoped to .mavi-button so WooCommerce buttons keep Storefront behavior.
 */

.mavi-button {
	align-items: center;
	appearance: none;
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--mavi-radius-md);
	color: var(--mavi-color-text);
	cursor: pointer;
	display: inline-flex;
	font-family: var(--mavi-font-family);
	font-size: var(--mavi-font-size-button);
	font-weight: var(--mavi-font-weight-semibold);
	gap: var(--mavi-space-sm);
	justify-content: center;
	line-height: 1.2;
	min-height: var(--mavi-control-height);
	padding: 0.5rem 1rem;
	text-decoration: none;
	vertical-align: middle;
}

.mavi-button--primary {
	background: var(--mavi-color-accent);
	border-color: var(--mavi-color-accent);
	color: var(--mavi-color-on-accent);
}

.mavi-button--secondary {
	background: var(--mavi-color-surface);
	border-color: var(--mavi-color-border);
	color: var(--mavi-color-text);
}

.mavi-button--outline {
	background: transparent;
	border-color: var(--mavi-color-accent);
	color: var(--mavi-color-accent);
}

.mavi-button--ghost {
	background: transparent;
	border-color: transparent;
	color: var(--mavi-color-text);
	min-height: 2.25rem;
	padding-inline: 0.25rem;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

@media (hover: hover) {
	.mavi-button--primary:hover {
		background: var(--mavi-color-accent-hover);
		border-color: var(--mavi-color-accent-hover);
		color: var(--mavi-color-on-accent);
	}

	.mavi-button--secondary:hover,
	.mavi-button--outline:hover {
		background: var(--mavi-color-bg);
	}

	.mavi-button--ghost:hover {
		color: var(--mavi-color-accent-hover);
	}
}

.mavi-button:disabled,
.mavi-button[aria-disabled="true"] {
	cursor: not-allowed;
	opacity: 0.5;
	pointer-events: none;
}

.mavi-button.is-loading,
.mavi-button[aria-busy="true"] {
	cursor: wait;
}

.mavi-button.is-loading::after,
.mavi-button[aria-busy="true"]::after {
	border: 2px solid currentColor;
	border-radius: 50%;
	border-right-color: transparent;
	content: "";
	display: inline-block;
	height: 1em;
	width: 1em;
}

@media (prefers-reduced-motion: no-preference) {
	.mavi-button.is-loading::after,
	.mavi-button[aria-busy="true"]::after {
		animation: mavi-spin 0.7s linear infinite;
	}
}

@keyframes mavi-spin {
	to {
		transform: rotate(360deg);
	}
}