/*------------------------------------------------------------
NAVIGATION
====================================*/

/* Variables Custom */
$menu-picto-width: 5rem !default;
$menu-picto-height: 5rem !default;
$menu-picto-bg: $gray-100 !default;

$menu-picto-icon-width: 2.1rem !default;
$menu-picto-icon-height: 1.6rem !default;
$menu-picto-icon-color: $primary !default;

$menu-picto-font-size: 0.9rem !default;
$menu-picto-font-weight: $font-weight-normal !default;
$menu-picto-color: $dark !default;

// Menu
$menu-bg: $white !default; // Couleur du background du menu principal (mobile et desktop)
$menu-submenu-col: 3 !default; // Nombre de colonne présente en sous menu
$menu-submenu-padding-y: 4rem !default;
$menu-submenu-padding-x: 1.5rem !default;

// Item
$menu-item-border-color: $gray-400 !default; // Couleur du trait sous chaque ligne dans le menu mobile
$menu-item-border-width: 0.1rem !default; // Epaisseur du trait sous chaque ligne dans le menu mobile
$menu-item-icon-width: 5.2rem !default; // taille de la flèche item dans le menu mobile
$menu-item-icon-color: $primary !default; // Couleur de la flèche item dans le menu mobile
$menu-item-icon: str-replace(url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='18' height='9' viewBox='0 0 18 9'%3E%3Cpath fill='#{$menu-item-icon-color}' d='M9,9,0,0H0L9,5.377,18,0h0Z' transform='translate(18 9) rotate(180)'/%3E%3C/svg%3E%0A"), "#", "%23") !default;
$menu-item-padding-y: 1.5rem !default; // padding d'un item dans le menu mobile

// Back menu
$menu-back-icon-bg: $primary !default; // Couleur de fond de la flèche de retour dans le menu mobile
$menu-back-icon-color: $white !default; // Couleur de la flèche de retour dans le menu mobile
$menu-back-icon: str-replace(url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='18' height='9' viewBox='0 0 18 9'%3E%3Cpath fill='#{$menu-back-icon-color}' d='M9,9,0,0H0L9,5.377,18,0h0Z' transform='translate(18 9) rotate(180)'/%3E%3C/svg%3E%0A"), "#", "%23") !default;
$menu-back-link-bg: $light !default; // Couleur du background du texte pour le retour dans le menu mobile

// See all menu
$menu-see-all-font-family : $font-family-sans-serif !default;
$menu-see-all-font-size : 1.3rem !default;
$menu-see-all-font-weight : $font-weight-light !default;
$menu-see-all-color : $gray-600 !default;
$menu-see-all-color-hover : $primary !default;

// Niv 1
$menu-lvl1-font-family : $font-family-sans-serif !default;
$menu-lvl1-font-size : 1.4rem !default;
$menu-lvl1-font-weight : $font-weight-sbold !default;
$menu-lvl1-color : $black !default;
$menu-lvl1-color-hover : $primary !default;
$menu-lvl1-padding-y-desktop : 0.7rem !default;

// Niv 2
$menu-lvl2-font-family : $font-family-serif !default;
$menu-lvl2-font-size : 1.5rem !default;
$menu-lvl2-font-weight : $font-weight-medium !default;
$menu-lvl2-color : $primary !default;
$menu-lvl2-color-hover : $primary-hover !default;

// Niv 3
$menu-lvl3-font-family : $font-family-sans-serif !default;
$menu-lvl3-font-size : 1.3rem !default;
$menu-lvl3-font-weight : $font-weight-normal !default;
$menu-lvl3-color : $black !default;
$menu-lvl3-color-hover : $primary !default;

// Menu groupé
$menu-group-bg: $gray-200 !default;
$menu-group-width: 20% !default;
$menu-group-image-width: 20% !default;
$menu-group-category-padding-y: 1.5rem !default;
$menu-group-category-padding-x: 1rem !default;
$menu-group-category-hover-bg: $primary !default;
$menu-group-category-hover-color: $white !default;

/***************************************/

// Menu
nav.menu-container {
  z-index: 10;
  ul {
    padding: 0;
    margin: 0;
    list-style: none;
  }
}
.menu-title {
  position: relative;
}

// MENU - nav.menu-container : container principal du menu
nav.menu-container {
  position: relative;
  background-color: $menu-bg;
}

// MENU - main-menu : premier ul (ul de base du menu qui contient tous les li de premier niveau)
.main-menu {
  a {
    transition: 0.3s;
    &:focus, &:hover, &:active {
      text-decoration: none;
    }
  }
}

// MENU - Niveau 1
.title-menu-lvl1 {
  .menu-link {
    font-family: $menu-lvl1-font-family;
    font-size: $menu-lvl1-font-size;
    font-weight: $menu-lvl1-font-weight;
    text-transform: uppercase;
    text-decoration: none;
    color: $menu-lvl1-color;
    cursor: pointer;
    &:hover, &:hover, &:active {
      color: $menu-lvl1-color-hover;
    }
  }
}

// MENU - Niveau 2
.title-menu-lvl2 {
  .menu-link {
    font-family: $menu-lvl2-font-family;
    font-size: $menu-lvl2-font-size;
    font-weight: $menu-lvl2-font-weight;
    text-transform: uppercase;
    text-decoration: none;
    color: $menu-lvl2-color;
    &:hover, &:hover, &:active {
      color: $menu-lvl2-color-hover;
    }
  }
}

// MENU - Niveau 3
.title-menu-lvl3 {
  .menu-link {
    display: block;
    font-family: $menu-lvl3-font-family;
    font-size: $menu-lvl3-font-size;
    font-weight: $menu-lvl3-font-weight;
    text-decoration: none;
    color: $menu-lvl3-color;
    &:hover, &:hover, &:active {
      color: $menu-lvl3-color-hover;
    }
  }
}

// MENU - See ALL
.menu-see-all {
  font-family: $menu-see-all-font-family;
  font-size: $menu-see-all-font-size;
  font-weight: $menu-see-all-font-weight;
  text-decoration: none;
  color: $menu-see-all-color;
  svg {
    fill: $menu-see-all-color;
    width: 1.2rem;
    height: 1.2rem;
    transition: 0.3s;
  }
  &:hover {
    color: $menu-see-all-color-hover;
    svg {
      fill: $menu-see-all-color-hover;
    }
  }
}
.menu-see-all-tablet {
  @extend .menu-see-all;
}

/* RESPONSIVE */
/***************************************/
@include media-breakpoint-down(sm) {
  // MENU - Back link
  .menu-back {
    margin: 0 -1.5rem;
  }
}
@include media-breakpoint-down(md) {
  // Picto
  .header-link-menu {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: $menu-picto-width;
    height: $menu-picto-height;
    margin-left: 1.5rem;
    margin-right: -1.5rem;
    font-weight: $menu-picto-font-weight;
    text-decoration: none;
    color: $menu-picto-color;
    background: $menu-picto-bg;
    border: none;
    svg {
      width: $menu-picto-icon-width;
      height: $menu-picto-icon-height;
      margin-bottom: 0.5rem;
      fill: $menu-picto-icon-color;
    }
    .header-menu-text {
      display: block;
      font-size: $menu-picto-font-size;
    }
  }

  // MENU - nav.menu-container : container principal du menu
  nav.menu-container {
    position: absolute;
    top: $header-height-mobile;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 200;
    border-bottom: none;
    -webkit-overflow-scrolling: touch;
    transition: 0.3s;
    transform: translateX(-100%);
  }

  // MENU - Sous-menu
  .menu-block {
    z-index: 10;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background-color: $menu-bg;
    transform: translateX(-110%);
    transition: 0.3s;
    &.open {
      transform: translateX(0);
      & > .container {
        position: relative;
        height: 100%;
        overflow-y: auto;
      }
    }
  }

  // MENU - Back link
  .menu-back {
    display: flex;
    position: relative;
    background-color: $menu-back-link-bg;
  }
  .menu-back-icon {
    display: flex;
    width: $menu-item-icon-width;
    position: relative;
    background-color: $menu-back-icon-bg;
    &:before {
      content: $menu-back-icon;
      display: inline-block;
      margin: auto;
      border-left: none;
      border-top: none;
      transform: rotate(-90deg);
    }
  }
  .menu-back-link {
    padding: $menu-item-padding-y 0 $menu-item-padding-y $menu-item-padding-y;
    text-transform: uppercase;
    font-weight: $font-weight-sbold;
    text-decoration: none;
    color: $primary;
  }

  // MENU - Niveau 1
  .title-menu-lvl1 {
    .icon-wrapper {
      display: none;
    }
  }

  // MENU - Item
  .menu-title {
    display: flex;
    border-bottom: $menu-item-border-width solid $menu-item-border-color;
  }
  .menu-link {
    display: block;
    flex: 1;
    padding: $menu-item-padding-y 0;
  }
  .has-submenu {
    > .menu-title .menu-link-icon {
      display: block;
      flex-shrink: 0;
      width: $menu-item-icon-width;
      &:before {
        content: $menu-item-icon;
        display: inline-block;
        margin: auto;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 1rem;
        border-left: none;
        border-top: none;
        transform: rotate(90deg);
      }
    }
  }

  // MENU - See ALL
  .menu-see-all {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0;
  }
  .menu-see-all-tablet {
    display: none;
  }

  // MENU - open-menu : classe dans le body lorsque le menu est ouvert.
  .open-menu {
    overflow: hidden;
    nav.menu-container {
      transform: translateX(0);
    }
  }

  .no-position-mobile {
    position: inherit;
  }
}
@include media-breakpoint-up(lg) {
  // MENU
  .menu-container {
    margin-bottom: 4rem;
    z-index: 10;
    border-bottom: $menu-item-border-width solid $menu-item-border-color;
  }

  // MENU - Back link
  .menu-back {
    display: none;
  }

  // MENU - Item
  .menu-link-icon {
    display: none;
  }

  // MENU - Niveau 1
  .menu-lvl1 {
    display: flex;
    justify-content: space-between;
    & > .has-submenu {
      & > .menu-block {
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        width: 100%;
        padding: $menu-submenu-padding-y $menu-submenu-padding-x;
        background-color: $menu-bg;
      }
      &:hover {
        & > .menu-block {
          display: block;
          border-top: $menu-item-border-width solid $menu-item-border-color;
        }
      }
    }
    & > li:hover {
      & > .menu-title {
        position: relative;
        a:hover {
          color: inherit;
        }
        &:after {
          content: '';
          display: block;
          position: absolute;
          left: 0;
          right: 0;
          z-index: 1;
          height: $menu-item-border-width;
          background: $black;
        }
      }
    }

    .menu-lvl2 + .menu-see-all {
      display: none;
    }
  }
  .title-menu-lvl1 {
    .menu-link {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: $menu-lvl1-padding-y-desktop 1rem;
      text-align: center;
      line-height: 1;
    }
    .icon-wrapper {
      margin-right: 1rem;
      svg {
        max-width: 2rem;
        max-height: 1.4rem;
      }
    }
  }

  // MENU - Niveau 2
  .menu-lvl2 {
    width: 100%;
    column-count: $menu-submenu-col;
    column-gap: $grid-gutter-width;
    & > li {
      display: inline-grid;
      break-inside: avoid-column;
      page-break-inside: avoid;
      margin-bottom: 1rem;

      @supports (break-inside: avoid-column) {
        display: block;
      }
    }
    .container {
      padding: 0;
    }
  }

  // MENU GROUP - Category
  @if($menu-group-bg!=null) {
    .menu-group-container {
      &:hover > .menu-block {
        padding-top: 0;
        padding-bottom: 0;
      }
    }
    .menu-group-wrapper {
      position: relative;

      // Image
      .menu-image {
        position: relative;
        z-index: 1;
        float: right;
        width: $menu-group-image-width;
        padding-top: $menu-submenu-padding-y;
        padding-bottom: $menu-submenu-padding-y;
      }

      &:after {
        content: '';
        display: block;
        clear: right;
      }
    }
    .menu-group {
      &:before {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        bottom: 0;
        right: calc(100% - #{$menu-group-width});
        width: 100vw;
        background: $menu-group-bg;
      }
      & > li {
        width: $menu-group-width;

        &.active {
          .title-menu-lvl1 {
            background: $menu-group-category-hover-bg;
            color: $menu-group-category-hover-color;
            .menu-link {
              color: inherit;
            }
          }
          .menu-block-wrapper {
            display: block;
          }
        }
      }

      // Categories
      .title-menu-lvl1 {
        .menu-link {
          padding: $menu-group-category-padding-y $menu-group-category-padding-x;
          justify-content: flex-start;
          &:hover {
            color: inherit;
          }
        }
      }
    }
    .menu-block-wrapper {
      display: none;
      position: absolute;
      top: 0;
      width: calc(100% - #{$menu-group-width} - #{$menu-group-image-width});
      padding-top: $menu-submenu-padding-y;
      padding-bottom: $menu-submenu-padding-y;
      margin-left: $menu-group-width;
    }
  }

  // MENU - See ALL
  .menu-see-all {
    display: block;
    margin-bottom: 1rem;
    svg {
      position: relative;
      left: 0;
      margin-left: 0.3rem;
      margin-top: -0.2rem;
    }
    &:hover {
      svg {
        left: 0.6rem;
      }
    }
  }
  .menu-see-all-tablet {
    display: none;
    position: absolute;
    right: 1.5rem;
    bottom: 0;
    margin-bottom: 0;
    text-align: right;
  }
  .menu-tablet {
    .menu-see-all-tablet {
      display: block;
    }
  }

  // MENU - Overlay pour le desktop
  body.menu-mask {
    &:before {
      content:"";
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
      background: #000;
      opacity: 0.5;
      z-index: 9;
    }
  }

  // MENU - image push
  .menu-image {
    .block-section {
      margin-bottom: 0;
      & + .block-section {
        margin-top: 1.5rem;
      }
    }
    img {
      width: 100%;
    }
  }
  .menu-tablet {
    .menu-image {
      .block-section:last-child {
        margin-bottom: 5rem;
      }
    }
  }
}
