.header {
  @apply tw-fixed tw-top-0 tw-left-0 tw-right-0 tw-z-20
    tw-bg-black;

  & > div:first-child {
    min-height: 70px;
  }

  &.open {
    @apply tw-h-screen;
  }

  select {
    @apply tw-text-base tw-font-body tw-font-extralight
      tw-bg-transparent;
  }
}

.menu {
  @apply tw-flex tw-flex-col tw-justify-start tw-bg-black tw-h-full tw-text-left tw-pt-16 tw-py-8 tw-pb-8 tw-absolute tw-inset-0 tw-overflow-y-auto tw-w-full;

  z-index: 9;
  transform: translateX(-100%);

  li {
    @apply tw-list-none;
  }

  a,
  button {
    @apply tw-text-xl tw-px-0 tw-my-1 tw-font-medium tw-tracking-wider tw-justify-center;

    text-decoration: none;
    transition: color 0.3s linear;
  }
}

.menuOpen {
  transform: translateX(0);
}

.mobileMenuSection {
  @apply tw-flex tw-flex-row tw-self-center tw-w-1/2 tw-text-lg tw-px-0 tw-font-extralight tw-text-white tw-text-center tw-tracking-wider tw-mt-4;

  &:after,
  &:before {
    @apply tw-flex-1 tw-border-b tw-border-solid tw-border-current tw-m-auto;

    content: '';
  }

  &:before {
    @apply tw-mr-2.5;
  }
  &:after {
    @apply tw-ml-2.5;
  }
}

.burger {
  @apply tw-relative tw-flex tw-flex-col tw-justify-around tw-w-8 tw-h-8 tw-bg-transparent tw-border-none tw-cursor-pointer tw-p-0 tw-z-10 tw-mr-4;

  &:focus {
    @apply tw-outline-none;
  }

  div {
    @apply tw-w-8 tw-h-1 tw-bg-white tw-relative tw-rounded-xl;

    transform-origin: 1px;

    :first-child,
    :nth-child(3) {
      @apply tw-rotate-0;
    }
    :nth-child(2) {
      @apply tw-opacity-100 tw-translate-x-0;
    }
  }
}

.burgerOpen {
  :first-child {
    transform: rotate(45deg);
  }
  :nth-child(2) {
    @apply tw-opacity-0 tw-translate-x-5;
  }
  :nth-child(3) {
    transform: rotate(-45deg);
  }
}

.logo {
  @apply tw-h-5 sm:tw-h-8 tw-m-0 tw-w-auto 2xl:tw-h-10;

  // custom font for "Alpha" logo text
  #Alpha tspan {
    font-family: Orbitron-Medium, Orbitron;
  }

  @screen 2xl {
    height: 53px;
  }
}

.menuItem {
  @apply tw-px-5 tw-py-2.5 tw-rounded;

  &:hover {
    @apply tw-bg-gray-5;
  }
}

.headerText {
  @apply tw-mr-1.5 tw-cursor-pointer tw-text-sm tw-font-medium;
}

.firstLevelMenu {
  @apply tw-flex-shrink-0 tw-flex tw-flex-row tw-items-center tw-px-3 tw-py-2 tw-rounded;
}

.firstLevelMenuActive {
  @apply tw-text-sov-white tw-bg-gray-2.5;
}

// blueprintjs override
:global(.bp3-popover).header-nav-popover :global(.bp3-popover-content) {
  @apply tw-bg-gray-2.5 tw-border-0 tw-p-1 tw-overflow-hidden tw-rounded;

  min-width: 12.875rem;

  & li + li {
    @apply tw-mt-2;
  }

  & :global(.bp3-menu) {
    @apply tw-p-0;
  }
}

.host {
  @apply tw-flex tw-flex-row tw-self-center tw-w-full tw-text-sov-white tw-text-sm tw-leading-snug tw-px-0 tw-font-extralight tw-text-center tw-mt-2 tw-list-none;

  &:after,
  &:before {
    @apply tw-flex-1 tw-border-b tw-border-solid tw-border-current tw-m-auto;

    content: '';
  }

  &:not(:empty) {
    &:before {
      @apply tw-mr-2.5;
    }
    &:after {
      @apply tw-ml-2.5;
    }
  }

  &:empty {
    @apply tw-mb-2;
  }
}
