@import "bootstrap/scss/functions";
@import "bootstrap/scss/mixins/breakpoints";
@import "../styles/bootstrap-variables";
@import "../styles/global-variables";

/* see https://css-tricks.com/value-bubbles-for-range-inputs/ */
.range-wrap {
    position: relative;
    margin: 3rem 0 3rem 0;
    /* Avoid too much space between label and input range */
    @include media-breakpoint-down(md) {
        margin-top: 0;
    }
}
.bubble {
    color: white;
    padding: 4px 12px;
    position: absolute;
    border-radius: 4px;
    left: 50%;
    top: 40px;
    transform: translateX(-50%);
}
.bubble::after {
    content: "";
    position: absolute;
    width: 2px;
    height: 2px;
    top: -1px;
    left: 50%;
}

/* see https://www.cssportal.com/style-input-range/ */
input[type=range] {
    height: 26px;
    background-color: transparent;
    -webkit-appearance: none;
    /* 1px margin left+right is important here, as for strange reasons, if margin=0 here, range slider
       is not displayed anymore on mobile (<=md) resolutions */
    margin: 10px 1px;
    width: 100%;
}
input[type=range]:focus {
    outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 14px;
    cursor: pointer;
    animate: 0.2s;
    border-radius: 14px;
    border: 0px solid #000000;
}
input[type=range]::-webkit-slider-thumb {
    box-shadow: 0px 0px 0px #000000;
    border: 0px solid #000000;
    height: 20px;
    width: 40px;
    border-radius: 12px;
    background: white;
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -3px;
}
input[type=range]::-moz-range-track {
    width: 100%;
    height: 14px;
    cursor: pointer;
    animate: 0.2s;
    border-radius: 14px;
    border: 0px solid #000000;
}
input[type=range]::-moz-range-thumb {
    box-shadow: 0px 0px 0px #000000;
    border: 0px solid #000000;
    height: 20px;
    width: 40px;
    border-radius: 12px;
    background: white;
    cursor: pointer;
}
input[type=range]::-ms-track {
    width: 100%;
    height: 14px;
    cursor: pointer;
    animate: 0.2s;
    background: transparent;
    border-color: transparent;
    color: transparent;
}
input[type=range]::-ms-fill-lower {
    border: 0px solid #000000;
    border-radius: 28px;
}
input[type=range]::-ms-fill-upper {
    border: 0px solid #000000;
    border-radius: 28px;
}
input[type=range]::-ms-thumb {
    margin-top: 1px;
    box-shadow: 0px 0px 0px #000000;
    border: 0px solid #000000;
    height: 20px;
    width: 40px;
    border-radius: 12px;
    background: white;
    cursor: pointer;
}

.search-standard {
    .bubble {
        background: $stdColor;
        &::after {
            background: $stdColor;
        }
    }
    input[type=range]::-webkit-slider-runnable-track { box-shadow: 1px 1px 1px $stdColor; }
    input[type=range]::-moz-range-track { box-shadow: 1px 1px 1px $stdColor; }
    input[type=range]::-ms-fill-lower { box-shadow: 1px 1px 1px $stdColor; }
    input[type=range]::-ms-fill-upper { box-shadow: 1px 1px 1px $stdColor; }

    input[type=range]::-webkit-slider-runnable-track { background: $stdColor; }
    input[type=range]:focus::-webkit-slider-runnable-track { background: $stdColor; }
    input[type=range]::-moz-range-track { background: $stdColor; }
    input[type=range]::-ms-fill-lower { background: $stdColor; }
    input[type=range]::-ms-fill-upper { background: $stdColor; }
    input[type=range]:focus::-ms-fill-lower { background: $stdColor; }
    input[type=range]:focus::-ms-fill-upper { background: $stdColor; }
}
.search-highlighted {
    .bubble {
        background: $highlightedColor;
        &::after {
            background: $highlightedColor;
        }
    }
    input[type=range]::-webkit-slider-runnable-track { box-shadow: 1px 1px 1px $highlightedColor; }
    input[type=range]::-moz-range-track { box-shadow: 1px 1px 1px $highlightedColor; }
    input[type=range]::-ms-fill-lower { box-shadow: 1px 1px 1px $highlightedColor; }
    input[type=range]::-ms-fill-upper { box-shadow: 1px 1px 1px $highlightedColor; }

    input[type=range]::-webkit-slider-runnable-track { background: $highlightedColor; }
    input[type=range]:focus::-webkit-slider-runnable-track { background: $highlightedColor; }
    input[type=range]::-moz-range-track { background: $highlightedColor; }
    input[type=range]::-ms-fill-lower { background: $highlightedColor; }
    input[type=range]::-ms-fill-upper { background: $highlightedColor; }
    input[type=range]:focus::-ms-fill-lower { background: $highlightedColor; }
    input[type=range]:focus::-ms-fill-upper { background: $highlightedColor; }
}
