.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	padding: 0.6rem 1.25rem;
	border-radius: var(--border-radius-md);
	font-size: 0.9375rem;
	font-weight: 500;
	border: none;
	cursor: pointer;
	transition:
		opacity var(--transition-fast),
		box-shadow var(--transition-fast);
	text-decoration: none;
	white-space: nowrap;
	line-height: 1;
}

.btn:active {
	opacity: 0.85;
}

.btn--primary {
	background: var(--color-text-success);
	color: #ffffff;
}
.btn--primary:hover {
	opacity: 0.9;
}

.btn--warning {
	background: var(--color-text-warning);
	color: #ffffff;
}
.btn--warning:hover {
	opacity: 0.9;
}

.btn--secondary {
	background: var(--color-background-secondary);
	color: var(--color-text-primary);
	border: 0.5px solid var(--color-border-tertiary);
}
.btn--secondary:hover {
	background: var(--color-background-tertiary);
}

.btn--ghost {
	background: transparent;
	color: var(--color-text-success);
	padding-left: 0;
	padding-right: 0;
}
.btn--ghost:hover {
	opacity: 0.7;
}

.btn--danger-ghost {
	background: transparent;
	color: var(--color-text-danger);
}
.btn--danger-ghost:hover {
	background: var(--color-background-danger);
}

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

.btn--lg {
	padding: 0.75rem 1.5rem;
	font-size: 1rem;
	border-radius: var(--border-radius-lg);
}

.btn--sm {
	padding: 0.35rem 0.75rem;
	font-size: 0.8125rem;
	border-radius: var(--border-radius-sm);
}