/* Scroll To Top :: Front-end */

.stt {
	position: fixed;
	bottom: var( --stt-bottom-gap, 28px );
	z-index: var( --stt-z, 9990 );

	width: var( --stt-size, 54px );
	height: var( --stt-size, 54px );
	padding: 0;
	border: 0;
	border-radius: var( --stt-radius, 999px );

	display: flex;
	align-items: center;
	justify-content: center;

	cursor: pointer;
	-webkit-tap-highlight-color: transparent;

	background: var( --stt-ring-track, #D7DEEA );

	background-image: conic-gradient(
		from -90deg,
		var( --stt-ring-from, #2663EB ) 0deg,
		var( --stt-ring-to, #773DED ) calc( var( --stt-p, 0 ) * 360deg ),
		var( --stt-ring-track, #D7DEEA ) calc( var( --stt-p, 0 ) * 360deg )
	);

	box-shadow: 0 var( --stt-shadow-y, 8px ) var( --stt-shadow-blur, 22px ) var( --stt-shadow, rgba( 38, 99, 235, .32 ) );

	opacity: 0;
	visibility: hidden;
	transform: translateY( 12px ) scale( .92 );

	transition:
		opacity var( --stt-anim, 260ms ) ease,
		visibility var( --stt-anim, 260ms ) ease,
		transform var( --stt-anim, 260ms ) cubic-bezier( .34, 1.56, .64, 1 ),
		box-shadow var( --stt-anim, 260ms ) ease;
}

.stt--right { right: var( --stt-side-gap, 24px ); }
.stt--left  { left:  var( --stt-side-gap, 24px ); }

.stt.is-visible {
	opacity: 1;
	visibility: visible;
	transform: none;
}

/* The face */
.stt-face {
	position: absolute;
	inset: var( --stt-ring-w, 4px );
	border-radius: inherit;

	box-sizing: border-box;
	border: var( --stt-gap-w, 3px ) solid var( --stt-gap-color, #FFFFFF );

	display: flex;
	align-items: center;
	justify-content: center;

	background: linear-gradient(
		var( --stt-bg-angle, 135deg ),
		var( --stt-bg-from, #2663EB ) 0%,
		var( --stt-bg-to, #773DED ) 100%
	);

	color: var( --stt-icon, #FFFFFF );

	background-size: 112% 112%;
	background-position: 0% 0%;
	transition: background-position var( --stt-anim, 260ms ) ease;
}

.stt-icon {
	width: var( --stt-icon-size, 20px );
	height: var( --stt-icon-size, 20px );
	display: block;

	stroke-width: var( --stt-icon-w, 2 );
	transition: transform var( --stt-anim, 260ms ) cubic-bezier( .34, 1.56, .64, 1 );
}

/* Hover and focus */
.stt:hover,
.stt:focus-visible {
	transform: translateY( var( --stt-lift, -3px ) );
	box-shadow: 0 calc( var( --stt-shadow-y, 8px ) + 4px ) calc( var( --stt-shadow-blur, 22px ) + 10px ) var( --stt-shadow, rgba( 38, 99, 235, .32 ) );
}

.stt:hover .stt-face,
.stt:focus-visible .stt-face { background-position: 100% 100%; }

.stt:hover .stt-icon,
.stt:focus-visible .stt-icon { transform: translateY( -2px ); }

.stt:focus-visible {
	outline: 3px solid var( --stt-bg-from, #2663EB );
	outline-offset: 3px;
}

.stt:active { transform: translateY( 0 ) scale( .96 ); }

/* The tooltip */
.stt-tip {
	position: absolute;
	bottom: 50%;
	transform: translateY( 50% );

	padding: 6px 10px;
	border-radius: 8px;
	white-space: nowrap;

	background: var( --stt-tip-bg, #111827 );
	color: var( --stt-tip-color, #FFFFFF );
	font-size: var( --stt-tip-fs, 13px );
	line-height: 1.3;
	font-weight: 600;

	opacity: 0;
	pointer-events: none;
	transition: opacity var( --stt-anim, 260ms ) ease, transform var( --stt-anim, 260ms ) ease;
}

.stt--right .stt-tip { right: calc( 100% + 12px ); }
.stt--left  .stt-tip { left:  calc( 100% + 12px ); }

.stt--right:hover .stt-tip,
.stt--right:focus-visible .stt-tip { opacity: 1; transform: translateY( 50% ) translateX( -2px ); }

.stt--left:hover .stt-tip,
.stt--left:focus-visible .stt-tip { opacity: 1; transform: translateY( 50% ) translateX( 2px ); }

/* Touch */
@media ( hover: none ) {
	.stt-tip { display: none; }
}

/* Reduced motion */
@media ( prefers-reduced-motion: reduce ) {
	.stt,
	.stt-face,
	.stt-icon,
	.stt-tip {
		transition-duration: .01ms;
	}

	.stt { transform: none; }

	.stt:hover,
	.stt:focus-visible,
	.stt:active { transform: none; }

	.stt:hover .stt-icon,
	.stt:focus-visible .stt-icon { transform: none; }
}

/* Print */
@media print {
	.stt { display: none !important; }
}