@charset "UTF-8";
.chaarts.pie {
  --radius: 32em;
  margin: 0 auto;
  padding-block-start: calc(var(--radius) - 2rem);
  position: relative;
}

.chaarts.pie tbody {
  border: 0;
  display: flex;
  flex-wrap: wrap;
}

.chaarts.pie tr {
  --lt-25: clamp(0, 25 - var(--value), 1);
  --gt-25: calc(1 - var(--lt-25));
  --lt-50: clamp(0, 50 - var(--value), 1);
  --gt-50: calc(1 - var(--lt-50));
  --lt-75: clamp(0, 75 - var(--value), 1);
  --gt-75: calc(1 - var(--lt-75));
  align-items: center;
  display: flex;
  flex: 1 1 auto;
  transition: opacity 0.3s var(--move);
}

.chaarts.pie tr:nth-of-type(1n + 1) {
  --background: var(--checkers);
}

.chaarts.pie tr:nth-of-type(2n + 2) {
  --background: var(--hexagons);
}

.chaarts.pie tr:nth-of-type(3n + 3) {
  --background: var(--triangles);
}

.chaarts.pie tr:nth-of-type(4n + 4) {
  --background: var(--zig);
}

.chaarts.pie tr:nth-of-type(5n + 5) {
  --background: var(--stripes);
}

.chaarts.pie tr:nth-of-type(6n + 6) {
  --background: var(--dots);
}

.chaarts.pie tr:first-child {
  --value: var(--1);
  --position: 0turn;
}

.chaarts.pie tr:nth-child(2) {
  --value: var(--2);
  --position: calc(var(--1) * .01turn);
}

.chaarts.pie tr:nth-of-type(3n + 3) {
  --value: var(--3);
  --position: calc((var(--1) + var(--2)) * .01turn);
}

.chaarts.pie tr:nth-of-type(4n + 4) {
  --value: var(--4);
  --position: calc((var(--1) + var(--3) + var(--2)) * .01turn);
}

.chaarts.pie tr:nth-of-type(5n + 5) {
  --value: var(--5);
  --position: calc((var(--1) + var(--4) + var(--3) + var(--2)) * .01turn);
}

.chaarts.pie tr:nth-of-type(6n + 6) {
  --value: var(--6);
  --position: calc((var(--1) + var(--5) + var(--4) + var(--3) + var(--2)) * .01turn);
}

.chaarts.pie tr:nth-of-type(7n + 7) {
  --value: var(--7);
  --position: calc((var(--1) + var(--6) + var(--5) + var(--4) + var(--3) + var(--2)) * .01turn);
}

.chaarts.pie [scope=row] {
  padding-inline-end: 0.5rem;
}

.chaarts.pie [scope=row]::before {
  background: var(--color, currentcolor) var(--background);
  block-size: 1rem;
  content: "";
  display: inline-block;
  inline-size: 1rem;
  translate: calc(-0.2rem * var(--is-rtl, 1)) 0.1rem 0;
}

.chaarts.pie td::after,
.chaarts.pie td::before {
  inset-block-start: calc(var(--radius) / 2);
  inset-inline-start: 50%;
  position: absolute;
  transform-origin: center;
}

[dir=rtl] .chaarts.pie td::after {
  inset-inline-start: 40%;
}

.chaarts.pie td::before {
  --zoom: .75;
  --part: calc(var(--value) * 3.6);
  --main-angle: calc(var(--part) - (90 * (var(--gt-25, 0) + var(--gt-50, 0) + var(--gt-75, 0))));
  --β: calc(var(--main-angle) * var(--to-radians));
  --α: calc((90 - var(--main-angle)) * var(--to-radians));
  --pos-B: calc(sin(var(--β)) * 50%);
  --pos-A: calc(sin(var(--α)) * 50%);
  --polygon: polygon(
  		50% 50%,
  		50% 0%,
  		100% 0%,
  		max(50% + var(--pos-B), var(--gt-25, 0) * 100%) calc(50% - var(--pos-A) * var(--lt-25, 1)),
  		max(50%, var(--gt-25, 0) * 100%) max(50%, var(--gt-25, 0) * 100%),
  		max(50% + var(--pos-A) * var(--gt-25, 0), var(--gt-50, 0) * 100%) max(50% + var(--pos-B) * var(--gt-25, 0) * var(--lt-50, 0), var(--gt-50, 0) * 100%),
  		max(0%, var(--lt-50, 0) * 50%) max(50%, var(--gt-50, 0) * 100%),
			clamp(0%, 100% * (var(--lt-75, 1)), 50% - var(--pos-B) * var(--gt-50, 0)) calc(50% + var(--pos-A) * var(--gt-50, 0) * var(--lt-75, 1)),
  		max(0%, var(--lt-75, 0) * 50%) max(0%, var(--lt-75, 0) * 50%),
  		calc(50% - var(--pos-A) * var(--gt-75, 0)) calc(50% - var(--pos-B) * var(--gt-75, 0))
  );
  background: var(--color, currentcolor) var(--background);
  block-size: var(--radius);
  border-radius: 50%;
  clip-path: var(--polygon);
  content: "";
  inline-size: var(--radius);
  transform: translate3d(calc(-50% * var(--is-rtl, 1)), -50%, 0) rotate(var(--position)) scale(var(--zoom));
  transition: transform 0.2s var(--move);
}

.chaarts.pie tr:hover td::before {
  --zoom: .8;
}

.chaarts.pie td::after {
  --axis: calc(var(--position) - .25turn + var(--value) * .005turn);
  --away: calc(var(--radius) / 2 - 1rem);
  --integer: calc(var(--value));
  background-color: var(--foreground-lighter);
  color: var(--background-lighter);
  content: var(--term) " : " counter(value) " %";
  counter-reset: value var(--value);
  opacity: 0;
  padding: 0.5rem;
  pointer-events: none;
  transform: translate3d(-50%, -50%, 0) rotate(var(--axis)) translate(var(--away)) rotate(calc(var(--axis) * -1)) perspective(1000px) rotate3d(1, 0, 0, 45deg);
  transform-origin: 50% calc(100% + 10px);
  transition: opacity 0.2s var(--enter), transform 0.2s var(--enter);
  z-index: 3;
}

.chaarts.pie tbody:hover tr {
  opacity: 0.5;
}

.chaarts.pie tbody:hover tr:hover {
  opacity: 1;
}

.chaarts.pie tbody:hover tr:hover td::after {
  opacity: 1;
  transform: translate3d(-50%, -50%, 0) rotate(var(--axis)) translate(var(--away)) rotate(calc(var(--axis) * -1)) perspective(1000px) rotate3d(1, 0, 0, 0deg);
  transition: opacity 0.2s var(--exit), transform 0.2s var(--exit);
}
