.border-decorator-color-mixin(@color) {
  .border-top-decorator {
    &::before {
      border-top-color: @color;
      border-left-color: @color;
    }
    &::after {
      border-top-color: @color;
      border-right-color: @color;
    }
  }
  .border-bottom-decorator {
    &::before {
      border-bottom-color: @color;
      border-left-color: @color;
    }
    &::after {
      border-bottom-color: @color;
      border-right-color: @color;
    }
  }
}

.rect-item-style-mixin(@color, @lightColor, @shadowColor) {
  .rect-item {
    border-color: @lightColor;
    .border-decorator-color-mixin(@color);
    &:hover {
      border-color: @color;
      box-shadow: inset 0 0 24px 0 @shadowColor;
    }
  }
}

.rect-info-list-mixin(@color, @bgColor, @shadowColor) {
  .rect-info-list-wrapper {
    .data-type{
      .data-tag{
        border:1px solid @color;
        background: @bgColor;
      }
    }
    // border-color: @color;
    // .rect-card-corner {
    //   color: @color;
    // }
    // .rect-info-list {
    //   display: block;
    //   background: @bgColor;
    //   box-shadow: inset 0 0 8px 0 @shadowColor;
    // }
  }
}

.rect-item-face-wrapper {
  .rect-item-style-mixin(#ff5f57, rgba(255, 95, 87, 0.6), rgba(255, 95, 87, 0.4));
  .rect-info-list-mixin(#FF5F57, rgba(255,95,87,0.60), rgba(179,49,43,0.60));
}
.rect-item-body-wrapper {
  .rect-item-style-mixin(#ffbb22, rgba(255, 187, 34, 0.6), rgba(255, 187, 34, 0.4));
  .rect-info-list-mixin(#FFBB22, rgba(255,187,34,0.60), rgba(176,94,0,0.60));
}
.rect-item-vehicle-wrapper {
  .rect-item-style-mixin(#44aaff, rgba(68, 170, 255, 0.6), rgba(68, 170, 255, 0.4));
  .rect-info-list-mixin(#44AAFF, rgba(68,170,255,0.60), rgba(31,114,183,0.60));
}
.rect-item-nonVehicle-wrapper {
  .rect-item-style-mixin(#50e9b2, rgba(80, 233, 178, 0.6), rgba(80, 233, 178, 0.4));
  .rect-info-list-mixin(#50E9B2, rgba(80,233,178,0.60), rgba(15,196,132,0.60));
}
.rect-item-thing-wrapper {
  .rect-item-style-mixin(#b946d2, rgba(185, 70, 210, 0.6), rgba(185, 70, 210, 0.4));
  .rect-info-list-mixin(#b946d2, rgba(185, 70, 210, 0.6), rgba(155, 58, 177, 0.4));
}

.rect-item {
  position: absolute;
  border-width: 1px;
  border-style: solid;
  cursor: pointer;
  .border-top-decorator,
  .border-bottom-decorator {
    position: absolute;
    pointer-events: none;
    width: 100%;
    &::before,
    &::after {
      content: '';
      display: block;
      width: 8px;
      height: 8px;
      border: 2px solid transparent;
    }
    &::before {
      float: left;
      margin-left: -1px;
    }
    &::after {
      float: right;
      margin-right: -1px;
    }
  }
  .border-top-decorator {
    top: 0;
    &::before,
    &::after {
      margin-top: -1px;
    }
  }
  .border-bottom-decorator {
    bottom: 0;
    &::before,
    &::after {
      margin-bottom: -1px;
    }
  }
  &:hover + .rect-info-list-wrapper {
    display: block;
  }
}

// 结构化窗体
.rect-info-list-wrapper {
  display: none;
  background: rgba(16, 21, 36, 0.8);
  position: absolute;
  z-index: 11;
  border: 1px solid transparent;
  padding-top: 5px;

  /*高低质量*/
  .data-type{
    padding: 0 5px;
    color: #fff;

    .data-tag{
      padding: 4px;
      font-size: 12px;
      margin-right: 4px;

      .anticon{
        margin-right: 4px;
        color: #fff;
      }

    }
  }
  .rect-card-corner {
    position: absolute;
    top: -9px;
    left: -1px;
  }
  .rect-info-arrow {
    position: absolute;
    display: block;
    background: transparent;
    border-style: solid;
    border-width: 4px;
    border-color: rgba(16, 21, 36, 0.8);
    transform: rotate(45deg);
    left: -4px;
    top: 6px;
  }
  .rect-info-list {
    height: 100%;
    border-radius: 2px;
    padding: 3px 10px;
    .info-item {
      padding: 3px 0;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      line-height: 18px;
      font-size: var(--fs-small);
      color: #fff;
      .anticon {
        position: relative;
        top: 1px;
        cursor: default;
        font-size: 16px;
        color: #fff;
        padding-right: 4px;
      }
      .item-label {
        margin: 0 4px;
      }
    }
  }
}
