.jet-scroll-navigation { position: fixed; top: 50%; transform: translateY(-50%); z-index: 999; overflow: visible !important; &--position-left { left: 0; .jet-scroll-navigation__item-hint { left: calc(100% + 10px); } } &--position-right { right: 0; .jet-scroll-navigation__item-hint { right: calc(100% + 10px); } } &--show-active-hint { .jet-scroll-navigation__item { &.active { .jet-scroll-navigation__item-hint { opacity: 1; pointer-events: auto; } } } } &--show-hint-on-hover { .jet-scroll-navigation__item { &:hover { .jet-scroll-navigation__item-hint { opacity: 1; pointer-events: auto; } } } } &__inner { display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; overflow: visible !important; } &__item { position: relative; display: flex; justify-content: center; align-items: center; overflow: visible !important; } &__dot { width: 20px; height: 20px; cursor: pointer; display: flex; justify-content: center; align-items: center; } &__item-hint { position: absolute; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; opacity: 0; pointer-events: none; transition: all .3s cubic-bezier(.5,.12,.46,.88); } &__icon { display: flex; flex-direction: column; justify-content: center; } &__label { white-space: nowrap; } }