/**
 * Buttons — BEM component
 *
 * @package Svaros_Partneriai
 */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-space-2);
	padding: var(--sp-space-3) var(--sp-space-6);
	font-family: var(--sp-font-family);
	font-size: var(--sp-text-base);
	font-weight: var(--sp-font-semibold);
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
	border: 2px solid transparent;
	border-radius: 100px;
	cursor: pointer;
	transition: all var(--sp-transition-fast);
	white-space: nowrap;
	user-select: none;
	background-color: var(--sp-color-secondary);
	color: var(--sp-color-white);
	border-color: var(--sp-color-secondary);
}

.btn:hover {
	background-color: var(--sp-color-primary);
	color: var(--sp-color-white);
	border-color: var(--sp-color-primary);
}

.btn:focus-visible {
	outline: 3px solid var(--sp-color-primary-light);
	outline-offset: 2px;
}

.btn:disabled,
.btn--disabled {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}

/* Primary */
.btn--primary {
	background-color: var(--sp-color-primary);
	color: var(--sp-color-white);
	border-color: var(--sp-color-primary);
}

.btn--primary:hover {
	background-color: var(--sp-color-primary-dark);
	border-color: var(--sp-color-primary-dark);
}

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

.btn--secondary:hover {
	background-color: var(--sp-color-secondary-dark);
	border-color: var(--sp-color-secondary-dark);
}

/* Accent */
.btn--accent {
	background-color: var(--sp-color-accent);
	color: var(--sp-color-white);
	border-color: var(--sp-color-accent);
}

.btn--accent:hover {
	background-color: var(--sp-color-accent-dark);
	border-color: var(--sp-color-accent-dark);
}

/* Outline */
.btn--outline {
	background-color: transparent;
	color: var(--sp-color-primary);
	border-color: var(--sp-color-primary);
}

.btn--outline:hover {
	background-color: var(--sp-color-primary);
	color: var(--sp-color-white);
}

/* Ghost */
.btn--ghost {
	background-color: transparent;
	color: var(--sp-color-primary);
	border-color: transparent;
}

.btn--ghost:hover {
	background-color: var(--sp-color-primary-bg);
}

/* Sizes */
.btn--sm {
	padding: var(--sp-space-2) var(--sp-space-4);
	font-size: var(--sp-text-sm);
}

.btn--lg {
	padding: var(--sp-space-4) var(--sp-space-8);
	font-size: var(--sp-text-lg);
}

.btn--full {
	width: 100%;
}

/* Button with icon */
.btn svg {
	width: 1em;
	height: 1em;
	flex-shrink: 0;
}

/* Loading state */
.btn--loading {
	position: relative;
	color: transparent;
	pointer-events: none;
}

.btn--loading::after {
	content: '';
	position: absolute;
	width: 1.25em;
	height: 1.25em;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: sp-spin 0.6s linear infinite;
	color: var(--sp-color-white);
}

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