﻿








/* SCOPED CSS FROM THE SYM.INPUT.SLIDER COMPONENT */

.sym-slide-title {
    cursor: pointer;
    margin-bottom: 3px;
}

#slider-container {
    --value: 0;
    /* --slider-track-color: gray;*/
    /*--slider-thumb-color: red;*/
    --slider-fill-color: blue;
    /*  --slider-fill2-color: green;*/
    width: 100%;
    height: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    animation: color-cycle 1s infinite alternate linear;
    position: relative; /*lets absolute pos work inside this container (used for fake slider track which is no longer used)*/
}


#slider {
    -webkit-appearance: none; /*without this no styling is applied*/
    width: 100%;
    /* max-width:100%;*/
    /*min-width:100%;*/
    height: 5px;
    border-radius: 5px; /*rounds the corners of the bar*/
    outline: none;
    z-index: 99;
    background: #d3d3d3;
    outline: none;
    opacity: 0.8; /*this effects the opacity of the 'input ball' as well*/
    -webkit-transition: .2s;
    transition: opacity .2s;
}


    #slider:hover {
        opacity: 1;
    }


/*this is a fake track (div), that may not be needed if the standard input track can be styled properly (like in old version)*/
#slider-track {
    display: none;
    position: absolute;
    /*top: calc(50% - 0.25rem);*/
    top: 0;
    left: 0;
    width: 100%;
    height: 0.5rem;
    border-radius: 0.25rem;
    background-color: gainsboro;
    overflow: hidden;
}


#slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    background-color: var(--slider-thumb-color);
    cursor: pointer;
    z-index: 99;
    transition: border-color 300ms ease-out;
    box-shadow: 0 1px 3px 1px rgb(0 0 0 / 40%);
    width: 25px;
    height: 25px;
    border-radius: 50%;
    cursor: pointer;
}


    #slider::-webkit-slider-thumb:active {
        box-shadow: 0 1px 3px 1px rgba(0,0,0,.4), 0 0 0 15px rgba(2,190,201,.1);
    }

    #slider::-webkit-slider-thumb:hover {
    }


.sym-range-low {
    display: inline-block;
    margin-right: 9px;
    max-width: 160px;
    max-height: 68px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.85em;
    opacity: .8;
    user-select: none;
    /*border: solid 1px gray;*/
}


.sym-range-high {
    display: inline-block;
    margin-left: 9px;
    max-width: 160px;
    max-height: 68px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.85em;
    opacity: .8;
    user-select: none;
    /*border: solid 1px gray;*/
}
