/* Button UI Component */

.btn {
	padding: var(--space-sm) var(--space-lg);
	border: none;
	border-radius: var(--radius-sm);
	font-size: var(--font-size-base);
	font-weight: 500;
	font-family: var(--font-family-primary);
	cursor: pointer;
	background-color: var(--color-button);
	color: white;

	&:hover {
		background-color: var(--color-button-hover);
	}

	&:active {
		transform: translateY(1px);
	}

	&[disabled] {
		cursor: not-allowed;
		opacity: 0.5;
	}
}