.bx-number-stepper {
    text-align: center;

    > div {
        display: flex;
        align-items: center;

        span {
            flex: 1;
            display: inline-block;
            min-width: 40px;
            font-family: var(--bx-monospaced-font);
            white-space: pre;
            font-size: 13px;
            margin: 0 4px;
        }

        button {
            flex-shrink: 0;
            border: none;
            width: 24px;
            height: 24px;
            margin: 0;
            line-height: 24px;
            background-color: var(--bx-default-button-color);
            color: #fff;
            border-radius: 4px;
            font-weight: bold;
            font-size: 14px;
            font-family: var(--bx-monospaced-font);

            &:hover {
                @media (hover: hover) {
                    background-color: var(--bx-default-button-hover-color);
                }
            }

            &:active {
                background-color: var(--bx-default-button-hover-color);
            }

            &:disabled + span {
                font-family: var(--bx-title-font);
            }
        }
    }

    input[type=range] {
        display: block;
        margin: 8px 0 2px auto;
        min-width: 180px;
        width: 100%;
        color: #959595 !important;
    }

    input[type=range]:disabled, button:disabled {
        display: none;
    }

    &[data-disabled=true], &[disabled=true] {
        input[type=range], button {
            display: none;
        }
    }
}


.bx-dual-number-stepper {
    > span {
        display: block;
        font-family: var(--bx-monospaced-font);
        font-size: 13px;
        white-space: pre;
        margin: 0 4px;
        text-align: center;
    }

    > div {
        input[type=range] {
            display: block;
            width: 100%;
            min-width: 180px;
            background: transparent;
            color: #959595 !important;
            appearance: none;
            padding: 8px 0;

            range-track() {
                background: linear-gradient(90deg, #fff var(--from), var(--bx-primary-button-color) var(--from) var(--to), #fff var(--to) 100%);
                height: 8px;
                border-radius: 2px;
            }

            range-track-hover() {
                background: linear-gradient(90deg, #fff var(--from), #006635 var(--from) var(--to), #fff var(--to) 100%);
            }

            thumb() {
                margin-top: -4px;
                appearance: none;
                width: 4px;
                height: 16px;
                background: #00b85f;
                border: none;
                border-radius: 2px;
            }

            thumb-hover() {
                background: #fb3232;
            }

            &::-webkit-slider-runnable-track {
                range-track()
            }

            &::-moz-range-track {
                range-track()
            }

            &::-webkit-slider-thumb {
                thumb();
            }

            &::-moz-range-thumb {
                thumb();
            }

            &:hover, &&:active, &:focus {
                &::-webkit-slider-runnable-track {
                    range-track-hover();
                }

                &::-moz-range-track {
                    range-track-hover();
                }

                &::-webkit-slider-thumb {
                    thumb-hover();
                }

                &::-moz-range-thumb {
                    thumb-hover();
                }
            }
        }
    }

    &[data-disabled=true], &[disabled=true] {
        input[type=range] {
            display: none;
        }
    }
}