/* ==========================================================================
   CTA Button — Global component
   ========================================================================== */

.cta-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 24px;
	min-height: 54px;
	font-family: var(--font-primary);
	font-size: var(--fs-body-5);
	font-weight: var(--fw-body-5);
	line-height: 1;
	letter-spacing: var(--ls-body-5);
	text-decoration: none;
	white-space: nowrap;
	border: 1px solid transparent;
	cursor: pointer;
	transition: opacity 0.15s ease;
}

.cta-btn:hover {
	opacity: 0.9;
}

/* Size modifiers
   ---------------------------------------- */

.cta-btn--lg {
	min-height: 62px;
}

/* Color modifiers
   ---------------------------------------- */

.cta-btn--accent {
	background-color: var(--color-accent);
	color: var(--color-white);
	border-color: var(--color-accent);
}

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

.cta-btn--outline {
	background-color: var(--color-cream);
	color: var(--color-black);
	border-color: var(--color-black);
}

.cta-btn--white {
	background-color: var(--color-white);
	color: var(--color-black);
	border-color: var(--color-white);
}

.cta-btn--outline-inverse {
	background-color: transparent;
	color: var(--color-white);
	border-color: var(--color-white);
}

.cta-btn--outline-cream {
	background-color: transparent;
	color: var(--color-cream);
	border-color: var(--color-cream);
}

.cta-btn--cream {
	background-color: var(--color-cream);
	color: var(--color-black);
	border-color: var(--color-cream);
}

/* Text modifier
   ---------------------------------------- */

.cta-btn--uppercase {
	text-transform: uppercase;
}

@media (max-width: 767px) {
	.cta-btn {
		padding-left: 11px;
		padding-right: 11px;
	}
}