/* Credit: https://blog.logrocket.com/creating-custom-css-range-slider-javascript-upgrades/ */
input[type="range"] 
{
    /* removing default appearance */
    -webkit-appearance: none;
    appearance: none;
    /* creating a custom design */
    width: 100%;
    cursor: pointer;
    outline: none;
    /*  slider progress trick  */
    border-radius: 15px;
      /* New additions */
    height: 6px;
    background: var(--secondary-light);
}

/* Thumb: webkit */
input[type="range"]::-webkit-slider-thumb 
{
    /* removing default appearance */
    -webkit-appearance: none;
    appearance: none;
    /* creating a custom design */
    height: 16px;
    width: 16px;
    background-image: linear-gradient(var(--button-primary1) , var(--button-primary2));
    border-radius: 50%;
    border: 2px solid var(--button-border);

    transition: .2s ease-in-out;
}

/* Thumb: Firefox */
input[type="range"]::-moz-range-thumb 
{
    height: 16px;
    width: 16px;
    background-image: linear-gradient(var(--button-primary1) , var(--button-primary2));
    border-radius: 50%;
    border: 1px solid var(--button-border);
    
    transition: .2s ease-in-out;
}

/* Hover & active Thumb: Webkit */
input[type="range"]::-webkit-slider-thumb:hover 
{
    box-shadow: 0 0 0 10px var(--primary-darker-transparent);
}

input[type="range"]:active::-webkit-slider-thumb 
{
    box-shadow: 0 0 0 13px var(--primary-darker-transparent);
}

/* Hover & active Thumb: Firfox */

input[type="range"]::-moz-range-thumb:hover 
{
    box-shadow: 0 0 0 10px var(--primary-darker-transparent);
}

input[type="range"]:active::-moz-range-thumb 
{
    box-shadow: 0 0 0 13px var(--primary-darker-transparent);
}