.dialog-header {
  background-color: mc('blue', '700');
  background: radial-gradient(ellipse at top, mc('blue', '500'), mc('blue', '700')),
            radial-gradient(ellipse at bottom, mc('blue', '800'), mc('blue', '700'));
  height: 60px;
  color: #FFF;
  display: flex;
  align-items: center;
  padding: 0 1rem;
  font-size: 1.2rem;

  &.is-red {
    background-color: mc('red', '700');
    background: radial-gradient(ellipse at top, mc('red', '500'), mc('red', '700')),
              radial-gradient(ellipse at bottom, mc('red', '800'), mc('red', '700'));
  }

  &.is-dark {
    background-color: mc('grey', '900');
    background: radial-gradient(ellipse at top, mc('grey', '800'), mc('grey', '900')),
              radial-gradient(ellipse at bottom, mc('grey', '800'), mc('grey', '900'));
  }
}