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

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

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

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

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

// Item
$menu-item-border-color: $gray-400; // Couleur du trait sous chaque ligne dans le menu mobile
$menu-item-border-width: 1px; // Epaisseur du trait sous chaque ligne dans le menu mobile
$menu-item-icon-width: 52px; // taille de la flèche item dans le menu mobile
$menu-item-icon-color: $primary; // 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");
$menu-item-padding-y: 15px; // padding d'un item dans le menu mobile

// Back menu
$menu-back-icon-bg: $primary; // Couleur de fond de la flèche de retour dans le menu mobile
$menu-back-icon-color: $white; // 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");
$menu-back-link-bg: $light; // Couleur du background du texte pour le retour dans le menu mobile

// See all menu
$menu-see-all-font-family : $font-family-sans-serif;
$menu-see-all-font-size : 13px;
$menu-see-all-font-weight : $font-weight-light;
$menu-see-all-color : $gray-600;
$menu-see-all-color-hover : $primary;

// Niv 1
$menu-lvl1-font-family : $font-family-sans-serif;
$menu-lvl1-font-size : 14px;
$menu-lvl1-font-weight : $font-weight-sbold;
$menu-lvl1-color : $black;
$menu-lvl1-color-hover : $primary;
$menu-lvl1-padding-y-desktop : 7px;

// Niv 2
$menu-lvl2-font-family : $font-family-serif;
$menu-lvl2-font-size : 15px;
$menu-lvl2-font-weight : $font-weight-medium;
$menu-lvl2-color : $primary;
$menu-lvl2-color-hover : $primary-hover;

// Niv 3
$menu-lvl3-font-family : $font-family-sans-serif;
$menu-lvl3-font-size : 13px;
$menu-lvl3-font-weight : $font-weight-normal;
$menu-lvl3-color : $black;
$menu-lvl3-color-hover : $primary;

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

// 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;
    &: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: 12px;
    height: 12px;
    transition: 0.3s;
  }
  &:hover {
    color: $menu-see-all-color-hover;
    svg {
      fill: $menu-see-all-color-hover;
    }
  }
}

/* RESPONSIVE */
/***************************************/
@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: 15px;
    font-weight: $menu-picto-font-weight;
    text-decoration: none;
    color: $menu-picto-color;
    background: $menu-picto-bg;
    svg {
      width: $menu-picto-icon-width;
      height: $menu-picto-icon-height;
      margin-bottom: 5px;
      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: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background-color: $menu-bg;
    float: left;
    transform: translateX(-110%);
    transition: 0.3s;
    &.open {
      transform: translateX(0px);
      height: 100%;
    }
  }

  // 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 - 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: 10px;
        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 - open-menu : classe dans le body lorsque le menu est ouvert.
  .open-menu {
    body {
      overflow: hidden;
    }
    nav.menu-container {
      transform: translateX(0);
    }
  }
}
@include media-breakpoint-up(lg) {
  // MENU
  .menu-container {
    z-index: 10;
    border-bottom: $menu-item-border-width solid $menu-item-border-color;
  }
  .main-menu {
    position: relative;
  }

  // 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;
        }
      }
    }

    .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 10px;
      text-align: center;
      line-height: 1;
    }
  }

  // MENU - Niveau 2
  .menu-lvl2 {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    & > li {
      flex: 0 0 100%/$menu-submenu-col;
    }
    .container {
      padding: 0;
    }
  }

  // MENU - See ALL
  .menu-see-all {
    display: block;
    margin-top: 10px;
    svg {
      margin-left: 3px;
      margin-top: -2px;
    }
    &:hover {
      svg {
        margin-left: 6px;
      }
    }
  }

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