.custom-button {
	display: flex;
	margin-bottom: var(--space-10);

	@media (min-width: 64em) {
		& {
			margin-bottom: var(--space-12);
		}
	}
	.button-link {
		--button-color: var(--sw-button-primary-color);
		--button-bg: var(--sw-button-primary-bg);
		--button-hover-color: var(--sw-button-primary-color-hover);
		--button-hover-bg: var(--sw-button-primary-bg-hover);

		font-family: var(--font-body-bold);
		display: inline-block;
		padding: 9px 56px;
		font-size: var(--text-sm);
		font-weight: 400;
		color: var(--button-color);
		text-decoration: none;
		border-radius: var(--rounded-full);
		background-color: var(--button-bg);
		text-transform: uppercase;
		letter-spacing: var(--tracking-wider);
		border: 1px solid;
		text-align: center;
	}

	&[data-style='style-1'] .button-link {
		--button-bg: var(--sw-button-secondary-bg);
		--button-color: var(--sw-button-secondary-color);

		--button-hover-color: var(--sw-button-secondary-color-hover);
		--button-hover-bg: var(--sw-button-secondary-bg-hover);
	}

	&[data-style='style-2'] .button-link {
		--button-color: var(--brown);
		--button-bg: transparent;

		--button-hover-color: var(--white);
		--button-hover-bg: var(--blue-dark);
	}

	&[data-style='style-3'] .button-link {
		--button-color: var(--brown);
		--button-bg: var(--gray-light);

		--button-hover-color: var(--white);
		--button-hover-bg: var(--brown);
		border-color: transparent;
	}

	&[data-style='style-4'] .button-link {
		--button-color: var(--white);
		--button-bg: var(--orange);

		--button-hover-color: var(--orange);
		--button-hover-bg: transparent;
	}

	@media (hover: hover) {
		& .button-link:hover {
			color: var(--button-hover-color);
			background-color: var(--button-hover-bg);
		}
	}
}

.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 .button-link:focus-visible {
	outline: var(--sw-focus-color) solid 1px;
	outline-offset: 2px;
}