//修正原有样式
.irs {
    width: 100%;
}
.irs-min, 
.irs-max {
    font-size: 14px !important;
    opacity:1 !important;
    color: black !important;
    background-color: rgba(0, 0, 0, 0.1) !important;
}
.irs-single {
    left:0 !important;
}

.irs--big .irs-handle {
    top: 29px;
    width: 20px;
    height: 20px;
}
.irs--big .irs-min, 
.irs--big .irs-max {
    top: 4px;
}
.irs--big .irs-from, 
.irs--big .irs-to, 
.irs--big .irs-single {
    top: 4px;
}

.irs--flat .irs-bar {
    height: 8px;
}
.irs--flat .irs-line {
    height: 8px;
}
.irs--flat .irs-handle {
    height: 14px;
}

.irs--sharp .irs-line {
    background-color: #ccc;
}

.irs--round .irs-handle {
    top: 29px;
    width: 18px;
    height: 18px;
}
.irs--round .irs-min, 
.irs--round .irs-max {
    top: 4px;
}
.irs--round .irs-from, 
.irs--round .irs-to, 
.irs--round .irs-single {
    top: 4px;
}

.irs--square .irs-handle {
    width: 14px;
    height: 14px;
}

////// 缺省颜色方案
.jsfx-rangeslider {
    --color: #006cfa;
} 

$faces: flat big modern sharp round square;

@each $face in $faces{
    .irs--#{$face} .irs-from, 
    .irs--#{$face} .irs-to, 
    .irs--#{$face} .irs-single {
        background-color: none;
        background:var(--color);
    }
    .irs--#{$face} .irs-from:before, 
    .irs--#{$face} .irs-to:before, 
    .irs--#{$face} .irs-single:before {
        border-top-color: var(--color);
    }
    .irs--#{$face} .irs-bar {
        background: var(--color);
    }
} 

.irs--flat .irs-handle > i:first-child {
    background-color: var(--color);
}
.irs--flat .irs-handle.state_hover > i:first-child,
.irs--flat .irs-handle:hover > i:first-child {
    background-color: var(--color);
}

.irs--big .irs-bar {
    background-color: none;
    border: 1px solid var(--color);
    background: var(--color);
}

.irs--sharp .irs-handle {
    background-color: var(--color);
}
.irs--sharp .irs-handle > i:first-child {
    border-top-color:var(--color);
}

.irs--round .irs-handle {
    border: 4px solid var(--color);
}

.irs--square .irs-handle {
    border: 3px solid var(--color);
}
//////   

@each $key,$value in $color-map {
    .#{$key} .irs-from, 
    .#{$key} .irs-to, 
    .#{$key} .irs-single {
        background-color: none;
        background:var(--color-#{$key});
    }
    .#{$key} .irs-from:before, 
    .#{$key} .irs-to:before, 
    .#{$key} .irs-single:before {
        border-top-color: var(--color-#{$key});
    }
    .#{$key} .irs-bar {
        background: var(--color-#{$key});
    }

    .#{$key} .irs--flat .irs-handle > i:first-child {
        background-color: var(--color-#{$key});
    }
    .#{$key} .irs--flat .irs-handle.state_hover > i:first-child,
    .#{$key} .irs--flat .irs-handle:hover > i:first-child {
        background-color: var(--color-#{$key});
    }

    .#{$key} .irs--big .irs-bar {
        background-color: none;
        border: 1px solid darken($value, 10%);
        background: var(--color-#{$key});
    }

    .#{$key} .irs--sharp .irs-handle {
        background-color: var(--color-#{$key});
    }
    .#{$key} .irs--sharp .irs-handle > i:first-child {
        border-top-color:var(--color-#{$key});
    }

    .#{$key} .irs--round .irs-handle {
        border: 4px solid var(--color-#{$key});
    }

    .#{$key} .irs--square .irs-handle {
        border: 3px solid var(--color-#{$key});
    }
    
}