/**
 * Button component. Variants: primary, secondary, outline, ghost, danger.
 * Sizes: sm, md (default), lg. Styled only from CSS variables.
 */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--3xs);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	line-height: 1.2;
	padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--md);
	border-radius: var(--wp--custom--radius--md);
	border: 1px solid transparent;
	cursor: pointer;
	transition: background-color var(--wp--custom--transition--fast),
		border-color var(--wp--custom--transition--fast),
		color var(--wp--custom--transition--fast),
		box-shadow var(--wp--custom--transition--fast);
}

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

.btn--primary {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
}

.btn--primary:hover:not(:disabled) {
	background-color: var(--wp--preset--color--primary-dark);
}

.btn--secondary {
	background-color: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--white);
}

.btn--outline {
	background-color: transparent;
	border-color: var(--color-border);
	color: var(--color-fg);
}

.btn--outline:hover:not(:disabled) {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}

.btn--ghost {
	background-color: transparent;
	color: var(--wp--preset--color--primary);
}

.btn--ghost:hover:not(:disabled) {
	background-color: var(--color-surface);
}

.btn--danger {
	background-color: var(--wp--preset--color--danger);
	color: var(--wp--preset--color--white);
}

.btn--sm {
	font-size: var(--wp--preset--font-size--xs);
	padding: var(--wp--preset--spacing--3xs) var(--wp--preset--spacing--sm);
}

.btn--lg {
	font-size: var(--wp--preset--font-size--base);
	padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--lg);
}

.btn--block {
	display: flex;
	width: 100%;
}