// Header
$header                              : $secondary !default;
$header-link                         : $light-grey !default;
$header-link-active                  : $primary !default;
$user-btn                            : darken($header, 10%) !default;
$nav-spacing: 4px;

.page-header {
  @include no-select;
  margin-bottom: 10px;

  NAV {
    font-size: .9em;
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0px;
    display: table;

    .dropdown-menu {
      background: $dropdown-bg;
      border: 0;
      z-index: 4;
      padding: 0;
      top: auto!important;
      border-radius: 0;
      box-shadow: $darken-helper 0 0 7px;
    }

    > ul {
      background-color: $header;
      border-radius: 3px 0 0 3px;
      display: table-cell;
      padding: 0;
      width: 100%;
      vertical-align: middle;

      > li {
        list-style-type: none;
        display: inline-block;

        &.active {
          > a {
            color: $info;
            border-bottom: solid $nav-spacing mix($user-btn, black, 50%);
            text-decoration: none;
            margin: 0;
          }
        }

        > a {
          color: $header-link;
          display: block;
          padding: 11px;
          border-bottom: solid $nav-spacing transparent;
          border-top: solid $nav-spacing transparent;

          &:hover {
            background-color: mix($user-btn, black, 80%);
            color: white;
            text-decoration: none;
            border-bottom: solid $nav-spacing mix($user-btn, black, 50%);
          }

          .icon-chevron-down {
            font-size: .75em;
          }
        }
      }
    }
  }

  .nav-logo {
    // display:table-cell;
    height: 48px;
    background-size: auto 32px;
    background-position: left center;
    background-repeat: no-repeat;
    vertical-align: middle;
    margin: 0;
    padding: 0;
  }

  .nav-cluster {
    float: left;
    background-color: $user-btn;

    &::after {
      content: '';
      border-left: 8px solid $user-btn;
      border-top: 5px solid transparent;
      border-bottom: 5px solid transparent;
      position: absolute;
      top: 22px;
      right: -8px;
    }

    & + .nav-item A {
      padding-left: 20px;
    }

    .dropdown-toggle {
      max-width: 300px;
      @extend .clip;
      @extend .hand;

      padding-right: 30px;
      padding-left: 10px;

      &.two-line {
        padding-top: 0;
        padding-bottom: 0;
      }
    }

    .chevron {
      color: white;
      position: absolute;
      right: 10px;
      top: 21px;
    }

    .cluster-menu {
      max-height: calc(100vh - 100px);
      max-width: 50vh;
      overflow: auto;

      LI.inactive A:not(:hover) {
        color: $text-muted;
      }
    }
  }

  .nav-user {
    display:table-cell;
    background: $user-btn;
    border-radius: 0 3px 3px 0;
    margin: 0;

    a {
      display: block;
      padding: 4px 10px;

      &:hover {
        border-bottom-color: transparent;
      }
    }

    .user-auth {
      line-height: initial;
      padding: 10px;
      background: lighten($accent-two, 20);
    }
  }

  .quick-add {
    display:table-cell;
    border-radius: 0;
    margin: 0;
    padding: 0;
    li {
      display: block;
      a {
        display: block;
      }
    }
  }

  .logo-oss {
    width: 80px;
    background-image: url('images/logos/main.svg');
    background-position: left center;
    background-repeat: no-repeat;
    background-size: auto 32px;
  }

  .logo-caas {
    width: 190px;
    background-image: url('images/logos/main-caas.svg');
  }

  .bg-error.badge-xs {
    position: absolute;
    right: 4px;
    top: 15px;
    text-align: center;
    width: 19px;
    border-radius: 90%;

    a {
      color: white;
    }
  }

  .project-link {
    position: relative;
    .default-project {
      position: absolute;
      font-size: 10px;
      left: 10px;
      top: 8px;
      color: $warning;

      &.nested {
        left: 25px;
      }
    }
  }
}