:host {
  --wcs-header-background-color: var(--wcs-semantic-color-background-surface-primary);
  --wcs-header-gap: var(--wcs-semantic-spacing-large);
  --wcs-header-height: calc(8 * var(--wcs-semantic-size-base));
  --wcs-header-logo-height: calc(4 * var(--wcs-semantic-size-base));
  --wcs-header-padding-horizontal: var(--wcs-semantic-spacing-large);
  --wcs-header-border-bottom: solid var(--wcs-semantic-border-width-default) var(--wcs-semantic-color-border-secondary);
  --wcs-header-title-color: var(--wcs-semantic-color-text-primary);
  --wcs-header-title-font-weight: var(--wcs-semantic-font-weight-medium);
  --wcs-header-title-font-size: var(--wcs-semantic-font-size-label-1);
}

header {
  border-bottom: var(--wcs-header-border-bottom);
  display: flex;
  align-items: center;
  box-sizing: border-box;
  z-index: 1;
  background: var(--wcs-header-background-color);
  padding: 0 var(--wcs-header-padding-horizontal);
  height: var(--wcs-header-height);
  gap: var(--wcs-header-gap);
}

::slotted(img) {
  height: var(--wcs-header-logo-height);
}

::slotted(h1), ::slotted(a) {
  color: var(--wcs-header-title-color);
  margin: 0;
  font-weight: var(--wcs-header-title-font-weight);
  font-size: var(--wcs-header-title-font-size);
  text-decoration: none;
}

::slotted([slot=center]) {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

::slotted([slot=actions]) {
  margin-left: auto;
}