@use "../../styles/variables";

@mixin thy-tree-default() {
    .thy-tree-node {
        &-wrapper {
            .thy-tree-expand {
                &-icon {
                    transform: rotate(0deg);
                    transition: all 0.2s cubic-bezier(0.4, 0.1, 0.5, 1) 0.1s;

                    &.collapse {
                        transform: rotate(-45deg) translateY(1px);
                    }
                }
            }
        }
    }
}

@mixin drop-left-right-virtual-border($left, $right, $height) {
    content: '';
    width: 2px;
    background-color: variables.$primary;
    position: absolute;
    height: $height;
    left: $left;
    right: $right;
}

@mixin thy-tree-drag-drop {
    .thy-tree {
        &-node {
            &-wrapper {
                border: 2px solid transparent;
            }

            &-content {
                border-top: 2px solid transparent;
                border-bottom: 2px solid transparent;
            }

            .thy-drop-position-in {
                border-color: variables.$primary;

                &::before {
                    @include drop-left-right-virtual-border(0, initial, variables.$tree-node-wrapper-height);
                }

                &::after {
                    @include drop-left-right-virtual-border(initial, 0, variables.$tree-node-wrapper-height);
                }
            }

            .thy-drop-position-before {
                border-top-color: transparent;

                .thy-tree-node-content {
                    border-top-color: variables.$primary;
                }
            }

            .thy-drop-position-after {
                border-bottom-color: transparent;

                .thy-tree-node-content {
                    border-bottom-color: variables.$primary;
                }
            }
        }

        &-sm {
            .thy-tree-node {
                .thy-drop-position-in {
                    border-color: variables.$primary;

                    &::before {
                        @include drop-left-right-virtual-border(0, initial, variables.$tree-node-wrapper-height-sm);
                    }

                    &::after {
                        @include drop-left-right-virtual-border(initial, 0, variables.$tree-node-wrapper-height-sm);
                    }
                }
            }
        }
    }
}
