/*
 * Pie Chart
 */
.charts-css {

  &.pie {

    // Layout
    tbody {
      @include circle;

      tr {
        th {
          @include visually-hidden;
        }

        td {
          display: flex;
          justify-content: center;
          border-radius: 50%;

          @include position-fullwidth;

          background:
            conic-gradient(
              transparent 0 calc(1turn * var(--#{ $variable-prefix }start)),
              var(--#{ $variable-prefix }c, transparent) calc(1turn * var(--#{ $variable-prefix }start, 0)) calc(1turn * var(--#{ $variable-prefix }end)),
              transparent calc(1turn * var(--#{ $variable-prefix }end)) 1turn
            );

          &::before {
            content: "";
            @include position-fullwidth;
          }

          &::after {
            content: "";
            width: 100%;
          }

          .data {
            display: flex;
            justify-content: center;
            border-radius: 50%;
            @include position-fullwidth;
            transform: rotate(calc(.5turn * var(--#{ $variable-prefix }start, 0) + .5turn * var(--#{ $variable-prefix }end, 0)));
          }
        }
      }
    }
  }
}
