navbar.pcss

.navbar {
  /* overflow-hidden compensates .navbar__section--expandable */
  @apply bg-grey-700 text-white overflow-hidden;
}

.navbar__content {
  @apply grid items-center;

  grid-template-areas: "brand menutoggle"
                       "main main"
                       "external external"
                       "actions actions";
  grid-template-columns: 2rem 1fr;
}

.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 px-4 py-2;

  margin: 0 -2rem;
}

.navbar-menu__item {
  @apply block;
}

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

  @screen lg {
    @apply text-lg;
  }

  @screen xl {
    @apply text-xl;
  }
}

.navbar-menu__submenu .navbar-menu__link {
  @apply text-lg text-grey-200 font-condensed normal-case leading-normal pl-2;
}

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

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

  &:after {
    /* Compensate for font specifics, align to center. */
    margin-bottom: -0.125rem;
    @apply ml-auto font-light text-sm;
    content: "\f078";
    font-family: "Font Awesome 5 Pro";
  }
}


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

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

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

  .navbar-menu__item {
    @apply inline-block;

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

  .navbar-menu__link {
    @apply leading-normal
  }

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