.btn {
	display: inline-flex;
	font-size: 1rem;
	font-weight: bold;
	cursor: pointer;
	border-radius: 0.5rem;
	height: 50px;
	align-items: center;
	justify-items: center;

	transition: all 0.3s ease;

	&:disabled {
		cursor: default;
		pointer-events: none;
		opacity: 0.5;
	}
}

.btn-large {
	font-size: 1.25rem;
	padding: 1rem 4rem;
	border-radius: 1.5rem;
	height: auto;
}

.btn-primary {
	background-color: var(--accent);
	color: var(--bg-base);

	&:hover {
		background-color: var(--bg-base);
		color: var(--accent);
	}
}

.btn-secondary {
	background-color: var(--bg-base);
	color: var(--accent);
	border: 1px solid var(--accent);

	&:hover {
		background-color: var(--accent);
		color: var(--bg-base);
	}
}