Polymer 1.2: Change paper-item selected background colour

I searched for my problem and found this

However, the accepted solution does not work for me BUT I can't comment, since I have only 6 Reputation yet -.-

So Situation is, I want to use the paper-item from the Polymer framework inside the paper-listbox That works, but when you select an item by clicking on it, the background changes to grey... Docs and the answer to the question I linked abvoe suggest to overwrite --paper-item-selected / --paper-item-focus mixin, but this does not work for me

My code:

<link rel="import" href="../../../external/Polymer/bower_components/polymer/polymer.html">


<dom-module id="cit-literal-item">

<template>
    <!-- scoped CSS for this element -->
    <style is="custom-style">
        .spacer {
            @apply(--layout-flex);
        }
        paper-item {
            --paper-item-selected: {
                background-color: #FFFFFF;
            };

            --paper-item-focused: {
                background-color: #FFFFFF;
            };
        }
    </style>
    <paper-item>Test</paper-item>
</template>
</dom-module>

Main Document Code:

...
<!-- Polymer custom elements -->
<link rel="import" href="lib/internal/dom-modules/literals/cit-literal-item.html">
...
<body>
    <paper-listbox>
        <cit-literal-item></cit-literal-item>
        <cit-literal-item></cit-literal-item>
    </paper-listbox>
</body>

Solution

I found the "solution"! The property I had to overwrite is called --paper-item-focused-before

I looked at the source code of the <paper-item> and found this in the shared-styles.html

shared-styles.html

:host(.iron-selected) {
    font-weight: var(--paper-item-selected-weight, bold);
    @apply(--paper-item-selected);
  }
  :host([disabled]) {
    color: var(--paper-item-disabled-color, --disabled-text-color);
    @apply(--paper-item-disabled);
  }
  :host(:focus) {
    position: relative;
    outline: 0;
    @apply(--paper-item-focused);
  }
  :host(:focus):before {
    @apply(--layout-fit);
    background: currentColor;
    content: '';
    opacity: var(--dark-divider-opacity);
    pointer-events: none;
    @apply(--paper-item-focused-before);
  }

One can see, that the only mixin applying a color by default is --paper-item-focused-before, which applies a style to the :before pseudoelement of the <paper-item>.