Separate Layout CSS from Theme CSS to allow for easy overrides

Problem/Motivation

Currently both layout (mandatory) CSS and theme (opinionated) CSS are together on css/youtube-cookies-popup.css: {}

I'm calling layout css the properties are objectively needed for this to properly work, i.e:

.youtube-cookies-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  bottom: 0;
}

While theme, opinionated CSS are the styles that are needed for the popup to have a design and provide an out-of-the-box experience, but developers might want to override or change them as they won't fit their design specifications, i.e.

.youtube-cookies-popup-box-buttons button {
  background-color: white; // why this white?
  color: #2d5eb5; // why this blue?
}

As it is now, the developer would need to either override the whole CSS or provide overrides on a separate stylesheet, thus increasing the CSS sent into the browser.

Proposed resolution

Separate the layout and the theme CSS on two stylesheets:

youtube-cookies:
  js:
    js/youtube-cookies.js: { minified: true, weight: -10 }
  header: true
  css:
    layout:
      css/youtube-cookies-popup.css: {}
    theme:
      css/youtube-cookies-theme.css: {}
  dependencies:
    - core/drupal
    - core/drupalSettings

This will allow the front-end developers to easily override the theme (or even disable it, as it might inherit styles from a framework, i.e bootstrap) while keeping the layout, mandatory CSS

libraries-override:
  youtube_cookies/youtube-cookies:
    css:
      theme:
        css/youtube-cookies-theme.css: false