/******/
/*** BUTTONS ***/
/******/

.button-container {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	gap: var(--gap-12);
}

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 3rem;
	padding: 0.55rem 1rem 0.48rem;
	border: clamp(0.2rem, 0.45vw, 0.45rem) solid currentColor;
	border-radius: 0.55rem;
	font-family: var(--font-display);
	font-size: clamp(0.9rem, 1.5vw, 1.2rem);
	line-height: 1;
	text-align: center;
	text-decoration: none;
	transition: transform 180ms var(--ease-out), background-color 180ms ease, color 180ms ease;
}

.button:hover {
	transform: translateY(-0.15rem);
}

.button.red {
	border-color: var(--color-red);
	background: var(--color-red);
	color: var(--color-cream);
}

.button.blue {
	border-color: var(--color-blue);
	background: var(--color-blue);
	color: var(--color-cream);
}

.button.dark {
	border-color: var(--color-black);
	background: var(--color-black);
	color: var(--color-cream);
}

.button.outline-dark,
.button.nav-order {
	border-color: var(--color-black);
	background: transparent;
	color: var(--color-black);
}

.button.outline-light {
	border-color: var(--color-cream);
	background: transparent;
	color: var(--color-cream);
}

.button.text {
	min-height: auto;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	text-decoration: underline;
}

.button.small {
	min-height: 2.5rem;
	padding: 0.4rem 0.8rem 0.35rem;
	border-width: 0.2rem;
	font-size: 0.95rem;
}

@media (max-width: 47.999rem) {
	.button-container { gap: 0.55rem; }
	.button { min-height: 2.8rem; border-width: 0.2rem; }
}