//
// Project list menu
// -----------------------------------------------

.navbar-project-menu {
  width: 100%;
  .navbar-project-search {
    display: inline-block;
  }
  .form-group {
    margin-bottom: 0;
    .form-control {
      margin-bottom: 0;
      height: auto;
    }
  }
  .bootstrap-select.open.btn-group {
    .btn {
      background-color: @navbar-os-project-menu-active-bg;
    }
  }
  .bootstrap-select.btn-group {
      .btn {
      border-color: @sidebar-os-border-color;
      border-radius: 0;
      color: @navbar-os-project-menu-color;
      font-size: @font-size-large + 4;
      font-weight: 300;
      background: @navbar-os-project-menu-bg;
      border-bottom: 0;
      box-shadow: none;
      border-top: 0;
      line-height: @line-height-base;
      padding: 7px 50px 7px 20px; // padding so truncated name with ellipsis doesn't extend into down icon
      transition: none;
      &:hover, &:focus {
        background-color: @navbar-os-project-menu-active-bg;
        color: @navbar-os-project-menu-active-color;
      }
      &:focus {
        .tab-focus();
        &:active {
          outline: none !important;
        }
      }
      &:after {
        content: '';
        background: @sidebar-os-border-inset-color;
        display: block;
        height: 100%;
        left: 0px;
        position: absolute;
        top: 0;
        width: 1px;
      }
    }
    .dropdown-toggle .caret {
      font-size: 16px;
      right: 20px;
    }
    .dropdown-menu {
      background-color: @navbar-os-project-menu-active-bg;
      border-color: @navbar-os-project-border-color;
      color: @navbar-os-project-menu-color;
      margin-top: 0;
      padding: 0;
      li {
        &.selected a {
          background-color: @navbar-os-project-bg !important;
          border-color: transparent !important;
          color: @navbar-os-project-menu-active-color;
          &:after {
            content: '';
            width: 2px;
            height: 100%;
            left:0;
            top:0;
            display: block;
            position: absolute;
            background-color: @sidebar-os-active;
          }
        }
        a {
          color: @sidebar-os-color;
          padding: 10px 15px;
          &:hover, &:focus {
            background-color: @navbar-os-project-menu-hover-bg;
            border-color: transparent;
            color: @sidebar-os-active-color;
          }
        }
        &.divider {
          background-color: @sidebar-os-border-inset-color !important;
          border-top: 1px solid @sidebar-os-border-color;
          height: 2px;
          margin: 0 !important;
        }
      }
    }
  }
}

.navbar-project-menu .btn {
  width: 100%;
  .filter-option {
    // Chrome needs a max-width in order to truncate at mobile and
    // 200px is the max-width that is available space for the project name at 320px,
    // if it's longer it will be truncated in order to display the add to project '+' icon.
    max-width: 200px;
    // This forces the project title block to fill up the available space within it's container and truncate at mobile
    min-width: 100%;
    .truncate();
  }
}

@media (max-width: @screen-xs-max) {
  // Project nav at mobile widths
  .navbar-project-menu {
    .form-group {
      display: inline;
    }
    .bootstrap-select.btn-group .dropdown-menu {
      max-width: 100%;
    }
  }
}

@media (max-width: @screen-xxs-max) {
  .navbar-project-menu {
    .bootstrap-select.btn-group {
      .btn {
        padding-left: 10px;
        padding-right: 20px;
      }
      .dropdown-toggle .caret {
        font-size: 14px;
        right: 10px;
      }
    }
  }
}

@media (min-width: @screen-xs-min) {
  .navbar-project-menu .bootstrap-select.btn-group .btn .filter-option {
    max-width: 310px;
  }
}

@media (min-width: @screen-sm-min) {
  .navbar-project-menu {
    border-bottom:0;
    border-top:0;
    float: left;
    margin: 0;
    padding-top: 0;
    max-width: 450px; // Default project menu width
    .bootstrap-select.btn-group {
      .btn {
        padding: 15px 50px 15px 30px;
        &:before {
          color: @gray-light;
          content: 'Project';
          font-size: @font-size-xsmall;
          left: 30px;
          position: absolute;
          top: 8px;
        }
        .filter-option {
          max-width: 470px;
        }
      }
      .dropdown-toggle .caret {
        right: 30px;
      }
    }
    .bootstrap-select .dropdown-toggle {
      height: 60px;
      max-width: 330px;
      min-width: 300px;
    }
  }
}

@media (min-width: @screen-md-min) {
  .navbar-project-menu .bootstrap-select .dropdown-toggle,
  .navbar-project-menu {
    max-width: 500px;
  }
}

@media (min-width: @screen-lg-min) {
  .navbar-project-menu .bootstrap-select .dropdown-toggle,
  .navbar-project-menu {
    max-width: 600px;
  }
}
