From d510b46ffa46aec57a53d1a3c9bcfc70cd2afbbc Mon Sep 17 00:00:00 2001
From: Matthew Landauer <mlandauer@gmail.com>
Date: Mon, 19 Feb 2024 22:37:04 +0000
Subject: [PATCH] Was accidently using scss in css causing screenshots of
 graphs to fail

I think nested css works in the very latest browsers which is why it worked for me but when screenshotting it would use an older browser where it's not supported. Well that was very confusing.
---
 .../stylesheets/application.tailwind.css      | 75 +++++++++----------
 1 file changed, 37 insertions(+), 38 deletions(-)

diff --git a/app/assets/stylesheets/application.tailwind.css b/app/assets/stylesheets/application.tailwind.css
index 5ab6e18b8..19c3cc625 100644
--- a/app/assets/stylesheets/application.tailwind.css
+++ b/app/assets/stylesheets/application.tailwind.css
@@ -23,26 +23,29 @@
 }
 
 /* TODO: Get rid of this ugly mess for styling the charts on the authority detail page as soon as we can */
-.chart {
-  text {
-    @apply fill-navy;
-    font-size: .875em;
-  }
+.chart text {
+  @apply fill-navy;
+  font-size: .875em;
+}
 
-  .chart-area {
-    @apply fill-[#d7e4f3];
-  }
+.chart .chart-area {
+  @apply fill-[#d7e4f3];
+}
 
-  .y-axis,
-  .x-axis {
-    line {
-      @apply stroke-1 stroke-light-grey2;
-    }
+.chart .x-axis line {
+  @apply stroke-1 stroke-light-grey2;
+}
 
-    .domain {
-      @apply hidden;
-    }
-  }
+.chart .y-axis line {
+  @apply stroke-1 stroke-light-grey2;
+}
+
+.chart .x-axis .domain {
+  @apply hidden;
+}
+
+.chart .y-axis .domain {
+  @apply hidden;
 }
 
 .x-axis-baseline {
@@ -51,27 +54,25 @@
 
 .chart-line {
   @apply fill-none stroke-[#346eb0] stroke-2;
+}
 
-  &.chart-clipping-below {
-    display: none;
-  }
+.chart-line.chart-clipping-below {
+  display: none;
 }
 
-.chart-with-callout {
-  svg {
-    width: 100%;
-    height: auto;
+.chart-with-callout svg {
+  width: 100%;
+  height: auto;
 
-    @apply sm:float-left sm:clear-left sm:w-4/5;
-  }
+  @apply sm:float-left sm:clear-left sm:w-4/5;
+}
 
-  .chart-callout {
-    @apply sm:float-right sm:w-1/5;
-  }
+.chart-with-callout .chart-callout {
+  @apply sm:float-right sm:w-1/5;
+}
 
-  text {
-    @apply text-xs;
-  }
+.chart-with-callout text {
+  @apply text-xs;
 }
 
 .chart-callout-heading {
@@ -88,12 +89,10 @@
   pointer-events: all;
 }
 
-.focus {
-  circle {
-    stroke: #346eb0;
-    stroke-width: 2px;
-    fill: transparent;
-  }
+.focus circle {
+  stroke: #346eb0;
+  stroke-width: 2px;
+  fill: transparent;
 }
 
 /*