:host{
  background-color:var(--color-neutral-200);
  background-color:var(--background,var(--color-neutral-200));
  display:block;
  /** @prop --background: Sets the background color of the component. */
  z-index:40
}

:host([position=fixed]){
  left:0;
  position:fixed;
  top:0;
  width:100%;
  z-index:30
}

:host([position=fixed])+*{
  margin-top:3rem
}

:host([color=stock]),:host([color=stock]) div{
  --background:var(--color-stock)
}

:host([color=key]),:host([color=key]) div{
  --background:var(--color-key)
}

:host([color=primary]),:host([color=primary]) div{
  --background:var(--color-primary-500)
}

:host([color=neutral]),:host([color=neutral]) div{
  color:#444a5e;
  color:var(--color-neutral-700,#444a5e)
}

:host([color=neutral]),:host([color=neutral]) div{
  --background:var(--color-neutral-200)
}

:host([color=success]),:host([color=success]) div{
  --background:var(--color-success-500)
}

:host([color=warn]),:host([color=warn]) div{
  --background:var(--color-warn-500)
}

:host([color=danger]),:host([color=danger]) div{
  --background:var(--color-danger-500)
}

:host div{
  align-items:center;
  background-color:var(--color-neutral-200);
  background-color:var(--background,var(--color-neutral-200));
  color:#fff;
  color:var(--color-stock,#fff);
  display:flex;
  flex-direction:row;
  font-family:sans-serif;
  font-family:var(--font-family-body,sans-serif);
  justify-content:space-between;
  line-height:1;
  margin:0;
  padding:.5rem;
  vertical-align:middle
}

:host div>*{
  vertical-align:middle
}

:host ::slotted([slot=middle]){
  flex-grow:1;
  padding-left:1rem;
  padding-right:1rem
}

