@use 'ngx-tethys/styles/variables.scss' as variables;
@use './variables.scss' as board;

.thy-entry-container {
    display: block;
    height: 100%;
    position: relative;

    &.board-lane-body-entry {
        width: 320px;
        border-left: 1px solid variables.$gray-200;
        border-bottom: 1px solid variables.$gray-200;

        &:first-child {
            margin-left: 0px;
        }
        &:last-child {
            border-right: 1px solid variables.$gray-200;
        }

        &.board-lane-body-entry-is-empty {
            min-height: 200px;
        }
        &.board-lane-body-entry-is-collapsed {
            height: 64px;
            line-height: 64px;
            border-left: none;
        }
    }

    &.thy-entry-split {
        display: flex;
        width: 640px;
        .thy-entry-movable-container,
        .thy-entry-sortable-container {
            flex: 1;
            .entry-cards {
                flex: 1;
            }
        }
        .entry-split-line {
            width: 0;
            border-left: dashed 1px variables.$gray-300;
        }
        .entry-split-title {
            padding: 8px 0 0 8px;
            color: variables.$gray-600;
        }
        .entry-body {
            display: flex;
            width: 100%;
        }
    }

    &.thy-entry-collapsed {
        width: 49px;
        min-width: 49px;
        border-right: none;
        visibility: hidden;
        * {
            visibility: hidden;
        }
        .entry-collapsed {
            display: inline-block;
        }

        & + .board-lane-body-entry {
            border-left: none;
        }
    }

    .entry-body {
        position: relative;
        height: 100%;
        position: sticky;
        top: 0;
        &.entry-body-multi-lanes {
            position: sticky;
            top: 0;
        }

        .entry-cards {
            display: flex;
            flex-direction: column;
            height: 100%;
            .cdk-virtual-scrollable {
                overflow-x: hidden;
            }
            .entry-card {
                flex-shrink: 0;
            }

            &.entry-cards-dragging {
                visibility: hidden;
            }
        }
        .entry-state {
            height: 100%;
        }
        &.droppable {
            display: flex;
            flex-direction: column;
            padding: 0;
            height: 100%;
            background: variables.$gray-80;
            .entry-cards {
                height: 0;
            }
        }

        .entry-viewport {
            overflow: hidden;
        }
    }

    .entry-card-list {
        .entry-card {
            margin: 8px 8px 0 8px;
        }
        &:last-child {
            .entry-card {
                margin-bottom: 8px;
            }
        }
    }

    .thy-entry-movable-container {
        display: flex;
        height: inherit;
        .entry-drop {
            position: absolute;
            top: 1px;
            bottom: 1px;
            left: 0px;
            margin-top: -1px;
            width: calc(100% + 2px);
            height: 100%;
            padding-top: 10px;
            padding-left: 20px;
            border: dashed 1px variables.$gray-400;
            z-index: 2;
            &.entry-dragging {
                position: sticky;
                bottom: 0;
            }

            &.cdk-drop-list-dragging {
                background: rgba(variables.$primary, 0.1);
                border-color: variables.$primary;
                z-index: 3;
                .dragging-text-color {
                    color: variables.$primary !important;
                }
            }
            .cdk-drag-placeholder {
                display: none;
            }
        }

        .entry-drop-zones {
            width: calc(100% + 2px);
            height: 100%;
            left: -1px;
            top: 0;
            display: flex;
            flex-direction: column;
            position: absolute;

            &.entry-dragging {
                position: sticky;
                bottom: 0;
            }
            .entry-drop-zone {
                flex: 1;
                height: 100%;
                padding-top: 10px;
                padding-left: 20px;
                border: dashed 1px variables.$gray-400;
                z-index: 2;
                margin-top: -1px;
                &:first-child {
                    margin-top: 0px;
                }
                &.cdk-drop-list-dragging {
                    background: rgba(variables.$primary, 0.1);
                    border-color: variables.$primary;
                    z-index: 3;
                    .dragging-text-color {
                        color: variables.$primary !important;
                    }
                }
                .cdk-drag-placeholder {
                    display: none;
                }
            }
        }

        .empty-zone {
            display: flex;
            height: calc(100%);
            width: calc(100% - 2px);
            margin: auto;
            background: variables.$gray-100;
            .empty-zone-tip {
                margin: auto;
                color: variables.$gray-600;
            }
        }

        .entry-body {
            flex: 1;
            .entry-cards {
                .entry-card {
                    .cdk-drag-placeholder {
                        background: transparent !important;
                        border-color: transparent;
                    }
                }
            }
        }
    }

    .thy-entry-sortable-container {
        display: block;
        height: inherit;
        .entry-body {
            .entry-cards {
                .entry-empty {
                    height: 100%;
                }
                //#region 当 entry 只有一个卡片时，拖起卡片后，drop-list 撑满以便可再次放下
                .cdk-drop-list-dragging {
                    flex: 1;
                    & + .cdk-drop-list {
                        flex: none;
                    }
                }

                .cdk-drop-list {
                    & + .cdk-drop-list-dragging {
                        flex: none;
                    }
                }
                //#endregion
                .cdk-drag {
                    &:not(:last-child) {
                        margin-bottom: 8px;
                    }
                }
                .cdk-drag-placeholder {
                    background: variables.$gray-100 !important;
                    box-shadow: none;
                }
            }
        }
    }

    &.thy-entry-exceed-wip-limit {
        background: rgba($color: board.$thy-board-wip-limit-color, $alpha: 0.05);
        border: board.$thy-board-border-wip-limit;
        border-top: none;

        &:first-child {
            border-top: none;
        }

        & + .board-lane-body-entry {
            border-left: none;
        }

        &.board-lane-body-entry-is-collapsed {
            border-right: none;
        }

        .thy-entry-movable-container {
            .entry-drop {
                border: dashed 1px variables.$gray-400;

                &.cdk-drop-list-dragging {
                    border-color: variables.$primary;
                    background: variables.$gray-80;

                    &::after {
                        content: '';
                        position: absolute;
                        top: 0px;
                        right: 0px;
                        bottom: 0px;
                        left: 0px;
                        background: rgba(variables.$primary, 0.1);
                    }

                    .dragging-text-color {
                        color: variables.$primary !important;
                    }
                }
            }

            .entry-drop-zones {
                .entry-drop-zone {
                    border: dashed 1px rgba($color: board.$thy-board-wip-limit-color, $alpha: 0.3);

                    &.cdk-drop-list-dragging {
                        border-color: variables.$primary;
                        background: variables.$gray-80;
                        position: relative;

                        &::after {
                            content: '';
                            position: absolute;
                            top: 0px;
                            right: 0px;
                            bottom: 0px;
                            left: 0px;
                            background: rgba(variables.$primary, 0.1);
                        }

                        .dragging-text-color {
                            color: variables.$primary !important;
                        }
                    }
                }
            }

            .empty-zone {
                background: variables.$gray-100;
                .empty-zone-tip {
                    color: variables.$gray-600;
                }
            }
        }

        .thy-entry-sortable-container {
            .entry-body {
                .entry-cards {
                    .cdk-drag-placeholder {
                        background: rgba($color: board.$thy-board-wip-limit-color, $alpha: 0.12) !important;
                    }
                }
            }
        }
    }
}