// Styles that replicate the legacy top navs in EVO
#admin-toolbar {
  font-size: $font-size-sm;
  line-height: 1.714; // specific to achieve height of 56px to match with quick-add button :lg height
  background-color: $white !important;
  .navbar {
    background-color: transparent !important;
    .navbar-brand {
      padding-top: ($spacer * .25);
      padding-bottom: ($spacer * .25);
      font-size: $font-size-sm;
      color: $text-muted;
    }
    .nav-item {
      position: relative;
      text-align: center;
      border-left: $border-width solid $nav-divider-color;
      > .nav-link {
        padding: ($spacer * .5);
        color: $text-muted;
        transition: $transition-base;
        @include hover-focus() {
          color: $body-color;
          background-color: $body-bg;
        }
        @include media-breakpoint-down(sm) { padding: ($spacer * .5); }
        @include media-breakpoint-up(md) { padding: ($spacer * .5) $spacer; }
      }
      #sysadmin_dropdown {
        .dropdown-item { padding: 0; }
        .nav-link {
          padding: $dropdown-item-padding-y $dropdown-item-padding-x;
          color: inherit;
        }
      }
    }
  }
}

#admin-nav {
  background-color: $blue-700;
  .navbar {
    background-color: transparent !important;
    .navbar-nav {
      .nav-item {
        > .nav-link {
          padding-top: $spacer;
          padding-bottom: $spacer;
          color: $white;
          transition: $transition-base;
          @include hover-focus() { background-color: $blue-800; }
        }
        &.active > .nav-link { background-color: $blue-800; }
      }
      .dropdown-menu {
        .dropdown-item {
          padding: 0;
          &.active .nav-link, .nav-link { color: inherit; }
        }
      }
    }
  }
}

#cross_product_nav {
  > .dropdown-menu {
    > .dropdown-item {
      transition: $transition-base;
      position: relative;
      [class^="icon-sso"] { font-size: 40px; }
      .media-body { width: 240px; }
    }
  }
}

#p2p-nav {
  background-color: $blue-800;
  .navbar-nav {
    .nav-link {
      padding-right: ($nav-link-padding-x * .5);
      padding-left: ($nav-link-padding-x * .5);
      &:hover { background-color: $gray-900; }
    }
  }
}

// Main navigation bar (top) in DMS
.site-navbar {
  position: fixed;
  right: 0;
  left: 0;
  @include transition(left .2s ease-in-out);
  z-index: $zindex-fixed;
  @include media-breakpoint-down(lg) {
    bottom: 0;
    width: 100%;
    border-top: $border-width solid $nav-divider-color;
  }
  @include media-breakpoint-up(xl) {
    top: 0;
    left: 200px;
    border-bottom: $border-width solid $nav-divider-color;
  }
}
#site_navbar {
  font-size: $font-size-sm;
  line-height: 1.714; // specific to achieve height of 56px to match with quick-add button :lg height
  background-color: $white !important;
  .navbar-brand {
    padding-top: ($spacer * .25);
    padding-bottom: ($spacer * .25);
    font-size: $font-size-sm;
    color: $text-muted;
    @include media-breakpoint-down(lg) { display: none !important; }
  }
  .nav {
    @include media-breakpoint-down(lg) { width: 100%; }
    .nav-item {
      position: relative;
      text-align: center;
      border-left: $border-width solid $nav-divider-color;
      @include media-breakpoint-down(lg) {
        width: 20%;
        &:first-child { border-left: none; }
      }
      .nav-alert {
        position: absolute;
        top: -4px;
        right: -4px;
        width: 8px;
        height: 8px;
        background-color: $primary;
        @include border-radius(50%);
        box-shadow: 0 0 0 2px rgba(255,255,255,1);
        &.nav-alert-danger { background-color: $danger; }
      }
      .nav-link {
        padding: ($spacer * .5);
        color: $text-muted;
        transition: $transition-base;
        @include hover-focus() {
          color: $body-color;
          background-color: $body-bg;
        }
        outline: none !important;
        @include media-breakpoint-down(sm) { padding: ($spacer * .5); }
        @include media-breakpoint-up(md) { padding: ($spacer * .5) $spacer; }
        &[aria-expanded="true"],
        &:not(:disabled):not(.disabled).active { background-color: $body-bg; }
        &.disabled {
          cursor: disabled;
          pointer-events: none;
          opacity: .4;
        }
        &.dropdown-toggle {
          @include media-breakpoint-down(lg) {
            + .dropdown-menu {
              top: auto;
              bottom: 100%;
              margin-bottom: 2px;
            }
          }
        }
        &.has-label {
          @include media-breakpoint-up(xl) {
            padding-top: 15px;
            height: ($spacer * 2);
          }
        }
        .nav-text {
          &.visible {
            @include media-breakpoint-up(xl) { display: inline-block; }
          }
          @include media-breakpoint-down(sm) {
            display: block;
            font-size: 12px;
          }
          @include media-breakpoint-up(md) { margin-left: ($spacer * .25); }
          @include media-breakpoint-up(xl) { display: none; }
        }
        + .nav-link { margin-left: 0; }
      }
    }
  }
}