@import 'proto-ui.vusion/src/u-number-input.vue/module.css';

.button {
    background: none;
}

.button[role="up"] {
    top: 2px;
}

.button[role="down"] {
    bottom: 2px;
}

.button[role="up"]::before {
    icon-font: url("../u-icon.vue/icons/keyboard-arrow-up.svg");
}

.button[role="down"]::before {
    icon-font: url("../u-icon.vue/icons/keyboard-arrow-down.svg");
}

.button[class]::before {
    width: 1em;
    display: inline-block;
    font-size: 16px;
    color: #989898;
}

.button:hover {
    background: none;
}

.button[disabled] {
    cursor: not-allowed;
    opacity: 0.65;
    background: none;
}

.button[class]:hover::before {
    color: $brand-primary;
}

.button[disabled]:hover::before {
    color: #989898;
}

.root[readonly] .button {
    background: none;
    cursor: default;
}

.root[disabled] .button { background: none; }

.root[readonly] .button:hover::before { color: #989898; }

.root[disabled] .button:hover::before { color: #989898; }