From 97ba6d350e59462b94749729b3c63c28017f139e Mon Sep 17 00:00:00 2001
From: Matt Dragon <mattdragon@navapbc.com>
Date: Fri, 20 Dec 2024 17:47:15 -0500
Subject: [PATCH] Adjust buttons within pagination

---
 .../styles/_uswds-theme-custom-styles.scss    | 35 +++++++++++++++++++
 1 file changed, 35 insertions(+)

diff --git a/frontend/src/styles/_uswds-theme-custom-styles.scss b/frontend/src/styles/_uswds-theme-custom-styles.scss
index 4d00f3131..b01ad73a4 100644
--- a/frontend/src/styles/_uswds-theme-custom-styles.scss
+++ b/frontend/src/styles/_uswds-theme-custom-styles.scss
@@ -343,3 +343,38 @@ i.e.
   padding-top: calc(1rem + 3vw);
   padding-bottom: calc(1rem + 3vw);
 }
+
+// truss adds usa-button classes and button elements in the pagination component
+// overriding button styles for pagination
+.usa-pagination__button.usa-button,
+button.usa-pagination__button.usa-button {
+  align-items: center;
+  background-color: color("mint-5");
+  border-width: 0px;
+  color: color("gray-warm-90");
+  display: inline-flex;
+  justify-content: center;
+  text-decoration: none;
+  padding: units(1);
+  width: 100%;
+
+  &:hover,
+  &:focus,
+  &:active {
+    color: white;
+    background-color: color("mint-70");
+  }
+}
+
+.usa-pagination button.usa-button.usa-current,
+.usa-pagination .usa-button.usa-current {
+  color: white;
+  background-color: color("mint-40");
+
+  &:hover,
+  &:focus,
+  &:active {
+    background-color: color("mint-80");
+    color: white;
+  }
+}