Both QSpinBox's buttons increment its value when using a custom stylesheet

Question

I need to style QSpinBox like this:

But when I did it with stylesheet, both down-button and up-button were incrementing value, where down-button should have decremented it.

Stylesheet:

QSpinBox {
    border: 1px solid gray;
    border-radius: 3px;
    padding: 2px;
}

QSpinBox::up-button, QSpinBox::down-button {
    width: 40px;
    height: 50px;
    subcontrol-origin: border;
    subcontrol-position: top right;
    border: 1px solid gray;
    border-radius: 3px;
}

QSpinBox::up-arrow, QSpinBox::down-arrow {
    width: 10px;
    height: 10px;
}

QSpinBox::up-button {
    image: url(:/icons/ui/images/icons/arrow-up.svg);
    margin-right: 40px;
}

QSpinBox::down-button {
    image: url(:/icons/ui/images/icons/arrow-down.svg);
    margin-left: 2px;
}

When I placed up-button on top, and down-button on bottom, they worked fine.

Answer 1

Place up-button on the right, and down-button on the left.

This requires splitting their stylesheets, and adding a margin-right to down-button with the value of up-button's width.

Minimal necessary stylesheet that keeps the buttons laid out horizontally, separated, and functioning. Build from this step by step, and go back one step when it stops working:

QSpinBox {
    border: 1px solid gray;
}

QSpinBox::up-button {
    border: 1px solid red;
    subcontrol-position: top right;
    width: 30px;
}

QSpinBox::down-button {
    border: 1px solid blue;
    subcontrol-position: top right;
    width: 30px;
    margin-right: 30px;
}