[data-component-id="pedestal:site_navigation"].site-navigation--color-surface {
  --background: var(--color-surface, white);
  --color: var(--color-on-surface, black);
}

[data-component-id="pedestal:site_navigation"].site-navigation--color-primary {
  --background: var(--color-primary, white);
  --color: var(--color-on-primary, black);
}

[data-component-id="pedestal:site_navigation"].site-navigation--color-secondary {
  --background: var(--color-secondary, white);
  --color: var(--color-on-secondary, black);
}

[data-component-id="pedestal:site_navigation"] {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: var(--header-height);
}

.site-navigation__pane {
  display: none;
}

.site-navigation[data-menu-open] .site-navigation__pane {
  position: fixed;
  inset: 0;
  height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  //padding: calc(var(--rhyme-md) + var(--drupal-displace-offset-top, 0)) var(--rhyme-md) var(--rhyme-md) calc(var(--drupal-displace-offset-left, 0));
  z-index: 100;
}

.site-navigation[data-menu-open] .site-navigation__pane {
  text-align: center;
  background-color: var(--background);
  color: var(--color);
}

.site-navigation[data-menu-open] .site-navigation__icon-line {
  stroke: var(--color);
}

@media (min-width: 960px) {
  .site-navigation:not([data-menu-open]) .menu-icon {
    display: none;
  }

  .site-navigation__pane {
    display: block;
  }
}