BUG: css gets mangled with :root

[kitsguru]

I have this block of CSS in a Twig template that gets mangled when saved. If I remove the type="text/css" the extension goes into an infinite loop when attempting to save.

<style type="text/css">
    :root {
        --header-bg-color: var(--bs-light);
        --header-color: var(--bs-primary);
        --header-height: auto;
    }

    .header-bg {
        height: var(--header-height);
        background: var(--header-bg-color);
        color: var(--header-color);
    }

    @media (min-width:  576px) {
    /* small */
        .header-bg {
            height: auto;
            background: transparent url({{img.thumbUrlPath3 }}) center center;
            background-size: cover;
        }
    }

    @media (min-width:  768px) {
    /* medium */
        .header-bg {
            background: transparent url({{img.thumbUrlPath2 }} ) center center;
            background-size: cover;
        }
    }

    @media (min-width:  992px) {
    /* large */
        .header-bg {
           background: transparent url({{img.thumbUrlPath }} ) center center;
           background-size: cover;
        }
    }

    @media (min-width:  1200px ) {
    /* x-large and xx-large */
        .header-bg {
           background: transparent url({{img.urlPath }} ) center center;
           background-size: cover;
        }
    }
</style>

The workaround was to move the CSS to a separate file as pure CSS and then embed the file.