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

.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 {
	--pseudo-color: var(--slate);
	--text-color: var(--slate);
	display: inline-block;
	padding: var(--space-2) 25px var(--space-2) var(--space-5);
	font-size: var(--text-base);
	font-weight: unset;
	color: var(--text-color);
	text-decoration: none;
	background-color: transparent;
	border: 2px solid var(--pseudo-color);
	text-transform: uppercase;
	font-family: var(--font-display);
	position: relative;
	transition: color var(--transition-appendix-1);
	z-index: 1;
}

.custom-button .button-link:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	background-color: var(--pseudo-color);
	z-index: -1;
	opacity: 0;
	transition: opacity var(--transition-appendix-1);
}
.custom-button .button-link:after {
	content: '';
	position: absolute;
	top: 0;
	bottom: -1px;
	right: -1px;
	width: 26px;
	pointer-events: none;
	background-color: var(--pseudo-color);
	clip-path: polygon(100% 0, 24% 100%, 100% 100%);
	transition: opacity var(--transition-appendix-1);
}

.custom-button[data-style='alternate'] .button-link {
	--pseudo-color: var(--burnt);
	--text-color: var(--burnt);
}
.custom-button[data-style='alternate-2'] .button-link {
	--pseudo-color: var(--burnt-light);
	--text-color: var(--burnt-light);
}
.custom-button[data-style='alternate-3'] .button-link {
	--pseudo-color: #fff;
	--text-color: #fff;
}

.custom-button[data-style='alternate-3'] .button-link:before {
	background-color: var(--slate);
}

@media (hover: hover) {
	.custom-button .button-link:hover {
		--text-color: #fff;
	}
	.custom-button .button-link:hover:before {
		opacity: 1;
	}
	.custom-button .button-link:hover:after {
		opacity: 0;
	}
}

.custom-button .button-link:focus {
	outline: var(--sw-focus-color) solid 1px;
	outline-offset: 2px;
}
