menu language styles

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

@@ -14,6 +14,28 @@ a {
   text-decoration: none;
   text-transform: uppercase;
 
+  @include breakpoint($wide) {
+    @include font-size(15px, 20px);
+    color: var(--brand-main-light);
+    font-weight: 700;
+    padding: 0 40px 32px;
+
+    &: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($overwide) {
+    @include font-size(18px, 22px);
+    padding: 0 40px 32px;
+  }
+
   &:focus {
     outline: solid 2px var(--additional-yellow);
     outline-offset: 2px;
@@ -21,17 +43,27 @@ a {
 
   &.is-active {
     .hy-menu-language-item__label {
-      border-bottom-color: var(--additional-orange);
+      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($overwide) {
+        padding-bottom: 8px;
+      }
     }
   }
 
   &:not(.is-mobile) {
-    @include font-size(16px, 20px);
-    margin: 0 0 5px;
-  }
-
-  .hy-menu-language-item__label {
-    border-bottom: 2px solid transparent;
-    padding-bottom: 5px;
+    //@include font-size(16px, 20px);
+    margin: 0;
+    // margin: 0 0 5px;
   }
 }

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

@@ -46,6 +46,21 @@
     .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($overwide) {
+      margin-bottom: -50px;
+      padding: 26px 12px 50px;
+    }
   }
 
   > * {
@@ -71,6 +86,17 @@
   top: 40px;
   visibility: hidden;
 
+  @include breakpoint($wide) {
+    padding: 32px 0 0;
+    top: 70px;
+  }
+  @include breakpoint($extrawide) {
+    top: 80px;
+  }
+  @include breakpoint($overwide) {
+    top: 90px;
+  }
+
   &.is-open {
     visibility: visible;
     z-index: 100;

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

@@ -43,6 +43,7 @@ export class MenuLanguage {
 
   render() {
     const black = 'var(--brand-main-nearly-black)';
+    const menuLanguageContainerClass = ['menu--language'].join(' ');
 
     return this.isMobile ? (
       <Host class={'menu--language'}>
@@ -60,7 +61,7 @@ export class MenuLanguage {
         })}
       </Host>
     ) : (
-      <Host class={'menu--language'}>
+      <Host class={menuLanguageContainerClass}>
         <button
           onClick={() => this.languageMenuToggle()}
           class={{

src/components/navigation/menu/menu.scss

@@ -120,7 +120,7 @@
     min-height: 35px;
   }
 
-  @include breakpoint($medium) {
+  @include breakpoint($wide) {
     .menu--language {
       display: none;
       visibility: hidden;

src/components/site-header/site-header.tsx

@@ -90,7 +90,7 @@ export class SiteHeader {
 
   applySizeClasses(size: number) {
     // Set the menu-type based on the width of the browser.
-    if (size < 1200 && size > 960) {
+    if (size <= 1200 && size > 960) {
       this.menuType = MenuType.tablet;
     } else if (size <= 960) {
       this.menuType = MenuType.mobile;