[QUESTION] How to center text in the container?

[opack]

Hi! I am trying to center the selected value in the container. I managed to center the text within the input (although it is not really centered because of an offset on the left that I cannot get rid of), but not the text representing the selected value.

To be clear, here is a screenshot: In this image, 10 is the value, and I would like it to be centered. As we can see, the cursor is centered. The list values is centered too (although honestly I don't understand why...), but no the selected value. I tried fiddling with class and containerStyles attributes and I manage to change the color of the text, but the text-align property seems to be ignored (or overriden?). Here is the code resulting in the screenshot:

<script lang="ts">
    import Select from 'svelte-select'

    let items = [
        { value: '1', label: '1' },
        { value: '2', label: '2' },
        /* truncated */
        { value: '21', label: '21' }
    ]

    let value = '1'
</script>

<Select {items} clearable={false} bind:value inputStyles="text-align: center;" />

I'm sure it's just a small thing, but I can't get it right 😅 I searched in the issues but found nothing similar.

Thanks for your help

Bonus: please also tell me if there is a way to correctly align the cursor with the center of the input list 🙏