$navbar-navbtn-transition: color 0.175s ease;
$navbar-drill-transition: left 0.5s ease;
$navbar-primary-font-size: ms(3);
$navbar-secondary-font-size: ms(-2);

//
// navbar
//
.navbar {
  @extend %heading-font-regular;
  position: relative;
  z-index: 1;
  background-color: $navbar-body-bg;
  color: $navbar-link-color;

  &--transparent {
    background-color: transparent;
  }
}

.navbar__inner {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: flex-end;
  margin: 0 auto;
  background-color: $navbar-body-bg;
  width: 100%;
  max-width: $grid-page-layout-width;
}

//
// navbtn // buttons and links in navigation context
//
.navbtn {
  @extend %heading-font-regular;
  display: inline-block;
  position: relative;
  transition: $navbar-navbtn-transition;
  border: 0;
  background-color: transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  color: $navbar-link-color;
}

.navbtn--skip {
  position: absolute;
  top: -4rem;
  left: 10px;
  text-transform: uppercase;
}

.navbtn--skip:focus {
  top: 2px;
  left: 10px;
}

.navbtn--primary {
  @extend %heading-font-bold;
}

.navbtn--drill-up {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  background-color: $navbar-lightened-bg;
  padding: $spacer-xs $navbar-padding;
  width: 100%;
  text-align: right;
}

.navbtn--search,
.navbtn--menu {
  top: -0.1em;
  font-size: ms(3);
}

.navbtn--search {
  padding: 0 0 0 $spacer-md;
}

.navbtn--menu {
  @extend %heading-font-bold;

  padding: 0 $spacer-md 0 0;
}

.navbtn--active::after {
  display: block;
  position: absolute;
  top: 1.3em;
  background-color: $navbar-link-active-color;
  width: 100%;
  height: 3px;
  content: "";
}

.navbtn--meta {
  margin-right: $spacer-base * 0.55;

  &.navbtn--locale {
    margin-right: 2px;
    margin-left: 2px;
  }

  &.navbtn--active::after {
    height: 2px;
  }
}

.navbtn:hover,
.navbtn:focus {
  transition: $navbar-navbtn-transition;
  color: $navbar-link-hover-color;
}

//
// navbar__brand // and related things
//
.navbar__brand {
  flex-grow: 1;
  padding: $navbar-padding 0 $navbar-padding $navbar-padding;
  height: $navbar-brandbar-height-small;
}

.navbar__brand-link {
  @extend %link-unstyled;
}

.navbar__logo {
  width: $navbar-logo-height-small * 3.94;
  height: $navbar-logo-height-small;
}

//
// navbar__meta // container
//
.navbar__meta {
  display: none;
  align-items: center;
  justify-content: center;
  order: 4;
  background-color: $navbar-lightened-bg;
  padding: $spacer-sm;
  padding-right: 0;
  width: 100%;
  height: $navbar-bottombar-height-small;
  text-transform: uppercase;
  font-size: $navbar-secondary-font-size * 0.9;
}

//
// navbar__togglers // container
//
.navbar__togglers {
  display: flex;
  align-items: center;
  order: 2;
  padding: $navbar-padding;
  height: $navbar-brandbar-height-small;
}

//
// main toggles
//
.navbar__toggle-state--menu-toggler:checked ~ .primary-nav {
  display: block;
}

.navbar__toggle-state--menu-toggler:checked ~ .navbar__meta {
  display: flex;
}

//
// primary-nav // main navigation row
//
.primary-nav {
  display: none;
  position: relative;
  order: 3;
  margin-bottom: 0;
  background-color: $navbar-lightened-bg;
  width: 100%;
}

.primary-nav__list {
  @extend %heading-font-bold;
  @extend %list-unstyled;
  position: relative;
  margin: 0;
  padding: $navbar-padding * 2 $navbar-padding $spacer-sm;
  width: 100%;
  height: calc(90vh - #{$navbar-bottombar-height-small} - #{$navbar-brandbar-height});
  font-size: $navbar-primary-font-size;
}

.primary-nav__item {
  position: relative;
  padding-top: $navbar-padding;
}

//
// dropdown // in navbar context
//
.dropdown__checkbox:checked ~ .dropdown__toggle--navbar {
  .dropdown__icon--navbar {
    color: $navbar-link-hover-color;
  }
}

.dropdown__checkbox:focus ~ .dropdown__toggle--navbar {
  .dropdown__icon--navbar {
    outline: auto 5px $outline-color;
    color: $navbar-link-hover-color;
  }
}

.dropdown__icon--navbar {
  transition: standard-transition(color);
  color: $navbar-link-color;

  &:hover,
  &:focus {
    color: $navbar-link-hover-color;
  }
}

.dropdown__list-wrapper--navbar {
  @extend %heading-font-regular;
  position: relative;
  top: 0;
  left: 0;
  background-color: $navbar-lightened-bg;
  padding: 0 $spacer-md $spacer-md;
  width: 100%;
  font-size: $navbar-primary-font-size;

  &:hover {
    display: block;
  }

  // &:focus {
  //   display: block;
  // }
}

.dropdown__item--navbar {
  padding-top: $navbar-padding;
}

.dropdown__link--navbar {
  white-space: normal;
}

//
// --transparent
//
.navbar__inner--transparent,
.navbar--transparent {
  background-color: transparent;
}