remove top padding from app-toolbar within paper-dialog - polymer

Question

For the life of me, I can't seem to remove the stupid margin from the top of this paper-dialog when I have an app-toolbar at the top.

I managed to get it sorted with just a standard div by using margin-top: 0px;, but I can't do the same for the app-toolbar.

The culprit in developer mode on Chrome appears to be this line, but I can't get to it...

Code

paper-dialog {
  border-radius: 2px;
}

app-toolbar {
  background: green;
  margin-top: 0px;
}

.card-content {
  margin-top: 0px;
}

<base href="https://polygit.org/polymer+polymer+v1.9.1/components/" />
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="polymer/polymer.html" />
<link rel="import" href="paper-dialog/paper-dialog.html" />
<link rel="import" href="app-layout/app-toolbar/app-toolbar.html" />
<link rel="import" href="paper-input/paper-input.html" />
<link rel="import" href="neon-animation/animations/scale-up-animation.html" />

<paper-dialog modal alwaysOnTop opened horizontalAlign="auto" entry-animation="scale-up-animation" exit-animation="fade-out-animation">
  <app-toolbar>Log in</app-toolbar>
  <div class="card-content">
    <paper-input placeholder="username or email"></paper-input>
    <paper-input placeholder="password"></paper-input>
  </div>
</paper-dialog>

Answer 1

Try adding:

padding-top: 0px;
margin-top: 0px;

to your css for paper-dialog or the div containing paper-dialog!

Answer 2

The trick to getting your CSS to trump inherited CSS is to be more specific than the inherited CSS.

To do this I added a class to paper-dialog and then for the selector I said paper-dialog.someclass>app-toolbar:first-child which means the first instance of app-toolbar within paper-dialog with the class someclass.

Then is accepts that this CSS overwrites the inherited bit.

paper-dialog {
  border-radius: 2px;
}

paper-dialog.someclass>app-toolbar:first-child {
  background: green;
  margin-top: 0px;
}

.card-content {
  margin-top: 0px;
}

<base href="https://polygit.org/polymer+polymer+v1.9.1/components/" />
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="polymer/polymer.html" />
<link rel="import" href="paper-dialog/paper-dialog.html" />
<link rel="import" href="app-layout/app-toolbar/app-toolbar.html" />
<link rel="import" href="paper-input/paper-input.html" />
<link rel="import" href="neon-animation/animations/scale-up-animation.html" />

<paper-dialog class="someclass" modal alwaysOnTop opened horizontalAlign="auto" entry-animation="scale-up-animation" exit-animation="fade-out-animation">
  <app-toolbar>Log in</app-toolbar>
  <div class="card-content">
    <paper-input placeholder="username or email"></paper-input>
    <paper-input placeholder="password"></paper-input>
  </div>
</paper-dialog>