@import "./../vars.scss";

$border-color: #797979;
$left-border-color: #9C9C9C;
$left-bg: #FAFAFA;
$header-bg-color: linear-gradient(180deg, rgba(216, 216, 216, 1) 0%, rgba(216, 216, 216, 1) 0%, rgba(228, 228, 228, 1) 100%, rgba(228, 228, 228, 1) 100%);

%header-extra-item {
  display: inline-block;
  width: 3rem;
  height: 2.5rem;
  line-height: 2;
  cursor: pointer;
  border-left: 1px solid $border-color;
}

.root-topo-view {
  display: flex;
  height: 100%;

  .topo-left {
    flex: 0 0 20%;
    display: flex;
    background: $rule-prop-bar-bg;
    flex-direction: column;
  }

  .topo-content-wrapper {
    flex: 1;

    // 昆山
    .kunshan-topo-content {
      height: calc(100% - 3rem);
      background: url("../../assets/iot/topo/kunshan.png") no-repeat;
      background-color: $grey-tint;
      background-size: 100% 100%;
    }
  }
}

.topo-tree {
  height: 25rem;

  .topo-tree-header {
    .tree-header-extra-item {
      @extend %header-extra-item;

      &:hover {
        background: $active-color;
      }
    }
  }

  .topo-tree-content {
    height: 20rem;
    padding-left: 2rem;
    overflow: auto;
  }
}

.topo-node {
  border-top: 1px solid $left-border-color;
  flex: 1;

  .topo-node-header {
    .node-header-extra-item {
      @extend %header-extra-item;

      &:hover {
        background: $active-color;
      }
    }
  }

  .topo-node-container {
    .container-title {
      height: 2rem;
      line-height: 2rem;
      text-align: center;
      background: #DDE4E5;
    }

    .container-inner {
      overflow: auto;
    }
  }
}

.topo-view-header {
  .topo-header-extra-item {
    @extend %header-extra-item;

    &:hover {
      background: $active-color;
    }
  }
}
