.ltxe-dot { --ltxe-dot-size: 12px; --ltxe-dot-color: #9ca3af; --ltxe-dot-active: #1d4ed8; position: fixed; z-index: 40; display: flex; } .ltxe-dot--right { top: 50%; right: 1.25rem; transform: translateY(-50%); } .ltxe-dot--left { top: 50%; left: 1.25rem; transform: translateY(-50%); } .ltxe-dot--top { top: 1rem; left: 50%; transform: translateX(-50%); } .ltxe-dot--bottom { bottom: 1rem; left: 50%; transform: translateX(-50%); } .ltxe-dot__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.65rem; } .ltxe-dot--top .ltxe-dot__list, .ltxe-dot--bottom .ltxe-dot__list { flex-direction: row; } .ltxe-dot__btn { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 2.25rem; min-height: 2.25rem; text-decoration: none; } .ltxe-dot__mark { display: block; width: var(--ltxe-dot-size); height: var(--ltxe-dot-size); border-radius: 999px; background: var(--ltxe-dot-color); border: 2px solid var(--ltxe-dot-color); } .ltxe-dot__btn.is-active .ltxe-dot__mark { background: var(--ltxe-dot-active); border-color: var(--ltxe-dot-active); transform: scale(1.25); } .ltxe-dot__btn:focus .ltxe-dot__mark { outline: 2px solid var(--ltxe-dot-active); outline-offset: 3px; } .ltxe-dot__label { position: absolute; white-space: nowrap; font-size: 0.8rem; background: #111827; color: #fff; padding: 0.2rem 0.45rem; border-radius: 0.2rem; opacity: 0; pointer-events: none; } .ltxe-dot--tips .ltxe-dot__btn:hover .ltxe-dot__label, .ltxe-dot--tips .ltxe-dot__btn:focus .ltxe-dot__label { opacity: 1; } .ltxe-dot--right .ltxe-dot__label { right: calc(100% + 0.5rem); } .ltxe-dot--left .ltxe-dot__label { left: calc(100% + 0.5rem); } .ltxe-dot--top .ltxe-dot__label, .ltxe-dot--bottom .ltxe-dot__label { top: calc(100% + 0.4rem); left: 50%; transform: translateX(-50%); } .ltxe-dot--bottom .ltxe-dot__label { top: auto; bottom: calc(100% + 0.4rem); } .ltxe-dot-demo { min-height: 90vh; padding: 4rem 1.5rem; } @media (max-width: 782px) { .ltxe-dot--hide-mobile { display: none; } }