:host {
  display: flex;
  /* TODO: why does it overflow on smaller screens? */
  width: 100vw;
  flex-direction: row;
  align-items: center;
  box-sizing: border-box;

  background-color: var(--lmvz-semantic-color-surface-primary, #ffffff);

  --lmvz-header-x-spacing-level-1: var(--lmvz-dimension-28-8, clamp(0.5rem, 0.2rem + 1.29vw, 1.75rem));
  --lmvz-header-x-spacing-level-2: var(--lmvz-component-buttongroup-wrapper-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));

  padding: var(--lmvz-dimension-16-8, clamp(0.5rem, 0.38rem + 0.52vw, 1rem)) var(--lmvz-header-x-spacing-level-1);
  gap: var(--lmvz-header-x-spacing-level-1);

  .brand {
    /* min-width: var(--lmvz-dimension-96-48); */
    display: inline-flex;
    justify-content: center;
    align-items: center;
  }

  #fallback-logo-lmvz {
    height: 34px;
    width: auto;
  }

  nav {
    flex-grow: 1;
  }

  .primary-menubar {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .secondary-menubar {
    display: flex;
    flex-direction: row;
    align-items: center;
    /* gap: var(--lmvz-component-buttongroup-wrapper-gap-x); */
    margin-left: var(--lmvz-header-x-spacing-level-2);
    padding-left: var(--lmvz-header-x-spacing-level-2);
    border-left: 1px solid var(--lmvz-semantic-color-border-default, #e0e0e0);
  }
}