.ltxe-opn { position: fixed; top: 50%; transform: translateY(-50%); z-index: 40; } .ltxe-opn--right { right: 16px; } .ltxe-opn--left { left: 16px; } .ltxe-opn__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .ltxe-opn__btn { position: relative; display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; } .ltxe-opn__dot { display: block; width: 12px; height: 12px; border-radius: 50%; background: #1a1a2e; transition: transform 0.2s ease, background-color 0.2s ease; } .ltxe-opn__btn.is-active .ltxe-opn__dot { transform: scale(1.25); background: #e94560; } .ltxe-opn__tip { position: absolute; white-space: nowrap; background: #1a1a2e; color: #fff; font-size: 12px; padding: 4px 8px; border-radius: 4px; opacity: 0; pointer-events: none; transition: opacity 0.15s ease; } .ltxe-opn--right .ltxe-opn__tip { right: 100%; margin-right: 8px; } .ltxe-opn--left .ltxe-opn__tip { left: 100%; margin-left: 8px; } .ltxe-opn--tips .ltxe-opn__btn:hover .ltxe-opn__tip, .ltxe-opn--tips .ltxe-opn__btn:focus .ltxe-opn__tip, .ltxe-opn__btn.is-tip .ltxe-opn__tip { opacity: 1; } @media (prefers-reduced-motion: reduce) { .ltxe-opn__dot, .ltxe-opn__tip { transition: none; } }