.nav-wrapper {
  position: -webkit-sticky;
  position: sticky;
  z-index: 10;
  top: 0;

  padding: .5rem 1rem;

  border-bottom: 1px solid lightgray;
  background-color: white;

  &:not(.split-view) > .nav {
    max-width: 60rem;
    margin: auto;
  }
}

.nav-wrapper > .nav {
  > .nav-links {
    display: inline-block;
  }

  > .nav-links > .nav-link {
    display: inline;

    box-sizing: border-box;
    padding: .5rem 1rem;

    text-decoration: none !important;

    color: #337ab7 !important;
    border-radius: .25rem .25rem 0 0;

    &:hover:not(.open) {
      cursor: pointer;

      background-color: lighten(lightgray, 7%);
    }

    &.open {
      cursor: default;

      color: black !important;
      border: 1px solid lightgray;
      border-bottom: 1px solid $background-color;
      background-color: $background-color;

      &:focus {
        outline: 1px dotted lightgray;
      }
    }
  }

  > .actions {
    position: relative;
    z-index: 9;

    float: right;

    max-height: 2.5rem;
    margin-right: 1rem;
    // Place the action buttons just above the bottom border of the navigation bar.
    // margin-bottom and other such values don't work due to float: right.

    transform: translateY(calc(-.5rem - 1px));

    > div {
      display: inline-block;

      width: 2rem;
      height: 2rem;
    }

    > .button {
      display: block;

      padding: .75rem 1rem;

      transform: translateX(calc(2rem - 100%));
      white-space: nowrap;
      text-decoration: none;

      color: black;

      &:hover {
        background-color: #EAEAEA;
      }
    }

    > .dropdown > .content, > .button {
      transform: translateX(calc(2rem - 100%));
      white-space: nowrap;
    }
  }
}
