/*
CSS for slider
*/
range-slider {
    --element-height: 16px;
    --track-height: 4px;
    --thumb-size: 16px;

    position: relative;
    display: flex;
    align-items: center;
    height: var(--element-height);
    width: 100%;
    overflow: visible;
    cursor: pointer;
    touch-action: none;
}

range-slider:focus {
    outline: 0;
}

range-slider[disabled] {
    filter: grayscale(1);
    opacity: 0.8;
}


/* Track */
range-slider::before {
    content: "";
    display: block;
    width: 100%;
    height: var(--track-height);
    border-radius: 0;
    background: linear-gradient(#A95597, #A95597) 0/ var(--value-percent, 0%) 100% no-repeat #DDDDDD;
}

.thumb {
    background: #A95597;
    border-radius: 50%;
    width: var(--thumb-size);
    height: var(--thumb-size);
    position: absolute;
    bottom: calc(var(--element-height) / 2 - var(--thumb-size) / 2);
    left: var(--value-percent, 0%);
    margin-left: calc(var(--thumb-size) / 2 * -1);
    transition: transform 200ms ease;
    will-change: transform;
    pointer-events: none;

    /*disable selection*/
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.thumb-wrapper {
    position: absolute;
    left: calc(var(--thumb-size) / 2);
    right: calc(var(--thumb-size) / 2);
    bottom: 0;
    height: 0;
    overflow: visible;
}