SiLeBAT/FSK-Lab

// ion rangeslider

.irs--flat {
    width: 100%;
    height: 50px;
    .irs-bar {
        background-color: $bfr-active;
    }
    .irs-line {
        top: 33px;
        height: $custom-range-track-height;
        background-color: $bfr-input-secondary;
    }
    .irs-bar {
        top: 33px;
        height: $custom-range-track-height;
    }
    .irs-min,
    .irs-max {
        top: 12px;
        font-size: 11px;
        background-color: transparent;
        color: $bfr-input-secondary-color;
    }
    .irs-from,
    .irs-to,
    .irs-single {
        padding: 2px 8px;
        background-color: $bfr-dark-gray;
        border-radius: $border-radius-sm;
        font-size: 12px;
        color: $bfr-negative;
        &:before {
            border-top-color: $bfr-dark-gray;
        }
    }
    .irs-handle {
        top: 27px;
        width: 1rem;
        height: 1rem;
        background-color: $bfr-active;
        border-radius: 100%;
        box-shadow: 0 0 0 0 $input-btn-focus-color;
        transition: box-shadow .1s ease-out;
        cursor: pointer;
        &:before {
            content: "";
            height: 3rem;
            position: absolute;
            top: -15px;
            left: -15px;
            width: 3rem;
        }
        &:focus {
            outline: 0;
        }
        &:hover {
            box-shadow: 0 0 0 1rem $input-btn-focus-color;
        }
        &.state_hover {
            box-shadow: 0 0 0 0.75rem $input-btn-focus-color;
        }
        i:first-child {
            background-color: transparent !important;
        }
    }
}