.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[data-style='alternate'] .button-link {
	background-color: var(--sw-button-secondary-bg);
	color: var(--sw-button-secondary-color);
	border: 3px solid;
	padding: 9px 5px;

	@media (min-width: 64em) {
		& {
			padding: 12px 17px;
		}
	}
}

.custom-button .button-link {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: var(--space-3) var(--space-2);
	color: var(--sw-collections-read-more-color);
	background-color: var(--sw-collections-read-more-bg);
	border-radius: var(--rounded-full);
	font-size: 1rem;
	letter-spacing: 0.125em;
	line-height: 1;
	text-transform: uppercase;
	font-weight: 600;
	text-decoration: none;
	transition: color var(--transition-appendix), background-color var(--transition-appendix),
		border-color var(--transition-appendix);

	&::before,
	&::after {
		content: '';
		background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMjEnIGhlaWdodD0nMjEnIHZpZXdCb3g9JzAgMCAyMSAyMScgZmlsbD0nbm9uZScgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz48ZyBjbGlwLXBhdGg9J3VybCgjY2xpcDBfNzAwMV8xMjg1NCknPjxwYXRoIGQ9J00xMy44NDc3IDExLjExMTRMMTMuODQ3NyA5Ljg5MTUyQzEzLjY4OTEgOS44NDg4NSAxMy41MjgyIDkuNzkzNjMgMTMuMzU5MiA5LjczMDg4QzEyLjMzNzEgOS4zNDkzNSA5LjUzMzUxIDcuMzQwMDkgNi40MjIwNCA3LjM0MDA5QzMuMzEwNTcgNy4zNDAwOSAzLjc3MTM4ZS0wOCAxMC41MDE0IDMuNzcxMzhlLTA4IDEwLjUwMTRDMy43NzEzOGUtMDggMTAuNTAxNCAzLjMxMTczIDEzLjY2NDEgNi40MjIwNCAxMy42NjQxQzkuNTMyMzYgMTMuNjY0MSAxMi4zMzcxIDExLjY1MzUgMTMuMzU5MiAxMS4yNzMzQzEzLjUyODIgMTEuMjEwNSAxMy42ODkxIDExLjE1NTMgMTMuODQ3NyAxMS4xMTE0WicgZmlsbD0nI0YwRTc3QicvPjxwYXRoIGQ9J00xNS41MjQ5IDkuOTA2NzNMMTUuNTI0OSAxMS4wOTY1QzE2LjAwNDEgMTEuMjI0NSAxNi41NjY3IDExLjUyMTkgMTcuMzE3OSAxMi4wODI5QzE3Ljk1ODEgMTIuNTU5OCAyMC4wMDExIDEzLjU4NzcgMjAuMDAxMSAxMC41MDE2QzIwLjAwMTEgNy40MTU1NCAxNy45NTgxIDguNDQzMzkgMTcuMzE3OSA4LjkyMTU1QzE2LjU2NjcgOS40ODEyOCAxNi4wMDQxIDkuNzc4NzIgMTUuNTI0OSA5LjkwNzk4TDE1LjUyNDkgOS45MDY3M1onIGZpbGw9JyNGMEU3N0InLz48cGF0aCBkPSdNMTEuMTY5MiAxNi44NzY0QzExLjE5NDYgMTQuODE3IDEyLjU4NzEgMTMuNjgzNyAxMy44NDc3IDEzLjI5MDlMMTMuODQ3NyAxMi4xNDM4QzExLjQ5MzMgMTIuMjM2NyA4LjA1NjUzIDEzLjI1ODIgOC4yMzM2MyAxNy4zNzM0QzguNDQ0MyAyMi4yNTU0IDE0LjUzMTggMjEuODAzNiAxNC43NDk0IDE4LjQwMzhDMTMuODI1NyAxOS45OTUxIDExLjEzNzkgMTkuMjU1OSAxMS4xNjggMTYuODc2NEwxMS4xNjkyIDE2Ljg3NjRaJyBmaWxsPScjRjBFNzdCJy8+PHBhdGggZD0nTTE1LjUyNDkgMTMuMTQ1NEMxNi44NTAzIDEzLjI4NTkgMTguMDIyOSAxMy45Nzc0IDE3LjY2NCAxNC41Nzk4QzE3LjY2NCAxNC41Nzk4IDE2Ljc0OTYgMTQuNDY4MiAxNi44NDIyIDE1LjUzODdDMTYuODk2NiAxNi4xNjQ5IDE4LjE5ODggMTYuNzUxIDE4LjgwNTQgMTUuNDE1N0MxOS4zMzc4IDE0LjI0NDggMTguMjY3MSAxMi40NzkgMTUuNTI2MSAxMi4xODRMMTUuNTI2MSAxMy4xNDQxTDE1LjUyNDkgMTMuMTQ1NFonIGZpbGw9JyNGMEU3N0InLz48cGF0aCBkPSdNMTYuODQxMiA1LjQ2MTc4QzE2Ljc0ODYgNi41MzIzIDE3LjY2MzEgNi40MjA2IDE3LjY2MzEgNi40MjA2QzE4LjAyMzEgNy4wMjMgMTYuODQ5MyA3LjcxNTc3IDE1LjUyMzkgNy44NTUwN0wxNS41MjM5IDguODE2NDFDMTguMjY1IDguNTIxNDggMTkuMzM1NyA2Ljc1NDQzIDE4LjgwMzIgNS41ODQ3N0MxOC4xOTY3IDQuMjQ5NDQgMTYuODk0NSA0LjgzNTUzIDE2Ljg0IDUuNDYxNzhMMTYuODQxMiA1LjQ2MTc4WicgZmlsbD0nI0YwRTc3QicvPjxwYXRoIGQ9J004LjIzMzYzIDMuNjI3MTJDOC4wNTY1MyA3Ljc0MTAyIDExLjQ5MjEgOC43NjM4NSAxMy44NDc3IDguODU1NDdMMTMuODQ3NyA3LjcwODM5QzEyLjU4NzEgNy4zMTU1OCAxMS4xOTQ2IDYuMTgzNTYgMTEuMTY5MiA0LjEyMjg0QzExLjEzOTEgMS43NDMzNSAxMy44MjY5IDEuMDA1NDEgMTQuNzUwNiAyLjU5NTVDMTQuNTMxOCAtMC44MDU1NiA4LjQ0NTQ2IC0xLjI1NjExIDguMjM0NzkgMy42MjU4Nkw4LjIzMzYzIDMuNjI3MTJaJyBmaWxsPScjRjBFNzdCJy8+PHBhdGggZD0nTTE0LjExMzggNy4yNjYzOUwxNC4xMTM4IDEzLjczNDdMMTQuMTg2NyAxMy44MTI1TDE0LjI4NTEgMTMuODEyNUwxNC4yODUxIDcuMTg3MzNMMTQuMTg2NyA3LjE4NzMzTDE0LjExMzggNy4yNjYzOVonIGZpbGw9JyNGMEU3N0InLz48cGF0aCBkPSdNMTUuMzg4MSAxMy43MzQ3TDE1LjM4ODEgNy4yNjYzOUwxNS4zMTUyIDcuMTg3MzNMMTUuMjE2OCA3LjE4NzMzTDE1LjIxNjggMTMuODEyNUwxNS4zMTUyIDEzLjgxMjVMMTUuMzg4MSAxMy43MzQ3WicgZmlsbD0nI0YwRTc3QicvPjxwYXRoIGQ9J00xNC43NTMxIDYuNjg5NkwxNC43NDg0IDYuNjg5NkMxNC41NTc1IDYuNjg5NiAxNC40MDIzIDYuODU5MDMgMTQuNDAyMyA3LjA2NDg1TDE0LjQwMjMgMTMuOTM2QzE0LjQwMjMgMTQuMTQzMSAxNC41NTg2IDE0LjMxMjUgMTQuNzQ4NCAxNC4zMTI1TDE0Ljc1MzEgMTQuMzEyNUMxNC45NDQxIDE0LjMxMjUgMTUuMTAwMyAxNC4xNDMxIDE1LjEwMDMgMTMuOTM2TDE1LjEwMDMgNy4wNjQ4NUMxNS4xMDAzIDYuODU3NzcgMTQuOTQ0MSA2LjY4OTYgMTQuNzUzMSA2LjY4OTZaJyBmaWxsPScjRjBFNzdCJy8+PC9nPjxkZWZzPjxjbGlwUGF0aCBpZD0nY2xpcDBfNzAwMV8xMjg1NCc+PHJlY3Qgd2lkdGg9JzIxJyBoZWlnaHQ9JzIwJyBmaWxsPSd3aGl0ZScgdHJhbnNmb3JtPSd0cmFuc2xhdGUoMC41IDIxKSByb3RhdGUoLTkwKScvPjwvY2xpcFBhdGg+PC9kZWZzPjwvc3ZnPgo=');
		display: block;
		width: 17px;
		height: 16px;
		background-size: 100%;
		transition: translate 1s ease;
	}
	&::after {
		rotate: 180deg;
	}

	@media (min-width: 64em) {
		& {
			font-size: 1.125rem;
			letter-spacing: 0.111em;
			gap: 14px;
			padding: 15px var(--space-5);

			&::before,
			&::after {
				width: 21px;
				height: 20px;
			}
		}
	}
	@media (hover: hover) {
		&:hover {
			background-color: var(--red-dark);

			&::before {
				translate: 8px;
			}
			&::after {
				translate: -8px;
			}
		}
		.custom-button[data-style='alternate'] &:hover {
			background-color: transparent;
			color: var(--red-dark);
		}
	}
}

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