#layout:not(.minimal-layout) .flyout:not(.mobile-only),
#layout.minimal-layout .flyout {
  display: none;
  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();

  &.flyout-open {
    display: block;
  }

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

  // Flyout Menu
  .flyout-menu {
    display: block;
    margin: 0;

    form {
      width: 100%
    }

    a,
    button {
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 100%;
      display: block;
      width: 100%;

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

    > li {
      margin: 0;

      > a,
      button {
        padding: 0.364em 0.545em;
      }

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

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

      .icon,
      i[class^="icon-"]{
        width: 1em;
        margin-left: .3em;
        margin-right: .2em;
        opacity: .8;
      }

      .user-ball {
        height: 0.75em;
        width: 0.75em;
        padding: 0;
        line-height: 1.25;

        margin-right: .2em;
      }

      &:not(.has-icon) > a {
        padding-left: 2em;
      }

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

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

.flyout:not(.mobile-only) {
  position: absolute;
}

#layout:not(.minimal-layout) .flyout.mobile-only {
  + button {
    display: none;
  }
}

#layout.minimal-layout .flyout-content {
  a,
  h3,
  button {
    line-height: 2.75
  }
}