/**
 * ToolAwesome Child — Buttons
 *
 * Consolidated button styles for all routes.
 * Resolves the padding mismatch between blog.css (8px 18px) and pages.css (12px 28px)
 * by introducing .ta-btn-sm as the compact variant and .ta-btn as the default.
 */

/* Base button */
.ta-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 28px;
	border: 0;
	border-radius: 8px;
	font-size: 0.8125rem;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--ta-transition), transform var(--ta-transition), color var(--ta-transition);
}

/* Small button (was blog.css .ta-btn) */
.ta-btn--sm {
	padding: 8px 18px;
	font-size: 0.8125rem;
}

.ta-btn--sm .ta-btn__icon {
	width: 14px;
	height: 14px;
}

/* Large button */
.ta-btn--lg {
	padding: 16px 32px;
	font-size: 1rem;
}

/* Full width */
.ta-btn--full {
	width: 100%;
}

/* Icon sizing */
.ta-btn__icon {
	width: 16px;
	height: 16px;
	vertical-align: middle;
	margin-left: 6px;
	flex-shrink: 0;
}

/* ─── Primary ─── */
.ta-btn--primary {
	background: var(--ta-gradient);
	color: var(--ta-on-accent);
}

.ta-btn--primary:hover {
	background: var(--ta-gradient);
	color: var(--ta-white);
	transform: translateY(-1px);
}

/* ─── Secondary ─── */
.ta-btn--secondary {
	background: var(--ta-secondary);
	color: var(--ta-white);
}

.ta-btn--secondary:hover {
	background: var(--ta-primary);
	color: var(--ta-white);
	transform: translateY(-1px);
}

/* ─── Outline ─── */
.ta-btn--outline {
	background: transparent;
	border: 1px solid var(--ta-primary);
	color: var(--ta-primary);
}

.ta-btn--outline:hover {
	background: var(--ta-primary-light);
	color: var(--ta-primary-hover);
}

/* ─── Ghost ─── */
.ta-btn--ghost {
	background: var(--ta-white);
	border: 1px solid var(--ta-primary);
	color: var(--ta-primary);
}

.ta-btn--ghost:hover {
	background: var(--ta-primary-light);
	color: var(--ta-primary-hover);
}

/* ─── Text-only ─── */
.ta-btn--text {
	background: transparent;
	border: none;
	color: var(--ta-primary);
	padding: 4px 8px;
}

.ta-btn--text:hover {
	color: var(--ta-primary-hover);
}

/* ─── Disabled ─── */
.ta-btn:disabled,
.ta-btn[disabled] {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none;
}

/* ─── Loading state ─── */
.ta-btn--loading {
	position: relative;
	color: transparent;
}

.ta-btn--loading::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 16px;
	height: 16px;
	margin-top: -8px;
	margin-left: -8px;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	animation: ta-spin 0.6s linear infinite;
}

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

/* Responsive */
@media (max-width: 768px) {
	.ta-btn {
		padding: 10px 22px;
		font-size: 0.8125rem;
	}
}