@ecl/mega-menu 5.0.0-alpha.1

package/mega-menu.scss

@@ -0,0 +1,1402 @@
+/* stylelint-disable no-descending-specificity, length-zero-no-unit */
+
+/**
+ * Menu
+ * @define menu
+ */
+
+@use 'sass:map';
+@use '@ecl/grid/mixins/breakpoints';
+
+// Exposed variables
+$theme: null !default;
+$mega-menu: null !default;
+
+@mixin with-scrollbar {
+  overflow-y: auto;
+  scrollbar-color: var(--c-n) rgba(0, 0, 0, 0);
+  scrollbar-width: thin;
+}
+
+/*
+ * Menu structure
+ */
+.ecl-mega-menu {
+  background: map.get($mega-menu, 'mobile', 'menu-background');
+  box-shadow: map.get($mega-menu, 'global', 'shadow');
+  color: map.get($mega-menu, 'mobile', 'color');
+  margin: 0;
+  padding-bottom: var(--s-xs);
+  padding-top: var(--s-xs);
+
+  // We've got to override an EWPP css, yes.
+  a:focus {
+    text-decoration: none;
+  }
+
+  .ecl-container {
+    padding: 0;
+  }
+}
+
+.ecl-mega-menu__container {
+  display: flex;
+  min-height: map.get($theme, 'line-height', '2xl');
+  position: initial; // Needed for full screen overlay
+}
+
+.ecl-mega-menu__open {
+  align-items: center;
+  align-self: center;
+  box-sizing: border-box;
+  cursor: pointer;
+  color: currentcolor;
+  display: flex;
+  flex-direction: column;
+  font: var(--f-xs);
+  margin-inline-start: var(--s-xs);
+  order: 2;
+  padding: map.get($mega-menu, 'mobile', 'open-padding');
+  text-decoration: none;
+  z-index: 54;
+
+  &:hover,
+  &:focus-visible,
+  &:active,
+  &:visited {
+    color: currentcolor;
+  }
+
+  &:hover {
+    text-decoration: underline;
+  }
+
+  &:focus-visible {
+    outline-offset: -2px;
+  }
+
+  .ecl-icon:last-of-type {
+    display: none;
+  }
+}
+
+.ecl-mega-menu[aria-expanded='true'] .ecl-mega-menu__open {
+  background-color: map.get($mega-menu, 'mobile', 'open-background-active');
+
+  .ecl-icon:first-of-type {
+    display: none;
+  }
+
+  .ecl-icon:last-of-type {
+    display: block;
+  }
+}
+
+.ecl-mega-menu__mega-container-scrollable {
+  font: var(--f-m);
+  margin-top: var(--s-xs);
+  padding: var(--s-s) var(--s-m);
+
+  * {
+    height: auto;
+  }
+}
+
+.ecl-mega-menu__spacer {
+  flex: 1 0 auto;
+}
+
+/* stylelint-disable-next-line order/order */
+@include breakpoints.up('l') {
+  .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);
+    }
+
+    .ecl-mega-menu__container {
+      display: block;
+    }
+
+    // For the external icon
+    .ecl-mega-menu__link .ecl-icon {
+      flex-shrink: 0;
+      margin-inline-start: var(--s-2xs);
+    }
+
+    .ecl-mega-menu__site-name,
+    .ecl-mega-menu__inner-header,
+    .ecl-mega-menu__open,
+    .ecl-mega-menu__cta {
+      display: none;
+    }
+  }
+
+  .ecl-mega-menu__mega-container-scrollable {
+    margin-top: 0;
+  }
+}
+
+/*
+ * Inner menu
+ */
+.ecl-mega-menu__inner {
+  background: map.get($mega-menu, 'mobile', 'content-background');
+  bottom: 0;
+  display: none;
+  position: fixed;
+  right: -100%;
+  top: 0;
+  width: 100%;
+  z-index: map.get($theme, 'z-index', 'modal') + 3;
+
+  /* Force display if JS is disabled */
+  .no-js & {
+    display: flex;
+  }
+}
+
+.ecl-mega-menu--start-panel .ecl-mega-menu__inner {
+  @include with-scrollbar;
+}
+
+// Expanded
+.ecl-mega-menu[aria-expanded='true'] .ecl-mega-menu__inner {
+  display: block;
+  right: 0;
+}
+
+.ecl-mega-menu__inner-header {
+  align-items: center;
+  background: map.get($mega-menu, 'mobile', 'header-background');
+  box-shadow: map.get($mega-menu, 'mobile', 'header-shadow');
+  color: map.get($mega-menu, 'mobile', 'header-color');
+  display: flex;
+  flex-flow: row-reverse;
+  height: map.get($mega-menu, 'mobile', 'header-height');
+}
+
+.ecl-mega-menu__title {
+  font: map.get($mega-menu, 'mobile', 'header-font');
+  padding-inline-start: var(--s-m);
+}
+
+.ecl-mega-menu__close {
+  align-items: center;
+  border-radius: map.get($mega-menu, 'global', 'border-radius');
+  cursor: pointer;
+  color: currentcolor;
+  display: flex;
+  flex-direction: column;
+  font: var(--f-xs);
+  margin-inline-start: auto;
+  order: 0;
+  text-decoration: none;
+
+  .ecl-button__container {
+    flex-direction: column-reverse;
+  }
+
+  .ecl-button__icon {
+    margin-inline-start: 0;
+  }
+
+  .ecl-button__label {
+    margin-top: var(--s-2xs);
+  }
+
+  &:hover {
+    background-color: map.get($mega-menu, 'mobile', 'header-background-hover');
+    border-color: transparent;
+    color: currentcolor;
+  }
+
+  &:focus-visible {
+    color: currentcolor;
+    border-color: currentcolor;
+  }
+}
+
+.ecl-mega-menu__back {
+  cursor: pointer;
+  color: currentcolor;
+  display: none;
+  font: map.get($mega-menu, 'mobile', 'header-font');
+  margin: var(--s-l) var(--s-m) 0;
+  position: relative;
+  text-decoration: none;
+
+  &:hover {
+    background-color: map.get($mega-menu, 'mobile', 'header-background-hover');
+    border-color: map.get($mega-menu, 'mobile', 'header-border-hover');
+    color: map.get($mega-menu, 'mobile', 'header-color-hover');
+  }
+
+  &:focus-visible {
+    color: currentcolor;
+    border-color: currentcolor;
+  }
+}
+
+// Expanded
+@if map.has-key($mega-menu, 'mobile', 'hide-header') {
+  .ecl-mega-menu__inner-header {
+    flex-flow: row;
+  }
+
+  .ecl-mega-menu__inner:not(.ecl-mega-menu__inner--expanded)
+    .ecl-mega-menu__inner-header,
+  .ecl-mega-menu__close {
+    display: none;
+  }
+}
+
+.ecl-mega-menu__inner--expanded .ecl-mega-menu__title {
+  display: none;
+}
+
+.ecl-mega-menu__inner--expanded .ecl-mega-menu__back {
+  display: inline-block;
+}
+
+.ecl-mega-menu__overlay {
+  background-color: map.get($mega-menu, 'mobile', 'overlay-background');
+  content: '';
+  display: none;
+  height: 100%;
+  left: 0;
+  position: fixed;
+  right: 0;
+  top: 0;
+  width: 100%;
+  z-index: -1;
+}
+
+.ecl-mega-menu[aria-expanded='true'],
+.ecl-mega-menu[data-expanded='true'] {
+  .ecl-mega-menu__overlay {
+    display: block;
+  }
+}
+
+/* stylelint-disable-next-line order/order */
+@include breakpoints.up('s') {
+  .ecl-mega-menu__inner {
+    width: 100%;
+  }
+}
+
+/* stylelint-disable-next-line order/order */
+@include breakpoints.up('l') {
+  .ecl-mega-menu:not(.ecl-menu--forced-mobile) {
+    .ecl-mega-menu__overlay {
+      background-color: map.get($mega-menu, 'desktop', 'overlay-background');
+      opacity: 0.7;
+    }
+
+    .ecl-mega-menu__inner {
+      background-color: transparent;
+      box-shadow: none;
+      display: block;
+      margin-inline-start: calc(-1 * var(--s-m));
+      overflow-y: visible;
+      position: static;
+      transition: none;
+      width: 100%;
+      z-index: map.get($theme, 'z-index', 'modal');
+    }
+
+    .ecl-menu__overlay {
+      display: none;
+    }
+  }
+}
+
+.ecl-mega-menu__wrapper {
+  background: map.get($theme, 'color', 'white');
+  display: none;
+  position: absolute;
+  height: 100%;
+  left: 0;
+  padding: 0;
+  top: 0;
+  width: calc(100vw - var(--s-m));
+}
+
+/*
+ * First level
+ */
+.ecl-mega-menu__list {
+  box-sizing: border-box;
+  clear: right;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  justify-content: flex-start;
+  list-style: none;
+  list-style-image: url('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7');
+  margin-bottom: 0;
+  margin-top: var(--s-m);
+  margin-inline-start: var(--s-xs);
+  margin-inline-end: var(--s-xs);
+  padding: 0;
+
+  .ecl-mega-menu__inner--expanded & {
+    margin-top: 0;
+  }
+}
+
+.ecl-mega-menu__item {
+  display: flex;
+  flex-direction: column;
+}
+
+.ecl-mega-menu__link,
+.ecl-mega-menu__featured-list__item .ecl-link {
+  align-items: center;
+  background: transparent;
+  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;
+  line-height: map.get($theme, 'line-height-ui', 'xs');
+  padding: map.get($mega-menu, 'mobile', 'item-padding');
+  position: relative;
+  width: 100%;
+
+  > span {
+    width: 100%;
+  }
+
+  &:hover {
+    background: transparent;
+    box-shadow: none;
+    border-color: map.get($mega-menu, 'desktop', 'sublink-current-background');
+    color: map.get($mega-menu, 'mobile', 'item-color-hover');
+  }
+
+  &[aria-expanded]:hover {
+    text-decoration: none;
+  }
+
+  &:visited {
+    color: map.get($mega-menu, 'mobile', 'item-color');
+  }
+
+  &:focus-visible {
+    background: transparent;
+    border-color: transparent;
+    border-radius: 0px;
+    color: var(--c-d);
+    outline-color: var(--c-p);
+    outline-offset: -2px;
+    outline-width: 2px;
+  }
+
+  .ecl-icon {
+    flex-shrink: 0;
+    height: map.get($mega-menu, 'mobile', 'arrow-size');
+    margin-inline-start: auto;
+    padding: 1px 3px;
+    width: map.get($mega-menu, 'mobile', 'arrow-size');
+
+    &:first-of-type {
+      height: calc(var(--s-s) + 0.5px);
+      width: calc(var(--s-s) + 0.5px);
+      display: none;
+    }
+  }
+}
+
+.ecl-mega-menu__featured-list__item .ecl-link {
+  border-bottom: 1px solid map.get($mega-menu, 'mobile', 'featured-link-border');
+
+  &:hover {
+    border-color: map.get($mega-menu, 'mobile', 'featured-link-border');
+  }
+}
+
+.ecl-mega-menu--rtl .ecl-icon--flip-horizontal {
+  transform: rotate(0);
+}
+
+.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-offset: 4px;
+    }
+  }
+}
+
+.ecl-mega-menu__mega,
+.ecl-mega-menu__info,
+.ecl-mega-menu__mega-container {
+  box-sizing: border-box;
+  display: none;
+  flex-direction: column;
+  flex-grow: 1;
+  position: relative;
+}
+
+.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);
+  padding-inline-start: 1.75rem;
+  padding-bottom: var(--s-2xl);
+  padding-inline-end: 1.75rem;
+
+  .ecl-mega-menu__info-title {
+    font: var(--f-l);
+    padding: var(--s-xs) var(--s-m) var(--s-xs) 0;
+  }
+
+  .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-mega-menu__sublink--level-2 {
+    background: transparent;
+    color: var(--c-p);
+
+    &:hover {
+      box-shadow: none;
+      color: var(--c-p-140);
+    }
+  }
+}
+
+.ecl-mega-menu__item--current .ecl-mega-menu__link,
+.ecl-mega-menu__subitem--current > .ecl-mega-menu__sublink {
+  background-color: map.get($mega-menu, 'mobile', 'item-active-background');
+  position: relative;
+}
+
+/* stylelint-disable-next-line order/order */
+@include breakpoints.up('l') {
+  .ecl-mega-menu:not(.ecl-menu--forced-mobile) {
+    border-top: map.get($mega-menu, 'desktop', 'menu-border');
+
+    .ecl-mega-menu__inner {
+      border-top: none;
+    }
+
+    .ecl-mega-menu__list {
+      flex-direction: row;
+      left: 0;
+      right: 0;
+      margin-top: 0;
+      padding: 0;
+    }
+
+    .ecl-mega-menu__wrapper {
+      padding: 0 0 var(--s-2xl);
+      top: 48px;
+    }
+
+    .ecl-mega-menu__item {
+      border-top-width: 0;
+      color: map.get($mega-menu, 'desktop', 'item-color');
+      margin-bottom: 0;
+
+      &:first-of-type {
+        margin-inline-start: 0;
+      }
+    }
+
+    .ecl-mega-menu__item--full {
+      position: static;
+    }
+
+    .ecl-mega-menu__link {
+      background: map.get($mega-menu, 'desktop', 'item-background');
+      box-sizing: border-box;
+      box-shadow: none;
+      border-bottom: none;
+      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');
+      width: auto;
+      z-index: 0;
+
+      &:active {
+        color: map.get($theme, 'color', 'white');
+      }
+
+      &:hover {
+        background: map.get($mega-menu, 'desktop', 'item-background-hover');
+        color: map.get($mega-menu, 'desktop', 'item-color-hover');
+        box-shadow: none;
+        text-decoration: none;
+      }
+
+      &:focus-visible {
+        background-color: map.get(
+          $mega-menu,
+          'desktop',
+          'item-background-focus'
+        );
+        border-radius: 0;
+        color: map.get($mega-menu, 'desktop', 'item-color-focus');
+        outline-color: map.get($theme, 'color', 'white');
+        outline-offset: -8px;
+        outline-width: map.get($mega-menu, 'desktop', 'outline-width');
+      }
+    }
+
+    .ecl-mega-menu__sublink {
+      border-bottom: none;
+    }
+
+    &.ecl-mega-menu--rtl {
+      .ecl-mega-menu__see-all .ecl-icon {
+        transform: rotate(0);
+      }
+    }
+
+    .ecl-mega-menu__item--has-children,
+    .ecl-mega-menu__item--has-container {
+      .ecl-mega-menu__link .ecl-icon {
+        height: calc(var(--s-xs) + 2px);
+        transform: rotate(180deg);
+        width: calc(var(--s-xs) + 2px);
+
+        &:first-of-type {
+          display: flex;
+        }
+
+        &:last-of-type {
+          display: none;
+        }
+      }
+    }
+
+    .ecl-mega-menu__item--current {
+      background-color: map.get(
+        $mega-menu,
+        'desktop',
+        'item-current-background'
+      );
+      box-shadow: map.get($mega-menu, 'desktop', 'item-current-shadow');
+      color: map.get($mega-menu, 'desktop', 'item-current-color');
+      margin-top: map.get($mega-menu, 'desktop', 'item-current-margin');
+
+      .ecl-link__icon {
+        display: inline-flex;
+      }
+
+      &:hover {
+        background-color: map.get(
+          $mega-menu,
+          'desktop',
+          'item-current-background'
+        );
+      }
+
+      .ecl-mega-menu__link:focus-visible {
+        outline-color: var(--c-p);
+      }
+    }
+  }
+
+  .ecl-mega-menu:not(
+      .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);
+      }
+
+      &.ecl-mega-menu__item--expanded {
+        .ecl-mega-menu__link {
+          background-color: map.get($theme, 'color', 'white');
+          color: var(--c-d);
+          z-index: map.get($theme, 'z-index', 'dropdown') + 1;
+        }
+      }
+    }
+  }
+}
+
+/*
+ * Second level
+ */
+.ecl-mega-menu__item--expanded,
+.ecl-mega-menu__subitem--expanded {
+  border-top-width: 0;
+  flex-direction: column;
+  position: relative;
+
+  > .ecl-mega-menu__wrapper,
+  > .ecl-mega-menu__mega,
+  > .ecl-mega-menu__wrapper > .ecl-container > .ecl-mega-menu__mega,
+  > .ecl-mega-menu__mega-container,
+  > .ecl-mega-menu__wrapper > .ecl-container > .ecl-mega-menu__info {
+    display: flex;
+  }
+
+  > .ecl-mega-menu__sublink,
+  > .ecl-mega-menu__sublink.ecl-link--icon {
+    display: none;
+  }
+
+  .ecl-mega-menu__link {
+    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');
+  }
+}
+
+.ecl-mega-menu__inner--expanded
+  .ecl-mega-menu__item:not(.ecl-mega-menu__item--expanded) {
+  display: none;
+}
+
+.ecl-mega-menu__inner--expanded .ecl-mega-menu__link-icon {
+  display: none;
+}
+
+@include breakpoints.down('m') {
+  .ecl-mega-menu--one-panel {
+    .ecl-mega-menu__item--expanded > .ecl-mega-menu__link {
+      font: var(--f-l);
+    }
+  }
+
+  .ecl-mega-menu--two-panels {
+    .ecl-mega-menu__item--expanded > .ecl-mega-menu__link {
+      display: none;
+    }
+
+    .ecl-mega-menu__subitem--expanded > .ecl-mega-menu__sublink {
+      background-color: map.get(
+        $mega-menu,
+        'desktop',
+        'sublink-current-background'
+      );
+      display: flex;
+      margin: 0 calc(-1 * var(--s-xs));
+      overflow: visible;
+
+      &.ecl-mega-menu__parent-link {
+        border: none;
+        cursor: default;
+        font: var(--f-l);
+        margin: 0 calc(-1 * var(--s-xs));
+
+        &::after {
+          background: map.get(
+            $mega-menu,
+            'desktop',
+            'sublink-current-background'
+          );
+          content: ' ';
+          display: block;
+          height: var(--s-xl);
+          position: absolute;
+          left: calc(-1 * var(--s-l));
+          top: 100%;
+          width: calc(100% + var(--s-l));
+        }
+      }
+
+      .ecl-button__icon {
+        display: none;
+      }
+    }
+
+    .ecl-mega-menu__info {
+      display: none !important;
+    }
+
+    .ecl-mega-menu__wrapper {
+      top: 0 !important;
+    }
+  }
+}
+
+.ecl-mega-menu__sublist,
+.ecl-mega-menu__featured-list {
+  list-style: none;
+  list-style-image: url('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7');
+  margin-bottom: var(--s-m);
+  padding-inline-start: 0;
+
+  .ecl-mega-menu__see-all {
+    .ecl-link {
+      border-radius: 0;
+      box-sizing: border-box;
+      color: var(--c-d);
+      font: var(--f-m);
+      margin: 0 var(--s-l);
+      padding: var(--s-xs) 0;
+
+      &:hover {
+        text-decoration: none;
+      }
+
+      &:focus-visible {
+        outline-offset: 2px;
+      }
+
+      .ecl-icon {
+        margin-inline-start: var(--s-m);
+      }
+    }
+  }
+}
+
+.ecl-mega-menu__featured-list {
+  margin: 0;
+  padding: 0;
+}
+
+.ecl-mega-menu__sublink {
+  background: transparent;
+  box-sizing: border-box;
+  border-bottom: 1.5px solid
+    map.get($mega-menu, 'desktop', 'sublink-current-background');
+  border-radius: 0;
+  color: map.get($mega-menu, 'mobile', 'item-color');
+  padding: map.get($mega-menu, 'mobile', 'subitem-padding');
+  position: relative;
+  line-height: map.get($theme, 'line-height-ui', 'xs');
+  min-height: 42px;
+  text-align: initial;
+  width: 100%;
+
+  &.ecl-link--icon:not(.ecl-mega-menu__parent-link) {
+    display: flex;
+    overflow: visible;
+
+    .ecl-link__icon {
+      height: calc(var(--s-s) + 0.5px);
+      padding: 1px 3px;
+    }
+  }
+
+  &:hover {
+    background: transparent;
+    border-color: map.get($mega-menu, 'desktop', 'sublink-current-background');
+    box-shadow: none;
+    color: map.get($mega-menu, 'mobile', 'item-color-hover');
+  }
+
+  &[aria-expanded]:hover {
+    text-decoration: none;
+  }
+
+  &:visited {
+    color: map.get($mega-menu, 'mobile', 'item-color');
+  }
+
+  &--current {
+    background-color: var(--c-n-80);
+    box-shadow: inset 4px 0 0 0 var(--c-p);
+  }
+
+  &:focus-visible {
+    background: transparent;
+    border-color: transparent;
+    color: var(--c-d);
+    outline-color: var(--c-p);
+    outline-offset: -2px;
+    outline-width: 2px;
+  }
+
+  .ecl-icon {
+    align-self: center;
+    flex-shrink: 0;
+    margin-inline-start: auto;
+  }
+}
+
+.ecl-mega-menu__sublist--scrollable {
+  @include with-scrollbar;
+}
+
+.ecl-mega-menu__mega--level-2 {
+  @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__sublist {
+    padding: 0 var(--s-xs);
+  }
+
+  .ecl-mega-menu__sublink {
+    color: var(--c-p);
+
+    &:hover {
+      text-decoration: underline;
+    }
+
+    &:focus-visible {
+      color: var(--c-p) !important;
+    }
+
+    &.ecl-mega-menu__sublink--last {
+      border-bottom: none;
+    }
+
+    .ecl-link__label {
+      margin-inline-end: 0;
+    }
+  }
+
+  .ecl-mega-menu__sublink .ecl-icon {
+    margin-inline-start: var(--s-xs);
+  }
+}
+
+.ecl-mega-menu__featured {
+  background-color: map.get($mega-menu, 'mobile', 'featured-background');
+  border-color: var(--c-n);
+  border-width: 0.5px;
+  flex-direction: column;
+  padding: 0 var(--s-xs);
+
+  .ecl-mega-menu__featured-picture {
+    display: block;
+
+    .ecl-mega-menu__featured-image {
+      aspect-ratio: 21/9;
+      display: block;
+      margin-inline-start: var(--s-l);
+      max-width: 15.25rem;
+    }
+  }
+
+  .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);
+  }
+
+  .ecl-mega-menu__featured-content {
+    padding: 0 var(--s-m) var(--s-xl);
+  }
+
+  .ecl-mega-menu__featured-list {
+    .ecl-mega-menu__featured-list__item {
+      line-height: map.get($theme, 'line-height-ui', 'xs');
+      margin-bottom: 0;
+
+      .ecl-link {
+        border-radius: 0;
+        box-sizing: border-box;
+        color: var(--c-p);
+        display: block;
+        outline-offset: -2px;
+        padding: var(--s-m) var(--s-l);
+        width: 100%;
+
+        &:hover {
+          color: var(--c-p);
+        }
+      }
+    }
+  }
+}
+
+.ecl-mega-menu--rtl {
+  .ecl-mega-menu__see-all .ecl-icon,
+  .ecl-mega-menu__info-link .ecl-icon {
+    transform: rotate(0);
+  }
+
+  .ecl-mega-menu__see-all .ecl-link__label {
+    padding-inline-start: var(--s-m);
+  }
+}
+
+@include breakpoints.up('l') {
+  .ecl-mega-menu:not(
+      .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;
+        content: ' ';
+        display: block;
+        height: 1px;
+        position: absolute;
+        width: 98%;
+        margin-inline-start: 1%;
+        bottom: var(--s-m);
+      }
+    }
+
+    .ecl-mega-menu__list {
+      margin: 0;
+      padding: 0;
+    }
+
+    .ecl-mega-menu__item--expanded,
+    .ecl-mega-menu__subitem--expanded {
+      position: static;
+    }
+
+    .ecl-mega-menu__item
+      > .ecl-mega-menu__wrapper
+      > .ecl-container
+      > .ecl-mega-menu__mega,
+    .ecl-mega-menu__item > .ecl-mega-menu__mega-container,
+    .ecl-mega-menu__item
+      > .ecl-mega-menu__wrapper
+      > .ecl-container
+      > .ecl-mega-menu__info {
+      background-color: map.get($theme, 'color', 'white');
+      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');
+      box-shadow: map.get($mega-menu, 'desktop', 'mega-shadow');
+      display: flex;
+      flex-direction: column;
+      left: 0;
+      position: absolute;
+      transition-property: opacity;
+      transition-duration: 0.3s;
+      transition-timing-function: ease;
+      opacity: 0;
+      visibility: hidden;
+      z-index: map.get($theme, 'z-index', 'dropdown');
+    }
+
+    .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);
+      position: static;
+      width: auto;
+    }
+
+    &.ecl-mega-menu--rtl {
+      .ecl-mega-menu__item
+        > .ecl-mega-menu__wrapper
+        > .ecl-container
+        > [data-ecl-mega-menu-mega],
+      .ecl-mega-menu__item > .ecl-mega-menu__mega-container {
+        left: auto;
+        right: 0;
+      }
+
+      .ecl-mega-menu__mega--level-2,
+      .ecl-mega-menu__featured {
+        left: auto;
+        right: 100%;
+      }
+    }
+
+    .ecl-mega-menu__mega {
+      width: 21rem;
+    }
+
+    .ecl-mega-menu__item > .ecl-mega-menu__mega-container {
+      background-color: map.get($theme, 'color', 'white');
+      top: 100%;
+      width: 100%;
+
+      .ecl-mega-menu__mega-container-scrollable {
+        height: 100%;
+        margin: 0 calc(-1 * var(--s-m));
+
+        @include with-scrollbar;
+      }
+    }
+
+    .ecl-mega-menu__info-link {
+      margin-top: 0;
+    }
+
+    .ecl-mega-menu__item {
+      justify-content: center;
+    }
+
+    .ecl-mega-menu__inner--expanded
+      .ecl-mega-menu__item:not(.ecl-mega-menu__item--expanded),
+    .ecl-mega-menu__subitem--expanded > .ecl-mega-menu__sublink {
+      display: flex;
+    }
+
+    .ecl-mega-menu__item.ecl-mega-menu__item--expanded
+      > .ecl-mega-menu__wrapper
+      > .ecl-container,
+    .ecl-mega-menu__item--has-container.ecl-mega-menu__item--expanded,
+    .ecl-mega-menu__subitem.ecl-mega-menu__subitem--expanded {
+      > .ecl-mega-menu__mega-container,
+      > .ecl-mega-menu__mega,
+      > .ecl-mega-menu__info {
+        transition-property: opacity;
+        opacity: 1;
+        visibility: visible;
+      }
+
+      .ecl-mega-menu__link {
+        border-bottom: 0;
+      }
+
+      .ecl-mega-menu__info-content {
+        margin-top: var(--s-2xs);
+      }
+
+      > .ecl-mega-menu__info {
+        box-sizing: border-box;
+        box-shadow: 0px 4px 10px 0px rgba(224, 229, 245, 0.42);
+      }
+
+      .ecl-mega-menu__subitem--expanded .ecl-mega-menu__featured {
+        background: map.get($theme, 'color', 'white');
+        display: flex;
+        margin-bottom: 0;
+
+        .ecl-mega-menu__featured-title {
+          border-top: none;
+          padding-inline-start: 0;
+          padding-top: 0;
+        }
+
+        .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);
+        }
+      }
+    }
+
+    .ecl-mega-menu__sublist {
+      border-color: map.get($theme, 'color', 'white');
+      border-width: 2px;
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+      margin: 0;
+      padding-inline-start: 0;
+
+      @include with-scrollbar;
+
+      .ecl-mega-menu__sublist {
+        margin-inline-start: var(--s-m);
+      }
+
+      .ecl-mega-menu__see-all {
+        display: block;
+        flex-grow: 0;
+        margin-top: auto;
+        position: relative;
+
+        .ecl-link {
+          border-bottom: 1px solid transparent;
+          margin: calc(var(--s-xs) + 2px) 0 calc(var(--s-xs) + 2px) var(--s-s);
+          padding: 0;
+          outline-offset: 2px;
+
+          .ecl-link__icon {
+            margin-inline-start: var(--s-xs);
+          }
+
+          &:hover {
+            text-decoration: underline;
+          }
+        }
+
+        &::before {
+          content: '';
+          display: block;
+          height: 1px;
+          position: absolute;
+          left: var(--s-s);
+          top: calc(-1 * var(--s-s));
+          width: calc(100% - (var(--s-l) * 2));
+          background: map.get($mega-menu, 'desktop', 'see-all-divider');
+        }
+      }
+    }
+
+    .ecl-mega-menu__mega--level-2 {
+      left: 100%;
+      top: 0;
+      background: map.get($mega-menu, 'global', 'greysh-background');
+      height: 100%;
+      margin-inline-end: 0;
+      margin-inline-start: 0;
+      margin-top: 0;
+      position: absolute;
+      visibility: hidden;
+      opacity: 0;
+      overflow-y: visible;
+      transition-timing-function: ease;
+      transition-property: opacity;
+      transition-duration: 0.3s;
+
+      > .ecl-mega-menu__sublist {
+        border: none;
+        position: relative;
+      }
+
+      .ecl-mega-menu__subitem {
+        &--current .ecl-mega-menu__sublink,
+        &.ecl-mega-menu__subitem--current-page .ecl-mega-menu__sublink {
+          background-color: transparent;
+          box-shadow: none;
+        }
+      }
+
+      .ecl-mega-menu__sublink {
+        padding: map.get($mega-menu, 'desktop', 'sublink-level2-padding');
+
+        .ecl-link__label {
+          margin-inline-end: 0;
+        }
+
+        &:hover {
+          text-decoration: underline;
+        }
+
+        &:focus-visible {
+          outline-color: var(--c-p);
+        }
+      }
+    }
+
+    .ecl-mega-menu__mega--rtl {
+      left: auto;
+      right: 0;
+    }
+
+    .ecl-mega-menu__subitem {
+      align-items: center;
+      border-top-width: 0;
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+      width: 100%;
+    }
+
+    .ecl-mega-menu__sublink {
+      background: transparent;
+      break-inside: avoid-column;
+      border-inline-start: 4px solid transparent;
+      margin: 0;
+      padding: map.get($mega-menu, 'desktop', 'sublink-padding');
+      white-space: normal;
+      width: 100%;
+
+      > .ecl-button__container {
+        width: 100%;
+      }
+
+      &:hover {
+        background-color: map.get(
+          $mega-menu,
+          'desktop',
+          'sublink-current-background'
+        );
+      }
+
+      &:focus-visible {
+        border-color: transparent;
+        color: var(--c-d);
+        outline-color: var(--c-p);
+        outline-width: 2px;
+      }
+    }
+
+    .ecl-mega-menu__subitem[aria-expanded] > .ecl-mega-menu__sublink:hover {
+      background-color: var(--c-n-40);
+      box-shadow: none;
+      text-decoration: none;
+    }
+
+    .ecl-mega-menu__subitem--current {
+      > .ecl-mega-menu__sublink,
+      > .ecl-mega-menu__sublink:hover,
+      > .ecl-mega-menu__sublink:focus-visible {
+        background-color: map.get(
+          $mega-menu,
+          'desktop',
+          'sublink-current-background'
+        );
+        border-color: var(--c-p);
+      }
+    }
+  }
+
+  .ecl-mega-menu__featured {
+    box-sizing: border-box;
+    display: none;
+    font: var(--f-m);
+    height: 100%;
+    margin: 0;
+    padding-inline-start: 0;
+    position: absolute;
+    left: calc(100% + var(--s-m));
+    width: 16.25rem;
+    top: 0;
+
+    .ecl-mega-menu__featured-scrollable {
+      @include with-scrollbar;
+    }
+
+    .ecl-mega-menu__featured-picture {
+      display: block;
+
+      .ecl-mega-menu__featured-image {
+        aspect-ratio: 21/9;
+        display: block;
+        margin-inline-start: var(--s-s);
+        max-width: calc(100% - var(--s-s));
+      }
+    }
+
+    .ecl-mega-menu__featured-content {
+      padding: 0 var(--s-m) var(--s-xl);
+    }
+
+    .ecl-mega-menu__featured-title {
+      font: var(--f-m);
+      margin-bottom: calc(var(--s-xs) + 2px);
+      margin-top: calc(var(--s-xs) + 2px);
+      margin-inline-start: var(--s-s);
+    }
+  }
+}
+
+@include breakpoints.up('xl') {
+  .ecl-mega-menu:not(
+      .ecl-mega-menu--forced-mobile,
+      .ecl-mega-menu--forced-close
+    ) {
+    .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);
+        margin-bottom: 0;
+        padding-inline-start: var(--s-m);
+        padding-inline-end: var(--s-xl);
+        position: absolute;
+        width: 15.875rem;
+        z-index: 16;
+
+        &::after {
+          content: '';
+          position: absolute;
+          top: 0;
+          right: 0;
+          bottom: 0;
+          width: 10px;
+          box-shadow: 4px 0px 10px 0px rgba(224, 229, 245, 0.5);
+          pointer-events: none;
+        }
+
+        .ecl-mega-menu__info-title {
+          display: block;
+          margin-top: var(--s-xs);
+          padding: 0;
+        }
+
+        .ecl-mega-menu__info-content {
+          margin-bottom: var(--s-l);
+          margin-top: var(--s-m);
+        }
+      }
+
+      .ecl-mega-menu__mega {
+        width: 18.75rem;
+      }
+
+      .ecl-mega-menu__featured {
+        width: 14.375rem;
+      }
+
+      > .ecl-mega-menu__mega {
+        left: calc(15.875rem + var(--s-xl));
+      }
+    }
+
+    &.ecl-mega-menu--rtl
+      .ecl-mega-menu__item--expanded
+      > .ecl-mega-menu__wrapper
+      > .ecl-container
+      > .ecl-mega-menu__mega {
+      right: calc(14.375rem + var(--s-xl));
+    }
+  }
+}
+
+@include breakpoints.up('xl') {
+  .ecl-mega-menu:not(
+      .ecl-mega-menu--forced-mobile,
+      .ecl-mega-menu--forced-close
+    ) {
+    .ecl-mega-menu__wrapper::before {
+      width: 96%;
+      margin-inline-start: 2%;
+    }
+  }
+}
+
+.ecl-mega-menu-prevent-scroll {
+  position: fixed;
+  overflow-y: scroll;
+  width: 100%;
+}