/* stylelint-disable no-descending-specificity, length-zero-no-unit */

/**
 * Menu
 * @define menu
 */

@use 'sass:map';
@use '@ecl/vanilla-layout-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%;
}
