@use './mixins.scss' as mixins;

$primary: #4e8afa;

.plait-board-container {
    g[plait-mind='true'],
    g[plait-mind-temporary='true'] {
        .slate-editable-container {
            min-width: 5px;
        }
        .collapse-button, .add-button {
            transform-origin: center center;
            transform-box: fill-box;
            cursor: pointer;
            &.animated {
                animation: scale-in 0.15s ease-out forwards;
            }
        }
        .expanded-button {
            cursor: pointer;
        }
        
        @keyframes scale-in {
            from {
                transform: scale(0);
            }
            to {
                transform: scale(1);
            }
        }

        .dragging-node {
            opacity: 0.6;
        }
    }

    &.pointer-hand {
        .board-host-svg {
            cursor: grab;
        }
    }

    &.pointer-mind {
        .board-host-svg {
            cursor: default !important;
        }
    }

    &.readonly {
        .mind-node-image {
            cursor: zoom-in;
        }
    }

    &.viewport-moving {
        svg {
            cursor: grabbing;
        }
    }

    &.abstract-resizing-horizontal {
        cursor: ns-resize;
    }

    &.abstract-resizing-vertical {
        cursor: ew-resize;
    }

    .node-emojis-container {
        display: flex;
        position: initial;
        align-items: center;
        height: 100%;
    }

    .fake-node {
        &.dragging {
            cursor: pointer;
            opacity: 0.6;
            // Compact: Safari
            // Opacity property will cause text position warning
            // .plait-text-container {
            //     opacity: 0.6;
            // }
        }
    }

    .root {
        .plait-text-container {
            font-size: 18px;
            min-height: 25px;
            line-height: 25px;
        }
    }

    .mind-node-image {
        display: block;
    }

    @include mixins.node-color();
}