.custom-button {
	--outline-color: var(--primary-color-500);
	--background-color: var(--primary-color-100);
	--background-color-hover: var(--primary-color-200);
	--text-color: var(--primary-color-900);

	display: flex;
	margin-bottom: var(--space-4);
}

.custom-button.align-left {
	justify-content: flex-start;
}

.custom-button.align-center {
	justify-content: center;
}

.custom-button.align-right {
	justify-content: flex-end;
}

.custom-button[data-style='alternate'] a {
	background-color: var(--primary-color-700);
	color: var(--gray-100);
}

.custom-button .button-link {
	--button-color: var(--green);
	display: inline-block;
	padding: var(--space-3) var(--space-6);
	font-family: var(--font-link);
	font-size: var(--text-base);
	font-weight: 600;
	color: var(--white);
	border-radius: var(--rounded-full);
	background-color: var(--button-color);
	text-transform: uppercase;
	transition: background-color var(--transition-appendix), color var(--transition-appendix);
}

@media (hover: hover) {
	.custom-button .button-link:hover {
		--button-color: var(--blue-dark);
		color: var(--green);
	}
}

.custom-button .button-link:focus {
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--green);
	outline: none;
}