.ltxe-btt {
	--ltxe-btt-x: 24px;
	--ltxe-btt-y: 24px;
	position: fixed;
	z-index: 9998;
	bottom: var(--ltxe-btt-y);
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 999px;
	background: #111;
	color: #fff;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.2s ease, visibility 0.2s ease;
}

.ltxe-btt--right { right: var(--ltxe-btt-x); }
.ltxe-btt--left { left: var(--ltxe-btt-x); }
.ltxe-btt--center { left: 50%; transform: translateX(-50%); }

.ltxe-btt.is-visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.ltxe-btt:hover,
.ltxe-btt:focus,
.ltxe-btt:active {
	background: #111;
	color: #fff;
}

.ltxe-btt__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	color: inherit;
}

.ltxe-btt__icon i,
.ltxe-btt__icon svg,
.ltxe-btt .e-font-icon-svg {
	color: inherit;
	fill: currentColor;
	width: 1em;
	height: 1em;
}

.ltxe-btt__icon svg path {
	fill: currentColor;
}

.ltxe-btt__ring {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	transform: rotate(-90deg);
}

.ltxe-btt__track,
.ltxe-btt__progress {
	fill: none;
	stroke-width: 3;
}

.ltxe-btt__track { stroke: rgba(255, 255, 255, 0.25); }
.ltxe-btt__progress {
	stroke: currentColor;
	stroke-dasharray: 100;
	stroke-dashoffset: 100;
}

@media (prefers-reduced-motion: reduce) {
	.ltxe-btt { transition: none; }
}