.promethee-edit__move
  width: 720px
  margin: 0 auto
  .promethee-edit__component
    font-size: 100%
    line-height: 100%
    &__inner
      min-height: 50px
      position: relative
      border: 1px solid #ccc
      p.text-empty
        line-height: 50px
        margin-bottom: 0
    &--selected
      > .promethee-edit__component__inner
        border-color: black
        > .header
          background: black
          color: white
    &__remove
      position: absolute
      top: 4px
      right: 4px
      padding: 1px 2px 1px 3px
      background: white
      font-size: 12px
      line-height: 12px
      z-index: 1
  &__columns
    .row
      user-select: none
      height: 100%
      min-height: 50px
      position: fixed
      top: 0
      bottom: 0
      width: 730px
      z-index: 0
      opacity: 0.03
      .col
        height: 100%
        .color
          height: 100%
          background: black
  &__page
    z-index: 1
    padding-bottom: 200px
  &__columns, &__page
    .row
      margin-left: -5px
      margin-right: -5px
    .col
      padding-left: 5px
      padding-right: 5px
  .header
    background: #ccc
    padding: 4px 5px 5px
    font-size: 8px
    color: white
    text-transform: uppercase
    margin-bottom: 5px
  &__component
    user-select: none
  &__droppable
    visibility: hidden
    opacity: .2
    margin: 2px 0
    position: relative
    background: white
    width: 100%
    height: 20px
    border: 1px dashed #253742
    box-sizing: border-box
    transition: width .2s, height .2s, opacity .2s
    &.ui-droppable-active
      visibility: visible
    &.ui-droppable-hover
      opacity: 1
      height: 100px
    &--row
      position: absolute
      display: none
      width: 10px
      height: 100%
      &.ui-droppable-active
        width: 10px
        height: 100%
      &.ui-droppable-hover
        opacity: 1
        width: 20px
        height: 100%
      &--first
        display: block
        left: -10px
        top: 10px
        bottom: 20px
      &--inside-column
        display: block
        right: -5px
        top: -10px

  .ui-draggable-dragging
    z-index: 1000
    opacity: 0.5
    // Nothing is droppable inside components being dragged
    .promethee-edit__move__droppable
      visibility: hidden !important

  // By default, nothing is dropped in rows
  &--dragging
    .promethee-edit__move__droppable--row
      display: none

    // Except for columns, which can be dropped only on rows
    &--column
      .promethee-edit__move__droppable
        display: none
        // But we don't want anything to move when the droppable disappear, so we show some substitutes
        &-substitute
          // This height is not perfect, some strange things move
          height: 24px
          // Except in rows
          &.promethee-edit__move__droppable-substitute--row
            height: 0
        // It's a little specific, columns can be dropped on rows "first droppable", or on columns "inside droppables"
        &--row--first,
        &--row--inside-column
          display: block

  .promethee-edit
    &__inspect, &__library
      min-width: 100px
      max-width: 400px
      background: white
      position: fixed
      top: 80px
      bottom: 15px
      z-index: 1000
      width: calc(50vw - 420px)
      overflow-x: hidden
      overflow-y: scroll
      &-header
        font-size: 18px
        font-weight: bold
        text-transform: uppercase
        margin-bottom: 20px

    &__inspect
      right: 30px
      label.label-control
        font-weight: normal

    &__library
      left: 30px
      &__item
        max-width: 300px
        z-index: 100000
        background-color: #253742
        padding-top: 10px
        margin-bottom: 30px
        height: 100px
        min-width: 100px
        text-align: center
        color: white
        &__icon
          display: block
          svg
            width: 60px
            height: auto
        &__name
          margin-top: -10px
          font-size: 11px
          font-weight: normal
          text-transform: uppercase