flynt-component[name='NavigationBurger'] {
  --navigation-height: 64px;
  block-size: var(--navigation-height);

  @media (min-width: $breakpoint-tablet-horizontal) {
    display: none;
  }

  &[data-status='menuIsOpen'] {
    .container {
      box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.07);
    }
  }

  .container {
    align-items: center;
    background-color: var(--color-background);
    block-size: var(--navigation-height);
    border-block-end: solid 2px var(--color-border);
    display: flex;
    inline-size: 100%;
    inset-block-start: 0;
    inset-inline: 0;
    justify-content: space-between;
    padding-block: 12px;
    position: fixed;
    z-index: 99;

    .admin-bar & {
      inset-block-start: var(--wp-admin--admin-bar--height);
    }
  }

  @import 'Partials/logo';
  @import 'Partials/hamburger';
  @import 'Partials/menu';
}

// Overwriting wp defaults to keep admin bar fixed
@media screen and (max-width: 600px) {
  // stylelint-disable-next-line selector-max-id
  #wpadminbar {
    position: fixed;
  }
}
