@media only screen and (min-width: $mobile_width) {
  .is-sticky .has-sticky-logo.nav-container #primary-nav {
    margin-left: 44px;
  }
  .open-drawer {
    display: flex;
  }
  .nav {
    float: left;
    ul {
      margin: 0;
      padding: 0;
    }
    ul li {
      display: inline;
      margin: 0;
      float: left;
    }
    a {
      color: $primary-nav-color;
      padding: 0.25em 0.5em;
      display: block;
      text-decoration: none;
    }
    ul ul {
      transform: scale(1, 0);
      width: 180px;
      position: absolute;
    }

    li:hover,
    a:hover,
    li:hover ul {
      background: shift-color($primary-nav-bg);
      color: $primary-nav-color;
    }

    li ul li:hover,
    li ul a:hover {
      background: shift-color($primary-nav-bg, 0.05);
    }

    ul li li {
      display: block;
      width: 100%;
    }
    // Moved some code from here to below fold (navigation.scss)
    // We don't need hover styles above the fold.
  }
}

#primary-nav-container {
  background: $primary-nav-bg;
}

#secondary-nav-container {
  background: $secondary-nav-bg;
}

#secondary {
  border-bottom: none;
  .nav {
    ul li {
      position: relative;
      z-index: 4;
    }
    a {
      color: $secondary-nav-color;
    }
    a:hover {
      color: $primary;
      background: shift-color($secondary-nav-bg);
    }

    li:hover,
    a:hover,
    li:hover ul {
      background: shift-color($secondary-nav-bg);
    }
  }
}

#nav-search {
  float: right;
  display: inline;
  position: relative;
}

#nav-search .search-icon {
  line-height: 1.418em;
  padding: 0 0.1668em;
  font-size: 1.5em;
  background: shift-color($primary-nav-bg, -0.05);
}

#nav-search form {
  display: flex;
  top: 0;
  right: 0;
  position: absolute;
  padding: 4px 10px 3px;
  z-index: 4;
  transform: scale(0, 1);
  transition: transform 0.3s ease;
  transform-origin: right center;
  background: $primary-nav-bg;
  align-items: center;
}

#nav-search input {
  line-height: 1.6em;
  height: 1.6em;
  width: 13em;
  font-size: 1.1em;
  max-height: 32px;
}

#nav-search:hover form {
  // display: block;
  transform: scale(1, 1);
  // transform-origin: right center;
}

@if ($is_sleek_header == 1) {
  #site-header-container {
    padding: 0;
    border-width: 0;
  }
  .site-title,
  #nav-search .he-search {
    line-height: $header-height;
  }
  #primary {
    .nav .menu > li > a {
      line-height: $header-height;
      padding-top: 0;
      padding-bottom: 0;
    }
    .nav .menu > li:hover > ul {
      top: $header-height;
    }
  }

  #nav-search form {
    height: $header-height;
    box-sizing: border-box;
  }
}

.open-drawer {
  display: none;
}

#side-pane {
  position: fixed;
  right: -100vw;
  top: -100vh;
}

// body:not(.menu-open) {
//   #side-pane {
//     transform: translate(-100vw, -100vh);
//   }
// }

.rtl {
  .nav {
    float: right;
  }
  ul li {
    float: right;
  }

  //* Icons */
  .menu-item-has-children > a:after {
    content: "\BB";
    opacity: 0.5;
    margin-left: 5px;
    display: none;
  }
  .menu-item-has-children > a:before {
    content: "\2192";
    opacity: 0.5;
    margin-right: 5px;
    float: left;
    display: inline-block;
  }

  .menu > .menu-item-has-children > a:before {
    @include rotate(90deg);
  }
}
