.navbar {
  @apply bg-grey-700 text-white;
}

.navbar__content {
  @apply grid items-center;

  grid-template-areas: "brand menutoggle"
                       "main main"
                       "external external"
                       "actions actions";
  grid-template-columns: auto 1fr;

  &:not(.navbar__content--initialized) {
    @apply hidden;
  }
}

.navbar--simple .navbar__content {
  grid-template-areas: "brand menutoggle"
                       "main main"
                       "actions actions";
}

.navbar__brand {
  grid-area: brand;
}

.navbar__external {
  grid-area: external;
}

.navbar__main {
  grid-area: main;
}

.navbar__actions {
  grid-area: actions;
}

.navbar__menutoggle {
  grid-area: menutoggle;
}

.navbar__section--expandable {
  @apply bg-black p-4;
}

.navbar-menu__item {
  @apply block;
}

.navbar-menu__item:hover ~.navbar-menu__item {
  z-index: 0;
}

.navbar-menu__link {
  @apply text-xl font-condensed uppercase leading-loose cursor-pointer;
}

.navbar-menu__submenu .navbar-menu__link {
  @apply text-lg text-grey-200 font-body normal-case leading-normal pl-4 whitespace-no-wrap;
}

.navbar-menu__link,
.navbar-menu__link:hover {
  @apply no-underline;
}

.navbar-menu__submenu-toggle {
  @apply flex items-center;

  &:after {
    content: "\e925";
    font-family: "pirati-ui";

    @apply ml-auto font-light text-sm transition duration-200;
  }

  &.navbar-menu__submenu-toggle--open:after {
    transform: rotate(-180deg);
  }
}

.navbar-menu__submenu-wrap {
  @apply hidden;
}

.navbar-menu__submenu-wrap--show {
  @apply block;
}

@screen lg {
  .navbar {
    @apply py-8;
  }

  .navbar__content {
    grid-template-areas: "brand external actions"
                       "brand main actions";
    grid-template-columns: 8rem 1fr auto;

    &:not(.navbar__content--initialized) {
      @apply grid;
    }
  }

  .navbar--simple .navbar__content {
    grid-template-areas: "brand main actions";
    grid-template-columns: auto 1fr auto;
  }

  .navbar__section--expandable {
    @apply bg-transparent px-0 py-0 m-0;
  }

  .navbar-menu__item {
    @apply relative inline-block;

    &:not(:first-child) {
      @apply ml-4;
    }
  }

  .navbar-menu__link {
    @apply text-lg leading-normal;
  }


  .navbar-menu__submenu-toggle:after {
    @apply ml-2;
  }

  .navbar-menu__submenu-toggle {
    @apply z-20 relative;
  }

  .navbar-menu__submenu-wrap {
    @apply block absolute bg-black px-4 pb-4 z-10 opacity-0 pointer-events-none transition duration-200;

    min-width: calc(100% + 2rem);
    padding-top: 3.25rem;
    left: -1rem;
    top: -1rem;
  }

  .navbar-menu__submenu-wrap--show {
    @apply opacity-100 pointer-events-auto;
  }

  .navbar-menu__submenu {
    .navbar-menu__link {
      @apply text-white text-base pl-0;
    }
  }
}


@screen 2xl {
  .navbar-menu__item:not(:first-child) {
    @apply ml-6;
  }

  .navbar-menu__link {
    @apply text-xl;
  }
}