/** @format */

.button {
	font-size: var(--fs-textstandard);
	width: fit-content;
	max-width: 100%;
	width: 400px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	text-align: center;
	transition: all 300ms ease;
	padding: calc(var(--universal-gap) / 2) var(--universal-gap);
	border: solid var(--color-white) 1px;
}

.button--primary {
	background-color: var(--color-black);
	color: var(--color-white);
	border-color: var(--color-white);
}

@media (pointer: fine) {
	.button--primary:hover {
		color: var(--color-orange-red);
		border-color: var(--color-orange-red);
	}
	.button--primary:active {
		background-color: var(--color-light-orange-red);
		opacity: 0.85;
		color: var(--color-orange-red);
		border-color: var(--color-orange-red);
	}
}

.button--primary:active {
	color: var(--color-orange-red);
	border-color: var(--color-orange-red);
}

.button--secondary {
	background-color: var(--color-highlight);
	color: var(--color-black);
}