.cluster-dashboard-top {
  min-width: 1000px;

  .filter-item {
    display: flex;
    align-items: flex-start;
  }

  .filter-item-label {
    padding: 0 4px;
    color: $color-text-sub;
    line-height: 30px;
    text-align: center;
    border: 1px solid #d9d9d9;
    border-right: 0;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
  }

  .filter-item-content {
    flex: 1;

    .ant-select-selection {
      max-height: 120px;
      overflow-y: scroll;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }
}

.machine-group-ct {
  display: grid;
  grid-gap: 20px 20px;
  background-color: $white;
  padding: 16px;
  border-radius: 2px;

  &.sub-machine-group-ct {
    grid-gap: 8px 8px;
    margin-top: $p8;

    .machine-group {
      padding: $p4;
    }
  }

  @mixin column($list...) {
    @each $num in $list {
      &-g#{$num} {
        grid-template-columns: repeat(#{$num}, 1fr);
      }
    }
  }

  @include column(1, 2, 3, 4);

  .machine-group {
    padding: $p8;
    background: $color-code-bg;
    border-radius: $radius;

    &.actived-machine-group:hover {
      cursor: zoom-out;
    }

    .group-actived-op {
      display: none;
    }

    &:hover {
      cursor: zoom-in;
      .cluster-group {
        text-decoration: underline;
      }
      // @extend %hover-shadow;
      > .group-header {
        color: $color-primary !important;

        .group-title {
          color: $color-primary !important;
        }

        .group-actived-op {
          display: block;
        }
      }
    }

    &.no-machine-group {
      background: $white;

      &:hover {
        cursor: default;
      }
    }

    &.sub-machine-group {
      background: rgba($black, 0.04);
    }

    .group-title {
      display: inline-block;
      margin-bottom: 2px;
      font-size: 16px;
      line-height: 24px;
      &.cluster-group {
        cursor: pointer;
      }
    }

    .group-info {
      color: $color-text-sub;
      font-size: 12px;
      line-height: 20px;

      span {
        margin-right: $p16;
      }
    }
  }
}

.cluster-state-link {
  display: inline-flex;
  align-items: center;
  color: $color-text-sub;
  font-size: $p12;

  &:hover {
    color: $color-primary !important;
    cursor: pointer;
  }
}

@mixin machine-colour-degree {
  .colour-degree-4 {
    background: $black;
  }

  .colour-degree-3 {
    background: $red;
  }

  .colour-degree-2 {
    background: $yellow;
  }

  .colour-degree-1 {
    background: $green;
  }
}

.machine-list-ct {
  position: relative;
  display: grid;
  grid-gap: 4px 4px;
  flex-wrap: wrap;
  align-content: flex-start;
  padding: $p8 0;

  &.machine-actived:after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: '';
    background: rgba(#fafafa, 0.96);
  }

  @mixin column($list...) {
    @each $num in $list {
      &-g#{$num} {
        grid-template-columns: repeat(#{$num}, 1fr);
      }
    }
  }

  @include column(1, 4, 6, 8, 12, 16, 20, 24, 28, 32, 36, 40);

  @include machine-colour-degree();

  .machine-item {
    position: relative;
    box-sizing: border-box;
    height: 20px;
    border: 1px solid transparent;
    border-radius: $radius;
    transition: 0.2s;

    &:hover {
      z-index: 1;
      border: 1px solid $white;
      box-shadow: $color-dark-2 0 1px 4px 0;
      transform: scale(1.3);
    }

    &.active {
      z-index: 1;
      border: 1px solid $white;
      box-shadow: $color-dark-2 0 1px 4px 0;
      transform: scale(1.3);
      cursor: default;

      .cancel-active {
        display: flex;
        justify-content: center;
        align-items: center;

        .iconfont {
          margin: 0;
        }
      }
    }

    .cancel-active {
      position: absolute;
      top: -10px;
      right: -10px;
      display: none;
      width: 20px;
      height: 20px;
      color: $white;
      font-size: 12px;
      background: $black;
      border-radius: 20px;
      transform: scale(0.8);
      cursor: pointer;
    }
  }
}

.machine-item,
.colour-select-dropdown {
  display: flex;

  > * {
    flex: 1;
  }

  @include machine-colour-degree();

  .colour-comment-item {
    padding: 5px 12px;

    .colour-comment-value {
      color: $color-text-desc;
    }

    .color-block {
      box-sizing: border-box;
      width: 40px;
      height: 16px;
    }
  }
}

.ant-select-tree li.filter-item-node {
  span.ant-select-tree-switcher {
    position: absolute;
    width: 100%;
    text-align: left;
  }

  span.ant-select-tree-switcher-noop {
    position: relative;
    width: 24px;
  }

  span.ant-select-tree-node-content-wrapper {
    margin-left: 24px;
  }

  span.ant-select-tree-node-content-wrapper-normal {
    margin-left: 0;
  }
}
