/* prettier-ignore */
:host {
  --bce-c300:var(--bce-c300-primary);
  --bce-c400:var(--bce-c400-primary);
  --bce-c500:var(--bce-c500-primary);
  --bce-c600:var(--bce-c600-primary);
  --bce-c700:var(--bce-c700-primary);
  --bce-con1:var(--bce-con1-primary);
  --bce-con2:var(--bce-con2-primary);
  --bce-con3:var(--bce-con3-primary);
  --bce-con4:var(--bce-con4-primary);
  position: relative;
  display: block;
  width: 100%;
  height: 56px;
  background-color: var(--bce-c500);
  color: var(--bce-con1);
  box-sizing: border-box;
}
:host header {
  --bce-c-surface:var(--bce-c004-surface);
  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);
  }
}