Fix shadow not working

components/PieChart.module.css

@@ -1,9 +1,10 @@
 .piePath {
-  fill: #354265;
+  fill: var(--tertiary-background);
 }
 
 .labelPath {
   fill: var(--primary-background);
+  fill-opacity: 0;
 }
 
 .pieText,
@@ -17,11 +18,11 @@
   display: none;
 }
 
-.group:hover>.piePath {
+.group:hover > .piePath {
   fill: var(--primary-accent);
   filter: drop-shadow(0px 0px 6px var(--primary-accent));
 }
 
-.group:hover>.pieText {
+.group:hover > .pieText {
   display: inline
 }

components/PieChart.tsx

@@ -31,7 +31,6 @@ export function PieChart({
       <Group top={width * 0.5} left={width * 0.5}>
         <Pie
           data={props.data}
-          fill="aqua"
           pieValue={(d: PieChartData) => d.value}
           cornerRadius={10}
           padAngle={0.075}
@@ -43,7 +42,6 @@ export function PieChart({
         </Pie>
         <Pie
           data={props.data}
-          fill="rgb(37, 45, 65)"
           pieValue={(d: PieChartData) => d.value}
           innerRadius={pieWidth}
           outerRadius={width * 0.5}

pages/playground.tsx

@@ -1,6 +1,5 @@
-import { mockPieData } from "data/mocks";
 import { BarGraphHorizontal, BarGraphVertical } from "components/BarGraph";
-import { mockCategoricalData } from "data/mocks";
+import { mockPieData, mockCategoricalData } from "data/mocks";
 import React from "react";
 
 import { PieChart } from "@/components/PieChart";
@@ -14,6 +13,9 @@ export default function Home() {
     <div className={styles.page}>
       <h1>Playground</h1>
       <p>Show off your components here!</p>
+      <h2>
+        <code>{"<PieChart />"}</code>
+      </h2>
       <div style={{ padding: "30px" }}>
         <PieChart data={mockPieData} width={800} labelWidth={215} />
       </div>