@import '../../style/themes/index';
@import '../../style/mixins/index';

@graph-stroke-color: @primary-3;
@graph-focused-color: @primary-color;
@graph-stroke-width-base: 1px;

@graph-node-background-color: @primary-1;

@graph-prefix-cls: ~'nz-graph';

.@{graph-prefix-cls} {
  display: block;
  position: relative;
  height: 100%;
  width: 100%;
  background-color: @component-background;

  &-nodes {
    .@{graph-prefix-cls}-node {
      &-rect {
        fill: transparent;
        stroke: @graph-stroke-color;
        stroke-width: @graph-stroke-width-base;

        &:hover {
          stroke: @graph-focused-color;
        }
      }
    }
  }

  &-edges {
    .@{graph-prefix-cls}-edge {
      path {
        fill: none;
        stroke: @graph-stroke-color;
        stroke-linecap: butt;
        stroke-width: @graph-stroke-width-base;

        &:hover {
          stroke: @graph-focused-color;
        }
      }

      &-text {
        fill: fade(@text-color, 85%);
        font-size: @font-size-sm;
      }
    }
  }

  &-edge-marker {
    color: @graph-stroke-color;
    fill: @graph-stroke-color;
  }

  &-minimap {
    position: absolute;
    right: 0;
    bottom: 0;
    background-color: @component-background;
    transition: opacity 0.3s linear;
    pointer-events: auto;
    border: @border-width-base @border-style-base @border-color-base;
    z-index: 99;

    &.hidden {
      opacity: 0;
      pointer-events: none;
    }

    canvas {
      border: 1px solid #999;
    }

    rect {
      fill: @component-background;
      stroke: @text-color-secondary;
      stroke-width: @border-width-base;
      fill-opacity: 0;
      filter: url(#minimapDropShadow);
      cursor: move;
    }

    svg {
      position: absolute;
      width: 100%;
      height: 100%;
    }

    .buffer,
    .viewport {
      display: block;
      height: 100%;
    }
  }
}