/* TODO: This should be part of the desing system */

.show-errors .minus-plus-number {
    --border-color: var(--red-070);
}

.minus-plus-number {
    --input-height: 56px;
    --border-color: var(--gray-040);
    height: var(--input-height);
    overflow: hidden;
    border: solid 1px var(--border-color);
    border-width: 1px;
    border-radius: var(--rounded-md);
}

.minus-plus-number:focus-within {
    border: 2px solid var(--blue-110);
}

.minus-plus-number * {
    --input-height: 56px;
    height: 100%;
    border: none;
}

.minus-plus-number input {
    background-color: transparent;
    text-align: center;

    &:focus {
        background-color: transparent;
    }
}

.minus-plus-number button {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
}

.minus-plus-number input-group-btn:last-child button {
    border-left: 0;
}

.minus-plus-number button:not(:disabled):hover [fill],
.minus-plus-number button:not(:disabled):focus [fill] {
    fill: var(--blue-070);
}

.minus-plus-number button:not(:disabled):active:hover [fill] {
    fill: var(--blue-070);
}

.minus-plus-number button:not(:disabled):active [fill] {
    fill: var(--blue-070);
}