/* stylelint-disable no-descending-specificity */

/**
 * Menu
 * @define menu
 */

@use 'sass:map';
@use '@ecl/vanilla-layout-grid/mixins/breakpoints';

// Exposed variables
$theme: null !default;
$menu: null !default;

/*
 * Menu structure
 */
.ecl-menu {
  background: map.get($menu, 'mobile', 'menu-background');
  box-shadow: map.get($menu, 'global', 'shadow');
  color: map.get($menu, 'mobile', 'color');
  margin: 0;
  padding-bottom: var(--s-xs);
  padding-top: var(--s-xs);
}

.ecl-menu__container {
  display: flex;
  min-height: map.get($theme, 'line-height', '2xl');
  position: initial; // Needed for full screen overlay
}

.ecl-menu__banner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  order: 1;
}

.ecl-menu__open {
  align-items: center;
  align-self: center;
  border-radius: map.get($menu, 'global', 'border-radius');
  box-sizing: border-box;
  cursor: pointer;
  color: map.get($menu, 'mobile', 'hamburger-color');
  display: flex;
  flex-direction: column;
  font: var(--f-xs);
  margin-inline-start: auto;
  order: 2;
  padding: map.get($menu, 'mobile', 'open-padding');
  text-decoration: none;

  &:hover,
  &:focus-visible,
  &:active,
  &:visited {
    color: currentcolor;
  }

  &:hover {
    text-decoration: underline;
  }

  &:focus-visible {
    outline-offset: -2px;
  }

  .ecl-icon:last-of-type {
    display: none;
  }
}

.ecl-menu[aria-expanded='true'] .ecl-menu__open {
  background-color: map.get($menu, 'mobile', 'open-background-active');

  .ecl-icon:first-of-type {
    display: none;
  }

  .ecl-icon:last-of-type {
    display: block;
  }
}

.ecl-menu__cta {
  margin-top: var(--s-s);
}

/* stylelint-disable-next-line order/order */
@include breakpoints.up('l') {
  .ecl-menu:not(.ecl-menu--forced-mobile) {
    background: map.get($menu, 'desktop', 'menu-background');
    padding-bottom: 0;
    padding-top: 0;

    .ecl-menu__container {
      display: block;
    }

    // For the external icon
    .ecl-menu__link .ecl-icon {
      flex-shrink: 0;
    }

    .ecl-menu__site-name,
    .ecl-menu__inner-header,
    .ecl-menu__open,
    .ecl-menu__cta {
      display: none;
    }
  }
}

/*
 * Inner menu
 */
.ecl-menu__inner {
  background: map.get($menu, 'mobile', 'content-background');
  bottom: 0;
  box-shadow: map.get($menu, 'mobile', 'content-shadow');
  display: none;
  overflow-y: auto;
  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;
  }
}

// Expanded
.ecl-menu[aria-expanded='true'] .ecl-menu__inner {
  display: block;
  right: 0;
}

.ecl-menu__inner-header {
  align-items: center;
  background: map.get($menu, 'mobile', 'header-background');
  box-shadow: map.get($menu, 'mobile', 'header-shadow');
  color: map.get($menu, 'mobile', 'header-color');
  display: flex;
  flex-flow: row-reverse;
  height: map.get($menu, 'mobile', 'header-height');
  padding: 0;
  position: sticky;
  top: 0;
  z-index: map.get($theme, 'z-index', 'modal') + 2;
}

.ecl-menu__title {
  font: map.get($menu, 'mobile', 'header-font');
  padding-inline-start: var(--s-m);
}

.ecl-menu__close {
  align-items: center;
  border-radius: map.get($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($menu, 'mobile', 'header-background-hover');
    border-color: transparent;
    color: currentcolor;
  }

  &:focus-visible {
    color: currentcolor;
    border-color: currentcolor;
    outline-color: map.get($menu, 'mobile', 'header-outline-color');
  }
}

.ecl-menu__back {
  border-radius: map.get($menu, 'global', 'border-radius');
  cursor: pointer;
  color: currentcolor;
  display: none;
  font: map.get($menu, 'mobile', 'header-font');
  text-decoration: none;
  width: 100%;

  &:hover {
    background-color: map.get($menu, 'mobile', 'header-background-hover');
    border-color: map.get($menu, 'mobile', 'header-border-hover');
    color: map.get($menu, 'mobile', 'header-color-hover');
  }

  &:focus-visible {
    color: currentcolor;
    border-color: currentcolor;
    outline-color: map.get($menu, 'mobile', 'header-outline-color');
  }
}

// Expanded
@if map.has-key($menu, 'mobile', 'hide-header') {
  .ecl-menu__inner-header {
    flex-flow: row;
  }

  .ecl-menu__inner:not(.ecl-menu__inner--expanded) .ecl-menu__inner-header,
  .ecl-menu__close {
    display: none;
  }
}

.ecl-menu__inner--expanded .ecl-menu__title {
  display: none;
}

.ecl-menu__inner--expanded .ecl-menu__back {
  display: block;
}

/* stylelint-disable-next-line order/order */
@include breakpoints.up('s') {
  .ecl-menu__inner {
    right: -25rem;
    width: 25rem;
  }

  .ecl-menu__overlay {
    background-color: map.get($menu, 'mobile', 'overlay-background');
    content: '';
    display: none;
    height: 100%;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    width: 100%;
    z-index: map.get($theme, 'z-index', 'modal') + 2;
  }

  .ecl-menu[aria-expanded='true'] .ecl-menu__overlay {
    display: block;
  }
}

/* stylelint-disable-next-line order/order */
@include breakpoints.up('l') {
  .ecl-menu:not(.ecl-menu--forced-mobile) {
    .ecl-menu__inner {
      background-color: transparent;
      box-shadow: none;
      display: block;
      overflow-y: visible;
      position: relative;
      right: 0;
      transition: none;
      width: 100%;
      z-index: map.get($theme, 'z-index', 'modal');
    }

    .ecl-menu__inner--has-overflow {
      overflow-x: clip;
    }

    .ecl-menu__overlay {
      display: none;
    }
  }
}

/*
 * First level
 */
.ecl-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: 0;
  padding-inline-start: 0;
  position: relative;
  z-index: map.get($theme, 'z-index', 'modal') + 1;
}

.ecl-menu__item {
  border-top: map.get($menu, 'mobile', 'item-border');
  display: flex;
  position: relative;
}

.ecl-menu__link {
  align-items: center;
  box-sizing: content-box;
  color: map.get($menu, 'mobile', 'item-color');
  display: inline-flex;
  flex-grow: 1;
  font: map.get($menu, 'mobile', 'item-font');
  justify-content: space-between;
  padding: map.get($menu, 'mobile', 'item-padding');
  position: relative;

  &:hover {
    color: map.get($menu, 'mobile', 'item-color-hover');
  }

  &:visited {
    color: map.get($menu, 'mobile', 'item-color');
  }

  &:focus-visible {
    outline-offset: -2px;
  }
}

.ecl-menu__item--current .ecl-menu__link {
  background-color: map.get($menu, 'mobile', 'item-active-background');
  box-shadow: inset 4px 0 0 0 map.get($menu, 'mobile', 'item-active-border');
}

.ecl-menu__item--current .ecl-menu__button-caret {
  background-color: map.get($menu, 'mobile', 'caret-active-background');

  &:focus-visible {
    background-color: map.get($menu, 'mobile', 'caret-active-background');
  }

  &:hover {
    background-color: map.get($menu, 'mobile', 'caret-active-background-hover');
  }
}

.ecl-menu__button-caret {
  align-self: stretch;
  background-color: map.get($menu, 'mobile', 'caret-background');
  border-radius: 0;
  color: map.get($menu, 'mobile', 'caret-color');
  cursor: pointer;
  display: inline-flex;
  margin-inline-start: 2px;
  z-index: 0;

  .ecl-button__container {
    align-self: center;
  }

  .ecl-button__icon {
    fill: currentcolor;
    flex-shrink: 0;
    height: map.get($theme, 'icon', 'xs');
    transition: none;
    transition-property: transform, fill;
    transform: rotate(90deg);
    width: map.get($theme, 'icon', 'xs');
  }

  &:hover {
    background-color: map.get($menu, 'mobile', 'caret-background-hover');
  }

  &:focus-visible {
    background-color: map.get($menu, 'mobile', 'caret-background');
    color: map.get($menu, 'mobile', 'caret-color');
  }
}

.ecl-menu--rtl {
  .ecl-menu__button-caret .ecl-button__icon {
    transform: rotate(-90deg);
  }

  .ecl-menu__see-all .ecl-icon {
    transform: rotateZ(0);
  }

  .ecl-menu__item--current .ecl-menu__link,
  .ecl-menu__subitem--current .ecl-menu__sublink {
    box-shadow: inset -4px 0 0 0 map.get($menu, 'mobile', 'item-active-border');
  }
}

/* stylelint-disable-next-line order/order */
@include breakpoints.up('l') {
  .ecl-menu:not(.ecl-menu--forced-mobile) {
    border-top: map.get($menu, 'desktop', 'menu-border');

    .ecl-menu__list {
      flex-direction: row;
      left: 0;
      right: 0;
      transition:
        left 0.5s,
        right 0.5s;
    }

    .ecl-menu__item {
      border-top-width: 0;
      color: map.get($menu, 'desktop', 'item-color');
      margin-inline-start: -1px;
      padding-inline-end: 1px;

      &:first-of-type {
        margin-inline-start: 0;
      }

      &:last-of-type {
        padding-inline-end: 0;
      }

      &:not(.ecl-menu__items-previous, .ecl-menu__items-next):hover,
      &:not(.ecl-menu__item--current):focus-within {
        background-color: map.get($menu, 'desktop', 'item-background-hover');
        box-shadow: map.get($menu, 'desktop', 'item-shadow-hover');
        color: map.get($menu, 'desktop', 'item-color-hover');
      }

      &:hover .ecl-menu__link,
      &:hover .ecl-menu__button-caret,
      &:focus-within .ecl-menu__link,
      &:focus-within .ecl-menu__button-caret {
        color: map.get($menu, 'desktop', 'item-color-hover');
      }
    }

    // Separator
    .ecl-menu__item::before,
    .ecl-menu__item:last-child::after {
      content: '';
      background-color: map.get($menu, 'desktop', 'separator-color');
      display: block;
      flex-shrink: 0;
      margin-bottom: var(--s-xs);
      margin-top: var(--s-xs);
      width: 1px;
    }

    // Hide separators in some cases
    .ecl-menu__item--current:not(.ecl-menu__items-next)::before,
    .ecl-menu__item--current
      + .ecl-menu__item:not(.ecl-menu__items-next)::before,
    .ecl-menu__item:hover:not(.ecl-menu__items-next)::before,
    .ecl-menu__item:hover + .ecl-menu__item:not(.ecl-menu__items-next)::before,
    .ecl-menu__item:focus-within:not(.ecl-menu__items-next)::before,
    .ecl-menu__item:focus-within
      + .ecl-menu__item:not(.ecl-menu__items-next)::before,
    .ecl-menu__item:last-child:hover::after {
      background-color: transparent;
    }

    .ecl-menu__item--full {
      position: static;
    }

    .ecl-menu__link {
      box-sizing: border-box;
      box-shadow: none;
      color: map.get($menu, 'desktop', 'item-color');
      display: inline-flex;
      font: var(--f-m);
      line-height: map.get($menu, 'desktop', 'link-line-height');
      padding: map.get($menu, 'desktop', 'link-padding');
      width: auto;
      z-index: 0;

      &:hover {
        color: map.get($menu, 'desktop', 'item-color-hover');
      }

      &:focus-visible {
        background-color: map.get($menu, 'desktop', 'item-background-focus');
        color: map.get($menu, 'desktop', 'item-color-focus');
        outline-offset: -4px;
      }
    }

    // Previous / Next items
    .ecl-menu__items-previous {
      border-radius: map.get($menu, 'global', 'border-radius') 0 0
        map.get($menu, 'global', 'border-radius');
      left: 0;

      &::before {
        display: none;
      }

      &:not(.ecl-menu__item--current)::after {
        background-color: map.get($menu, 'desktop', 'overflow-separator-color');
        content: '';
        display: block;
        height: calc(
          100% + 2 * #{map.get($menu, 'desktop', 'overflow-separator-offset')}
        );
        right: -#{map.get($menu, 'desktop', 'overflow-separator-offset')};
        margin: 0;
        position: absolute;
        top: -#{map.get($menu, 'desktop', 'overflow-separator-offset')};
        width: map.get($menu, 'desktop', 'overflow-separator-width');
      }
    }

    .ecl-menu__items-next {
      border-radius: 0 map.get($menu, 'global', 'border-radius')
        map.get($menu, 'global', 'border-radius') 0;
      right: 0;

      &::after {
        display: none;
      }

      &:not(.ecl-menu__item--current)::before {
        background-color: map.get($menu, 'desktop', 'overflow-separator-color');
        content: '';
        display: block;
        height: calc(
          100% + 2 * #{map.get($menu, 'desktop', 'overflow-separator-offset')}
        );
        left: -#{map.get($menu, 'desktop', 'overflow-separator-offset')};
        margin: 0;
        position: absolute;
        top: -#{map.get($menu, 'desktop', 'overflow-separator-offset')};
        width: map.get($menu, 'desktop', 'overflow-separator-width');
      }
    }

    .ecl-menu__items-previous,
    .ecl-menu__items-next {
      background-color: map.get($menu, 'desktop', 'overflow-background');
      border: map.get($menu, 'desktop', 'overflow-border');
      color: map.get($menu, 'desktop', 'overflow-color');
      display: none;
      height: 100%;
      margin: 0;
      padding: 0;
      position: absolute;
      top: 0;
      z-index: map.get($theme, 'z-index', 'modal') + 2;

      &:hover {
        border: map.get($menu, 'desktop', 'overflow-border-hover');
        color: map.get($menu, 'desktop', 'overflow-color-hover');
        background-color: map.get(
          $menu,
          'desktop',
          'overflow-background-hover'
        );
      }

      &.ecl-menu__item--current {
        &:hover {
          color: map.get($menu, 'desktop', 'overflow-current-color-hover');
          background-color: map.get(
            $menu,
            'desktop',
            'overflow-current-background-hover'
          );
        }
      }
    }

    .ecl-menu__item:not(.ecl-menu__item--has-children) .ecl-menu__link {
      padding-right: var(--s-xs);
    }

    .ecl-menu__button-caret {
      background: transparent;
      border-width: 0;
      color: map.get($menu, 'desktop', 'item-color');
      margin-inline-start: 0;
      padding: map.get($menu, 'desktop', 'caret-padding');

      .ecl-button__icon {
        fill: currentcolor;
        transform: rotate(180deg);
      }

      &:hover {
        box-shadow: none;
      }

      &:focus-visible {
        background-color: map.get($menu, 'desktop', 'item-background-focus');
        color: map.get($menu, 'desktop', 'item-color-focus');
        outline: 2px solid map.get($menu, 'desktop', 'caret-focus-outline');
        outline-offset: -4px;

        .ecl-button__icon {
          fill: currentcolor;
        }
      }
    }

    .ecl-menu__item--current {
      background-color: map.get($menu, 'desktop', 'item-current-background');
      box-shadow: map.get($menu, 'desktop', 'item-current-shadow');
      color: map.get($menu, 'desktop', 'item-current-color');
      margin-top: map.get($menu, 'desktop', 'item-current-margin');

      &:focus-within {
        background-color: map.get(
          $menu,
          'desktop',
          'item-current-background-focus'
        );
      }
    }

    .ecl-menu__item--current .ecl-menu__link,
    .ecl-menu__item--current .ecl-menu__button-caret,
    .ecl-menu__link:active {
      background-color: transparent;
      color: currentcolor;
    }
  }

  .ecl-menu:not(.ecl-menu--forced-mobile, .ecl-menu--forced-close) {
    .ecl-menu__item:not(.ecl-menu__items-previous, .ecl-menu__items-next) {
      &[aria-expanded='true'] .ecl-button__icon {
        transform: rotate(0);
      }

      &[aria-expanded='true'] {
        background-color: map.get($theme, 'color', 'white');

        .ecl-menu__link {
          background-color: map.get($theme, 'color', 'white');
          margin-bottom: -2px;
          padding: map.get($menu, 'desktop', 'link-expanded-padding');
          z-index: map.get($theme, 'z-index', 'dropdown') + 1;
        }

        .ecl-menu__button-caret {
          background-color: map.get($theme, 'color', 'white');
          margin-bottom: -2px;
          padding-bottom: 2px;
          z-index: map.get($theme, 'z-index', 'dropdown') + 1;
        }
      }
    }
  }
}

/*
 * Second level
 */
.ecl-menu__item--expanded {
  border-top-width: 0;
  flex-direction: column;

  .ecl-menu__link {
    background-color: transparent;
    border-bottom: map.get($menu, 'mobile', 'subtitle-border');
    box-shadow: none;
    font: map.get($menu, 'mobile', 'subtitle-font');
    font-weight: map.get($menu, 'mobile', 'subtitle-font-weight');
  }
}

.ecl-menu__item--expanded .ecl-menu__button-caret {
  display: none;
}

.ecl-menu__inner--expanded .ecl-menu__item:not(.ecl-menu__item--expanded) {
  display: none;
}

.ecl-menu__inner--expanded .ecl-menu__link-icon {
  display: none;
}

.ecl-menu__mega {
  box-sizing: border-box;
  display: none;
  flex-direction: column;
  flex-grow: 1;
  position: relative;
}

.ecl-menu__item--expanded .ecl-menu__mega {
  display: flex;
}

.ecl-menu__sublist {
  list-style: none;
  list-style-image: url('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7');
  margin: 0;
  padding: 0;
}

.ecl-menu__subitem {
  border-top: map.get($menu, 'mobile', 'item-border');
}

.ecl-menu__sublink {
  color: map.get($menu, 'mobile', 'item-color');
  display: block;
  font: map.get($menu, 'mobile', 'item-font');
  padding: map.get($menu, 'mobile', 'subitem-padding');
  position: relative;

  &:hover {
    color: map.get($menu, 'mobile', 'item-color-hover');
  }

  &:visited {
    color: map.get($menu, 'mobile', 'item-color');
  }

  &:focus-visible {
    outline-offset: -2px;
  }
}

.ecl-menu__subitem--current .ecl-menu__sublink {
  background-color: map.get($menu, 'mobile', 'item-active-background');
  box-shadow: inset 4px 0 0 0 map.get($menu, 'mobile', 'item-active-border');
}

.ecl-menu__see-all {
  margin-top: var(--s-3xl);
}

/* stylelint-disable-next-line order/order */
@include breakpoints.up('l') {
  .ecl-menu:not(.ecl-menu--forced-mobile, .ecl-menu--forced-close) {
    .ecl-menu__mega {
      background-color: map.get($theme, 'color', 'white');
      border: map.get($menu, 'desktop', 'mega-border');
      border-radius: 0 0 map.get($menu, 'global', 'border-radius')
        map.get($menu, 'global', 'border-radius');
      box-shadow: map.get($menu, 'desktop', 'mega-shadow');
      display: flex;
      left: 0;
      min-width: 100%;
      padding: map.get($menu, 'desktop', 'mega-padding');
      position: absolute;
      top: 100%;
      transition-property: visibility;
      visibility: hidden;
      z-index: map.get($theme, 'z-index', 'dropdown');

      // Extra spacing to prevent hover issues
      &::before {
        content: '';
        display: block;
        height: calc(100% + var(--s-l));
        left: calc(-1 * var(--s-l));
        position: absolute;
        top: 0;
        width: calc(100% + var(--s-l) + var(--s-l));
      }
    }

    .ecl-menu__item--full .ecl-menu__mega {
      left: 0;
      right: 0;
    }

    .ecl-menu__item[aria-expanded='true'] .ecl-menu__mega {
      transition-property: visibility;
      visibility: visible;
    }

    .ecl-menu__mega--rtl {
      left: auto;
      right: 0;
    }

    // Manage column display
    .ecl-menu__sublist {
      display: block;
      column-gap: map.get($menu, 'desktop', 'mega-column-gap');
      column-rule: map.get($menu, 'desktop', 'mega-column-border');
    }

    .ecl-menu__item--col1 .ecl-menu__sublist {
      column-count: 1;
    }

    .ecl-menu__item--col2 .ecl-menu__sublist {
      column-count: 2;
    }

    .ecl-menu__item--col3 .ecl-menu__sublist {
      column-count: 3;
    }

    .ecl-menu__item--full .ecl-menu__sublist {
      column-count: 4;
    }

    .ecl-menu__subitem {
      align-items: center;
      border-top-width: 0;
      box-sizing: border-box;
      display: inline-flex;
      margin: 0;
      min-width: 13.56rem; // Written in the specs
      padding: 0;
      width: 100%;
    }

    .ecl-menu__sublink {
      break-inside: avoid-column;
      font: var(--f-m);
      margin: 0;
      padding: map.get($menu, 'desktop', 'sublink-padding');
      white-space: normal;
      width: 100%;
    }

    .ecl-menu__subitem--current .ecl-menu__sublink {
      background-color: map.get($menu, 'desktop', 'sublink-current-background');
      box-shadow: map.get($menu, 'desktop', 'sublink-current-shadow');
    }

    .ecl-menu__see-all {
      display: none;
    }
  }
}

// Hack to prevent transition issue on page load on chrome
.ecl-menu--transition .ecl-menu__inner {
  transition: right 375ms;
}

@include breakpoints.up('l') {
  .ecl-menu:not(.ecl-menu--forced-mobile).ecl-menu--transition {
    .ecl-menu__item,
    .ecl-menu__item::before,
    .ecl-menu__item::after,
    .ecl-menu__link,
    .ecl-menu__button-caret,
    .ecl-button__icon,
    .ecl-menu__mega {
      transition-delay: 0.25s;
    }
  }
}

.no-scroll {
  overflow: hidden;
}
