Polymer 3 LitElement PWA cannot style Polymer Element using css mixin

Question

I am using the Polymer 3 LitElement PWA Starter kit (template-no-redux) https://pwa-starter-kit.polymer-project.org/. I want to style the app-header element with fade-background effect. It requires the use of 2 css mixins: --app-header-background-rear-layer and --app-header-background-front-layer.

app-header {
    position: fixed;
    top: 0;
    left: 0; 
    width: 100%;
    text-align: center;
    color: var(--app-header-text-color);
    border-bottom: 1px solid #eee;
    --app-header-background-rear-layer: {
        background-color: blue;
      }
    --app-header-background-front-layer: {
        background-color: green;}
}

This has no effect on the header. This is how the header should behave: https://stackblitz.com/edit/b2zcob

Has anyone got the same issue ?