.mindmup{
  &__legend{
    &-container {
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.14), 0 2px 2px rgba(0, 0, 0, 0.05);
      @extend %box-shadow !optional;
      @extend %material__elevation--depth_2 !optional;
      background-color: $color-foreground;
      position: absolute;
      left: $gap;
      top: $gap;
      width: $legend-width;
      @include respond-to(max-small-screen) {
        top: 110%;
      }
      //@include respond-to(max-small-screen) {
      //  display: none;
      //}
      &--hidden {
        display: none;
      }
    }
    &-header {
      background: mix($color-foreground, $color-background);
      padding: $gap;
      @extend %flex;
      & > label {
        @extend %flex-grow-1;
      }
    }
    &-toggler {
      a {
        color: rgba($color-text, .5);
        font-size: 1.5em;
        line-height: $form-input-height;
      }
      .tip {
        display: none;
      }
      &.active {
        a {
          @if map-has-key($icons, 'expand-less') {
            @include icon-parent('expand-less');
          }
        }
      }
    }
    &-body{
      @extend %background-clip-padding-box !optional;
      overflow-y: auto;
      padding: $gap $box-padding;
      overflow-x: hidden;
    }
  }
  &-legend{
    &-color-box{
      //@include mindmup-scheme($color-border-minor);
      background-color: #E0E0E0;
      border-color: #E0E0E0;
      @extend %border-radius-infinite !optional;
      //&:before{
      //  content: 'B';
      //  font-weight: bold;
      //  display: block;
      //  text-align: center;
      //}
      width: $box-padding;
      height: $box-padding;
      display: inline-block;
      border-width: 1px;
      border-style: solid;
      vertical-align: middle;
      margin-right: 5px;
    }
    &-used{
      margin-top: 10px;
      display: inline-block;
      color: rgba(66, 50, 26, 0.5);
      &-toggle{
        float: right;
        margin: 5px 0;
      }
      &-used--all,
      &-all--used{
        display: none;
      }
    }
    &-item{
      &-cont{
        cursor: pointer;
        margin-top: 0.5*$gap;
        .avatar-container{
          float: none;
        }
      }
    }
    .hotkey_link{
      margin: $gap (-$gap) 0;
      padding-top: $gap;
      border-top: 1px solid $color-border-minor;
      .easy & a{
        color: rgba($color-text, .5);
      }
    }
    &__filter{
      &_cont{
        position: absolute;
        right: $gap;
      }
      &_icon{
        color: rgba($color-text, .4);;
        font-size: 2em;
        padding: 5px;
      }
      &_cancel_icon{
        position: absolute;
        display: none;
        color: lighten($color-negative, 10);
        //color: $color-negative;
        font-size: 2em;
        padding: 0 5px 5px;
      }
      &_cont:hover &_cancel_icon{
        display: inline;
      }
    }
    &-drag{
      &-overlay {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 10000;
        cursor: move;
      }
      &-avatar {
        position: absolute;
        z-index: 5;
        height: 20px;
        width: 20px;
        margin-left: -12px;
        margin-top: -12px;
        border-width: 1px;
        border-style: solid;
      }
    }
  }
}