.indi-range-slider {
    --slider-color: var(--indi-primary-colour);
    --thumb-size: 14px;
    
    --track-height: 5px;
    --track-width: 97%;
    --track-color: #ccc;
    
    --tick-color: var(--track-color);
    --tick-text-color: black;
    --tick-height: 8px;
    
    --range-text-color: var(--slider-color);

    --tooltip-color: var(--slider-color);
    --tooltip-text-color: white;

    width: 100%;
    padding: 20px 0;
    position: relative;
}

.indi-range-slider.disabled {
    opacity: 0.5;
    pointer-events: none;
}

/************* CUSTOM TRACK AND RANGE STYLING *************/

.indi-range-slider .slider {
    position: relative;
    height: var(--track-height);
}

.indi-range-slider .track {
    position: absolute;
    z-index: 1;
    background-color: var(--track-color);
    border-radius: 4px;
    height: var(--track-height);
    width: var(--track-width);
    left: 50%;
    transform: translateX(-50%);
}

/* Suppress warnings as the values are set by the component */
/*noinspection CssUnresolvedCustomProperty*/
.indi-range-slider .range {
    position: absolute;
    z-index: 2;
    background-color: var(--slider-color);
    border-radius: 4px;
    height: var(--track-height);
    
    left: calc((var(--start) - var(--min)) / (var(--max) - var(--min)) * 100%);
    right: calc(100% - (var(--end) - var(--min)) / (var(--max) - var(--min)) * 100%);
}

/************* INPUT HTML STYLING *************/

.indi-range-slider .range-slider-input {
    position: absolute;
    z-index: 3;
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    pointer-events: none;
}

/************* INPUT THUMB STYLING *************/

/* ::-webkit-slider-thumb targets the track in Chrome, Safari, Opera, and Edge */
.indi-range-slider .range-slider-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    margin-top: calc(var(--track-height) / 2 - var(--thumb-size) / 2);
    width: var(--thumb-size);
    height: var(--thumb-size);
    background: white;
    border: 3px solid var(--slider-color);
    border-radius: 50%;
    cursor: pointer;
    pointer-events: auto;
}

/* ::-moz-range-thumb targets the track in Firefox */
.indi-range-slider .range-slider-input::-moz-range-thumb {
    width: var(--thumb-size);
    height: var(--thumb-size);
    background: white;
    border: 3px solid var(--slider-color);
    border-radius: 50%;
    cursor: pointer;
    pointer-events: auto;
}

.indi-range-slider .range-slider-input:hover::-webkit-slider-thumb {
    outline: 2px solid var(--slider-color);
    outline-offset: 2px;
}

.indi-range-slider .range-slider-input:hover::-moz-range-thumb {
    outline: 2px solid var(--slider-color);
    outline-offset: 2px;
}

/************* INPUT TRACK STYLING *************/

/* ::-webkit-slider-runnable-track targets the track in Chrome, Safari, Opera, and Edge */
.indi-range-slider .range-slider-input::-webkit-slider-runnable-track {
    width: 100%;
    height: var(--track-height);
    background: transparent;
    border: none;
    pointer-events: none;
}

/* ::-moz-range-track targets the track in Firefox */
.indi-range-slider .range-slider-input::-moz-range-track {
    width: 100%;
    height: var(--track-height);
    background: transparent;
    border: none;
    pointer-events: none;
}

/************* TICKS DISPLAY STYLING *************/

.indi-range-slider .ticks {
    position: absolute;
    width: var(--track-width);;
    height: var(--tick-height);
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
}

.indi-range-slider .ticks.ticks-above {
    bottom: 100%;
    margin-bottom: 2px;
}

.indi-range-slider .ticks.ticks-below {
    top: 100%;
    margin-top: 2px;
}

.indi-range-slider .tick {
    position: absolute;
    width: 1px;
    background-color: var(--tick-color);
    transform: translateX(-50%);
}

.indi-range-slider .tick.large {
    height: var(--tick-height);
}

.indi-range-slider .tick.small {
    height: calc(var(--tick-height) * 0.6);
}

.indi-range-slider .tick-label {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding-top: 2px;
    font-size: 12px;
    color: var(--tick-text-color);
    pointer-events: none;
    white-space: nowrap;
}

/************* RANGE DISPLAY STYLING *************/

.indi-range-slider .range-label {
    position: absolute;
    color: var(--range-text-color);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    pointer-events: none;

    text-align: center;
    left: 50%;
    transform: translateX(-50%);
    display: inline-block;
    white-space: nowrap;
}

.indi-range-slider .range-label.range-above {
    bottom: 100%;
    margin-bottom: var(--track-height);
}

.indi-range-slider .range-label.range-below {
    top: 100%;
    margin-top: var(--track-height);
}

/************* TOOLTIP DISPLAY STYLING *************/

.indi-range-slider .tooltip {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    
    background-color: var(--tooltip-color);
    color: var(--tooltip-text-color);
    opacity: 0;
    
    padding: 2px 4px;
    border-radius: 8px;
    font-size: 12px;
    pointer-events: none;
    transition: opacity 0.2s;
    white-space: nowrap;
    z-index: 4;
}

.indi-range-slider .tooltip.tooltip-above {
    bottom: calc(100% + 10px);
    transform: translateX(-50%);
}

.indi-range-slider .tooltip.tooltip-below {
    top: calc(100% + 10px);
    transform: translateX(-50%);
}

/* Suppress warnings as the values are set by the component */
/*noinspection CssUnresolvedCustomProperty*/
.indi-range-slider .start-tooltip {
    left: calc(((var(--start) - var(--min)) / (var(--max) - var(--min)) * var(--track-width)) + ((100% - var(--track-width)) / 2));
}

/* Suppress warnings as the values are set by the component */
/*noinspection CssUnresolvedCustomProperty*/
.indi-range-slider .end-tooltip {
    left: calc(((var(--end) - var(--min)) / (var(--max) - var(--min)) * var(--track-width)) + ((100% - var(--track-width)) / 2));
}

/* Show both tooltips when hovering over any thumb */
.indi-range-slider .range-slider-input:hover ~ .tooltip {
    opacity: 0.8;
}