From 23c7e3dc09c0e097f083d19f4bd9a264556b83c0 Mon Sep 17 00:00:00 2001
From: Myrta Sakellariou <myrta.sakellariou@gmail.com>
Date: Fri, 13 Dec 2024 16:14:04 +0100
Subject: [PATCH 1/7] chore:(components): header hcm

---
 .../post-closebutton/post-closebutton.scss          |  7 +++++++
 .../post-language-option/post-language-option.scss  | 11 +++++++++++
 .../post-language-switch/post-language-switch.scss  |  6 ++++++
 .../post-mainnavigation/post-mainnavigation.scss    | 13 +++++++++++--
 .../post-togglebutton/post-togglebutton.scss        | 13 ++++++++-----
 5 files changed, 43 insertions(+), 7 deletions(-)
 create mode 100644 packages/components/src/components/post-closebutton/post-closebutton.scss

diff --git a/packages/components/src/components/post-closebutton/post-closebutton.scss b/packages/components/src/components/post-closebutton/post-closebutton.scss
new file mode 100644
index 0000000000..dcfa44a3c5
--- /dev/null
+++ b/packages/components/src/components/post-closebutton/post-closebutton.scss
@@ -0,0 +1,7 @@
+@use '@swisspost/design-system-styles/mixins/utilities';
+
+post-closebutton button post-icon {
+  @include utilities.high-contrast-mode() {
+    color: LinkText !important;
+  }
+}
diff --git a/packages/components/src/components/post-language-option/post-language-option.scss b/packages/components/src/components/post-language-option/post-language-option.scss
index 314839d3d8..6e8f3a2167 100644
--- a/packages/components/src/components/post-language-option/post-language-option.scss
+++ b/packages/components/src/components/post-language-option/post-language-option.scss
@@ -1,8 +1,12 @@
 @use '@swisspost/design-system-styles/core' as post;
+@use '@swisspost/design-system-styles/mixins/utilities';
 
 :host {
   display: inline-block;
   width: fit-content;
+  @include utilities.high-contrast-mode() {
+    color: LinkText;
+  }
 }
 
 button {
@@ -34,6 +38,9 @@ a {
   &[aria-current='page'] {
     background-color: #050400;
     color: #fff;
+    @include utilities.high-contrast-mode() {
+      background-color: SelectedItem;
+    }
   }
 }
 
@@ -45,6 +52,10 @@ a {
 
   &[aria-current='true'],
   &[aria-current='page'] {
+    @include utilities.high-contrast-mode() {
+      background-color: SelectedItem;
+    }
+
     &::after {
       content: '';
       left: -2px;
diff --git a/packages/components/src/components/post-language-switch/post-language-switch.scss b/packages/components/src/components/post-language-switch/post-language-switch.scss
index f0cc236912..1907a16285 100644
--- a/packages/components/src/components/post-language-switch/post-language-switch.scss
+++ b/packages/components/src/components/post-language-switch/post-language-switch.scss
@@ -23,10 +23,16 @@ tokens.$default-map: components.$post-button;
   @include utilities-mx.focus-style;
   @include utilities-mx.not-disabled-hover() {
     @include button-mx.button-variant-def('hover', 'tertiary');
+    @include utilities-mx.high-contrast-mode() {
+      color: LinkText;
+    }
   }
 
   post-icon {
     height: var(--post-core-dimension-16);
     width: var(--post-core-dimension-16);
   }
+  @include utilities-mx.high-contrast-mode() {
+    color: LinkText;
+  }
 }
diff --git a/packages/components/src/components/post-mainnavigation/post-mainnavigation.scss b/packages/components/src/components/post-mainnavigation/post-mainnavigation.scss
index 9e767ffa25..45055f07e7 100644
--- a/packages/components/src/components/post-mainnavigation/post-mainnavigation.scss
+++ b/packages/components/src/components/post-mainnavigation/post-mainnavigation.scss
@@ -5,11 +5,12 @@
 @use '@swisspost/design-system-styles/tokens/elements';
 @use '@swisspost/design-system-styles/variables/animation';
 @use '@swisspost/design-system-styles/components/header/mixins' as header-mx;
+@use '@swisspost/design-system-styles/mixins/utilities';
 
 $nav-height: var(--post-core-dimension-56);
 
 post-mainnavigation {
-  // reset links and buttons
+  // reset links and buttons;
   post-list-item {
     > a {
       text-decoration: none;
@@ -30,12 +31,18 @@ post-mainnavigation {
 
       &:hover {
         color: tokens.get('post-link-hover-fg', elements.$post-link);
+        @include utilities.high-contrast-mode() {
+          color: LinkText;
+        }
       }
 
       &:focus-visible {
         border-radius: var(--post-core-dimension-4);
         z-index: 1;
       }
+      @include utilities.high-contrast-mode() {
+        color: LinkText;
+      }
     }
   }
 
@@ -68,7 +75,9 @@ post-mainnavigation {
         font-size: var(--post-core-font-size-16);
         border-block: 0 solid transparent;
         border-block-end-color: currentColor;
-
+        @include utilities.high-contrast-mode() {
+          border-block-end-color: LinkText;
+        }
         &:hover {
           border-block-width: var(--post-core-dimension-2);
         }
diff --git a/packages/components/src/components/post-togglebutton/post-togglebutton.scss b/packages/components/src/components/post-togglebutton/post-togglebutton.scss
index 88ee2219af..8c4e80a59e 100644
--- a/packages/components/src/components/post-togglebutton/post-togglebutton.scss
+++ b/packages/components/src/components/post-togglebutton/post-togglebutton.scss
@@ -3,10 +3,13 @@
 @use '@swisspost/design-system-styles/tokens/helpers';
 
 :host {
+  @include utilities.high-contrast-mode() {
+    color: LinkText !important;
+  }
   cursor: pointer;
   outline-offset: tokens.get('focus-outline-offset', helpers.$post-focus) !important;
   outline: tokens.get('focus-outline-color', helpers.$post-focus) none
-  tokens.get('focus-outline-width', helpers.$post-focus) !important;
+    tokens.get('focus-outline-width', helpers.$post-focus) !important;
 }
 
 :host(:focus-visible) {
@@ -17,14 +20,14 @@
   }
 }
 
-:host([aria-pressed="true"]) {
-  ::slotted([data-showwhen="untoggled"]) {
+:host([aria-pressed='true']) {
+  ::slotted([data-showwhen='untoggled']) {
     display: none;
   }
 }
 
-:host([aria-pressed="false"]) {
-  ::slotted([data-showwhen="toggled"]) {
+:host([aria-pressed='false']) {
+  ::slotted([data-showwhen='toggled']) {
     display: none;
   }
 }

From 19b25fa16e44c501b6cc4276445abe7b20cbda1e Mon Sep 17 00:00:00 2001
From: Myrta Sakellariou <myrta.sakellariou@gmail.com>
Date: Fri, 13 Dec 2024 16:17:50 +0100
Subject: [PATCH 2/7] add closebutton hcm

---
 .../src/components/post-closebutton/post-closebutton.tsx         | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/components/src/components/post-closebutton/post-closebutton.tsx b/packages/components/src/components/post-closebutton/post-closebutton.tsx
index 0d447ab844..4d842bd8a2 100644
--- a/packages/components/src/components/post-closebutton/post-closebutton.tsx
+++ b/packages/components/src/components/post-closebutton/post-closebutton.tsx
@@ -7,6 +7,7 @@ import { version } from '@root/package.json';
 @Component({
   tag: 'post-closebutton',
   shadow: false,
+  styleUrl: 'post-closebutton.scss',
 })
 export class PostClosebutton {
   @Element() host: HTMLPostClosebuttonElement;

From d89cac229d20dd298b6ed8a3e244b7b583392178 Mon Sep 17 00:00:00 2001
From: Myrta Sakellariou <myrta.sakellariou@gmail.com>
Date: Mon, 16 Dec 2024 09:36:58 +0100
Subject: [PATCH 3/7] add border bottom

---
 .../components/src/components/post-header/post-header.scss   | 4 ++++
 packages/styles/src/components/header/index.scss             | 5 ++++-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/components/post-header/post-header.scss b/packages/components/src/components/post-header/post-header.scss
index cbded0ac45..e807b353a6 100644
--- a/packages/components/src/components/post-header/post-header.scss
+++ b/packages/components/src/components/post-header/post-header.scss
@@ -1,5 +1,6 @@
 @use '@swisspost/design-system-styles/mixins/media';
 @use '@swisspost/design-system-styles/variables/animation';
+@use '@swisspost/design-system-styles/mixins/utilities';
 
 *,
 ::before,
@@ -12,6 +13,9 @@
   --global-header-minimal-height: 24px;
   --main-header-height: 56px;
   --header-height: calc(var(--global-header-height) + var(--main-header-height));
+  @include utilities.high-contrast-mode() {
+    display: block;
+  }
 
   @include media.min(lg) {
     display: block;
diff --git a/packages/styles/src/components/header/index.scss b/packages/styles/src/components/header/index.scss
index 674e266c8e..aedddcee07 100644
--- a/packages/styles/src/components/header/index.scss
+++ b/packages/styles/src/components/header/index.scss
@@ -4,7 +4,10 @@
 @use 'mixins' as *;
 
 post-header {
-  ul[slot="meta-navigation"] {
+  @include utilities.high-contrast-mode() {
+    border-bottom: 2px solid LinkText !important;
+  }
+  ul[slot='meta-navigation'] {
     gap: var(--post-core-dimension-4);
 
     @include media.max(lg) {

From d3f7f9908e086eab3d95fe136b6672667bcae786 Mon Sep 17 00:00:00 2001
From: Myrta Sakellariou <myrta.sakellariou@gmail.com>
Date: Mon, 16 Dec 2024 15:58:24 +0100
Subject: [PATCH 4/7] add changeset

---
 .changeset/serious-rockets-buy.md | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 .changeset/serious-rockets-buy.md

diff --git a/.changeset/serious-rockets-buy.md b/.changeset/serious-rockets-buy.md
new file mode 100644
index 0000000000..8c11994efe
--- /dev/null
+++ b/.changeset/serious-rockets-buy.md
@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-components': patch
+'@swisspost/design-system-styles': patch
+---
+
+Added high contrast mode styles for header.

From 56f5ea3b7ab5b868221c3af89c16ce50c54dd156 Mon Sep 17 00:00:00 2001
From: Myrta Sakellariou <myrta.sakellariou@gmail.com>
Date: Thu, 19 Dec 2024 15:43:50 +0100
Subject: [PATCH 5/7] update buttons and links - change border

---
 .../post-closebutton/post-closebutton.scss    |  9 ++++-
 .../components/post-header/post-header.scss   | 11 ++++--
 .../post-language-option.scss                 | 14 ++++---
 .../post-language-switch.scss                 | 11 ++++--
 .../post-mainnavigation.scss                  | 25 ++++++------
 .../post-megadropdown/post-megadropdown.scss  | 10 +++++
 .../post-togglebutton/post-togglebutton.scss  |  3 --
 packages/styles/src/components/button.scss    |  8 +++-
 .../styles/src/components/header/index.scss   | 39 +++++++++++++++++--
 9 files changed, 97 insertions(+), 33 deletions(-)

diff --git a/packages/components/src/components/post-closebutton/post-closebutton.scss b/packages/components/src/components/post-closebutton/post-closebutton.scss
index dcfa44a3c5..3cea8c96d9 100644
--- a/packages/components/src/components/post-closebutton/post-closebutton.scss
+++ b/packages/components/src/components/post-closebutton/post-closebutton.scss
@@ -1,7 +1,12 @@
 @use '@swisspost/design-system-styles/mixins/utilities';
 
-post-closebutton button post-icon {
+post-closebutton button {
   @include utilities.high-contrast-mode() {
-    color: LinkText !important;
+    background-color: ButtonFace !important;
+    color: ButtonText !important;
+    border: 2px solid ButtonBorder !important;
+    &:hover {
+      border-color: Highlight !important;
+    }
   }
 }
diff --git a/packages/components/src/components/post-header/post-header.scss b/packages/components/src/components/post-header/post-header.scss
index e807b353a6..27a43cc857 100644
--- a/packages/components/src/components/post-header/post-header.scss
+++ b/packages/components/src/components/post-header/post-header.scss
@@ -13,9 +13,6 @@
   --global-header-minimal-height: 24px;
   --main-header-height: 56px;
   --header-height: calc(var(--global-header-height) + var(--main-header-height));
-  @include utilities.high-contrast-mode() {
-    display: block;
-  }
 
   @include media.min(lg) {
     display: block;
@@ -32,6 +29,11 @@
     --global-header-height: 64px;
     --main-header-height: 48px;
   }
+  .navigation {
+    @include utilities.high-contrast-mode() {
+      border-block-end: 3px solid ButtonBorder;
+    }
+  }
 }
 
 .d-flex {
@@ -115,6 +117,9 @@ slot[name='post-logo'] {
     inset-block-start: var(--global-header-height);
     padding-inline: var(--post-core-dimension-8) var(--post-core-dimension-16);
   }
+  @include media.max(lg) {
+    border-block-end: 1px solid ButtonBorder;
+  }
 }
 
 :host(:not(:has([slot='title']))) .title-header {
diff --git a/packages/components/src/components/post-language-option/post-language-option.scss b/packages/components/src/components/post-language-option/post-language-option.scss
index 6e8f3a2167..11f0561586 100644
--- a/packages/components/src/components/post-language-option/post-language-option.scss
+++ b/packages/components/src/components/post-language-option/post-language-option.scss
@@ -4,13 +4,17 @@
 :host {
   display: inline-block;
   width: fit-content;
-  @include utilities.high-contrast-mode() {
-    color: LinkText;
-  }
 }
 
 button {
   @include post.reset-button;
+  @include utilities.high-contrast-mode() {
+    background-color: ButtonFace !important;
+    color: ButtonText !important;
+    &:hover {
+      background-color: Highlight !important;
+    }
+  }
 }
 
 a {
@@ -39,7 +43,7 @@ a {
     background-color: #050400;
     color: #fff;
     @include utilities.high-contrast-mode() {
-      background-color: SelectedItem;
+      background-color: SelectedItem !important;
     }
   }
 }
@@ -53,7 +57,7 @@ a {
   &[aria-current='true'],
   &[aria-current='page'] {
     @include utilities.high-contrast-mode() {
-      background-color: SelectedItem;
+      background-color: SelectedItem !important;
     }
 
     &::after {
diff --git a/packages/components/src/components/post-language-switch/post-language-switch.scss b/packages/components/src/components/post-language-switch/post-language-switch.scss
index 1907a16285..9794bd17c4 100644
--- a/packages/components/src/components/post-language-switch/post-language-switch.scss
+++ b/packages/components/src/components/post-language-switch/post-language-switch.scss
@@ -23,16 +23,19 @@ tokens.$default-map: components.$post-button;
   @include utilities-mx.focus-style;
   @include utilities-mx.not-disabled-hover() {
     @include button-mx.button-variant-def('hover', 'tertiary');
-    @include utilities-mx.high-contrast-mode() {
-      color: LinkText;
-    }
   }
 
   post-icon {
     height: var(--post-core-dimension-16);
     width: var(--post-core-dimension-16);
   }
+
   @include utilities-mx.high-contrast-mode() {
-    color: LinkText;
+    background-color: ButtonFace !important;
+    color: ButtonText !important;
+    border: 2px solid ButtonBorder;
+    &:hover {
+      border-color: Highlight !important;
+    }
   }
 }
diff --git a/packages/components/src/components/post-mainnavigation/post-mainnavigation.scss b/packages/components/src/components/post-mainnavigation/post-mainnavigation.scss
index 45055f07e7..ff4d6939e6 100644
--- a/packages/components/src/components/post-mainnavigation/post-mainnavigation.scss
+++ b/packages/components/src/components/post-mainnavigation/post-mainnavigation.scss
@@ -12,14 +12,22 @@ $nav-height: var(--post-core-dimension-56);
 post-mainnavigation {
   // reset links and buttons;
   post-list-item {
-    > a {
+    a {
       text-decoration: none;
       border-radius: 0;
     }
 
-    post-megadropdown-trigger button {
-      @include button.reset-button;
-      text-align: start;
+    post-megadropdown-trigger {
+      @include utilities.high-contrast-mode() {
+        color: ButtonText !important;
+        background-color: ButtonFace !important;
+        border: 2px solid ButtonBorder;
+      }
+
+      button {
+        @include button.reset-button;
+        text-align: start;
+      }
     }
 
     > a,
@@ -31,18 +39,12 @@ post-mainnavigation {
 
       &:hover {
         color: tokens.get('post-link-hover-fg', elements.$post-link);
-        @include utilities.high-contrast-mode() {
-          color: LinkText;
-        }
       }
 
       &:focus-visible {
         border-radius: var(--post-core-dimension-4);
         z-index: 1;
       }
-      @include utilities.high-contrast-mode() {
-        color: LinkText;
-      }
     }
   }
 
@@ -76,7 +78,8 @@ post-mainnavigation {
         border-block: 0 solid transparent;
         border-block-end-color: currentColor;
         @include utilities.high-contrast-mode() {
-          border-block-end-color: LinkText;
+          color: ButtonText;
+          background-color: ButtonFace;
         }
         &:hover {
           border-block-width: var(--post-core-dimension-2);
diff --git a/packages/components/src/components/post-megadropdown/post-megadropdown.scss b/packages/components/src/components/post-megadropdown/post-megadropdown.scss
index ba5e0d7465..d3129064c4 100644
--- a/packages/components/src/components/post-megadropdown/post-megadropdown.scss
+++ b/packages/components/src/components/post-megadropdown/post-megadropdown.scss
@@ -1,5 +1,6 @@
 @use '@swisspost/design-system-styles/mixins/media';
 @use '@swisspost/design-system-styles/variables/color';
+@use '@swisspost/design-system-styles/mixins/utilities';
 
 @keyframes slide-in {
   0% {
@@ -73,6 +74,15 @@ post-popovercontainer {
     grid-template-columns: repeat(auto-fit, minmax(min(15vw, 100%), 1fr));
     grid-auto-rows: 1fr auto;
     grid-auto-flow: dense;
+    @include utilities.high-contrast-mode() {
+      a {
+        text-decoration: underline !important;
+        text-decoration-thickness: 1px !important;
+        &:hover {
+          text-decoration-thickness: 2px !important;
+        }
+      }
+    }
 
     @include media.max(lg) {
       grid-template-columns: repeat(auto-fit, minmax(min(35vw, 100%), 1fr));
diff --git a/packages/components/src/components/post-togglebutton/post-togglebutton.scss b/packages/components/src/components/post-togglebutton/post-togglebutton.scss
index 8c4e80a59e..004697dc5e 100644
--- a/packages/components/src/components/post-togglebutton/post-togglebutton.scss
+++ b/packages/components/src/components/post-togglebutton/post-togglebutton.scss
@@ -3,9 +3,6 @@
 @use '@swisspost/design-system-styles/tokens/helpers';
 
 :host {
-  @include utilities.high-contrast-mode() {
-    color: LinkText !important;
-  }
   cursor: pointer;
   outline-offset: tokens.get('focus-outline-offset', helpers.$post-focus) !important;
   outline: tokens.get('focus-outline-color', helpers.$post-focus) none
diff --git a/packages/styles/src/components/button.scss b/packages/styles/src/components/button.scss
index 0eaed65339..955cb52ccc 100644
--- a/packages/styles/src/components/button.scss
+++ b/packages/styles/src/components/button.scss
@@ -96,8 +96,12 @@ tokens.$default-map: components.$post-button;
 .btn-tertiary {
   // Styles  to improve accessibility in high contrast mode
   @include utilities.high-contrast-mode() {
-    color: linktext;
-    text-decoration: underline !important;
+    color: ButtonText;
+    background-color: ButtonFace;
+    border: 2px solid ButtonBorder;
+    &:hover {
+      border-color: Highlight !important;
+    }
   }
 }
 
diff --git a/packages/styles/src/components/header/index.scss b/packages/styles/src/components/header/index.scss
index aedddcee07..d5627c4b9c 100644
--- a/packages/styles/src/components/header/index.scss
+++ b/packages/styles/src/components/header/index.scss
@@ -4,9 +4,6 @@
 @use 'mixins' as *;
 
 post-header {
-  @include utilities.high-contrast-mode() {
-    border-bottom: 2px solid LinkText !important;
-  }
   ul[slot='meta-navigation'] {
     gap: var(--post-core-dimension-4);
 
@@ -53,6 +50,18 @@ post-header {
     }
   }
 
+  post-togglebutton,
+  post-menu-trigger {
+    @include utilities.high-contrast-mode() {
+      background-color: ButtonFace !important;
+      color: ButtonText !important;
+      border: 2px solid ButtonBorder;
+      &:hover {
+        border-color: Highlight !important;
+      }
+    }
+  }
+
   a.selected,
   post-togglebutton[aria-pressed='true'] {
     &:not(post-mainnavigation *) {
@@ -60,4 +69,28 @@ post-header {
       background: var(--post-core-color-sandgrey-100);
     }
   }
+  @include utilities.high-contrast-mode() {
+    > ul.list-inline {
+      li a {
+        color: LinkText !important;
+        text-decoration: underline !important;
+        text-decoration-thickness: 1px !important;
+        &:hover {
+          text-decoration-thickness: 2px !important;
+        }
+      }
+    }
+    button {
+      background-color: ButtonFace !important;
+      color: ButtonText !important;
+      border: 2px solid ButtonBorder;
+      &:hover {
+        border-color: Highlight !important;
+      }
+    }
+
+    .megadropdown {
+      border-block-end: 2px solid ButtonBorder;
+    }
+  }
 }

From 83fbfd1cf434f801895140ea5fff43cd27c36a89 Mon Sep 17 00:00:00 2001
From: Myrta Sakellariou <myrta.sakellariou@gmail.com>
Date: Fri, 20 Dec 2024 13:15:35 +0100
Subject: [PATCH 6/7] lint error fix

---
 packages/styles/src/components/button.scss       | 1 +
 packages/styles/src/components/header/index.scss | 4 ++++
 2 files changed, 5 insertions(+)

diff --git a/packages/styles/src/components/button.scss b/packages/styles/src/components/button.scss
index 955cb52ccc..fa2b050f39 100644
--- a/packages/styles/src/components/button.scss
+++ b/packages/styles/src/components/button.scss
@@ -99,6 +99,7 @@ tokens.$default-map: components.$post-button;
     color: ButtonText;
     background-color: ButtonFace;
     border: 2px solid ButtonBorder;
+
     &:hover {
       border-color: Highlight !important;
     }
diff --git a/packages/styles/src/components/header/index.scss b/packages/styles/src/components/header/index.scss
index d5627c4b9c..6db1962f76 100644
--- a/packages/styles/src/components/header/index.scss
+++ b/packages/styles/src/components/header/index.scss
@@ -56,6 +56,7 @@ post-header {
       background-color: ButtonFace !important;
       color: ButtonText !important;
       border: 2px solid ButtonBorder;
+
       &:hover {
         border-color: Highlight !important;
       }
@@ -75,15 +76,18 @@ post-header {
         color: LinkText !important;
         text-decoration: underline !important;
         text-decoration-thickness: 1px !important;
+
         &:hover {
           text-decoration-thickness: 2px !important;
         }
       }
     }
+
     button {
       background-color: ButtonFace !important;
       color: ButtonText !important;
       border: 2px solid ButtonBorder;
+
       &:hover {
         border-color: Highlight !important;
       }

From 7f49a0331af0f14fe4c4302450adfa8bcbd252d1 Mon Sep 17 00:00:00 2001
From: Myrta Sakellariou <myrta.sakellariou@gmail.com>
Date: Fri, 20 Dec 2024 13:24:41 +0100
Subject: [PATCH 7/7] merge-error fix

---
 .../components/post-mainnavigation/post-mainnavigation.scss | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/components/src/components/post-mainnavigation/post-mainnavigation.scss b/packages/components/src/components/post-mainnavigation/post-mainnavigation.scss
index 1d8e5f1373..435793a22b 100644
--- a/packages/components/src/components/post-mainnavigation/post-mainnavigation.scss
+++ b/packages/components/src/components/post-mainnavigation/post-mainnavigation.scss
@@ -6,7 +6,6 @@
 @use '@swisspost/design-system-styles/tokens/elements';
 @use '@swisspost/design-system-styles/variables/animation';
 @use '@swisspost/design-system-styles/components/header/mixins' as header-mx;
-@use '@swisspost/design-system-styles/mixins/utilities';
 
 $nav-height: var(--post-core-dimension-56);
 
@@ -27,9 +26,10 @@ post-mainnavigation {
 
       button {
         @include button.reset-button;
-      text-align: start;
-      @include utilities.focus-style;
+        text-align: start;
+        @include utilities.focus-style;
       }
+    }
 
     > a,
     > button,