.stt-scroll-to-top {
	--stt-safe-left: max(1rem, env(safe-area-inset-left));
	--stt-safe-right: max(1rem, env(safe-area-inset-right));
	--stt-safe-top: max(1rem, env(safe-area-inset-top));
	--stt-safe-bottom: max(1rem, env(safe-area-inset-bottom));
	--stt-inline-room: max(0px, calc(100% - var(--stt-safe-left) - var(--stt-safe-right)));
	--stt-block-room: max(0px, calc(100% - var(--stt-safe-top) - var(--stt-safe-bottom)));
	--stt-inline-offset-used: clamp(0px, var(--stt-inline-offset, 0px), max(0px, calc(var(--stt-inline-room) - min(var(--stt-button-size, 48px), var(--stt-inline-room)))));
	--stt-block-offset-used: clamp(0px, var(--stt-block-offset, 0px), max(0px, calc(var(--stt-block-room) - min(var(--stt-button-size, 48px), var(--stt-block-room)))));
	--stt-available-width: max(0px, calc(var(--stt-inline-room) - var(--stt-inline-offset-used)));

	position: fixed;
	bottom: calc(var(--stt-safe-bottom) + var(--stt-block-offset-used));

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

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

	min-width: min(var(--stt-button-size, 48px), var(--stt-inline-room));
	max-width: var(--stt-available-width);
	height: min(var(--stt-button-size, 48px), var(--stt-block-room));

	padding: 0 min(16px, max(0px, calc((var(--stt-available-width) - 32px) / 2)));

	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(var(--stt-safe-right) + var(--stt-inline-offset-used));
}

.stt-scroll-to-top--left {
	left: calc(var(--stt-safe-left) + var(--stt-inline-offset-used));
}

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

	transform: translateY(0);
}

.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;

	flex-shrink: 0;
	width: 24px;
	height: 24px;
	line-height: 1;
}

.stt-scroll-to-top__icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

.stt-scroll-to-top__label {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1.2;
	white-space: nowrap;
}

.stt-scroll-to-top__label b,
.stt-scroll-to-top__label strong {
	font-weight: 700;
}

.stt-scroll-to-top__label i,
.stt-scroll-to-top__label em {
	font-style: italic;
}

.stt-scroll-to-top__label small {
	font-size: 0.85em;
}

@keyframes stt-arrow-up {
	0%, 100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-3px);
	}
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {

	.stt-scroll-to-top.is-visible:hover .stt-scroll-to-top__icon svg {
		animation: stt-arrow-up 0.9s ease-in-out infinite;
	}
}

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

@media (max-width: 600px) {

	.stt-scroll-to-top--hide-label-mobile {
		width: min(var(--stt-button-size, 48px), var(--stt-inline-room));
		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;
	}

	.stt-scroll-to-top.is-visible {
		transform: none;
	}

	.stt-scroll-to-top .stt-scroll-to-top__icon svg {
		animation: none;
	}
}