menu lang styles

src/components/navigation/menu-language-item/menu-language-item.scss

@@ -15,25 +15,23 @@ a {
   text-transform: uppercase;
 
   @include breakpoint($wide) {
-    @include font-size(15px, 20px);
+    @include font-size(14px, 20px);
+    @include font-weight($semibold);
     color: var(--brand-main-light);
     font-weight: 700;
-    padding: 0 40px 32px;
+    letter-spacing: -0.5px;
+    padding: 8px 12px;
+    text-transform: none;
 
     &:hover {
       background-color: var(--grayscale-background-box);
       color: var(--brand-main);
     }
   }
-  @include breakpoint($extrawide) {
-    @include font-size(15px, 20px);
-    color: var(--brand-main-light);
-    font-weight: 700;
-    padding: 0 32px 22px;
-  }
   @include breakpoint($xlarge) {
-    @include font-size(18px, 22px);
-    padding: 0 40px 32px;
+    @include font-size(16px, 20px);
+    letter-spacing: -0.53px;
+    padding: 12px 12px;
   }
 
   &:focus {
@@ -42,21 +40,16 @@ a {
   }
 
   &.is-active {
+    @include breakpoint($wide) {
+      border: 2px solid var(--grayscale-black);
+    }
+
     .hy-menu-language-item__label {
       color: var(--grayscale-black);
       font-weight: 700;
       border-bottom: 2px solid var(--additional-orange);
-
       @include breakpoint($wide) {
-        border-bottom: 3px solid var(--grayscale-black);
-        padding-bottom: 6px;
-      }
-      @include breakpoint($extrawide) {
-        border-bottom: 3px solid var(--grayscale-black);
-        padding-bottom: 6px;
-      }
-      @include breakpoint($xlarge) {
-        padding-bottom: 8px;
+        border: none;
       }
     }
   }

src/components/navigation/menu-language/menu-language.scss

@@ -30,8 +30,6 @@
       width: 100%;
       position: absolute;
       bottom: 0;
-      //bottom: -24px;
-      //left: 0;
     }
   }
 }
@@ -75,21 +73,6 @@
     .menu--language__toggle__caret {
       transform: rotate(180deg);
     }
-    //background-color: var(--grayscale-background-box);
-    @include breakpoint($wide) {
-      //margin-bottom: -28px;
-      //margin-top: -26px;
-      //padding: 26px 8px 28px;
-    }
-    @include breakpoint($extrawide) {
-      //margin-bottom: -38px;
-      //margin-top: -26px;
-      //padding: 26px 8px 38px;
-    }
-    @include breakpoint($xlarge) {
-      //margin-bottom: -50px;
-      //padding: 26px 12px 50px;
-    }
   }
 
   > * {
@@ -121,17 +104,15 @@
     z-index: 100;
 
     @include breakpoint($wide) {
-      //@todo check side paddings
-      left: -32px;
-      padding: 32px 0 0;
+      left: -20px;
+      min-width: 160px;
+      padding: 6px 8px;
     }
     @include breakpoint($xlarge) {
-      left: -40px;
-      padding: 40px 0 0;
+      padding: 8px;
     }
 
     a {
-      //@todo check fonts
       @include font-size(16px, 20px);
       margin-left: 0;
     }
@@ -152,21 +133,3 @@
     width: 16px;
   }
 }
-
-/*
-.hy-menu-backdrop {
-  bottom: 0;
-  left: 0;
-  position: absolute;
-  right: 0;
-  top: 0;
-  visibility: hidden;
-
-  &.is-active {
-    background-color: rgba(0, 0, 0, 0.4);
-    transition: background-color 300ms;
-    visibility: visible;
-    z-index: 99;
-  }
-}
-*/

src/components/navigation/menu-language/menu-language.tsx

@@ -32,6 +32,13 @@ export class MenuLanguage {
     this._labels = typeof data === 'string' ? JSON.parse(data) : data;
   }
 
+  @Listen('click', {target: 'window'})
+  handleOutsideMenuClick(event) {
+    // Close the language menu if user clicks anywhere outside the Menu language component.
+    this.isMenuOpen = false;
+    event.stopPropagation();
+  }
+
   @Listen('click')
   handleComponentClick(event) {
     this.isMenuOpen = !this.isMenuOpen;