.chaarts.radar-multiple {
  margin-block-end: 12rem;
}

.chaarts.radar-multiple tbody {
  columns: var(--areas);
  vertical-align: bottom;
}

.chaarts.radar-multiple [scope=row] {
  block-size: 2rem;
  bottom: -8rem;
  left: 1rem;
  position: absolute;
}

.chaarts.radar-multiple [scope=row]::before {
  background: var(--color, currentcolor);
  block-size: 1rem;
  content: "";
  display: inline-block;
  inline-size: 1rem;
  margin-inline-end: 0.25rem;
  translate: 0 0.1rem 0;
}

.chaarts.radar-multiple tr:nth-child(2) [scope=row] {
  left: calc(1rem + 100% / var(--areas) * 1);
}

.chaarts.radar-multiple td {
  align-items: flex-end;
  border-color: var(--color, currentcolor);
  display: flex;
  justify-content: flex-end;
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}

.chaarts.radar-multiple td::after {
  color: var(--foreground);
  display: block;
  font-size: small;
  font-weight: 700;
  inline-size: 100%;
  text-indent: -0.5rem;
  transform: skew(calc(var(--skew) * -1)) rotate(calc(var(--part) * var(--index, 1) * -1));
  transform-origin: 0 0;
  white-space: nowrap;
}

.chaarts.radar-multiple td:nth-of-type(1)::after {
  --integer: calc(var(--1));
  content: counter(value);
  counter-reset: value var(--integer);
  inline-size: calc(var(--1) * 100% / var(--scale));
}

.chaarts.radar-multiple td:nth-of-type(2)::after {
  --integer: calc(var(--2));
  content: counter(value);
  counter-reset: value var(--integer);
  inline-size: calc(var(--2) * 100% / var(--scale));
}

.chaarts.radar-multiple td:nth-of-type(3)::after {
  --integer: calc(var(--3));
  content: counter(value);
  counter-reset: value var(--integer);
  inline-size: calc(var(--3) * 100% / var(--scale));
}

.chaarts.radar-multiple td:nth-of-type(4)::after {
  --integer: calc(var(--4));
  content: counter(value);
  counter-reset: value var(--integer);
  inline-size: calc(var(--4) * 100% / var(--scale));
}

.chaarts.radar-multiple td:nth-of-type(5)::after {
  --integer: calc(var(--5));
  content: counter(value);
  counter-reset: value var(--integer);
  inline-size: calc(var(--5) * 100% / var(--scale));
}

.chaarts.radar-multiple td:nth-of-type(6)::after {
  --integer: calc(var(--6));
  content: counter(value);
  counter-reset: value var(--integer);
  inline-size: calc(var(--6) * 100% / var(--scale));
}

.chaarts.radar-multiple td:nth-of-type(7)::after {
  --integer: calc(var(--7));
  content: counter(value);
  counter-reset: value var(--integer);
  inline-size: calc(var(--7) * 100% / var(--scale));
}

.chaarts.radar-multiple span {
  --mask: radial-gradient(circle at bottom right, var(--foreground), var(--foreground-o-50));
  background: var(--color, currentcolor);
  mask-image: var(--mask);
  pointer-events: auto;
}

@media (hover: hover) {
  .chaarts.radar-multiple td {
    opacity: 0.25;
    transition: opacity 0.2s var(--move);
  }
  .chaarts.radar-multiple td::after {
    opacity: 0;
    transition: inherit;
  }
  .chaarts.radar-multiple tr:hover td {
    opacity: 1;
    z-index: 1;
  }
  .chaarts.radar-multiple tr:hover td::after {
    opacity: inherit;
  }
}
