// Sortable lists

.dd
  margin: 0 -40px
  overflow: hidden
  position: relative

  & > .dd-list > .dd-item:first-child
    border-top: none

.dd-item-inner.dd-handle
  cursor: move

.dd-item-inner .sortable-link
  @include transform(translateX(-26px))
  @include transition(all .2s ease)

.dd-item-inner.dd-handle .sortable-link
  @include transform(translateX(0))

.dd-item-inner:before
  @include fa-icon
  @extend .fa-bars:before
  color: #ccc
  display: inline-block
  height: 18px
  opacity: 0
  vertical-align: middle
  width: 26px
  @include transform(translateX(-26px))
  @include transition(all .2s ease)

.dd-item-inner.dd-handle:before
  opacity: 1
  @include transform(translateX(0))

.dd-list
  list-style: none
  margin: 0
  padding: 0
  position: relative

  .dd-placeholder
    position: relative

    &:after
      border: 1px dashed #ddd
      content: " "
      display: block
      height: 100%
      margin-left: 0px
      top: 0px
      width: 100%
      @include box-sizing(border-box)

  .dd-list
    background: #f9f9f9
    border-top: 1px solid #ddd

    .dd-placeholder
      background: #f9f9f9

      &:after
        margin-left: 60px

    .dd-item:last-child
      border-bottom: none
    
    .dd-item
      padding-left: 30px

    .dd-list
      background: #f1f1f1
      margin-left: -30px

      .dd-item
        padding-left: 60px

      .dd-placeholder
        background: #f1f1f1

        &:after
          margin-left: 90px

.dd-collapsed .dd-list
  display: none

.dd-item
  border-bottom: 1px solid #ddd

.dd-item, .dd-empty, .dd-placeholder
  margin: 0
  padding: 0
  position: relative

.dd-placeholder, .dd-empty
  background: #fcfcfc
  margin: 0
  padding: 0
  @include box-sizing(border-box)

.dd-empty
  background: blue
  min-height: 100px

.dd-item-inner
  padding: 10px 40px
  text-decoration: none

  a
    margin: 0

  a.sortable-link, a.sortable-link:hover
    color: $primary-color
    font-size: 13px
    font-weight: 600
    padding-left: 0

    small
      font-size: 13px
      font-weight: 400
      margin-left: 13px

.dd-dragel
  pointer-events: none
  position: absolute
  z-index: 9999

  & > .dd-item .dd-handle
    margin-top: 0

.dd-item > button
  background: transparent
  border: 0
  cursor: pointer
  display: block
  float: left
  font-size: 9px
  height: 52px
  line-height: 20px
  overflow: hidden
  margin-left: 10px
  padding: 0
  position: relative
  text-align: center
  text-indent: 100%
  white-space: nowrap
  width: 30px

  &:before
    color: $primary-color
    content: "t"
    display: block
    font-family: $icon-font
    position: absolute
    text-align: center
    text-indent: 0
    width: 100%

  &[data-action="collapse"]:before
    content: "X"