@import "../variables";
.irs,.irs-line{position:relative;display:block}.irs,.irs-bar,.irs-bar-edge,.irs-line{display:block}.irs{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.irs-line{overflow:hidden;outline:0!important}.irs-line-left,.irs-line-mid,.irs-line-right{position:absolute;display:block;top:0}.irs-line-left{left:0;width:11%}.irs-line-mid{left:9%;width:82%}.irs-line-right{right:0;width:11%}.irs-bar,.irs-shadow{position:absolute;width:0;left:0}.irs-bar-edge{position:absolute;top:0;left:0}.irs-shadow{display:none}.irs-from,.irs-max,.irs-min,.irs-single,.irs-slider,.irs-to{display:block;position:absolute;cursor:default}.irs-slider{z-index:1}.irs-slider.type_last{z-index:2}.irs-min{left:0}.irs-max{right:0}.irs-from,.irs-single,.irs-to{top:0;left:0;white-space:nowrap}.irs-grid{position:absolute;display:none;bottom:0;left:0;width:100%;height:20px}.irs-with-grid .irs-grid{display:block}.irs-grid-pol{position:absolute;top:0;left:0;width:1px;height:8px;background:#000}.irs-grid-pol.small{height:4px}.irs-grid-text{position:absolute;bottom:0;left:0;white-space:nowrap;text-align:center;font-size:9px;line-height:9px;padding:0 3px;color:#000}.irs-disable-mask{position:absolute;display:block;top:0;left:-1%;width:102%;height:100%;cursor:default;background:transparent;z-index:2}.irs-disabled{opacity:.4}.lt-ie9 .irs-disabled{filter:alpha(opacity=40)}.irs-hidden-input{position:absolute!important;display:block!important;top:0!important;left:0!important;width:0!important;height:0!important;font-size:0!important;line-height:0!important;padding:0!important;margin:0!important;outline:0!important;z-index:-9999!important;background:0 0!important;border-style:solid!important;border-color:transparent!important}
// Range Slider
@mixin m-build-component--ion-range-slider-base() {
    .m-ion-range-slider {
        .irs {
            .irs-min,
            .irs-max,
            .irs-from,
            .irs-to,
            .irs-single {
                padding: 2px 5px 1px 5px;
            }
        }
    }
} 
//== Component Base
@include m-build-component--ion-range-slider-base();
.irs-line-mid,
.irs-line-left,
.irs-line-right,
.irs-bar,
.irs-bar-edge,
.irs-slider {
}
.irs {
    height: 40px;
}
.irs-with-grid {
    height: 60px;
}
.irs-line {
    height: 12px; top: 25px;
}
    .irs-line-left {
        height: 6px;
        background: $gray-300;
        top: 5px;
    }
    .irs-line-mid {
        height: 6px;
        background:  $gray-300;
        top: 5px;
    }
    .irs-line-right {
        height: 6px;
        background: $gray-300;
        top: 5px;
    }
.irs-bar {
    height: 6px;
    top: 30px;
    background-position: 0 -60px;
    background: $theme;
}
    .irs-bar-edge {
        top: 30px;
        height: 6px;
        width: 9px;
        background: $gray-300;
    }
.irs-shadow {
    height: 3px; top: 34px;
    background: $black;
    opacity: 0.25;
}
.lt-ie9 .irs-shadow {
    filter: alpha(opacity=25);
}
.irs-slider {
    width: 18px;
    height: 18px;
    top: 22px;
    background:  $white;
    box-shadow: 0px 0px 14px rgba(0,0,0,0.2);
    border-radius: 50%;
    cursor: ew-resize;
    background: $white;
}
.irs-slider.state_hover, .irs-slider:hover {
    background-position: 0 -150px;
}
.irs-min, .irs-max {
    color: #999;
    font-size: 10px; line-height: 1.333;
    text-shadow: none;
    top: 0; padding: 1px 3px;
    background: #e1e4e9;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
.irs-from, .irs-to, .irs-single {
    color: $white;
    font-size: 10px;
    line-height: 1.333;
    text-shadow: none;
    padding: 2px 8px;
    background: $theme;
    -moz-border-radius: 4px;
    border-radius: 4px;
    /* box-shadow: 0px 0px 12px rgba(0,0,0,0.2); */
}
.irs-from:after, .irs-to:after, .irs-single:after {
    position: absolute;
    display: block;
    content: "";
    bottom: -10px;
    left: 50%;
    width: 0;
    height: 0;
    margin-left: -5px;
    overflow: hidden;
    border: 5px solid transparent;
    border-top-color: $theme;
}
.irs-grid-pol {
    background: $gray-100;
}
.irs-grid-text {
color: $body-color;
}
.irs-disabled {
}
.range-color-primary {
    .irs-from:after, .irs-to:after, .irs-single:after { 
        border-top-color:  $primary;  
    }
     .irs-bar, .irs-from, .irs-to, .irs-single {
        background: $primary;
    }
}
.range-color-secondary {
    .irs-from:after, .irs-to:after, .irs-single:after { 
        border-top-color:  $secondary;
   }
    .irs-bar, .irs-from, .irs-to, .irs-single {
        background: $secondary;
    }
}
.range-color-success {
        .irs-from:after, .irs-to:after, .irs-single:after { 
            border-top-color:  $success;  
            }
         .irs-bar, .irs-from, .irs-to, .irs-single {
        background: $success;
    }
}
.range-color-info {
        .irs-from:after, .irs-to:after, .irs-single:after { 
            border-top-color:  $info; 
         } 
        .irs-bar, .irs-from, .irs-to, .irs-single {
        background: $info;
    }
}
.range-color-danger {
        .irs-from:after, .irs-to:after, .irs-single:after { 
            border-top-color:  $danger;  
        } 
        .irs-bar, .irs-from, .irs-to, .irs-single {
        background: $danger;
    }
}
.range-color-warning {
        .irs-from:after, .irs-to:after, .irs-single:after { border-top-color:  $warning;  }
         .irs-bar, .irs-from, .irs-to, .irs-single {
        background: $warning;
    }
}