Specify harvey ball state classes as BEM modifier, not element

app/assets/stylesheets/dashboard.scss

@@ -74,27 +74,27 @@
   stroke: $black;
 }
 
-.harvey-ball__ideal {
+.harvey-ball--ideal {
   fill: $purple;
 }
 
-.harvey-ball__approval {
+.harvey-ball--approval {
   fill: $purple;
 }
 
-.harvey-ball__growth {
+.harvey-ball--growth {
   fill: $gold;
 }
 
-.harvey-ball__watch {
+.harvey-ball--watch {
   fill: $gold;
 }
 
-.harvey-ball__warning {
+.harvey-ball--warning {
   fill: $white;
 }
 
-.harvey-ball__no_zone {
+.harvey-ball--no_zone {
   stroke: $gray-2;
   fill: $gray-3;
 }

app/views/dashboard/_subcategory_card.html.erb

@@ -1,6 +1,6 @@
 <div class="subcategory-card__benchmark-item">
   <svg class="subcategory-card__circle" width="24" height="24" xmlns="http://www.w3.org/2000/svg">
-    <use class="harvey-ball harvey-ball__<%= presenter.color %>" xlink:href="#<%= presenter.harvey_ball_icon %>"></use>
+    <use class="harvey-ball harvey-ball--<%= presenter.color %>" xlink:href="#<%= presenter.harvey_ball_icon %>"></use>
   </svg>
 
   <div class="subcategory-card__name"><%= subcategory.name %></div>

app/views/dashboard/index.html.erb

@@ -51,19 +51,19 @@
     <div class="harvey-ball-legend">
       <div class="font-size-14">Warning</div>
       <svg class="ms-3 me-1" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
-        <use class="harvey-ball harvey-ball__warning" xlink:href="#full-circle"></use>
+        <use class="harvey-ball harvey-ball--warning" xlink:href="#full-circle"></use>
       </svg>
       <svg class="mx-1" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
-        <use class="harvey-ball harvey-ball__watch" xlink:href="#one-quarter-circle"></use>
+        <use class="harvey-ball harvey-ball--watch" xlink:href="#one-quarter-circle"></use>
       </svg>
       <svg class="mx-1" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
-        <use class="harvey-ball harvey-ball__growth" xlink:href="#half-circle"></use>
+        <use class="harvey-ball harvey-ball--growth" xlink:href="#half-circle"></use>
       </svg>
       <svg class="mx-1" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
-        <use class="harvey-ball harvey-ball__approval" xlink:href="#three-quarter-circle"></use>
+        <use class="harvey-ball harvey-ball--approval" xlink:href="#three-quarter-circle"></use>
       </svg>
       <svg class="ms-1 me-3" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
-        <use class="harvey-ball harvey-ball__ideal" xlink:href="#full-circle"></use>
+        <use class="harvey-ball harvey-ball--ideal" xlink:href="#full-circle"></use>
       </svg>
       <div class="font-size-14">Ideal</div>
     </div>