.stt-scroll-to-top {
	position: fixed;
	bottom: calc(
		max(1rem, env(safe-area-inset-bottom))
		+ var(--stt-block-offset, 0px)
	);

	z-index: var(--stt-z-index, 9999);

	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;

	min-width: var(--stt-button-size, 48px);
	height: var(--stt-button-size, 48px);

	padding: 0 16px;

	border: 0;
	border-radius: var(--stt-border-radius, 999px);

	background: var(--stt-background-color, #111);
	color: var(--stt-text-color, #fff);

	font: inherit;
	font-size: 14px;
	line-height: 1;

	cursor: pointer;

	opacity: 0;
	visibility: hidden;
	pointer-events: none;

	transform: translateY(12px);

	transition:
		opacity 0.2s ease,
		transform 0.2s ease,
		visibility 0.2s ease;

	box-sizing: border-box;
}

.stt-scroll-to-top--right {
	right: calc(
		max(1rem, env(safe-area-inset-right))
		+ var(--stt-inline-offset, 0px)
	);
}

.stt-scroll-to-top--left {
	left: calc(
		max(1rem, env(safe-area-inset-left))
		+ var(--stt-inline-offset, 0px)
	);
}

.stt-scroll-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;

	transform: translateY(0);
}

.stt-scroll-to-top:hover {
	transform: translateY(-2px);
}

.stt-scroll-to-top:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 3px;
}

.stt-scroll-to-top--shadow {
	box-shadow:
		0 8px 25px rgb(0 0 0 / 20%);
}

.stt-scroll-to-top__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	font-size: 20px;
	line-height: 1;
}

.stt-scroll-to-top__label {
	line-height: 1;
	white-space: nowrap;
}

.stt-scroll-to-top--no-label {
	width: var(--stt-button-size, 48px);
	padding: 0;
}

@media (max-width: 600px) {

	.stt-scroll-to-top--hide-label-mobile {
		width: var(--stt-button-size, 48px);
		padding: 0;
	}

	.stt-scroll-to-top--hide-label-mobile
	.stt-scroll-to-top__label {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {

	.stt-scroll-to-top {
		transition: none;
	}
}