.hsp-buttons-block {
	--hsp-button-gap-x: 1rem;
	--hsp-button-gap-y: 1rem;
	--hsp-buttons-align-items: center;
	--hsp-buttons-flex-wrap: wrap;
	--hsp-buttons-justify-content: center;

	display: flex;
	flex-wrap: var(--hsp-buttons-flex-wrap);
	align-items: var(--hsp-buttons-align-items);
	justify-content: var(--hsp-buttons-justify-content);
	gap: var(--hsp-button-gap-y) var(--hsp-button-gap-x);
}

.hsp-buttons-block--vertical {
	flex-direction: column;
}

.hsp-button-block {
	--hsp-button-color-bg: var(--ark-color--main, #71b800);
	--hsp-button-radius: 0;

	position: relative;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.hsp-button-block[data-has-width] {
	width: var(--hsp-button-width);
	max-width: 100%;
}

.hsp-button-block--width-full {
	width: 100%;
}

.hsp-button-block__link {
	position: relative;
	display: inline-flex;
	gap: 0.25em;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: var(--hsp-button-width, 3em);
	max-width: 100%;
	margin: 0;
	padding: 0.75em 1.75em;
	border-radius: var(--hsp-button-radius);
	line-height: 1.5;
	text-align: center;
	text-decoration: none;
	transition: color 0.25s, background-color 0.25s, box-shadow 0.25s, transform 0.25s;
}

.hsp-button-block__link::before {
	position: absolute;
	z-index: 1;
	border-radius: inherit;
	background: transparent;
	content: "";
	inset: 0;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s, visibility 0.25s, box-shadow 0.25s;
	visibility: hidden;
}

.hsp-button-block__link:hover::before {
	opacity: 1;
	visibility: visible;
}

.hsp-button-block[data-has-width] .hsp-button-block__link,
.hsp-button-block--width-full .hsp-button-block__link {
	width: 100%;
}

.hsp-button-block__text {
	position: relative;
	z-index: 2;
	min-width: 1em;
	overflow-wrap: anywhere;
	white-space: normal;
}

.hsp-button-block__icon {
	position: relative;
	z-index: 2;
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.hsp-button-block__icon--left {
	transform: scale(1.2) translateX(-0.2em);
}

.hsp-button-block__icon--right {
	transform: scale(1.2) translateX(0.2em);
}

.hsp-button-block--fill .hsp-button-block__link {
	background: var(--hsp-button-color-bg);
	color: var(--hsp-button-color-text, #fff);
}

.hsp-button-block:not([data-hover]) .hsp-button-block__link::before,
.hsp-button-block[data-hover="bright"] .hsp-button-block__link::before {
	background: rgba(255, 255, 255, 0.2);
}

.hsp-button-block[data-hover="dark"] .hsp-button-block__link::before {
	background: rgba(0, 0, 0, 0.1);
}

.hsp-button-block[data-hover="float"] .hsp-button-block__link:hover::before {
	box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.1), 0 16px 32px -16px rgba(0, 0, 0, 0.2);
}

.hsp-button-block[data-hover="float"] .hsp-button-block__link:hover {
	transform: translateY(-2px);
}

.hsp-button-block--fill[data-hover="swap"] .hsp-button-block__link:hover {
	background: var(--hsp-button-color-text, #fff);
	box-shadow: inset 0 0 0 1px var(--hsp-button-color-bg);
	color: var(--hsp-button-color-bg);
}

.hsp-button-block--outline .hsp-button-block__link {
	background: transparent;
	box-shadow: inset 0 0 0 1px currentColor;
	color: var(--hsp-button-color-text, var(--hsp-button-color-bg));
}

.hsp-button-block--outline[data-hover="swap"] .hsp-button-block__link:hover {
	background: var(--hsp-button-color-text, var(--hsp-button-color-bg));
	color: #fff;
}

.hsp-button-block--text .hsp-button-block__link {
	padding: 0.5em;
	border-radius: 0;
	color: var(--hsp-button-color-text, var(--hsp-button-color-bg));
}

.hsp-button-block--text .hsp-button-block__link::before {
	content: none;
}

.hsp-button-block--text .hsp-button-block__link:hover {
	text-decoration: underline;
}

.hsp-button-block--text .hsp-button-block__icon {
	width: 1.5em;
	height: 1.5em;
	border: solid 1px currentColor;
	border-radius: 50%;
	transition: color 0.25s, background-color 0.25s;
}

.hsp-button-block--text .hsp-button-block__link:hover .hsp-button-block__icon {
	background: var(--hsp-button-color-text, var(--hsp-button-color-bg));
	color: #fff;
}

@media not all and (min-width: 1000px) {
	.hsp-button-block[data-has-width] {
		width: var(--hsp-button-width-tab, var(--hsp-button-width));
	}
}

@media not all and (min-width: 600px) {
	.hsp-button-block[data-has-width] {
		width: var(--hsp-button-width-mobile, var(--hsp-button-width-tab, var(--hsp-button-width)));
	}
}