@import "~scss/variables";

#main-nav {
  width: 100%;
  height: $navbar-height;

  padding: 0;
  align-items: stretch;

  box-shadow: $box-shadow;

  border-bottom: 1px solid $border-color-darker;

  align-items: center;

  .navbar-collapse {
    margin: 0 1rem 0 0;
  }

  .navbar-nav {
    align-items: center;

    .nav-link {
      user-select: none;
      
      border-right: 1px solid $border-color-darker;
      padding: 0 1.5rem;

      // Don't word wrap
      white-space: nowrap;

      .nav-icon {
        margin-right: 0.5em;
      }

      &:last-child {
        border-right: none;
      }

      @include media-breakpoint-down(md) {
        padding: 0 1rem;
      }
    }

    // Hide the links on mobile, they'll be shown in the sidebar instead
    @include media-breakpoint-down(sm) {
      display: none;
    }
  }
}