nest styles

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

@@ -6,7 +6,6 @@
   touch-action: none;
   border-radius: inherit;
   background-color: var(--gray-2);
-}
 
   .armor {
     position: absolute;
@@ -15,14 +14,14 @@
     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 {
     position: absolute;
@@ -57,9 +56,8 @@
   .shell-path {
     width: 0;
     height: 100%;
-}
 
-.shell-path-extension {
+    .extension {
       position: absolute;
       left: 50%;
       bottom: 100%;
@@ -69,7 +67,7 @@
       background-color: var(--gray-a8);
     }
 
-.shell-path-line {
+    .line {
       position: absolute;
       top: 0;
       left: 50%;
@@ -89,13 +87,13 @@
       transform: translate(-50%, -50%) rotate(-45deg);
       filter: drop-shadow(0 0 var(--space-4) black);
     }
+  }
 
   .effective-path {
     width: 0;
     height: 100%;
-}
 
-.effective-path-line {
+    .line {
       position: absolute;
       left: 50%;
       top: -100%;
@@ -104,6 +102,7 @@
       transform: translateX(-50%);
       background: linear-gradient(var(--gray-a4), var(--gray-a11));
     }
+  }
 
   .corner-stat {
     position: absolute;
@@ -111,32 +110,32 @@
     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 {
     position: absolute;
@@ -149,17 +148,17 @@
     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%;
@@ -190,8 +188,9 @@
       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%;
@@ -203,14 +202,14 @@
     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%;
@@ -222,3 +221,4 @@
     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["shell-path-line"]} />
+        <div className={styles.extension} />
+        <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, {