/* Indicador global de desplazamiento Acidul. */
html {
    scrollbar-width: none;
}

::-webkit-scrollbar {
    width: 0;
}

.acidul-scroll-track {
    bottom: 12px;
    left: auto;
    pointer-events: none;
    position: fixed;
    right: calc(100% - 100vw);
    top: 12px;
    width: 20px;
    z-index: 10000;
}

.acidul-scroll-track::before {
    background: #fff;
    border-left: 1px solid #ececec;
    bottom: -12px;
    content: '';
    left: 0;
    position: absolute;
    right: 0;
    top: -12px;
    width: 20px;
    z-index: 0;
}

.acidul-scroll-bear {
    filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .24));
    height: auto;
    left: auto;
    object-fit: contain;
    position: absolute;
    right: 0;
    top: 0;
    transform: translateY(var(--acidul-scroll-y, 0));
    width: 35px;
    will-change: transform;
    z-index: 1;
}


/* Controles interactivos del indicador. */
.acidul-scroll-track {
    pointer-events: none;
}

.acidul-scroll-arrow {
    align-items: center;
    background: #d71920;
    border: 0;
    color: #fff;
    cursor: pointer;
    display: flex;
    font-size: 11px;
    height: 24px;
    justify-content: center;
    left: -2px;
    line-height: 1;
    padding: 0;
    pointer-events: auto;
    position: absolute;
    width: 24px;
    z-index: 2;
}

.acidul-scroll-arrow--up {
    top: 0;
}

.acidul-scroll-arrow--down {
    bottom: 0;
}

.acidul-scroll-arrow:focus-visible {
    outline: 2px solid #f7cf00;
    outline-offset: 2px;
}

.acidul-scroll-bear {
    cursor: grab;
    pointer-events: auto;
    touch-action: none;
    user-select: none;
}

.acidul-scroll-bear.is-dragging {
    cursor: grabbing;
}

@media screen and (max-width: 767px) {
    html { scrollbar-width: auto; }
    ::-webkit-scrollbar { width: auto; }
    .acidul-scroll-track { display: none !important; }
}