// @import "../../../node_modules/katex/dist/katex.min.css";
// @import "../../../node_modules/highlight.js/styles/default.min.css";

.maparea {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    // 防止SVG内容溢出
    overflow: hidden;

    // 确保SVG内容居中
    &>g {
        transform-origin: center !important;
    }
}

:host {
    display: block;
    width: 100%;
    height: 100%;

    ::ng-deep {
        .node-checkbox {
            appearance: none;
            -webkit-appearance: none;
            width: 16px;
            height: 16px;
            border: 2px solid #666;
            border-radius: 3px;
            outline: none;
            cursor: pointer;
            position: relative;
            transition: all 0.2s;

            &:checked {
                background-color: var(--ion-color-primary);
                border-color: var(--ion-color-primary);

                &::after {
                    content: '';
                    position: absolute;
                    left: 4px;
                    top: 1px;
                    width: 5px;
                    height: 9px;
                    border: solid white;
                    border-width: 0 2px 2px 0;
                    transform: rotate(45deg);
                }
            }

            &:hover {
                border-color: var(--ion-color-primary);
            }
        }
    }
}