:host {
  --wcs-action-bar-background-color: var(--wcs-semantic-color-background-surface-primary);
  --wcs-action-bar-gap: var(--wcs-semantic-spacing-small);
  --wcs-action-bar-gap-actions: calc(4 * var(--wcs-semantic-spacing-base));
  --wcs-action-bar-min-height: calc(10 * var(--wcs-semantic-size-base));
  --wcs-action-bar-padding-horizontal: var(--wcs-semantic-spacing-large);
  --wcs-action-bar-padding-vertical: var(--wcs-semantic-spacing-base);
  --wcs-action-bar-tabs-margin-top: calc(1.5 * var(--wcs-semantic-spacing-base));
  --wcs-action-bar-title-font-size: var(--wcs-semantic-font-size-heading-4);
  --wcs-action-bar-title-font-weight: var(--wcs-semantic-font-weight-heavy);
  --wcs-action-bar-title-color: var(--wcs-semantic-color-text-primary);
  --wcs-tabs-gutter-border-width: var(--wcs-semantic-border-width-default);
  --wcs-tabs-gutter-background-color: var(--wcs-semantic-color-border-secondary);
  padding: 0 var(--wcs-action-bar-padding-horizontal);
  min-height: var(--wcs-action-bar-min-height);
  background-color: var(--wcs-action-bar-background-color);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--wcs-action-bar-gap);
}
:host .title-actions {
  padding-top: var(--wcs-action-bar-padding-vertical);
  padding-bottom: var(--wcs-action-bar-padding-vertical);
  gap: var(--wcs-action-bar-gap-actions);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  flex-grow: 1;
}
:host .title-actions[data-has-tabs] {
  padding-bottom: 0;
}
:host h1 {
  font-size: var(--wcs-action-bar-title-font-size);
  font-weight: var(--wcs-action-bar-title-font-weight);
  line-height: 1.25;
  margin: 0;
  color: var(--wcs-action-bar-title-color);
}

:host([gutter]) {
  border-bottom: solid var(--wcs-tabs-gutter-border-width) var(--wcs-tabs-gutter-background-color);
}

::slotted([slot=actions]) {
  display: flex;
}

::slotted([slot=tabs]) {
  margin-top: var(--wcs-action-bar-tabs-margin-top);
}