@import './../../../style/vars.scss';
@import '../../../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/variables';

xos-fine-grained-tenancy-graph {
  display: block;
  height: 100%;
  // background: $color-accent;

  svg {
    height: 90%;
    width: 100%;
    background-color: $panel-filled-bg;
    border-radius: 3px;
  }

  .node-group {

    .node {
      cursor: pointer;
    }

    .node .symbol {
        fill-rule: evenodd;
        stroke: #bbddff;
        stroke-width: 4.0px;
        fill: none;
    }
    .node .symbol-bg {
        fill-rule: evenodd;
        stroke: none;
        fill: $background-color;
    }

    .node {
      rect, circle {
        stroke: $color-accent;
        fill: $background-color;
      }

      &.network > circle{
        stroke: blue;
      }

      &.tenant, &.serviceinstance > rect{
        stroke: green;
      }

      &.subscriber > rect,
      &.tenantroot > rect{
        stroke: red;
      }
    }

    .node > text {
      fill: #fff;
      font-size: 20px;
    }
  }

  .link-group {
    line {
      stroke: $color-accent;

      &.ext-service-instance {
        stroke: green;
      }

      &.ext-owner {
        stroke: green;
        stroke-dasharray: 5;
      }
    }
  }
  .arrow-marker {
    stroke: $color-accent;
    fill: $color-accent;
  }
}