@import '../../../../assets/styles/drag.scss';
@import '~@angular/material/theming';

@mixin os-sorting-tree-style($theme) {
    $background: map-get($theme, background);

    cdk-tree-node {
        margin: 3px 0;
        display: flex;
        align-items: center;

        div {
            display: inherit;
            align-items: inherit;
            width: 100%;

            mat-icon {
                transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
            }
        }
    }

    // Overwrite the handler
    .cdk-drag-handle {
        display: flex;
        cursor: move;
        width: 50px;
        align-items: center;
        justify-content: center;
    }

    // Overwrite the preview
    .cdk-drag-preview {
        box-shadow: none !important;
        background-color: unset !important;
        border-radius: 6px !important;

        div.backgroundColorLight {
            box-sizing: border-box;
            background-color: mat-color($background, background);
            border-radius: 4px;
            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);
        }

        .mat-icon-button {
            visibility: hidden !important;
        }
    }

    // Overwrite the placeholder
    .cdk-drag-placeholder {
        opacity: 1 !important;
        background: #ccc;
        border: dotted 3px #999;
        min-height: 42px;
        transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
    }

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