/**
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

@import 'common.less';

#top-nav {
  .navbar.navbar-static-top {
    background: #fff;
    border-top: 1px solid #e3e3e3;
    border-bottom: 1px solid #e3e3e3;
    margin-bottom: 10px;

    .navbar-header {
      padding: @navbar-header-vertical-padding @navbar-header-padding-right @navbar-header-vertical-padding @navbar-header-padding-left;
      margin-top: -5px;
      font-size: @navbar-header-font-size;
      width: ~"calc(100% - 440px)";
      a {
        color: #313D54;
        cursor: pointer;
      }
      a.disabled {
        cursor: default;
        color: #999;
      }
      .icon {
        font-size: @default-font-size;
        margin: 0 4px;
        vertical-align: baseline;
      }
    }

    .cluster-notifications {
      margin-top: 12px;
    }
    .navbar-text.brand-wrapper {
      margin-top: 17px;
    }
    .navbar-text.brand-wrapper, .cluster-notifications {
      color: @top-nav-brand-color;
      font-size: 16px;
      font-weight: normal;

      a, a:hover, a:active, a:visited {
        color: @top-nav-brand-color;
        text-decoration: none;
        line-height: 20px;
        vertical-align: middle;
        position: relative;
      }

      span.alerts-label {
        line-height: 20px;
        cursor: pointer;
      }

      .numberCircle {
        border-radius: 50%;
        min-width: 20px;
        height: 20px;
        padding: 0 4px;
        color: @top-nav-ops-count-color;
        background-color: @top-nav-ops-count-bg-color;
        text-align: center;
        font-size: 12px;
        display: inline-block;
        position: relative;
        top: -2px;

        &.operations-count {
          .infoPulse();
        }
        &.alert-crit-count {
          background-color: @health-status-red;
        }
        &.alert-warn-count {
          background-color: @health-status-orange;
        }
        &.alerts-none-count {
          cursor: default;
        }
      }
      .cluster-name, .bg-label, .alerts-label {
        margin: 0px 15px 0px 5px;
        .glyphicon {
          font-size: 20px;
          top: 4px;
          left: 2px;
        }
      }
      .ops-count {
        margin-right: -1px;
        color: #006DCC;
        .infoPulseInner();
      }
    }
    a:hover {
      text-decoration: none;
    }
    .top-nav-user {
      margin-top: 2px;
      button {
        text-transform: none;
      }
    }
    .ambari-views {
      margin-top: 17px;
      padding: 0 20px 0 10px;
      .notifications-dropdown.dropdown-menu {
        right: -28px;
        min-width: 200px;
        max-width: 300px;
        min-height: 100px;
        li  {
          padding: 2px 5px;
          a {
            font-size: 12px;
            color: @top-nav-menu-views-menu-color;
          }
        }
      }
      i {
        font-size: 20px;
        color: @top-nav-menu-views-menu-color;
        cursor: pointer;
      }
    }
  }

  #notifications-dropdown.dropdown-menu {
    .popup-arrow-up {
      right: 75px;
    }
    .notifications-body .table-controls .state-filter .form-control.filter-select {
      height: 34px;
    }
  }
}