/*! Icinga Web 2 | (c) 2014 Icinga Development Team | GPLv2+ */

#menu [class^="icon-"],
#menu [class*=" icon-"] {
  &:before {
    width: 1.5em;
  }
}

@icon-width: 1.7em; // 1.5em width + 0.2em right margin

#menu {
  height: 100%;
  overflow: auto;
}

#layout:not(.minimal-layout) #menu {
  padding-bottom: 2.25em;
}

#menu .nav-item {
  vertical-align: middle;

  > a {
    &:focus {
      color: @icinga-blue;
      outline: none;
    }

    &:hover {
      color: @icinga-blue;
      text-decoration: none;
    }
  }

  &.active {
    > a {
      color: @icinga-blue;
    }
  }
}

#layout:not(.sidebar-collapsed) #menu .nav-item > a {
  // Respect overflowing content
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#layout.sidebar-collapsed #menu .nav-level-1 > .nav-item > a {
  // Clip overflowing content
  overflow: hidden;
  width: 4em;
}

#menu .nav-level-1 > .nav-item {
  border-left: 5px solid transparent;
  line-height: 2.167em; // 26 px

  &.active {
    > a > .badge {
      display: none;
    }

    background-color: @body-bg-color;
    border-color: @icinga-blue;
  }

  &.no-icon > a {
    margin-left: @icon-width;
  }

  > a {
    padding: 0.5em 0.5em; // 6px 6px
  }

  > a:active ~ .nav-level-2 > li {
    display: block;
  }
}

#menu .nav-level-2 > .nav-item {
  // Collapse menu by default
  display: none;
  line-height: 1.833em; // 22px
  margin-left: @icon-width;

  > a {
    font-size: @font-size-small;
    padding: 0.364em 0.545em; // 4px 6px
  }
}

.no-js #menu .nav-level-2 > .nav-item {
  // Expand menu if JavaScript is disabled
  display: block;
}

#layout:not(.sidebar-collapsed) {
  #menu .nav-level-1 > .nav-item {
    &.active {
      .nav-level-2 > li {
        // Expand menu if active
        display: block;
      }
    }
  }
}

#menu img.icon {
  line-height: 1;
  margin: 0 0.5em -.05em 0.25em;
  width: 1em;
}

#menu .user-nav-item {
  background-color: @gray-light;
}

#menu input.search {
  background: transparent url('../img/icons/search.png') no-repeat 0.7em center;
  background-size: 1em auto;
  border: none;
  border-left: 5px solid transparent;
  line-height: 2.167em;
  padding-left: @icon-width + 0.5em;
  width: 100%;

  &.active {
    background-color: @body-bg-color;
    border-color: @icinga-blue;
  }
}

// Badge offset correction
#menu > nav > .nav-level-1 > .badge-nav-item > a > .badge {
  margin-top: 0.2em;
}

#menu .nav-level-2 > .badge-nav-item > a > .badge {
  margin-top: 0.2em;
}

// Hovered menu
#layout:not(.minimal-layout).sidebar-collapsed #menu .nav-level-1 > .nav-item:hover,
#layout:not(.minimal-layout) #menu .nav-level-1 > .nav-item:not(.active):hover {
  > .nav-level-2 {
    &:before {
      border: 0.5em solid rgba(0, 0, 0, 0);
      border-right-color: @text-color;
      content: "";
      width: 1em;
      position: fixed;
      margin-left: -1em;
      margin-top: 0.5em;
    }

    background-color: @text-color;
    color: @text-color-inverted;
    padding: @vertical-padding 0;
    position: fixed;
    width: 14em;

    > .nav-item {
      display: block;
      margin-left: 0.5em;

      > a:hover {
        color: @text-color-inverted;
        text-decoration: underline;
      }
    }
  }

  > a > .badge {
    display: none;
  }

  img.icon {
    opacity: .6;
  }
}

#layout:not(.minimal-layout) #menu .nav-level-1 > .nav-item:not(.active):hover {
  > .nav-level-2 {
    // Position relative to parent
    margin-left: 15.583em;
    margin-top: -3.167em;
  }
}

#layout:not(.minimal-layout).sidebar-collapsed #menu .nav-level-1 > .nav-item:hover {
  > .nav-level-2 {
    // Position relative to parent
    margin-left: 3.583em;
    margin-top: -3.333em;
  }
}

// Accessibility skip links
.skip-links {
  position: relative;
  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    li {
      display: block;
      a, button[type="submit"] {
        background-color: @body-bg-color;
        border: none;
        left: -999px;
        padding: @vertical-padding @horizontal-padding;
        position: absolute;
        width: 100%;
        z-index: 1;
        &:focus {
          left: 0;
          outline-offset: -3px;
        }
      }
      button[type="submit"] {
        text-align: left;
      }
    }
  }
}

#sidebar.expanded {
  bottom: 0 !important;
  height: auto !important;
}

.search-control {
  position: relative;
}

.search-reset {
  background: none;
  border: 0;
  cursor: pointer;
  display: none;
  height: 100%;
  padding: 0;
  position: absolute;
  right: 0;
  top: 0;
  user-select: none;
}

.search-reset:focus {
  outline: 0;
}

// Override forms.less
input[type=text].search-input {
  padding-right: 1.4em;
  text-overflow: ellipsis;
  transition: none;
}

.search-input:focus:-moz-placeholder { // FF 18-
  color: @gray-light;
}

.search-input:focus::-moz-placeholder { // FF 19+
  color: @gray-light;
}

.search-input:focus:-ms-input-placeholder {
  color: @gray-light;
}

.search-input:focus::-webkit-input-placeholder {
  color: @gray-light;
}

.search-input:valid ~ .search-reset {
  animation-duration: .4s;
  animation-name: search-reset-in;
  display: block;
}

.search-input:invalid,
.search-input:-moz-submit-invalid,
.search-input:-moz-ui-invalid {
  // Disable glow
  box-shadow: none;
}

@keyframes search-reset-in {
  0% {
    opacity: 0;
    transform: translate3d(-20%, 0, 0);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

// Toggle sidebar button
#toggle-sidebar {
  // Reset button styles
  background: none;
  border: none;
  padding: 0;

  color: @gray-light;

  position: absolute;
  bottom: 0;
  right: 0;

  i {
    background: @body-bg-color;
    border-radius: .25em 0 0 .25em;
    font-size: 1.5em;
    width: 2em;
  }

  &:focus {
    outline: none;
  }

  &:hover, &:focus {
    i {
      color: @icinga-blue;
    }
  }
}

#layout.minimal-layout #toggle-sidebar {
  display: none;
}

#open-sidebar {
  display: none;
}