From bce3449fb963649c84deb62d0a45a8ccfe302c3c Mon Sep 17 00:00:00 2001
From: keyurx11 <keyurx11@gmail.com>
Date: Thu, 17 Oct 2024 16:36:03 +0100
Subject: [PATCH] FSR-1293: Fix broken CSS

---
 .../src/sass/components/_chart-controls.scss  | 127 ++++++++++--------
 1 file changed, 71 insertions(+), 56 deletions(-)

diff --git a/server/src/sass/components/_chart-controls.scss b/server/src/sass/components/_chart-controls.scss
index e7f048d16..11443a098 100644
--- a/server/src/sass/components/_chart-controls.scss
+++ b/server/src/sass/components/_chart-controls.scss
@@ -2,72 +2,87 @@
   position: relative;
   overflow: auto;
   z-index: 1;
-  margin: -3px -3px 0px -3px;
-  padding: 3px 3px 0px 3px;
-}
-.defra-chart-controls__period {
-  margin: auto;
-  display: inline-block;
-  padding-bottom: 4px;
-}
-.defra-chart-controls__pagination {
-  display: block;
-  padding-bottom: 4px;
-  float: right;
-}
-.defra-chart-controls-button {
-  touch-action: manipulation;
-  @extend .defra-button-text-s;
-  padding: 7.5px;
-  display: inline-block;
-  position: relative;
-  text-align: center;
-  text-decoration: none;
-  &--selected:not(:focus) {
-    border-bottom: 4px solid govuk-colour('blue');
-    margin-bottom: -4px;
+  margin: -3px -3px 0 -3px;
+  padding: 3px 3px 0 3px;
+
+  &__period {
+    margin: auto;
+    display: inline-block;
+    padding-bottom: 4px;
   }
-  &--selected:hover {
-    border-bottom-color: $govuk-link-hover-colour;
+
+  &__pagination {
+    display: block;
+    padding-bottom: 4px;
+    float: right;
   }
-  &__icon {
+
+  &__button {
+    touch-action: manipulation;
+    padding: 7.5px;
     display: inline-block;
-  }
-  svg {
     position: relative;
-    top: 1px;
-    margin-left: 5px;
-    color: govuk-colour('black');
-    forced-color-adjust: auto;
-  }
-  &--back {
-    padding-left: 0px;
-    padding-right: 0px;
-    margin-right: 15px;
-    svg {
-      margin-right: 5px;
-      margin-left: 0px;
+    text-align: center;
+    text-decoration: none;
+    @extend .defra-button-text-s;
+
+    &--selected:not(:focus) {
+      border-bottom: 4px solid govuk-colour('blue');
+      margin-bottom: -4px;
     }
-  }
-  &--forward {
-    padding-left: 0px;
-    padding-right: 0px;
-    margin-right: 0px;
-  }
-  &[aria-disabled="true"] {
-    cursor: not-allowed;
-  }
-  &[aria-disabled="true"]:not(:focus) {
-    color: govuk-colour('mid-grey');
+
+    &--selected:hover {
+      border-bottom-color: $govuk-link-hover-colour;
+    }
+
+    &__icon {
+      display: inline-block;
+    }
+
     svg {
-      color: govuk-colour('mid-grey');
+      position: relative;
+      top: 1px;
+      margin-left: 5px;
+      color: govuk-colour('black');
+      forced-color-adjust: auto;
     }
-  }
-  @media screen and (-ms-high-contrast: active), screen and (forced-colors: active) {
+
+    &--back {
+      padding-left: 0;
+      padding-right: 0;
+      margin-right: 15px;
+
+      svg {
+        margin-right: 5px;
+        margin-left: 0;
+      }
+    }
+
+    &--forward {
+      padding-left: 0;
+      padding-right: 0;
+      margin-right: 0;
+    }
+
     &[aria-disabled="true"] {
-      color: GrayText !important;
+      cursor: not-allowed;
+    }
+
+    &[aria-disabled="true"]:not(:focus) {
+      color: govuk-colour('mid-grey');
+
       svg {
+        color: govuk-colour('mid-grey');
+      }
+    }
+
+    @media screen and (-ms-high-contrast: active), screen and (forced-colors: active) {
+      &[aria-disabled="true"] {
         color: GrayText !important;
+
+        svg {
+          color: GrayText !important;
+        }
       }
     }
   }