.pie-chart {
  @apply
    flex
    lg:flex-row
    lg:justify-center
    flex-col;

  .chart {
    @apply
      lg:mr-26;

    canvas {
      @apply
        w-full
        h-full
        mx-auto
        max-w-[230px]
        md:max-w-[440px];

      width: 100% !important;
      height: 100% !important;
    }
  }

  .legend {
    @apply
      mt-16
      xl:mt-0
      flex
      flex-wrap
      flex-none
      lg:justify-center
      flex-col;

    .wrapper {
      @apply
        flex
        mb-7
        items-center;

      .circle {
        @apply
          h-5
          mr-4.5
          flex-none
          w-5
          rounded-full;
      }

      .title {
        @apply
          text-xs
          flex-col
          flex
          font-mono;

        span {
          @apply
            inline-block;
        }
      }
    }
  }
}
