.drag-drop {
  @include m(container) {
    background-color: var(--color-white);

    &.cdk-drop-list-dragging .drag-drop--item:not(.cdk-drag-placeholder) {
      transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
    }
    .cdk-drag-animating {
      transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
    }
  }

  @include m(item) {
    background-color: var(--color-white);
    cursor: move;

    &.cdk-drag-preview {
      border-radius: $border-radius-base;
      box-shadow: $box-shadow-default;
      padding-left: calc-rem(32);
      padding-right: calc-rem(32);
    }
  }

  @include m(placeholder) {
    background: var(--color-gray-50);
    border: dashed 2px var(--color-gray-400) !important;
    min-height: calc-rem(120);
    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
  }
}