/* http://danielstern.ca/range.css/#/ */
input[type=range] {
    width: 100%;
    background-color: transparent;
    -webkit-appearance: none;
    --trackSizeSmall: 2px;
    --thumbSizeSmall: 14px;
    --trackSizeMedium: 4px;
    --thumbSizeMedium: 18px;
    --trackSizeLarge: 6px;
    --thumbSizeLarge: 22px;

    &:focus {
        outline: none;
    }

    /* ========== WebKit (Chrome, Safari, Edge) ========== */

    &::-webkit-slider-runnable-track {
        background: var(--colorBrandBackground);
        border: 0;
        outline: none;
        width: 100%;
        height: var(--trackSizeMedium);
        cursor: pointer;
        border-radius: var(--borderRadiusCircular);
    }

    &.range--small::-webkit-slider-runnable-track {
        height: var(--trackSizeSmall);
    }

    &.range--large::-webkit-slider-runnable-track {
        height: var(--trackSizeLarge);
    }

    &::-webkit-slider-thumb {
        margin-top: calc((var(--trackSizeMedium) - var(--thumbSizeMedium)) / 2);
        width: var(--thumbSizeMedium);
        height: var(--thumbSizeMedium);
        background: var(--colorBrandBackground);
        border: 4px solid var(--colorNeutralBackground1);
        border-radius: var(--borderRadiusCircular);
        cursor: pointer;
        -webkit-appearance: none;
        outline: var(--strokeWidthThin) solid var(--colorNeutralStroke1);
        outline-offset: 0;
    }

    &.range--small::-webkit-slider-thumb {
        margin-top: calc((var(--trackSizeSmall) - var(--thumbSizeSmall)) / 2);
        width: var(--thumbSizeSmall);
        height: var(--thumbSizeSmall);
        border: 3px solid var(--colorNeutralBackground1);
    }

    &.range--large::-webkit-slider-thumb {
        margin-top: calc((var(--trackSizeLarge) - var(--thumbSizeLarge)) / 2);
        width: var(--thumbSizeLarge);
        height: var(--thumbSizeLarge);
        border: 4px solid var(--colorNeutralBackground1);
    }

    &:disabled::-webkit-slider-runnable-track,
    &:disabled::-webkit-slider-thumb {
        background: var(--colorNeutralForegroundDisabled);
        outline-color: var(--colorNeutralForegroundDisabled);
        cursor: default;
    }

    &:hover:not(:disabled)::-webkit-slider-runnable-track,
    &:hover:not(:disabled)::-webkit-slider-thumb {
        background: var(--colorBrandBackgroundHover);
    }

    &:active:not(:disabled)::-webkit-slider-runnable-track,
    &:active:not(:disabled)::-webkit-slider-thumb {
        background: var(--colorBrandBackgroundPressed);
    }

    /* ========== Firefox ========== */

    &::-moz-range-track {
        background: var(--colorBrandBackground);
        border: 0;
        width: 100%;
        height: var(--trackSizeMedium);
        cursor: pointer;
        border-radius: var(--borderRadiusCircular);
    }

    &::-moz-range-thumb {
        width: var(--thumbSizeMedium);
        height: var(--thumbSizeMedium);
        background: var(--colorBrandBackground);
        border: 4px solid var(--colorNeutralBackground1);
        border-radius: var(--borderRadiusCircular);
        cursor: pointer;
        outline: var(--strokeWidthThin) solid var(--colorNeutralStrokeAccessible);
        outline-offset: 0;
    }

    &:disabled::-moz-range-track,
    &:disabled::-moz-range-thumb {
        background: var(--colorNeutralForegroundDisabled);
        outline-color: var(--colorNeutralForegroundDisabled);
        cursor: default;
    }

    &:hover:not(:disabled)::-moz-range-track,
    &:hover:not(:disabled)::-moz-range-thumb {
        background: var(--colorBrandBackgroundHover);
    }

    &:active:not(:disabled)::-moz-range-track,
    &:active:not(:disabled)::-moz-range-thumb {
        background: var(--colorBrandBackgroundPressed);
    }

    /* ========== Vertical ========== */

    &.range--vertical {
        width: var(--thumbSizeMedium);
        height: 100%;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        writing-mode: vertical-lr;
        direction: rtl;
        background-color: transparent;

        &:focus {
            outline: none;
        }

        /* WebKit Track */
        &::-webkit-slider-runnable-track {
            background: var(--colorBrandBackground);
            border: 0;
            outline: none;
            width: var(--trackSizeMedium);
            height: 100%;
            cursor: pointer;
            border-radius: var(--borderRadiusCircular);
        }

        &.range--vertical--small::-webkit-slider-runnable-track {
            width: var(--trackSizeSmall);
        }

        &.range--vertical--large::-webkit-slider-runnable-track {
            width: var(--trackSizeLarge);
        }

        /* WebKit Thumb */
        &::-webkit-slider-thumb {
            margin-left: calc((var(--trackSizeMedium) - var(--thumbSizeMedium)) / 2);
            margin-top: 0;
            width: var(--thumbSizeMedium);
            height: var(--thumbSizeMedium);
            background: var(--colorBrandBackground);
            border: 4px solid var(--colorNeutralBackground1);
            border-radius: var(--borderRadiusCircular);
            cursor: pointer;
            -webkit-appearance: none;
            outline: var(--strokeWidthThin) solid var(--colorNeutralStroke1);
            outline-offset: 0;
        }

        &.range--vertical--small::-webkit-slider-thumb {
            margin-left: calc((var(--trackSizeSmall) - var(--thumbSizeSmall)) / 2);
            width: var(--thumbSizeSmall);
            height: var(--thumbSizeSmall);
            border: 3px solid var(--colorNeutralBackground1);
        }

        &.range--vertical--large::-webkit-slider-thumb {
            margin-left: calc((var(--trackSizeLarge) - var(--thumbSizeLarge)) / 2);
            width: var(--thumbSizeLarge);
            height: var(--thumbSizeLarge);
            border: 4px solid var(--colorNeutralBackground1);
        }

        &:disabled::-webkit-slider-runnable-track,
        &:disabled::-webkit-slider-thumb {
            background: var(--colorNeutralForegroundDisabled);
            outline-color: var(--colorNeutralForegroundDisabled);
            cursor: default;
        }

        &:hover:not(:disabled)::-webkit-slider-runnable-track,
        &:hover:not(:disabled)::-webkit-slider-thumb {
            background: var(--colorBrandBackgroundHover);
        }

        &:active:not(:disabled)::-webkit-slider-runnable-track,
        &:active:not(:disabled)::-webkit-slider-thumb {
            background: var(--colorBrandBackgroundPressed);
        }

        /* Firefox Track */
        &::-moz-range-track {
            background: var(--colorBrandBackground);
            border: 0;
            width: var(--trackSizeMedium);
            height: 100%;
            cursor: pointer;
            border-radius: var(--borderRadiusCircular);
        }

        &.range--vertical--small::-moz-range-track {
            width: var(--trackSizeSmall);
        }

        &.range--vertical--large::-moz-range-track {
            width: var(--trackSizeLarge);
        }

        /* Firefox Thumb */
        &::-moz-range-thumb {
            width: var(--thumbSizeMedium);
            height: var(--thumbSizeMedium);
            background: var(--colorBrandBackground);
            border: 4px solid var(--colorNeutralBackground1);
            border-radius: var(--borderRadiusCircular);
            cursor: pointer;
            outline: var(--strokeWidthThin) solid var(--colorNeutralStrokeAccessible);
            outline-offset: 0px;
        }

        &.range--vertical--small::-moz-range-thumb {
            width: var(--thumbSizeSmall);
            height: var(--thumbSizeSmall);
            border: 3px solid var(--colorNeutralBackground1);
        }

        &.range--vertical--large::-moz-range-thumb {
            width: var(--thumbSizeLarge);
            height: var(--thumbSizeLarge);
            border: 4px solid var(--colorNeutralBackground1);
        }

        &:disabled::-moz-range-track,
        &:disabled::-moz-range-thumb {
            background: var(--colorNeutralForegroundDisabled);
            outline-color: var(--colorNeutralForegroundDisabled);
            cursor: default;
        }

        &:hover:not(:disabled)::-moz-range-track,
        &:hover:not(:disabled)::-moz-range-thumb {
            background: var(--colorBrandBackgroundHover);
        }

        &:active:not(:disabled)::-moz-range-track,
        &:active:not(:disabled)::-moz-range-thumb {
            background: var(--colorBrandBackgroundPressed);
        }
    }
}