/* input number */
input[type="number"] {
    &:not(:disabled):hover::-webkit-inner-spin-button,
    &:not(:disabled):active::-webkit-inner-spin-button,
    &:not(:disabled):focus::-webkit-inner-spin-button {
        -webkit-appearance: none;
        background-color: var(--colorNeutralForeground1);
        /* svg needs improvement */
        mask-image: url("data:image/svg+xml,%3Csvg  height='24'  xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cpath d='m2.15,7.35c0.2,0.2 0.5,0.2 0.7,0l3.15,-3.14l3.15,3.14a0.5,0.5 0 1 0 0.7,-0.7l-3.5,-3.5a0.5,0.5 0 0 0 -0.7,0l-3.5,3.5a0.5,0.5 0 0 0 0,0.7z' id='svg_1'/%3E%3Cpath d='m2.05,18.55c0.2,0.2 0.5,0.2 0.7,0l3.15,-3.14l3.15,3.14a0.5,0.5 0 1 0 0.7,-0.7l-3.5,-3.5a0.5,0.5 0 0 0 -0.7,0l-3.5,3.5a0.5,0.5 0 0 0 0,0.7z' id='svg_2' transform='rotate(-179.892 5.92853 16.4785)'/%3E%3C/svg%3E");
        mask-repeat: no-repeat;
        position: absolute;
        top: 4px;
        right: -8px;
        bottom: 0;
        width: 28px;
        opacity: 1;
        cursor: pointer;
    }
}

/* hide spinner on Firefox */
/* https://stackoverflow.com/questions/23372903/hide-up-down-arrow-buttons-spinner-in-input-number-firefox-29 */
/*
input[type=number] {
    -moz-appearance: textfield;
}
*/