.btn-cta {
	&,
	&:link,
	&:visited {
		display: inline-block;

		padding: 1.6rem 2.4rem;

		color: $color-white;
		font-family: $font-family-headings;
		font-size: $font-size-larger;

		background-color: $color-primary-regular;
		border-radius: 24px;
		box-shadow: $shadow-color;
		transition: all 0.16s ease-out;
	}

	&--alt,
	&--alt:link,
	&--alt:visited {
		padding: 1.2rem 1.8rem;

		border-radius: 9px;
	}

	&:hover {
		background-color: $color-primary-light;
		transform: translateY(-6px);
		box-shadow: $text-shadow-color-distracted;
	}
}

.btn-text {
	&,
	&:link,
	&:visited {
		@include flex(1.8rem, initial, center);

		width: max-content;

		padding: 1.2rem 2rem;

		color: $color-primary-regular;
		font-family: $font-family-headings;
		font-weight: 600;

		background-color: transparent;

		border-bottom: 3px solid $color-primary-regular;
		filter: drop-shadow($shadow-color);
		transition: $transition-regular;
		cursor: pointer;
	}

	&:hover {
		color: $color-white;

		background-color: $color-primary-regular;
		transform: translateY(-3px);
	}
}
