My css should be applying but it's ignored for some reason

This is only the component that is rendering the text that says "Forbidden" which is because I hit my GCP quota.

<script>
    export let text;
    export let color;
</script>

<pre class="formatted" style="--color: {color}">{text}</pre>

<style>
    .formatted {
        border-left-width: 6px;
        border-left-color: var(--color);
        border-radius: 3px;
    }
</style>

The generated HTML and CSS

I looked in the box model and it shows that the border is 0 but when I click on it to change it, it shows what it's supposed to be. The rendered page