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

$project-nav-hover: $secondary !default;
$project-nav-active: $dropdown-link-hover-bg !default;

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

  NAV {
    font-size: .9em;
    width: 100%;
    box-sizing: border-box;
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    flex: 0 1 auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;

    .ember-basic-dropdown-content {
      font-size:  15px;
    }

    .ember-basic-dropdown-trigger {
      a {
        text-decoration: none;
      }
    }

    .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;
      padding: 0;
      vertical-align: middle;
      height: 50px;

      &.nav-main {
        flex-grow: 1;
      }

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

        &.active {
          .ember-basic-dropdown-trigger  a,
          > a {
            color: $info;
            text-decoration: none;
            margin: 0;
          }
        }

        .ember-basic-dropdown-trigger a,
        > a {
          color: $header-link;
          display: block;
          padding: 11px;
          border-bottom: solid $nav-spacing transparent;
          border-top: solid $nav-spacing transparent;

          &:hover {
            background-color: darken($header, 5%);
            color: white;
            text-decoration: none;
          }

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

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


  .nav-user {
    border-radius: 0 3px 3px 0;
    margin: 0;

    .nav-item {
      a.nav-link {
        padding: 0;
        display: inline-block;
        border: none;
      }
    }

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

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

    .user-auth {
      line-height: initial;
      padding: 10px 20px 10px 10px;
      background: $accent-bg;
    }

    > div:hover {
      background: darken($header, 5%);
    }
  }

  .nav-item {
    position: relative;
  }

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

    a {
      &:hover {
        text-decoration: none;
      }

      &.text-white:hover {
        background: mix($user-btn, black, 80%);

        &::after {
          border-left-color: mix($user-btn, black, 80%);
        }
      }
    }

    .project-menu .global ul li a:hover {
      background: transparent;
    }


    .ember-basic-dropdown-trigger {
      max-width: 300px;
      @include clip;
      @include hand;

      > a {
        padding-right: 30px;
        padding-left: 10px;

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

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

        &:focus {
          text-decoration: none;
        }
      }

    }

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

  .ember-basic-dropdown-trigger {
    &.active {
      > a {
        color: $info;
        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;

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

  }

  .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;
  }

  .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;
      }
    }
  }
}

.project-menu {
  overflow: hidden;
  border: 0;
  box-shadow: $darken-helper 0 0 7px;

  $labels: 22px;
  $item: 50px;

  .clusters UL, .projects UL {
    overflow-y: auto;
  }

  display: grid;
  grid-template-rows: $item auto;

  LABEL {
    @include clip;
    height: $labels;
    color: $text-muted;
    font-size: .8em;
    padding: 0 10px;
    display: block;
    border-bottom: 1px solid $accent-border;
  }

  .clusters {
    grid-column-start: 1;
    grid-row-start: 2;
    // border-right: 1px solid $table-border-color;
    background-color: $accent-bg;

    ul.no-hover-entry li.item.cluster.active,
    ul li.item.cluster.hover {
      position: relative;

      &:after {
        content: '';
        border-right: 8px solid $dropdown-bg;
        border-top: 8px solid transparent;
        border-bottom: 8px solid transparent;
        position: absolute;
        top: 17px;
        right: 0;
      }
    }
  }

  .projects {
    grid-column-start: 2;
    grid-row-start: 2;

    UL {
      border-left: 1px solid transparent;
    }
  }

  .global {
    > ul.list-unstyled {
      &:first-child {
        border-right: 1px solid $table-border-color;
      }
    }
  }

  .global, .search {
    background-color: darken($accent-bg,2%);
    border-bottom: $table-border-color;

    ul .item.active {
      background: $project-nav-active;
      a {
        color: white;
      }
    }
  }

  .global {
    grid-column-start: 1;
    grid-row-start: 1;
    ul li.item {
      padding: 5px 10px;
    }
  }

  .search {
    grid-column-start: 2;
    grid-row-start: 1;
    padding: 7px 10px;
  }

  .search-match {
    font-weight: bold;
    background-color: lighten($warning, 25);
  }

  .item {
    height: $item;
    padding: 5px 20px;
    @include hand;

    &.active {
      background-color: $project-nav-active;
      a {
        color: white;

        + .state {
          color: white;
        }
      }
    }

    &:not(:first-child) {
      border-top: 1px solid $accent-border;
    }
  }

  .global > ul.list-unstyled > LI:hover,
  .item.cluster.hover {
    background-color: $project-nav-hover;
    A, .state {
      color: white;
    }
  }

  .item.project:hover {
    background-color: $project-nav-hover;
    A, .state {
      color: white;
    }
  }

  .state {
    color: $text-muted;
    font-size: .8em;
    padding: 0;
    margin: 0;
  }

  LI {
    &.active {
      A, .state {
        color: $link-color;
      }
    }

    &.not-ready {
      cursor: not-allowed;

      A, .state {
        cursor: not-allowed !important;
        color: $text-muted;
        text-decoration: none;
      }
    }
  }

  .global {
    A {
      display: block;
      padding: 10px;
    }
  }
}
