title: Polymer: Can't overwrite default font with custom property mixin
body: <p>Can't overwrite default font (Roboto) using custom property mixin when any paper font mixins are referenced ie: @apply(--paper-font-sunhead); as it looks like nested CSS variables get confused.</p>
  
  <p>Live example:
  <a href="https://codepen.io/rhysyg03/pen/YxgYQp?editors=1100" rel="nofollow noreferrer">https://codepen.io/rhysyg03/pen/YxgYQp?editors=1100</a></p>
  
  <pre><code>&lt;custom-style&gt;
      &lt;style&gt;
      .my-class {
        --paper-font-common-base: {
                  font-family: Georgia, Serif;
                -webkit-font-smoothing: antialiased;
              }
      }
      &lt;/style&gt;
  &lt;/custom-style&gt;
  </code></pre>
  
  <p>When a CSS variable is nested, in this example:</p>
  
  <ul>
  <li>font-family: var(--paper-font-subhead_-_font-family)</li>
  <li>refers back to</li>
  <li>font-family: var(--paper-font-common-base_-_font-family)</li>
  </ul>
  
  <p>--paper-font-subhead_-_font-family variable refers back to variable in the same declaration (html) even if it’s been overwritten (.my-class).</p>
  
  <p>Please help :)</p>