st-number-stepper {

    --st-form-button-padding-y: 4px;
    --st-form-button-padding-x: 10px;
    --st-form-button-color: #999999;
    --st-form-button-background-color: #dcdcdc;
    --st-form-button-hover-background: #dcdcdc;
    --st-form-button-active-background: #c2c2c2;

    .st-number-stepper {
        display: flex;
        justify-content: space-between;
        align-content: stretch;
        flex-wrap: wrap;

        &.st-border {
            border: var(--st-number-stepper-border, 2px solid #dcdcdc);
            padding: var(--st-number-stepper-padding, 10px 10px);
            border-radius: var(--st-number-stepper-border-radius, 4px);
        }

        &.st-errors {
            border-color: var(--st-number-stepper-error-border-color, #bf0e08);
        }

        button {
            flex: var (--st-number-stepper-button, flex, 0 0 33.3333%);
            text-align: center;

            &.st-active, &.st-active:hover {
                color: var(--st-number-stepper-selected-color, #fff);
                background-color: var(--st-number-stepper-selected-background-color, #3277b3);
            }
        }
    }
}