#menu {
  margin-bottom: 3em;
}

.sidebar-collapsed #menu {
  margin-bottom: 8em;
}

#menu .config-menu {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: @menu-bg-color;
  margin-top: auto;

  > ul {
    display: flex;
    flex-wrap: nowrap;
    padding: 0;

    > li {
      > a {
        padding: 0.5em 0.5em 0.5em 0.75em;
        line-height: 2.167em;
        white-space: nowrap;
        text-decoration: none;

      }

      &:hover .nav-level-1 {
        display: block;
      }
    }

    li.active a:after {
      display: none;
    }

    .user-nav-item {
      width: 100%;
      overflow: hidden; // necessary for .text-ellipsis of <a>

      > a {
        overflow: hidden;
        text-overflow: ellipsis;
      }

      &:not(.active):hover a,
      &:not(.active) a:focus {
        background: @menu-hover-bg-color;
      }
    }

    .config-nav-item {
      line-height: 2;
      display: flex;
      align-items: center;
      position: relative;

      > button {
        background: none;
        border: none;
        display: block;
        .rounded-corners();

        > .state-badge {
          position: absolute;
          pointer-events: none;
        }

        .icon {
          opacity: .8;
          font-size: 1.25em;

          &:before {
            margin-right: 0;
          }
        }
      }

      &:hover > button {
        background: fade(@menu-hover-bg-color, 25);

        > .state-badge  {
          display: none;
        }
      }

      button:focus {
        background: fade(@menu-hover-bg-color, 25);
      }

      &.active > button {
        color: @text-color-inverted;
        background: @icinga-blue;
      }
    }

    .state-badge {
      line-height: 1.2;
      padding: .25em;
      font-family: @font-family-wide;
    }
  }

  .nav-level-1 li {
    &.badge-nav-item > a {
      display: flex;
      align-items: baseline;
      width: 100%;

      .state-badge {
        margin-left: auto;
      }
    }
  }

  .nav-item-logout {
    color: @color-critical;
    border-top: 1px solid @gray-lighter;
  }

  .user-ball {
    .ball();
    .ball-size-l();
    .ball-solid(@icinga-blue);

    // icingadb-web/public/css/common.less: .user-ball
    font-weight: bold;
    text-transform: uppercase;

    // compensate border vertically and add space to the right;
    margin: -1px .2em -2px 0;
    border: 1px solid @text-color-inverted;
    font-style: normal;
    line-height: 1.2;
  }
}

#layout:not(.sidebar-collapsed) #menu .config-menu {
  .user-nav-item {
    > a {
      padding-right: 4.75em;
    }

    &.active.selected + .config-nav-item {
      > button {
        color: @text-color-inverted;
      }
    }
  }

  .config-nav-item {
    position: absolute;
    right: 2.5em;
    bottom: 0;
    top: 0;

    .state-badge {
      left: -1em;
      top: 0;
    }
  }

  .flyout {
    bottom: 100%;
    right: -2em;
    width: 15em;
  }
}

.sidebar-collapsed #menu .config-menu {
  ul {
    flex-direction: column;

    .user-ball {
      margin-left: .25em * 1.5/2;
      margin-right: .5em + .25em * 1.5/2;
      width: 2em * 1.5/2 ;
      height: 2em * 1.5/2;
      font-size: 2/1.5em;
      line-height: 1;
    }

    .config-nav-item {
      padding-right: 0;
      margin-bottom: 3em;

      .icon {
        font-size: 1.5em;
      }

      button {
        position: relative;
        width: 3em;
        margin: .125em .5em;
        padding: .5em .75em;

        .state-badge {
          right: -.25em;
          bottom: -.25em;
          font-size: .75em;

          overflow: hidden;
          text-overflow: ellipsis;
          max-width: 4em;
        }
      }
    }
  }

  .flyout {
    bottom: 0;
    left: 100%;
    width: 14em;

    &:before {
      left: -.6em;
      bottom: 1em;
      transform: rotate(135deg);
    }
  }
}

.flyout {
  display: none;
  position: absolute;
  border: 1px solid @gray-lighter;
  background: @body-bg-color;
  box-shadow: 0 0 1em 0 rgba(0,0,0,.25);
  z-index: 1;
  .rounded-corners();

  a {
    font-size: 11/12em;
    padding: 0.364em 0.545em 0.364em 2em;
    line-height: 2;

    &:hover {
      text-decoration: none;
      background: @menu-2ndlvl-highlight-bg-color;
    }
  }

  h3 {
    font-size: 10/12em;
    color: @text-color-light;
    letter-spacing: .1px;
    padding: 0.364em 0.545em 0.364em 0.545em;
    margin: 0;
  }

  .flyout-content {
    overflow: auto;
    // Partially escape to have ems calculated
    max-height: calc(~"100vh - " 50/12em);
    padding: .5em 0;
    position: relative;
  }

  // Caret
  &:before {
    content: "";
    display: block;
    position: absolute;
    transform: rotate(45deg);
    background: @body-bg-color;
    border-bottom: 1px solid @gray-lighter;
    border-right: 1px solid @gray-lighter;
    height: 1.1em;
    width: 1.1em;
    bottom: -.6em;
    right: 2.5em;
  }
}

// Prevent flyout to vanish on autorefresh
#layout.config-flyout-open .config-nav-item {
  .flyout {
    display: block;
  }

  > button > .state-badge {
    display: none;
  }
}

#layout.minimal-layout .config-menu {
  display: none;
}

#layout.minimal-layout #menu {
  margin-bottom: 0;
}

#layout:not(.minimal-layout) #menu .primary-nav {
  .user-nav-item,
  .configuration-nav-item,
  .system-nav-item {
    display: none;
  }
}