/* Buttons */
.btn {
	display: inline-block;
	padding: 0.75rem 1.5rem;
	border: none;
	cursor: pointer;
	font-weight: 600;
	text-decoration: none;
	text-align: center;
	transition: color 0.25s ease,
		background-color 0.25s ease,
		text-decoration-color 0.25s ease;
	text-decoration-line: underline;
	text-decoration-color: transparent;
	border-radius: 3px;
}

.btn:hover {
	text-decoration-color: currentColor;
}

.btn-primary {
	background: var(--accent);
	color: var(--primary-text);
	transition: color 0.25s ease,
		background-color 0.25s ease,
		text-decoration-color 0.25s ease;
	text-decoration-line: underline;
	text-decoration-color: transparent;
}

.btn-primary:hover {
	background: color-mix(in hsl, var(--accent) 90%, black 10%);
	color: var(--primary-text);
	text-decoration-color: currentColor;
}

.btn-secondary {
	background: var(--secondary-btn);
	color: var(--secondary-text);
	transition: color 0.25s ease,
		background-color 0.25s ease,
		text-decoration-color 0.25s ease;
	text-decoration-line: underline;
	text-decoration-color: transparent;
}

.btn-secondary:hover {
	background: var(--secondary-btn);
	color: color-mix(in hsl, var(--tertiary-text) 90%, black 10%);
	transition: color 0.25s ease-in-out;
	text-decoration-color: currentColor;
}

.card-primary {
	background: var(--accent);
	padding: 1rem;
	border-radius: 3px;
}

.card-secondary {
	background: var(--section-primary);
	padding: 1rem;
	border-radius: 3px;
}

.card-tertiary {
	background: var(--section-light);
	color: var(--dark-secondary-text);
	padding: 1rem;
	border-radius: 3px;
}

.visually-hidden {
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.error {
	margin-top: .5rem;
}