.number-input {
    box-sizing: border-box;
    display: inline-flex;
}

.number-input button {
    outline:none;
    -webkit-appearance: none;
    background-color: var(--counter-component-button-background-color);
    border: 1px solid var(--counter-component-border-color);
    color: var(--counter-component-button-text-color);
    align-items: center;
    justify-content: center;
    width: calc(3rem * .75);
    height: 3rem;
    cursor: pointer;
    margin: 0;
    position: relative;
}
.number-input button.decrease {
    border-radius: 50% 0 0 50%
}
.number-input button.increase {
    border-radius: 0 50% 50% 0
}
.number-input button:before,
.number-input button:after {
    display: inline-block;
    position: absolute;
    content: '';
    width: 1rem;
    height: 2px;
    background-color: var(--counter-component-button-text-color);
    transform: translate(-50%, -50%);
}
.number-input button.increase:after {
    transform: translate(-50%, -50%) rotate(90deg);
}
.number-input input.quantity {
    max-width: 6rem;
    padding: .5rem;
    border: 1px solid #FFF;
    border-width: 0 1px;
    font-size: 2rem;
    height: 3rem;
    font-weight: bold;
    text-align: center;
    background-color: var(--counter-component-input-background-color);
    border: 1px solid var(--counter-component-border-color);
    color: var(--counter-component-input-text-color);
}
.number-input input.quantity {
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield;
}
.number-input input.quantity::-webkit-inner-spin-button,
.number-input input.quantity::-webkit-outer-spin-button {
    -webkit-appearance: none;
}
.number-input button:focus, .number-input input:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--sp-element-focus-ring-color);
    z-index:1000;
}
.number-input button:hover {
    background-color: var(--counter-component-button-background-color-hover);
}