

@mixin drag-drop {

  .cdk-drag-preview {
    box-sizing: border-box;
    border-radius: 4px;
    font-family: Roboto;
    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
    0 8px 10px 1px rgba(0, 0, 0, 0.14),
    0 3px 14px 2px rgba(0, 0, 0, 0.12);
  }

  .cdk-drag-animating {
    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
  }

  .lesson:last-child {
    border: none;
  }

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

  .drop-placeholder {
    background: #ccc;
    border: dotted 3px #999;
    min-height: 60px;
    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
  }

}

@mixin responsive-dialogs {

  @media screen and (max-width: 959px) {

    .modal-panel {
      min-width: 0 !important;
      max-width: 100% !important;
      max-height: 100% !important;
      width: 100% !important;
      height: 100% !important;

      .mat-dialog-container {
        border-radius: 0;
        padding: 14px !important;
      }

    }

  }

}
