.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__icon { display: flex; align-items: center; justify-content: center; } .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; } }