/* prettier-ignore */
:host {
  --bce-color-l: var(--bce-color-primary-l);
  --bce-color-n: var(--bce-color-primary-n);
  --bce-color-d: var(--bce-color-primary-d);
  --bce-color-t: var(--bce-color-primary-t);
  position: relative;
  display: block;
  width: 100%;
  height: 56px;
  background-color: var(--bce-color-n);
  color: var(--bce-color-t);
}
:host header {
  z-index: 4;
  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.4);
  position: fixed;
  width: inherit;
  height: inherit;
  background-color: inherit;
  color: inherit;
}

:host([responsive]) header {
  padding: 0;
}
@media screen and (min-width: 1024px) {
  :host([responsive]) header {
    padding: 0 calc((100% - 930px) / 2);
  }
}
@media screen and (min-width: 1440px) {
  :host([responsive]) header {
    padding: 0 calc((100% - 1110px) / 2);
  }
}