nest styles

packages/website/src/components/TankopediaToys/index.module.css

@@ -6,25 +6,24 @@
   touch-action: none;
   border-radius: inherit;
   background-color: var(--gray-2);
-}
 
-.armor {
+  .armor {
     position: absolute;
     top: 0;
     left: 0;
     width: 33%;
     height: 100%;
     background: linear-gradient(to right, transparent, var(--gray-a4));
-}
 
-.armor-texture {
+    .texture {
       width: 100%;
       height: 100%;
       opacity: 0.125;
       background-image: url("/media/toys/armor-hash.png");
-}
+    }
+  }
 
-.zones {
+  .zones {
     position: absolute;
     top: 0;
     left: 33%;
@@ -43,23 +42,22 @@
       var(--ruby-a1) calc(90deg + var(--ricochet-angle)),
       var(--ruby-a2) 180deg
     );
-}
+  }
 
-.shell-path,
+  .shell-path,
-.effective-path {
+  .effective-path {
     position: absolute;
     top: 50%;
     left: 33%;
     transform: translateX(-50%) rotate(var(--rotation-angle));
     transform-origin: top center;
-}
+  }
 
-.shell-path {
+  .shell-path {
     width: 0;
     height: 100%;
-}
 
-.shell-path-extension {
+    .extension {
       position: absolute;
       left: 50%;
       bottom: 100%;
@@ -67,9 +65,9 @@
       height: 100%;
       transform: translateX(-50%);
       background-color: var(--gray-a8);
-}
+    }
 
-.shell-path-line {
+    .line {
       position: absolute;
       top: 0;
       left: 50%;
@@ -77,9 +75,9 @@
       height: 100%;
       transform: translateX(-50%);
       background: linear-gradient(var(--gray-a11), var(--gray-a4));
-}
+    }
 
-.shell {
+    .shell {
       position: absolute;
       top: 6rem;
       left: 0;
@@ -88,14 +86,14 @@
       object-fit: contain;
       transform: translate(-50%, -50%) rotate(-45deg);
       filter: drop-shadow(0 0 var(--space-4) black);
-}
+    }
+  }
 
-.effective-path {
+  .effective-path {
     width: 0;
     height: 100%;
-}
 
-.effective-path-line {
+    .line {
       position: absolute;
       left: 50%;
       top: -100%;
@@ -103,42 +101,43 @@
       height: 100%;
       transform: translateX(-50%);
       background: linear-gradient(var(--gray-a4), var(--gray-a11));
-}
+    }
+  }
 
-.corner-stat {
+  .corner-stat {
     position: absolute;
     display: flex;
     gap: var(--space-2);
     color: var(--gray-11);
     font-size: var(--font-size-minor);
-}
 
-.corner-stat-value {
+    .value {
       color: var(--gray-12);
       font-size: inherit;
-}
+    }
 
-.corner-stat[data-position="top-left"] {
+    &[data-position="top-left"] {
       top: var(--space-3);
       left: var(--space-3);
-}
+    }
 
-.corner-stat[data-position="top-right"] {
+    &[data-position="top-right"] {
       top: var(--space-3);
       right: var(--space-3);
-}
+    }
 
-.corner-stat[data-position="bottom-left"] {
+    &[data-position="bottom-left"] {
       bottom: var(--space-3);
       left: var(--space-3);
-}
+    }
 
-.corner-stat[data-position="bottom-right"] {
+    &[data-position="bottom-right"] {
       right: var(--space-3);
       bottom: var(--space-3);
-}
+    }
+  }
 
-.explosive-overlay {
+  .explosive-overlay {
     position: absolute;
     inset: 0;
     display: flex;
@@ -148,18 +147,18 @@
     color: var(--gray-11);
     text-align: center;
     background: radial-gradient(var(--black-a7), var(--black-a11));
+  }
 }
 
-.traverse-visualizer {
+.traverse {
   position: relative;
   width: 100%;
   height: 100%;
   overflow: hidden;
   border-radius: inherit;
   user-select: none;
-}
 
-.traverse-hull {
+  .hull {
     position: absolute;
     top: 50%;
     left: 50%;
@@ -171,16 +170,15 @@
       width: 22rem;
       height: 22rem;
     }
-}
 
-.traverse-hull-image {
+    .image {
       width: 100%;
       height: 100%;
       object-fit: contain;
       filter: drop-shadow(0 0 var(--space-4) var(--black-a7));
-}
+    }
 
-.traverse-turret {
+    .turret {
       position: absolute;
       top: 50%;
       left: 50%;
@@ -189,9 +187,10 @@
       object-fit: contain;
       transform: translate(-50%, -50%);
       filter: drop-shadow(0 0 var(--space-4) var(--black-a7));
-}
+    }
+  }
 
-.traverse-toggles {
+  .toggles {
     position: absolute;
     top: var(--space-4);
     left: 50%;
@@ -201,16 +200,16 @@
     width: 100%;
     padding: 0 var(--space-5);
     transform: translateX(-50%);
-}
+  }
 
-.traverse-terrain {
+  .terrain {
     position: absolute;
     bottom: 0;
     left: 50%;
     transform: translateX(-50%);
-}
+  }
 
-.traverse-effective {
+  .effective {
     position: absolute;
     bottom: calc(var(--space-2) + 3rem);
     left: 50%;
@@ -221,4 +220,5 @@
     font-size: var(--font-size-minor);
     white-space: nowrap;
     transform: translateX(-50%);
+  }
 }

packages/website/src/components/TankopediaToys/index.tsx

@@ -57,7 +57,7 @@ export function RicochetToy({ characteristics }: ToyProps) {
       onPointerMove={updateAngle}
     >
       <div className={styles.armor}>
-        <div className={styles["armor-texture"]} />
+        <div className={styles.texture} />
       </div>
 
       <div
@@ -78,8 +78,8 @@ export function RicochetToy({ characteristics }: ToyProps) {
           } as CSSProperties
         }
       >
-        <div className={styles["shell-path-extension"]} />
+        <div className={styles.extension} />
-        <div className={styles["shell-path-line"]} />
+        <div className={styles.line} />
         <img
           className={styles.shell}
           src={alias("api", `/icons/shells/${shell.icon}.webp`)}
@@ -94,7 +94,7 @@ export function RicochetToy({ characteristics }: ToyProps) {
           } as CSSProperties
         }
       >
-        <div className={styles["effective-path-line"]} />
+        <div className={styles.line} />
       </div>
 
       <CornerStat
@@ -166,7 +166,7 @@ function CornerStat({ label, value, position }: CornerStatProps) {
   return (
     <div className={styles["corner-stat"]} data-position={position}>
       <span>{label}</span>
-      <Code className={styles["corner-stat-value"]} size="minor">
+      <Code className={styles.value} size="minor">
         {value}
       </Code>
     </div>
@@ -246,15 +246,15 @@ export function TraverseToy({ characteristics }: TraverseToyProps) {
   }));
 
   return (
-    <div className={styles["traverse-visualizer"]}>
+    <div className={styles.traverse}>
       <div
         ref={hull}
-        className={styles["traverse-hull"]}
+        className={styles.hull}
         data-turretless={isTurretless}
       >
         <img
           draggable="false"
-          className={styles["traverse-hull-image"]}
+          className={styles.image}
           src={`/media/toys/hull${isTurretless ? "-only" : ""}.png`}
         />
 
@@ -262,13 +262,13 @@ export function TraverseToy({ characteristics }: TraverseToyProps) {
           <img
             draggable="false"
             ref={turret}
-            className={styles["traverse-turret"]}
+            className={styles.turret}
             src="/media/toys/turret.png"
           />
         )}
       </div>
 
-      <div className={styles["traverse-toggles"]}>
+      <div className={styles.toggles}>
         {!isTurretless && (
           <>
             <Checkbox checked={rotateHull} onCheckedChange={setRotateHull}>
@@ -281,7 +281,7 @@ export function TraverseToy({ characteristics }: TraverseToyProps) {
         )}
       </div>
 
-      <div className={styles["traverse-terrain"]}>
+      <div className={styles.terrain}>
         <SegmentedControl
           options={terrainOptions}
           value={terrain}
@@ -293,7 +293,7 @@ export function TraverseToy({ characteristics }: TraverseToyProps) {
         />
       </div>
 
-      <div className={styles["traverse-effective"]}>
+      <div className={styles.effective}>
         <span>{strings.tanks.toys.traverse.effective}</span>
         <Code size="minor">
           {literals(strings.units.deg_s, {