@ecl/mega-menu 5.0.0-alpha.2 → 5.0.0-alpha.20

package/mega-menu.scss

@@ -12,9 +12,48 @@
 $theme: null !default;
 $mega-menu: null !default;
 
+:root {
+  --ecl-mega-menu-item-promotional-bg: #{map.get(
+      $mega-menu,
+      'global',
+      'promotional-item-bg'
+    )};
+  --ecl-mega-menu-item-promotional-hover-bg: #{map.get(
+      $mega-menu,
+      'global',
+      'promotional-item-bg-hover'
+    )};
+  --ecl-mega-menu-item-promotional-focus-bg: #{map.get(
+      $mega-menu,
+      'global',
+      'promotional-item-bg-focus'
+    )};
+  --ecl-mega-menu-item-promotional-outline-color: #{map.get(
+      $mega-menu,
+      'global',
+      'promotional-item-outline-color'
+    )};
+  --ecl-mega-menu-item-promotional-text-color: #{map.get(
+      $mega-menu,
+      'global',
+      'promotional-item-text-color'
+    )};
+  --ecl-mega-menu-item-promotional-hover-text-color: #{map.get(
+      $mega-menu,
+      'global',
+      'promotional-item-hover-text-color'
+    )};
+  --ecl-mega-menu-item-promotional-focus-text-color: #{map.get(
+      $mega-menu,
+      'global',
+      'promotional-item-focus-text-color'
+    )};
+}
+
 @mixin with-scrollbar {
   overflow-y: auto;
-  scrollbar-color: var(--c-n) rgba(0, 0, 0, 0);
+  scrollbar-color: var(--cm-on-surface-neutral-medium, var(--c-n))
+    rgb(0, 0, 0, 0);
   scrollbar-width: thin;
 }
 
@@ -54,7 +93,7 @@ $mega-menu: null !default;
   display: flex;
   flex-direction: column;
   font: var(--f-xs);
-  margin-inline-start: var(--s-xs);
+  margin-inline-start: map.get($mega-menu, 'mobile', 'open-button-margin');
   order: 2;
   padding: map.get($mega-menu, 'mobile', 'open-padding');
   text-decoration: none;
@@ -68,11 +107,12 @@ $mega-menu: null !default;
   }
 
   &:hover {
+    background-color: map.get($mega-menu, 'mobile', 'open-background-hover');
     text-decoration: underline;
   }
 
   &:focus-visible {
-    outline-offset: -2px;
+    outline-offset: map.get($mega-menu, 'mobile', 'open-button-offset');
   }
 
   .ecl-icon:last-of-type {
@@ -80,9 +120,13 @@ $mega-menu: null !default;
   }
 }
 
-.ecl-mega-menu[aria-expanded='true'] .ecl-mega-menu__open {
+.ecl-mega-menu[data-expanded] .ecl-mega-menu__open {
   background-color: map.get($mega-menu, 'mobile', 'open-background-active');
 
+  &:hover {
+    background-color: map.get($mega-menu, 'mobile', 'open-background-hover');
+  }
+
   .ecl-icon:first-of-type {
     display: none;
   }
@@ -107,14 +151,14 @@ $mega-menu: null !default;
 }
 
 /* stylelint-disable-next-line order/order */
-@include breakpoints.up('l') {
+@include breakpoints.up('xl') {
   .ecl-mega-menu:not(.ecl-menu--forced-mobile) {
     background: map.get($mega-menu, 'desktop', 'menu-background');
     padding-bottom: 0;
     padding-top: 0;
 
     .ecl-container {
-      padding: 0 var(--s-m);
+      padding: 0 map.get($mega-menu, 'desktop', 'container-padding-horizontal');
     }
 
     .ecl-mega-menu__container {
@@ -164,7 +208,7 @@ $mega-menu: null !default;
 }
 
 // Expanded
-.ecl-mega-menu[aria-expanded='true'] .ecl-mega-menu__inner {
+.ecl-mega-menu[data-expanded] .ecl-mega-menu__inner {
   display: block;
   right: 0;
 }
@@ -177,6 +221,7 @@ $mega-menu: null !default;
   display: flex;
   flex-flow: row-reverse;
   height: map.get($mega-menu, 'mobile', 'header-height');
+  padding-block-end: var(--s-xs);
 }
 
 .ecl-mega-menu__title {
@@ -275,8 +320,7 @@ $mega-menu: null !default;
   z-index: -1;
 }
 
-.ecl-mega-menu[aria-expanded='true'],
-.ecl-mega-menu[data-expanded='true'] {
+.ecl-mega-menu[data-expanded] {
   .ecl-mega-menu__overlay {
     display: block;
   }
@@ -290,7 +334,7 @@ $mega-menu: null !default;
 }
 
 /* stylelint-disable-next-line order/order */
-@include breakpoints.up('l') {
+@include breakpoints.up('xl') {
   .ecl-mega-menu:not(.ecl-menu--forced-mobile) {
     .ecl-mega-menu__overlay {
       background-color: map.get($mega-menu, 'desktop', 'overlay-background');
@@ -301,7 +345,6 @@ $mega-menu: null !default;
       background-color: transparent;
       box-shadow: none;
       display: block;
-      margin-inline-start: calc(-1 * var(--s-m));
       overflow-y: visible;
       position: static;
       transition: none;
@@ -316,14 +359,15 @@ $mega-menu: null !default;
 }
 
 .ecl-mega-menu__wrapper {
-  background: map.get($theme, 'color', 'white');
+  background: #fff;
   display: none;
+  font: map.get($mega-menu, 'global', 'font');
   position: absolute;
   height: 100%;
   left: 0;
   padding: 0;
   top: 0;
-  width: calc(100vw - var(--s-m));
+  width: 100%;
 }
 
 /*
@@ -347,6 +391,11 @@ $mega-menu: null !default;
   .ecl-mega-menu__inner--expanded & {
     margin-top: 0;
   }
+
+  .ecl-mega-menu--one-panel &,
+  .ecl-mega-menu--two-panels & {
+    margin-inline: 0;
+  }
 }
 
 .ecl-mega-menu__item {
@@ -358,15 +407,18 @@ $mega-menu: null !default;
 .ecl-mega-menu__featured-list__item .ecl-link {
   align-items: center;
   background: transparent;
+  /* stylelint-disable-next-line declaration-property-value-no-unknown */
   border-bottom: 1px solid
     map.get($mega-menu, 'desktop', 'sublink-current-background');
   border-radius: 0;
   box-sizing: border-box;
   color: map.get($mega-menu, 'mobile', 'item-color');
   display: inline-flex;
+  font: map.get($mega-menu, 'global', 'font');
   line-height: map.get($theme, 'line-height-ui', 'xs');
   padding: map.get($mega-menu, 'mobile', 'item-padding');
   position: relative;
+  text-align: start;
   width: 100%;
 
   > span {
@@ -392,8 +444,8 @@ $mega-menu: null !default;
     background: transparent;
     border-color: transparent;
     border-radius: 0px;
-    color: var(--c-d);
-    outline-color: var(--c-p);
+    color: var(--cm-on-surface-brand, var(--c-d));
+    outline-color: var(--cm-border-primary, var(--c-p));
     outline-offset: -2px;
     outline-width: 2px;
   }
@@ -413,11 +465,42 @@ $mega-menu: null !default;
   }
 }
 
-.ecl-mega-menu__featured-list__item .ecl-link {
-  border-bottom: 1px solid map.get($mega-menu, 'mobile', 'featured-link-border');
+.ecl-mega-menu__item--promotional .ecl-mega-menu__link {
+  background: var(--ecl-mega-menu-item-promotional-bg);
+  color: var(--ecl-mega-menu-item-promotional-text-color);
 
   &:hover {
-    border-color: map.get($mega-menu, 'mobile', 'featured-link-border');
+    background: var(--ecl-mega-menu-item-promotional-hover-bg);
+    color: var(--ecl-mega-menu-item-promotional-hover-text-color);
+  }
+
+  &:focus-visible {
+    background: var(--ecl-mega-menu-item-promotional-focus-bg);
+    color: var(--ecl-mega-menu-item-promotional-focus-text-color);
+    outline-color: var(--ecl-mega-menu-item-promotional-outline-color);
+    outline-offset: -4px;
+  }
+}
+
+.ecl-mega-menu__featured-list__item {
+  .ecl-link {
+    .ecl-picture {
+      margin-inline: calc(-1 * var(--s-s)) 0;
+    }
+  }
+
+  &--combo .ecl-mega-menu__featured-image {
+    margin-block-end: var(--s-xs);
+  }
+
+  .ecl-mega-menu__featured-list__item-description {
+    margin-inline-start: var(--s-l);
+  }
+
+  .ecl-mega-menu__featured-list__item-description,
+  .ecl-mega-menu__featured-list__item-description p {
+    font: map.get($mega-menu, 'global', 'featured-description-font');
+    margin-block: 0;
   }
 }
 
@@ -428,17 +511,15 @@ $mega-menu: null !default;
 .ecl-mega-menu__sublink.ecl-mega-menu__parent-link {
   border: none;
   box-sizing: border-box;
-  margin-inline-start: calc(-1 * var(--s-xs));
   padding-bottom: var(--s-xs);
   padding-inline-start: 1.75rem;
   padding-top: var(--s-xs);
-  width: calc(100% + var(--s-m));
 
   &:focus-visible {
     outline: none;
 
     .ecl-button__label {
-      outline: 2px solid var(--c-p);
+      outline: 2px solid var(--cm-border-primary, var(--c-p));
       outline-offset: 4px;
     }
   }
@@ -457,7 +538,7 @@ $mega-menu: null !default;
 .ecl-mega-menu__info {
   background: map.get($mega-menu, 'global', 'greysh-background');
   box-sizing: content-box;
-  margin: 0 calc(-1 * var(--s-xs)) var(--s-m);
+  margin: 0 0 var(--s-m) 0;
   padding-inline-start: 1.75rem;
   padding-bottom: var(--s-2xl);
   padding-inline-end: 1.75rem;
@@ -468,37 +549,22 @@ $mega-menu: null !default;
   }
 
   .ecl-mega-menu__info-content {
-    font: var(--f-m);
     max-width: var(--max-w);
   }
 }
 
-.ecl-mega-menu__info-link {
-  border-bottom: 1px solid transparent;
-  display: inline-block;
-  width: fit-content;
-
-  &:hover {
-    text-decoration: underline !important;
-  }
-
-  &:focus-visible {
-    border-radius: 0;
-  }
-
-  .ecl-mega-menu__info-content + & {
-    margin-top: var(--s-xs);
+.ecl-mega-menu__subitem {
+  .ecl-button__label {
+    margin-inline-end: var(--s-m);
   }
-}
 
-.ecl-mega-menu__subitem {
   .ecl-mega-menu__sublink--level-2 {
     background: transparent;
-    color: var(--c-p);
+    color: var(--cm-on-surface-primary, var(--c-p));
 
     &:hover {
       box-shadow: none;
-      color: var(--c-p-140);
+      color: var(--cm-on-surface-primary-highest, var(--c-p-140));
     }
   }
 }
@@ -510,12 +576,13 @@ $mega-menu: null !default;
 }
 
 /* stylelint-disable-next-line order/order */
-@include breakpoints.up('l') {
+@include breakpoints.up('xl') {
   .ecl-mega-menu:not(.ecl-menu--forced-mobile) {
     border-top: map.get($mega-menu, 'desktop', 'menu-border');
 
     .ecl-mega-menu__inner {
       border-top: none;
+      margin-inline-start: calc(-1 * var(--s-xs));
     }
 
     .ecl-mega-menu__list {
@@ -553,7 +620,6 @@ $mega-menu: null !default;
       border-radius: 0;
       color: map.get($mega-menu, 'desktop', 'item-color');
       display: inline-flex;
-      font: var(--f-m);
       height: 100%;
       line-height: map.get($mega-menu, 'desktop', 'link-line-height');
       padding: map.get($mega-menu, 'desktop', 'link-padding');
@@ -561,7 +627,7 @@ $mega-menu: null !default;
       z-index: 0;
 
       &:active {
-        color: map.get($theme, 'color', 'white');
+        color: #fff;
       }
 
       &:hover {
@@ -579,12 +645,28 @@ $mega-menu: null !default;
         );
         border-radius: 0;
         color: map.get($mega-menu, 'desktop', 'item-color-focus');
-        outline-color: map.get($theme, 'color', 'white');
-        outline-offset: -8px;
+        outline-color: #fff;
+        outline-offset: map.get($mega-menu, 'desktop', 'outline-offset');
         outline-width: map.get($mega-menu, 'desktop', 'outline-width');
       }
     }
 
+    .ecl-mega-menu__item--promotional .ecl-mega-menu__link {
+      background: var(--ecl-mega-menu-item-promotional-bg);
+      color: var(--ecl-mega-menu-item-promotional-text-color);
+
+      &:hover {
+        background: var(--ecl-mega-menu-item-promotional-hover-bg);
+        color: var(--ecl-mega-menu-item-promotional-hover-text-color);
+      }
+
+      &:focus-visible {
+        background: var(--ecl-mega-menu-item-promotional-focus-bg);
+        color: var(--ecl-mega-menu-item-promotional-focus-text-color);
+        outline-color: var(--ecl-mega-menu-item-promotional-outline-color);
+      }
+    }
+
     .ecl-mega-menu__sublink {
       border-bottom: none;
     }
@@ -612,6 +694,10 @@ $mega-menu: null !default;
       }
     }
 
+    .ecl-mega-menu__featured-list__item-description {
+      margin-inline-start: var(--s-s);
+    }
+
     .ecl-mega-menu__item--current {
       background-color: map.get(
         $mega-menu,
@@ -635,15 +721,15 @@ $mega-menu: null !default;
       }
 
       .ecl-mega-menu__link:focus-visible {
-        outline-color: var(--c-p);
+        outline-color: var(--cm-border-primary, var(--c-p));
       }
     }
   }
 
   .ecl-mega-menu:not(
-      .ecl-mega-menu--forced-mobile,
-      .ecl-mega-menu--forced-close
-    ) {
+    .ecl-mega-menu--forced-mobile,
+    .ecl-mega-menu--forced-close
+  ) {
     .ecl-mega-menu__item {
       &.ecl-mega-menu__item--expanded > .ecl-button .ecl-icon {
         transform: rotate(0);
@@ -651,8 +737,8 @@ $mega-menu: null !default;
 
       &.ecl-mega-menu__item--expanded {
         .ecl-mega-menu__link {
-          background-color: map.get($theme, 'color', 'white');
-          color: var(--c-d);
+          background-color: #fff;
+          color: var(--cm-on-surface-brand, var(--c-d));
           z-index: map.get($theme, 'z-index', 'dropdown') + 1;
         }
       }
@@ -686,8 +772,6 @@ $mega-menu: null !default;
     background-color: map.get($mega-menu, 'global', 'greysh-background');
     box-shadow: none;
     display: none;
-    font: map.get($mega-menu, 'mobile', 'subtitle-font');
-    font-weight: map.get($mega-menu, 'mobile', 'subtitle-font-weight');
   }
 }
 
@@ -700,7 +784,7 @@ $mega-menu: null !default;
   display: none;
 }
 
-@include breakpoints.down('m') {
+@include breakpoints.down('l') {
   .ecl-mega-menu--one-panel {
     .ecl-mega-menu__item--expanded > .ecl-mega-menu__link {
       font: var(--f-l);
@@ -727,6 +811,7 @@ $mega-menu: null !default;
         cursor: default;
         font: var(--f-l);
         margin: 0 calc(-1 * var(--s-xs));
+        width: 100vw;
 
         &::after {
           background: map.get(
@@ -738,9 +823,9 @@ $mega-menu: null !default;
           display: block;
           height: var(--s-xl);
           position: absolute;
-          left: calc(-1 * var(--s-l));
+          left: 0;
           top: 100%;
-          width: calc(100% + var(--s-l));
+          width: 100vw;
         }
       }
 
@@ -764,14 +849,17 @@ $mega-menu: null !default;
   list-style: none;
   list-style-image: url('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7');
   margin-bottom: var(--s-m);
-  padding-inline-start: 0;
+  padding: 0 var(--s-xs);
+
+  .ecl-mega-menu__sublist {
+    padding-inline: 0 !important;
+  }
 
   .ecl-mega-menu__see-all {
     .ecl-link {
       border-radius: 0;
       box-sizing: border-box;
-      color: var(--c-d);
-      font: var(--f-m);
+      color: var(--cm-on-surface-brand, var(--c-d));
       margin: 0 var(--s-l);
       padding: var(--s-xs) 0;
 
@@ -790,6 +878,25 @@ $mega-menu: null !default;
   }
 }
 
+.ecl-mega-menu__see-all .ecl-link.ecl-mega-menu__info-link {
+  border-bottom: 1px solid transparent;
+  display: inline-block;
+  margin-block-end: var(--s-m);
+  width: fit-content;
+
+  &:hover {
+    text-decoration: underline !important;
+  }
+
+  &:focus-visible {
+    border-radius: 0;
+  }
+
+  .ecl-mega-menu__info-content + & {
+    margin-top: var(--s-xs);
+  }
+}
+
 .ecl-mega-menu__featured-list {
   margin: 0;
   padding: 0;
@@ -798,10 +905,12 @@ $mega-menu: null !default;
 .ecl-mega-menu__sublink {
   background: transparent;
   box-sizing: border-box;
+  /* stylelint-disable-next-line declaration-property-value-no-unknown */
   border-bottom: 1.5px solid
     map.get($mega-menu, 'desktop', 'sublink-current-background');
   border-radius: 0;
   color: map.get($mega-menu, 'mobile', 'item-color');
+  font: map.get($mega-menu, 'global', 'font');
   padding: map.get($mega-menu, 'mobile', 'subitem-padding');
   position: relative;
   line-height: map.get($theme, 'line-height-ui', 'xs');
@@ -835,15 +944,15 @@ $mega-menu: null !default;
   }
 
   &--current {
-    background-color: var(--c-n-80);
-    box-shadow: inset 4px 0 0 0 var(--c-p);
+    background-color: var(--cm-surface-neutral-lowest, var(--c-n-80));
+    box-shadow: inset 4px 0 0 0 var(--cm-border-primary, var(--c-p));
   }
 
   &:focus-visible {
     background: transparent;
     border-color: transparent;
-    color: var(--c-d);
-    outline-color: var(--c-p);
+    color: var(--cm-on-surface-brand, var(--c-d));
+    outline-color: var(--cm-border-primary, var(--c-p));
     outline-offset: -2px;
     outline-width: 2px;
   }
@@ -855,30 +964,48 @@ $mega-menu: null !default;
   }
 }
 
-.ecl-mega-menu__sublist--scrollable {
+.ecl-mega-menu__mega--has-featured {
+  @at-root .ecl-mega-menu--featured--primary
+      .ecl-mega-menu__subitem--current
+      .ecl-mega-menu__featured {
+    display: none !important;
+  }
+
+  @at-root .ecl-mega-menu--has-secondary-featured:not(
+        .ecl-mega-menu--featured--primary
+      )
+      &
+      > .ecl-mega-menu__featured {
+    display: none !important;
+  }
+
+  .ecl-mega-menu__featured-list__item:last-child {
+    padding-block-end: var(--s-m);
+  }
+
   @include with-scrollbar;
 }
 
-.ecl-mega-menu__mega--level-2 {
+.ecl-mega-menu__sublist--scrollable {
   @include with-scrollbar;
+}
 
-  margin-top: var(--s-3xl);
-  margin-inline-start: calc(-1 * var(--s-xs));
-  margin-inline-end: calc(-1 * var(--s-xs));
+.ecl-mega-menu__mega--level-2 {
+  margin-top: map.get($mega-menu, 'mobile', 'spacing-top-level-2');
 
   > .ecl-mega-menu__sublist {
     padding: 0 var(--s-xs);
   }
 
   .ecl-mega-menu__sublink {
-    color: var(--c-p);
+    color: var(--cm-on-surface-primary, var(--c-p));
 
     &:hover {
       text-decoration: underline;
     }
 
     &:focus-visible {
-      color: var(--c-p) !important;
+      color: var(--cm-on-surface-primary, var(--c-p)) !important;
     }
 
     &.ecl-mega-menu__sublink--last {
@@ -893,31 +1020,45 @@ $mega-menu: null !default;
   .ecl-mega-menu__sublink .ecl-icon {
     margin-inline-start: var(--s-xs);
   }
+
+  &.ecl-mega-menu-featured-only {
+    margin-block-start: var(--s-xl);
+  }
 }
 
 .ecl-mega-menu__featured {
   background-color: map.get($mega-menu, 'mobile', 'featured-background');
-  border-color: var(--c-n);
+  border-color: var(--cm-border-neutral, var(--c-n));
   border-width: 0.5px;
   flex-direction: column;
-  padding: 0 var(--s-xs);
+  flex-grow: 1;
+  padding: 0;
+
+  .ecl-mega-menu__featured-scrollable {
+    background-color: map.get($mega-menu, 'mobile', 'featured-background');
+  }
 
   .ecl-mega-menu__featured-picture {
     display: block;
 
     .ecl-mega-menu__featured-image {
-      aspect-ratio: 21/9;
+      aspect-ratio: 3/2;
       display: block;
       margin-inline-start: var(--s-l);
+      margin-block-start: var(--s-m);
       max-width: 15.25rem;
     }
   }
 
+  .ecl-link .ecl-mega-menu__featured-picture .ecl-mega-menu__featured-image {
+    margin-inline-start: var(--s-s);
+  }
+
   .ecl-mega-menu__featured-title {
     display: block;
     margin: calc(var(--s-xs) + 2px) var(--s-m) calc(var(--s-xs) + 2px)
       var(--s-l);
-    font: var(--f-l);
+    font: var(--f-m);
   }
 
   .ecl-mega-menu__featured-content {
@@ -932,20 +1073,31 @@ $mega-menu: null !default;
       .ecl-link {
         border-radius: 0;
         box-sizing: border-box;
-        color: var(--c-p);
+        color: var(--cm-on-surface-primary, var(--c-p));
         display: block;
         outline-offset: -2px;
-        padding: var(--s-m) var(--s-l);
+        padding: var(--s-2xs) var(--s-l);
         width: 100%;
 
         &:hover {
-          color: var(--c-p);
+          color: var(--cm-on-surface-primary, var(--c-p));
         }
       }
+
+      &--image-only {
+        margin-block-end: var(--s-2xs);
+      }
     }
   }
 }
 
+.ecl-mega-menu__mega:not(.ecl-mega-menu__mega--level-2)
+  > .ecl-mega-menu__featured {
+  margin-inline: var(--s-xs);
+  margin-block-start: calc(-1 * var(--s-m));
+  padding-block: 0;
+}
+
 .ecl-mega-menu--rtl {
   .ecl-mega-menu__see-all .ecl-icon,
   .ecl-mega-menu__info-link .ecl-icon {
@@ -957,18 +1109,17 @@ $mega-menu: null !default;
   }
 }
 
-@include breakpoints.up('l') {
+@include breakpoints.up('xl') {
   .ecl-mega-menu:not(
-      .ecl-mega-menu--forced-mobile,
-      .ecl-mega-menu--forced-close
-    ) {
+    .ecl-mega-menu--forced-mobile,
+    .ecl-mega-menu--forced-close
+  ) {
     .ecl-mega-menu__wrapper {
       padding-top: var(--s-m);
       min-height: 200px !important;
-      width: 100vw;
 
       &::before {
-        background: #e3e3e3;
+        background: var(--cm-border-neutral, '#e3e3e3');
         content: ' ';
         display: block;
         height: 1px;
@@ -998,7 +1149,7 @@ $mega-menu: null !default;
       > .ecl-mega-menu__wrapper
       > .ecl-container
       > .ecl-mega-menu__info {
-      background-color: map.get($theme, 'color', 'white');
+      background-color: #fff;
       border: map.get($mega-menu, 'desktop', 'mega-border');
       border-radius: 0 0 map.get($mega-menu, 'global', 'border-radius')
         map.get($mega-menu, 'global', 'border-radius');
@@ -1015,15 +1166,21 @@ $mega-menu: null !default;
       z-index: map.get($theme, 'z-index', 'dropdown');
     }
 
+    @at-root .ecl-mega-menu--rtl .ecl-mega-menu__info::after {
+      right: auto !important;
+      left: 10px !important;
+    }
+
     .ecl-mega-menu__item
       > .ecl-mega-menu__wrapper
       .ecl-container
       > .ecl-mega-menu__info {
       margin-bottom: var(--s-m);
-      margin-inline-start: calc(-1 * var(--s-m));
-      padding: 0 0 var(--s-m) var(--s-m);
+      padding: 0 0 var(--s-m);
       position: static;
       width: auto;
+
+      @include with-scrollbar;
     }
 
     &.ecl-mega-menu--rtl {
@@ -1044,11 +1201,12 @@ $mega-menu: null !default;
     }
 
     .ecl-mega-menu__mega {
+      overflow-x: visible;
       width: 21rem;
     }
 
     .ecl-mega-menu__item > .ecl-mega-menu__mega-container {
-      background-color: map.get($theme, 'color', 'white');
+      background-color: #fff;
       top: 100%;
       width: 100%;
 
@@ -1097,11 +1255,39 @@ $mega-menu: null !default;
 
       > .ecl-mega-menu__info {
         box-sizing: border-box;
-        box-shadow: 0px 4px 10px 0px rgba(224, 229, 245, 0.42);
+        box-shadow: 0px 4px 10px 0px rgb(224, 229, 245, 0.42);
+        margin-inline: calc(
+          -1 * map.get($mega-menu, 'desktop', 'container-padding-horizontal')
+        );
+        padding-inline-start: map.get(
+          $mega-menu,
+          'desktop',
+          'container-padding-horizontal'
+        );
+      }
+
+      .ecl-mega-menu__mega:not(.ecl-mega-menu__mega--level-2)
+        > .ecl-mega-menu__featured {
+        background: var(--cm-on-surface-inverted, #fff);
+        display: flex;
+        height: auto;
+        margin-block: 0;
+        margin-inline-start: 21rem;
+
+        .ecl-mega-menu__featured-list__item .ecl-link {
+          border-bottom: none;
+          margin: 0;
+          padding-inline: var(--s-s) 0;
+          padding-block: var(--s-2xs);
+        }
+
+        .ecl-mega-menu__featured-list__item .ecl-link > .ecl-picture {
+          margin-block-start: calc(-1 * var(--s-2xs));
+        }
       }
 
       .ecl-mega-menu__subitem--expanded .ecl-mega-menu__featured {
-        background: map.get($theme, 'color', 'white');
+        background: #fff;
         display: flex;
         margin-bottom: 0;
 
@@ -1114,20 +1300,20 @@ $mega-menu: null !default;
         .ecl-mega-menu__featured-list__item .ecl-link {
           border-bottom: none;
           margin: 0;
-          padding: calc(var(--s-xs) + 2px) var(--s-2xl) calc(var(--s-xs) + 2px)
-            var(--s-s);
+          padding-inline: var(--s-s) 0;
+          padding-block: var(--s-2xs);
         }
       }
     }
 
     .ecl-mega-menu__sublist {
-      border-color: map.get($theme, 'color', 'white');
+      border-color: #fff;
       border-width: 2px;
       display: flex;
       flex-direction: column;
       flex: 1;
       margin: 0;
-      padding-inline-start: 0;
+      padding-inline: 0;
 
       @include with-scrollbar;
 
@@ -1139,6 +1325,7 @@ $mega-menu: null !default;
         display: block;
         flex-grow: 0;
         margin-top: auto;
+        padding-inline-start: var(--s-xs);
         position: relative;
 
         .ecl-link {
@@ -1161,8 +1348,7 @@ $mega-menu: null !default;
           display: block;
           height: 1px;
           position: absolute;
-          left: var(--s-s);
-          top: calc(-1 * var(--s-s));
+          left: var(--s-l);
           width: calc(100% - (var(--s-l) * 2));
           background: map.get($mega-menu, 'desktop', 'see-all-divider');
         }
@@ -1180,11 +1366,18 @@ $mega-menu: null !default;
       position: absolute;
       visibility: hidden;
       opacity: 0;
-      overflow-y: visible;
       transition-timing-function: ease;
       transition-property: opacity;
       transition-duration: 0.3s;
 
+      @include with-scrollbar;
+
+      overflow-y: visible;
+
+      &.ecl-mega-menu-featured-only {
+        background: var(--cm-surface-inverted, #fff);
+      }
+
       > .ecl-mega-menu__sublist {
         border: none;
         position: relative;
@@ -1210,7 +1403,7 @@ $mega-menu: null !default;
         }
 
         &:focus-visible {
-          outline-color: var(--c-p);
+          outline-color: var(--cm-border-primary, var(--c-p));
         }
       }
     }
@@ -1252,14 +1445,14 @@ $mega-menu: null !default;
 
       &:focus-visible {
         border-color: transparent;
-        color: var(--c-d);
-        outline-color: var(--c-p);
+        color: var(--cm-on-surface-brand, var(--c-d));
+        outline-color: var(--cm-border-primary, var(--c-p));
         outline-width: 2px;
       }
     }
 
     .ecl-mega-menu__subitem[aria-expanded] > .ecl-mega-menu__sublink:hover {
-      background-color: var(--c-n-40);
+      background-color: var(--cm-surface-neutral-lowest, var(--c-n-40));
       box-shadow: none;
       text-decoration: none;
     }
@@ -1273,7 +1466,7 @@ $mega-menu: null !default;
           'desktop',
           'sublink-current-background'
         );
-        border-color: var(--c-p);
+        border-color: var(--cm-border-primary, var(--c-p));
       }
     }
   }
@@ -1284,13 +1477,16 @@ $mega-menu: null !default;
     font: var(--f-m);
     height: 100%;
     margin: 0;
-    padding-inline-start: 0;
+    padding-inline: 0;
     position: absolute;
     left: calc(100% + var(--s-m));
     width: 16.25rem;
     top: 0;
 
     .ecl-mega-menu__featured-scrollable {
+      background-color: transparent;
+      height: 100%;
+
       @include with-scrollbar;
     }
 
@@ -1298,8 +1494,9 @@ $mega-menu: null !default;
       display: block;
 
       .ecl-mega-menu__featured-image {
-        aspect-ratio: 21/9;
+        aspect-ratio: 3/2;
         display: block;
+        margin-block-start: 0;
         margin-inline-start: var(--s-s);
         max-width: calc(100% - var(--s-s));
       }
@@ -1310,29 +1507,51 @@ $mega-menu: null !default;
     }
 
     .ecl-mega-menu__featured-title {
-      font: var(--f-m);
+      font: var(--f-l);
       margin-bottom: calc(var(--s-xs) + 2px);
       margin-top: calc(var(--s-xs) + 2px);
       margin-inline-start: var(--s-s);
     }
   }
+
+  .ecl-mega-menu__mega--has-featured {
+    overflow-y: unset;
+  }
 }
 
-@include breakpoints.up('xl') {
+@media (width >= 1368px) {
   .ecl-mega-menu:not(
-      .ecl-mega-menu--forced-mobile,
-      .ecl-mega-menu--forced-close
-    ) {
+    .ecl-mega-menu--forced-mobile,
+    .ecl-mega-menu--forced-close
+  ) {
+    .ecl-container {
+      padding-inline: map.get(
+        $mega-menu,
+        'desktop',
+        'container-extra-large-padding-horizontal'
+      );
+    }
+
+    .ecl-mega-menu__inner {
+      margin-inline-start: calc(-1 * var(--s-m));
+    }
+
     .ecl-mega-menu__item.ecl-mega-menu__item--expanded
       > .ecl-mega-menu__wrapper
       > .ecl-container {
       > .ecl-mega-menu__info {
         box-shadow: none;
-        border-radius: 0px 4px 4px 0px;
-        left: var(--s-m);
+        border-radius: 0px map.get($theme, 'border-radius', 's')
+          map.get($theme, 'border-radius', 's') 0px;
+        left: map.get(
+          $mega-menu,
+          'desktop',
+          'container-extra-large-padding-horizontal'
+        );
         margin-bottom: 0;
-        padding-inline-start: var(--s-m);
-        padding-inline-end: var(--s-xl);
+        margin-inline: 0;
+        padding-inline-start: 0;
+        padding-inline-end: 1.5rem;
         position: absolute;
         width: 15.875rem;
         z-index: 16;
@@ -1341,10 +1560,10 @@ $mega-menu: null !default;
           content: '';
           position: absolute;
           top: 0;
-          right: 0;
+          right: 10px;
           bottom: 0;
           width: 10px;
-          box-shadow: 4px 0px 10px 0px rgba(224, 229, 245, 0.5);
+          box-shadow: 4px 0px 10px 0px rgb(224, 229, 245, 0.5);
           pointer-events: none;
         }
 
@@ -1369,10 +1588,19 @@ $mega-menu: null !default;
       }
 
       > .ecl-mega-menu__mega {
-        left: calc(15.875rem + var(--s-xl));
+        left: 18rem;
       }
     }
 
+    &.ecl-mega-menu--rtl .ecl-mega-menu__info {
+      left: auto !important;
+      right: map.get(
+        $mega-menu,
+        'desktop',
+        'container-extra-large-padding-horizontal'
+      ) !important;
+    }
+
     &.ecl-mega-menu--rtl
       .ecl-mega-menu__item--expanded
       > .ecl-mega-menu__wrapper
@@ -1385,9 +1613,22 @@ $mega-menu: null !default;
 
 @include breakpoints.up('xl') {
   .ecl-mega-menu:not(
-      .ecl-mega-menu--forced-mobile,
-      .ecl-mega-menu--forced-close
-    ) {
+    .ecl-mega-menu--forced-mobile,
+    .ecl-mega-menu--forced-close
+  ) {
+    .ecl-container {
+      padding-inline: map.get(
+        $mega-menu,
+        'global',
+        'container-extra-large-padding-horizontal'
+      );
+    }
+
+    .ecl-mega-menu__mega:not(.ecl-mega-menu__mega--level-2)
+      > .ecl-mega-menu__featured {
+      margin-inline-start: 18.75rem !important;
+    }
+
     .ecl-mega-menu__wrapper::before {
       width: 96%;
       margin-inline-start: 2%;
@@ -1395,6 +1636,50 @@ $mega-menu: null !default;
   }
 }
 
+@media (width >= 1368px) {
+  .ecl-mega-menu:not(
+    .ecl-mega-menu--forced-mobile,
+    .ecl-mega-menu--forced-close
+  ) {
+    .ecl-mega-menu__mega:not(.ecl-mega-menu__mega--level-2)
+      > .ecl-mega-menu__featured {
+      margin-inline-start: 20.68rem !important;
+    }
+
+    .ecl-mega-menu__item.ecl-mega-menu__item--expanded
+      > .ecl-mega-menu__wrapper
+      > .ecl-container {
+      .ecl-mega-menu__featured {
+        width: 17.875rem;
+      }
+
+      .ecl-mega-menu__mega {
+        width: 20.68rem;
+      }
+
+      > {
+        .ecl-mega-menu__info {
+          padding-inline-start: 0;
+          width: 18.875rem;
+        }
+
+        .ecl-mega-menu__mega {
+          left: 22rem;
+          width: 20.93rem;
+        }
+      }
+    }
+
+    &.ecl-mega-menu--rtl
+      .ecl-mega-menu__item--expanded
+      > .ecl-mega-menu__wrapper
+      > .ecl-container
+      > .ecl-mega-menu__mega {
+      right: 20.93rem;
+    }
+  }
+}
+
 .ecl-mega-menu-prevent-scroll {
   position: fixed;
   overflow-y: scroll;