:host {
  margin: -7% 0 -5% 0;
}
.radar-chart {
  background-color: transparent;
}
.radar {
  width: calc(var(--size) * 1.2);
  height: calc(var(--size) * 1.2);
  background-image: url(/assets/images/radar-bg.svg);
  background-size: 86% 86%;
  background-repeat: no-repeat;
  background-origin: content-box;
  background-position: 50% 55%;
  transition: background-size 1s;
  &.hide {
    background-size: 0% 0%;
  }
}

.radar-legend {
  @apply flex flex-col justify-end;
}

.legend-fields {
  position: relative;
  bottom: 9%;
  left: -15px;
}
.legend-item {
  margin-bottom: 12px;
}
.legend-color {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  margin-right: 8px;
}
.legend-text {
  color: #5a607f;
  font-size: 14px;
}

@keyframes rotateFrame {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
