@import "import";

.header {
  @include flex(column-reverse);
  position: fixed;
  top: 0;
  width: 100%;
  //height: calc(var(--header-height) + var(--banners-height));
  z-index: z(header);
  pointer-events: none;

  @include breakpoint(medium) {
    @include flex(column);
  }

  .inner {
    @include global-container(var(--spacer-4));
    @include flex(row, space-between, $gap: spacer(3));
  }

  .navList {
    &.primary,
    &.secondary {
      background-color: color(text-dim-1);
      color: color(text);
      backdrop-filter: blur(50px);
      pointer-events: auto;
    }
  }

  .left {
    @include flex($gap: spacer(3));
  }
}

.divider {
  top: var(--header-height);
  color: color(text);
}