#portal-globalnav-wrapper {
  position: initial !important;
  padding: 0 !important;

  li {
    list-style: none !important;
  }

  @include media-breakpoint-up(lg) {
    flex: 1;
  }

  @include media-breakpoint-down(lg) {
    margin: 0 !important;
  }
}

#portal-globalnav {
  span {
    padding: 1rem 0;
  }

  ul {
    padding-left: 0;
  }

  width: 100%;

  @include media-breakpoint-up(md) {
    flex-direction: column;
    gap: 15px;
  }

  @include media-breakpoint-up(lg) {
    flex-direction: row;
  }

  @include media-breakpoint-up(xl) {
    gap: $nav-first-level-gap;
  }

  .nav_index_html {
    display: none;
  }

  li {
    ul {
      left: 0;
      transition: ease-out 2.75s;
    }

    a {
      position: relative;
      display: block;
      padding: 0.75rem 1rem;
      hyphens: auto;
      text-decoration: none;
      word-break: break-word;
    }

    .opener {
      display: none;
    }

    &.show-nav > .has_subtree.dropdown {
      z-index: 1;
      opacity: 100%;
      visibility: visible;
      border-radius: $nav-overlay-radius;

      a {
        pointer-events: initial !important;
      }
    }

    &.show-nav > .has_subtree {
      visibility: visible;

      .show-nav > .dropdown {
        left: 25.5em;

        .dropdown {
          left: 21.5em;
        }
      }
    }

    & > .has_subtree {
      width: 21em;
      padding: 2em;
      background: #fff;

      &.dropdown {
        position: absolute;
        left: 0;

        .has_subtree.dropdown {
          top: 0;
        }
      }
    }
  }

  & > li {
    & > a {
      padding: 0;
      color: $header-nav-link-color;
      font-size: $header-nav-link-font-size;
      font-family: $header-nav-link-font-family;

      @if $nav-first-level-uppercase {
        text-transform: uppercase;
      }
    }

    &.has_subtree > a {
      display: flex;
      align-items: center;
      padding: 0;

      &::after {
        content: "";
        width: 9px;
        height: 6px;
        display: block;
        background-image: $nav-link-drop;

        @include media-breakpoint-down(lg) {
          content: $nav-link-drop-mobile;
          display: block;
          height: auto;
          margin-left: 0;
          width: auto;
          background: none;
        }

        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        margin-left: 0.4rem;
      }

      &::before {
        content: "";
        height: 2px;
        position: absolute;
        left: 0;
        background-color: $nav-link-active-color;
        bottom: 0;
        transition: all 0.15s ease;
        right: 0;
        opacity: 0%;
      }

      &:hover,
      &:focus {
        color: $nav-link-active-color;

        &::before {
          content: "";
          opacity: 100%;
        }
      }
    }

    & > .has_subtree {
      width: 25em;

      .close-nav {
        position: absolute;
        z-index: 99;
        top: 0;
        right: 1.5em;
        border-bottom: none !important;

        .close-nav-icon {
          display: block;
          width: 20px;
          height: 20px;
          padding: 0;
        }
      }
    }
  }

  div.has_subtree {
    & > span {
      color: yellow;
    }

    &.dropdown {
      .has_subtree .nav-link {
        &[aria-haspopup="true"] {
          &::after {
            content: $nav-overlay-next-icon;
            right: 0;
          }

          &:hover,
          &:focus {
            &::after {
              content: $nav-overlay-next-icon-hover;
            }
          }
        }
      }

      @include media-breakpoint-up(md) {
        display: flex;
        height: 800px;
        min-height: 350px;
        max-height: 85vh;
        flex-direction: column;

        & > ul {
          overflow-y: auto;
        }
      }

      @include media-breakpoint-down(lg) {
        overflow: hidden;
        overflow-y: scroll;
      }
    }

    .close-nav .close-nav-icon {
      display: block;
      width: 20px;
      height: 20px;
      padding: 0;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' aria-hidden='true' class='css-tj5bde-Svg'%3E%3Cpath d='M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z'/%3E%3C/svg%3E");
    }
  }

  .dropdown {
    opacity: 0%;
    visibility: hidden;

    a {
      padding: 1rem 0;
      border-bottom: 1px solid #ddd;
      pointer-events: none;
    }

    .nav-title {
      padding: 0 !important;

      a {
        display: flex;
        justify-content: space-between;

        &::after {
          content: $nav-overlay-next-icon;
          right: 0;
        }

        &:hover,
        &:focus {
          &::after {
            content: $nav-overlay-next-icon-hover;
          }
        }
      }

      a {
        color: $nav-overlay-title-color;
        font-size: $nav-overlay-title-font-size;
        font-weight: $nav-overlay-title-font-weight;
        font-family: $nav-title-font-family;
      }
    }

    .nav-link {
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: #000;

      &:hover,
      &:focus {
        color: $nav-overlay-next-color-hover;
      }

      .state-private {
        color: #c4183c;
      }
    }
  }

  .quick-access {
    padding-top: 1.5rem;

    .quick-access-title {
      color: $nav-quick-link-color;
      font-size: $nav-quick-link-size;
      font-weight: $nav-quick-link-weight;
      padding: $nav-quick-link-padding;
    }

    ul {
      position: relative !important;
      width: auto !important;
      padding: 0 !important;
    }
  }

  &.activated {
    & > li > a {
      @include media-breakpoint-up(md) {
        color: $nav-link-open-color !important;
      }
    }
  }

  label[role="button"] {
    position: absolute;
  }
}

@include media-breakpoint-up(lg) {
  #portal-globalnav-wrapper {
    flex: 1;

    .container {
      padding: 0;
    }
  }
}

.close-nav,
.prev-nav {
  cursor: pointer;
}

.prev-nav {
  @include media-breakpoint-down(lg) {
    display: block !important;
  }

  @include media-breakpoint-up(lg) {
    display: none !important;
  }
}

#portal-globalnav-wrapper #portal-globalnav > li > .has_subtree,
#subsite-navigation #portal-globalnav > li > .has_subtree {
  @include media-breakpoint-up(lg) {
    margin-top: 2.25rem;
  }
}

@include media-breakpoint-down(lg) {
  #portal-globalnav-collapse #portal-globalnav > li > .nav-link {
    border-bottom: 1px solid #ddd;
  }

  #portal-globalnav-collapse #portal-globalnav > li > .nav-link {
    padding: 1rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

// Pour changer la couleur de navlink en active
#portal-globalnav-wrapper
  #portal-globalnav-collapse
  #portal-globalnav
  > li.show-nav.has_subtree
  > a {
  color: $nav-link-active-color !important;
}

// de core

@media screen and (max-width: 992px) {
  #portal-globalnav-wrapper .navbar-nav li.show-nav > .has_subtree.dropdown {
    right: 0;
    left: inherit !important;
    transition: right 0.5s cubic-bezier(0.54, 0.01, 0.68, 0.64) !important;
  }

  #portal-globalnav-wrapper .navbar-nav li .has_subtree.dropdown {
    position: fixed !important;
    z-index: 1;
    right: -100vw;
    left: inherit !important;
    height: 100vh;
    transition:
      right 0.5s cubic-bezier(0.54, 0.01, 0.68, 0.64),
      opacity 5s ease,
      0.5s visibility ease;
  }
}

@media screen and (min-width: 992px) {
  #portal-globalnav-collapse .dropdown .nav-link {
    z-index: 99;
  }
}

@media screen and (max-width: 992px) {
  .open-nav-overflow {
    overflow: hidden;
  }

  .collapse:not(.show) {
    display: block;
    opacity: 0%;
    visibility: hidden;
  }

  .navbar-toggler {
    z-index: 99;
  }

  #portal-globalnav-collapse {
    position: fixed;
    z-index: 98;
    top: 0;
    left: 100vw;
    width: 100vw;
    height: 100vh;
    padding: 6em 2em 0;
    background: #fff;
    transition: all 0.5s cubic-bezier(0.54, 0.01, 0.68, 0.64);

    #portal-globalnav {
      & > li > a {
        color: #000 !important;
        padding: 1rem 0 !important;
      }
    }

    .has_subtree.dropdown {
      top: 0;
      width: 100vw !important;
      box-shadow:
        0 0 6.5px rgb(0 0 0 / 4.7%),
        0 0 16.9px rgb(0 0 0 / 6.7%),
        0 0 33.8px rgb(0 0 0 / 8.3%),
        0 0 64.5px rgb(0 0 0 / 10.3%),
        0 0 139px rgb(0 0 0 / 15%);
    }

    #portal-globalnav > li > .nav-link {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 1rem 0;
    }
  }

  .navbar-toggler[aria-expanded="true"] + #portal-globalnav-collapse {
    left: 0;
  }

  #portal-globalnav-wrapper
    .navbar-nav
    li.show-nav
    > .has_subtree
    .show-nav
    > .dropdown {
    z-index: 99;
    height: 100vh;
    background: #fff;
  }

  #portal-globalnav-wrapper .navbar-nav li {
    .has_subtree.dropdown {
      position: fixed;
      z-index: 1;
      right: -100vw;
      left: inherit;
      height: 100vh;
      transition:
        right 0.5s cubic-bezier(0.54, 0.01, 0.68, 0.64),
        opacity 5s ease,
        0.5s visibility ease;
    }

    &.show-nav > .has_subtree.dropdown {
      right: 0;
      left: inherit !important;
      transition: right 0.5s cubic-bezier(0.54, 0.01, 0.68, 0.64);
    }
  }
}

#portal-globalnav-collapse .dropdown .nav-link.state-private,
#subsite-navigation .dropdown .nav-link.state-private {
  color: #c4183c;
}

#portal-globalnav-wrapper {
  button[aria-expanded="true"] {
    .navbar-toggler-icon {
      background-image: $header-toggler-icon-open;
    }
  }

  button[aria-expanded="false"] {
    .navbar-toggler-icon {
      background-image: $header-toggler-icon-close;
    }
  }
}

.navbar-toggler:focus {
  border: 0;
  outline: 0 !important;
  background: transparent;
  box-shadow: none !important;
}

// =============================================================================
// SHARED
// =============================================================================

#portal-globalnav-wrapper #portal-globalnav > li > .has_subtree,
#subsite-navigation #portal-globalnav > li > .has_subtree {
  @include media-breakpoint-up(lg) {
    margin-top: 2.25rem;
  }
}

#portal-globalnav-collapse {
  .dropdown .nav-link {
    @include media-breakpoint-up(lg) {
      z-index: 99;
    }

    &.state-private {
      color: #c4183c;
    }
  }
}