.spinner input {
    text-align: center;
    color: var(--font-primary);
    border: none;
    outline: none;
    /*pointer-events: none;*/
    padding:3px;
    height: 100%;
}

span.spinner {
    display: block;
    position: relative;
    height: 31px;
    user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    border: 1px solid var(--input-border);
    border-radius: 5px;
}

    span.spinner.no-manual-entry input {
        pointer-events: none;
    }

    span.spinner.inline {
        display:inline-block;
    }

    span.spinner.small {
        height: 20px;
    }

    span.spinner > .sub,
    span.spinner > .add {
        position: absolute;
        display: block;
        top: 0;
        min-width: 20px;
        width: 25%;
        height: 100%;
        text-align: center;
        cursor: pointer;
        transition: 0.1s linear;
        padding: 8px 5px;
        background: var(--light-gray);
        color: var(--dark-gray);
        border-radius:inherit;
    }

    span.spinner > .add {
        right: 0;
        border-left: 1px solid var(--input-border);

        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

    span.spinner > .sub {
        left: 0;
        border-right: 1px solid var(--input-border);
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

        span.spinner > .sub:hover,
        span.spinner > .add:hover {
            background: var(--gray);
        }

    span.spinner.small > .add, 
    span.spinner.small > .sub {
        padding: 2px;
    }

.spinner input[type=number]::-webkit-inner-spin-button, .spinner input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
}