Gapminder/vizabi

.vzb-dl-holder {
  .vzb-draggable {
    user-select: none;
    margin: auto;
    padding: 5px 0;
    width: 200px;
    > div {
      padding-bottom: 3px;
      opacity: 0.4;
    }
    [draggable=true] {
      position: relative;
      opacity: 1;
      padding-bottom: 3px;
      &.dragged {
        z-index: 2;
        //pointer-events: none;
        li {
          cursor: move;
          //pointer-events: none;
          background: $vzb-color-grey-light;
          border-width: 1px 3px;
          border-color: $vzb-color-grey-dark;
        }
      }
      li {
        cursor: move;
        background: $vzb-color-primary-lightest;
        border: 1px solid $vzb-color-primary-light;
        &.hover {
          background: $vzb-color-grey-light;
          border-color: $vzb-color-grey-dark;
        }
      }
    }
    li {
      cursor: default;
      border-radius: 4px;
      background: $vzb-color-primary-lightest;
      border: 1px solid $vzb-color-primary-light;
      list-style: none;
      padding: 3px 6px;
      line-height: 1em;

      .label-circle {
        @include rtl {
          margin-left: 5px;
          margin-right: 0;
        }
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        margin-top: 1px;
        margin-right: 5px;
      }
    }
  }

  .over {
    border: 2px dashed $vzb-color-black;
  }
}