From 244b22b8332c841ef640c21b3bb82e6cf4fb8938 Mon Sep 17 00:00:00 2001
From: owenatgov <owen.jones@digital.cabinet-office.gov.uk>
Date: Wed, 8 Dec 2021 14:12:47 +0000
Subject: [PATCH] Alter use of pseudo-underline mixin to allow for different
 button sizes

---
 CHANGELOG.md                                           |  4 ++++
 .../components/_layout-super-navigation-header.scss    | 10 +++++-----
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 09aab0aef3..872baab325 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,10 @@
   useful summary for people upgrading their application, not a replication
   of the commit log.
 
+## Unreleased
+
+* Alter use of pseudo-underline mixin to allow for different button sizes ([#2501](https://github.com/alphagov/govuk_publishing_components/pull/2501))
+
 ## 27.16.0
 
 * Remove jQuery from custom dimensions ([PR #2473](https://github.com/alphagov/govuk_publishing_components/pull/2473))
diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_layout-super-navigation-header.scss b/app/assets/stylesheets/govuk_publishing_components/components/_layout-super-navigation-header.scss
index e02102a279..6be5a2550c 100644
--- a/app/assets/stylesheets/govuk_publishing_components/components/_layout-super-navigation-header.scss
+++ b/app/assets/stylesheets/govuk_publishing_components/components/_layout-super-navigation-header.scss
@@ -131,14 +131,14 @@ $pseudo-underline-height: 3px;
   top: 0;
 }
 
-@mixin pseudo-underline {
+@mixin pseudo-underline($left: govuk-spacing(4), $right: govuk-spacing(4)) {
   background: none;
   bottom: 0;
   content: "";
   height: $pseudo-underline-height;
-  left: govuk-spacing(5);
+  left: $left;
   position: absolute;
-  right: govuk-spacing(6);
+  right: $right;
   top: auto;
 }
 
@@ -385,7 +385,7 @@ $pseudo-underline-height: 3px;
       // stylelint-enable max-nesting-depth
 
       &:after {
-        @include pseudo-underline;
+        @include pseudo-underline($left: govuk-spacing(5), $right: govuk-spacing(6));
       }
     }
   }
@@ -431,7 +431,7 @@ $pseudo-underline-height: 3px;
 
   @include govuk-media-query($from: "desktop") {
     &:after {
-      @include pseudo-underline;
+      @include pseudo-underline($left: govuk-spacing(5), $right: govuk-spacing(6));
     }
 
     @include focus-not-focus-visible {