.kbq-stepper {
    // margin used by design to reduce gap between step arrows
    $step-margin: -2px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    width: var(--kbq-form-field-size-addon-width);
    height: 100%;

    .kbq-stepper-step-up {
        margin-bottom: $step-margin;
    }

    .kbq-stepper-step-down {
        margin-top: $step-margin;
    }

    .kbq-stepper-step-up,
    .kbq-stepper-step-down {
        width: 100%;
        text-align: center;
    }
}