$item-initial: #15653d; // 初始
$item-fourfive: #0078ef; // 4/5 级
$item-fourfive-tint: #0063c6; // 4/5 级 弱色 （边框、线条、圆点）
$item-three: #ffcc2a; // 3级
$item-three-tint: #fd9a2d; // 3级 弱色 （边框、线条、圆点）
$item-two: #ff5a20; // 2级
$item-two-tint: #f03d00; // 2级 （边框、线条、圆点）
$item-one: #f42828; // 1级
$item-one-tint: #d90b0b; // 1级 （边框、线条、圆点）

@mixin create-mapitem($level, $color, $tintColor) {
  .face-#{$level} {
    fill: $color;
    stroke: none;
  }

  .line-#{$level} {
    stroke: $tintColor;
    stroke-dasharray: 5, 5;
    fill: none;
    stroke-miterlimit: 10;
  }

  .dot-#{$level} {
    fill: $tintColor;
    stroke: $tintColor;
  }

  .edge-#{$level} {
    fill: $tintColor;
    stroke: none;
  }
}

.situation-map {
  @include create-mapitem('initial', $item-initial, $item-initial);
  @include create-mapitem('fourfive', $item-fourfive, $item-fourfive-tint);
  @include create-mapitem('three', $item-three, $item-three-tint);
  @include create-mapitem('two', $item-two, $item-two-tint);
  @include create-mapitem('one', $item-one, $item-one-tint);

  .info-name {
    fill: white;
    font-size: 12px;
    stroke: none;
  }

  .info-value {
    fill: white;
    font-size: 12px;
    font-weight: bold;
    stroke: none;
  }
}

.situation-item {
  fill: #03a9f4;
  cursor: pointer;

  &:focus,
  &:hover {
    fill: #064f73;
    outline: 0;
  }

  &[aria-checked='true'] {
    fill: #203957;
  }
}

.situation-map-legend {
  position: absolute;
  right: 10px;
  bottom: 20px;
  width: 100px;
  height: 150px;

  .situation-map-legend-item {
    height: 30px;
    line-height: 10px;
    text-align: left;

    .situation-map-legend-block {
      float: left;
      width: 15px;
      height: 10px;
      margin-right: 20px;
    }
  }
}


.svg-toolkit {
  width: 90% !important;
}
