.lt-totop { --lt-totop-ink: var(--control-ink, var(--ink, #20211d)); position: fixed; right: calc(var(--gutter, 20px) + 4px); bottom: calc(var(--gutter, 20px) + 8px + env(safe-area-inset-bottom, 0px)); z-index: 34; display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%; background: var(--control-surface, var(--surface, #fffefa)); color: var(--lt-totop-ink); box-shadow: 0 10px 24px -12px rgb(20 21 18 / 45%), 0 2px 6px rgb(20 21 18 / 8%); cursor: pointer; opacity: 0; transform: translateY(10px) scale(.9); pointer-events: none; transition: opacity .2s ease, transform .2s cubic-bezier(.2, .75, .25, 1), background-color .18s ease; } .lt-totop.is-shown { opacity: 1; transform: none; pointer-events: auto; } .lt-totop:hover { background: var(--control-hover, var(--hover, #ecece4)); } .lt-totop:active { scale: .92; } .lt-totop__ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform: rotate(-90deg); pointer-events: none; } .lt-totop__ring circle { fill: none; } .lt-totop__track { stroke: var(--control-line-strong, var(--line-strong, #c9c9bd)); stroke-width: 1.5; } .lt-totop__arc { stroke: var(--lt-totop-ink); stroke-width: 1.75; stroke-linecap: round; stroke-dasharray: 100 120; stroke-dashoffset: calc(100 - 100 * var(--lt-totop-p, 0)); transition: stroke-dashoffset .12s linear; } .lt-totop__icon { position: relative; width: 19px; height: 19px; transition: transform .18s cubic-bezier(.2, .75, .25, 1); } .lt-totop:hover .lt-totop__icon { transform: translateY(-2px); } @media (max-width: 720px) { .lt-totop { width: 44px; height: 44px; } } @media (prefers-reduced-motion: reduce) { .lt-totop, .lt-totop.is-shown { transform: none; } .lt-totop__arc, .lt-totop__icon { transition: none; } .lt-totop:hover .lt-totop__icon { transform: none; } }