Changing font-size does not work properly

[Dav418]

Hello,

In my project, I am trying to change the size of the font but this does not make the smooth-top (343x61) smooth-middle (343x30) and smooth-bottom (343-61) update properly.

Increasing the flex val in pickerOptions also seems to do nothing

I am doing this by passing on my own class in data like so

pickerOptions() {
            const list = this.options.map(option => option.label);
            const pickerOptionsRtn = [{
                currentIndex: this.options.findIndex(opt => opt.value === this.internalValue),
                flex: 5,
                list,
                textAlign: 'center',
                className: 'smooth-scroll-block has-opacity-1'
            }];

            return pickerOptionsRtn;
        },

My css is

// used in className
.smooth-scroll-block{
        font-size: 23px !important; // font does not change without important
}

.smooth-picker {
        background-color: map-get($elevation, '5') !important;
    }

.smooth-scroll-block{
    font-size: 23px !important;
}

.smooth-handle-layer {
    padding-left: #{nth($spacing, 2)}px;
    padding-right: #{nth($spacing, 2)}px;
}

.smooth-top, .smooth-middle, .smooth-bottom {
    background: transparent;
}
.smooth-top {
    border-bottom: solid 1px $border-picker-color !important;
    background: rgba(map-get($elevation, '5'), 0.55) !important;
}
.smooth-bottom {
    border-top: solid 1px $border-picker-color !important;
    background: rgba(map-get($elevation, '5'), 0.55) !important;
}

and this produces this (currently selected is 'Electronics and Software':

Any help is appreciated, thanks.