.sortable {
  cursor: move;
}

.sortable span {
  vertical-align: middle;
}

.sortable-ghost {
  opacity: 0.5;
}

.sortable-ghost{
  >.card{
    border: 2px solid $theme-color-1;
  }
}
.sortable-drag{
  .card{
    opacity: 1;
    border: 2px dashed $muted-color;
    background-color: white;
  }
}

.sortable-area{
  .card{
    cursor: move;
    height: 100px;
    margin-bottom: $size-medium;
    &:hover{
      @include depth(2);
    }
  }
  &.row{
    >div:nth-child(2n) {
      .card {
        animation: jiggle1 ease-in-out 0.3s infinite;
        transform-origin: 50% 10%;
      }
    }

    >div:nth-child(2n-1) {
      .card {
        animation: jiggle2 ease-in-out 0.3s infinite alternate;
        transform-origin: 30% 5%;
      }
    }
  }
}