:host {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
}

::ng-deep :root {
  --uml-line-alignment-color: #e2e2e3;
  --uml-node-color: rgba(100, 108, 255, 0.24);
  --uml-node-text-color: rgba(60, 60, 67);

  --uml-connection-color: rgba(60, 60, 67);

  &.dark {
    --uml-line-alignment-color: #2e2e32;
    --uml-node-color: rgba(100, 108, 255, 0.26);
    --uml-node-text-color: rgba(255, 255, 245, 0.86);

    --uml-connection-color: rgba(255, 255, 245, 0.86);
  }
}

::ng-deep uml-diagram-example {

  .f-background {
    circle {
      fill: var(--uml-line-alignment-color);
    }
  }

  .f-connection {
    .f-connection-drag-handle {
      fill: transparent;
      cursor: move;
    }

    .f-connection-path {
      fill: none;
      stroke: var(--uml-node-text-color);
      stroke-width: 2;
    }

    .f-marker {
      path, circle {
        fill: var(--uml-node-text-color);
      }
    }
  }

  .f-line-alignment {
    .f-line {
      border: 0.5px dashed var(--uml-line-alignment-color);
    }
  }
}

.f-node, .f-group {
  display: block;
  background-color: var(--uml-node-color);
  min-width: 200px;
  min-height: 120px;
  border-radius: 12px;

  .title {
    color: var(--uml-node-text-color);
    padding: 4px 12px;
    border-bottom: 1px solid var(--uml-node-text-color);
  }

  .attr {
    color: var(--uml-node-text-color);
    padding: 4px 12px;
  }
}
