.arboresys-slider {
    position: relative;
    max-width: 100%;
    overflow: hidden;
    line-height: 0;
    touch-action: none;
    user-select: none;
}

.arboresys-slider__base img,
.arboresys-slider__overlay img {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    margin: 0;
}

.arboresys-slider__base {
    position: relative;
}

.arboresys-slider__overlay {
    position: absolute;
    inset: 0;
    clip-path: inset(0 calc(100% - var(--arboresys-slider-pos)) 0 0);
}

.arboresys-slider__handle {
    position: absolute;
    z-index: 2;
    top: 0;
    left: var(--arboresys-slider-pos);
    width: 3px;
    height: 100%;
    padding: 0;
    border: 0;
    background:
        linear-gradient(#fff, #fff) top / 100% calc(50% - 19px) no-repeat,
        linear-gradient(#fff, #fff) bottom / 100% calc(50% - 19px) no-repeat;
    filter: drop-shadow(0 0 6px rgba(51, 51, 51, .5));
    cursor: ew-resize;
    transform: translateX(-50%);
}

.arboresys-slider__handle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    box-sizing: border-box;
    width: 38px;
    height: 38px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23fff'%3E%3Cpath d='M5 16l6-6v12zM27 16l-6-6v12z'/%3E%3C/svg%3E") center / 100% no-repeat;
    transform: translate(-50%, -50%);
}