@import '~@angular/material/theming';
@import '../../../theme';
@import '../../../mixins';

$relation-color-normal: #cacaca;

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

    .diagram-scroll-container {
        height: 100%;
        width: 100%;
        overflow: auto;
        // border: 1px solid black;
        position: relative;

        @media print {
            overflow: hidden;
        }

        .diagram-container {
            margin: 16px;
            position: relative;
            height: 100%;
        }
    }

    efd-db-entity-diagram-figure {
    }

    .relation-path-line {
        position: absolute;
        background: $relation-color-normal;
        // transition: transition-property(background);
        // @include mat-elevation(2);

        @media print {
            -webkit-print-color-adjust: exact;
        }

        &.hover {
            background: mat-color(map-get($efd-app-theme, accent));

            &.connected-before:before,
            &.connected-after:after {
                background: mat-color(map-get($efd-app-theme, accent));
            }
        }

        &.connected-before:before,
        &.connected-after:after {
            content: ' ';
            display: block;
            width: 4px;
            height: 4px;
            position: absolute;
            background: $relation-color-normal;
            border-radius: 2px;
        }

        &.horizontal {
            &.connected-before:before {
                left: -2px;
            }
            &.connected-after:after {
                right: -2px;
            }
        }

        &.vertical {
            &.connected-before:before {
                top: -2px;
            }
            &.connected-after:after {
                bottom: -2px;
            }
        }
    }

    efd-minimap {
        z-index: 20;

        &.hidden {
            display: none;
        }
    }
}
