//mobile
//menu on bottom animation
@keyframes megamenuFadeIn {
  0% {
    opacity: 0;
    margin-top: $dropdown-menu-vertical-shift;
  }

  100% {
    opacity: 1;
    margin-top: $dropdown-menu-vertical-shift;
  }
}

.row.row-column-border > [class^='col-'] .navbar {
  padding: 8px 0;
}

// Navbar mobile backdrop, inspired by "modal" approach
.navbar-backdrop {
  // scss-docs-start modal-backdrop-css-vars
  --#{$prefix}backdrop-zindex: #{$zindex-modal-backdrop};
  --#{$prefix}backdrop-bg: #{$modal-backdrop-bg};
  --#{$prefix}backdrop-opacity: #{$modal-backdrop-opacity};
  // scss-docs-end modal-backdrop-css-vars

  @include overlay-backdrop(var(--#{$prefix}backdrop-zindex), var(--#{$prefix}backdrop-bg), var(--#{$prefix}backdrop-opacity));

  @media (min-width: #{map-get($grid-breakpoints, lg)}) {
    display: none; // to handle resize from md to lg when open
  }
}

// navbar mobile
.navbar {
  background: $navbar-bg-color;

  // overlay div
  .overlay {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: $navigation-sidebar-bg-color-mobile;
    display: none;
  }

  .navbar-collapsable {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: #{$zindex-modal};
    display: none;
    width: calc(100% - 48px); // use available horizontal space minus 48px on the right for the close button and backdrop
    @media (min-width: #{map-get($grid-breakpoints, lg)}) {
      width: 100%;
    }

    .menu-wrapper {
      background: $navigation-bg-color;
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0; // $navigation-h-padding * 2; < removed in BSI v2.15
      left: 0;
      pointer-events: all;
      overflow-y: auto;
      transform: translateX(-100%);
      transition: all 0.2s cubic-bezier(0.29, 0.85, 0.5, 0.99);
      z-index: 5;

      .navbar-nav {
        padding: $navigation-h-padding 0 0;
        overflow: hidden;

        .dropdown-menu {
          padding-bottom: 0;
        }
      }
    }

    /*lista menu*/
    .navbar-nav {
      padding: $navigation-h-padding 0;

      li {
        > button.nav-link {
          border: none;
          display: block;
          background: transparent;
          color: $navigation-link-color;
          font-weight: 600;
          padding: $navigation-v-padding $navigation-h-padding;
          position: relative;

          &.dropdown-toggle {
            svg {
              fill: $navbar-bg-color;
              transition: all 0.3s;
            }

            &[aria-expanded='true'] {
              .icon {
                transform: scaleY(-1);
              }
            }
          }

          &.active {
            border-left: $navigation-link-active-bar-size solid $navigation-link-active-bar-color;
          }

          &.disabled {
            span,
            .icon {
              opacity: $navigation-disabled-item-mobile-opacity;
            }
          }

          &:hover:not(.active) {
            text-decoration: underline;
          }
        }

        a.nav-link {
          color: $navigation-link-color;
          font-weight: 600;
          padding: $navigation-v-padding $navigation-h-padding;
          position: relative;

          &.dropdown-toggle {
            svg {
              fill: $navbar-bg-color;
              transition: all 0.3s;
            }

            &[aria-expanded='true'] {
              .icon {
                transform: scaleY(-1);
              }
            }
          }

          &.active {
            border-left: $navigation-link-active-bar-size solid $navigation-link-active-bar-color;
          }

          &.disabled {
            span,
            .icon {
              opacity: $navigation-disabled-item-mobile-opacity;
            }
          }

          &:hover:not(.active) {
            text-decoration: underline;
          }
        }
      }
    }

    &.expanded {
      .menu-wrapper {
        transform: translateX(0);
        transition: all 0.3s cubic-bezier(0.29, 0.85, 0.5, 0.99);
      }

      .close-div {
        //transform: translateX(0);
        opacity: 1;
      }
    }
  }

  //wrapper pulsante di chiusura menu
  .close-div {
    opacity: 0;
    position: fixed;
    left: auto;
    right: 2px;
    top: $navigation-h-padding;
    background: transparent;
    z-index: 10;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.1, 0.57, 0.4, 0.97);

    // pulsante di chiusura menu
    .close-menu {
      background: transparent;
      pointer-events: all;
      color: $navigation-close-button-text-color;
      font-size: $navigation-close-button-text-size;
      padding: 0;
      width: $navigation-close-button-size;
      height: $navigation-close-button-size;
      display: flex;
      align-items: center;
      justify-content: center;

      .icon {
        fill: $white;
      }
    }
  }

  // Dropdown style tipo collapse
  .dropdown-menu {
    background: transparent;
    box-shadow: none;
    padding-top: 0;

    &:before {
      display: none;
    }

    a.it-heading-link,
    a.it-footer-link {
      color: $navigation-link-color;

      svg {
        fill: $navigation-link-color;
      }

      &.active {
        span {
          text-decoration: underline;
          color: $navigation-link-color;
        }
      }
    }

    .link-list-wrapper {
      padding-left: $navigation-h-padding;
      padding-right: $navigation-h-padding;
      margin-bottom: $navigation-h-padding;

      ul li {
        a {
          &.list-item.active {
            color: $primary-b3;
            text-decoration: underline;

            span {
              color: $primary-b3;
            }
          }

          svg {
            fill: $navigation-link-color;
          }

          span {
            color: $navigation-link-color;
          }

          i {
            color: $navigation-link-color;
          }
        }
      }
    }
  }
}

.custom-navbar-toggler {
  background: none;
  border: none;
  cursor: pointer;

  span {
    color: $navigation-toggle-button-icon-color;
    font-size: $navigation-toggle-button-icon-size;
  }

  svg {
    fill: $navigation-toggle-button-icon-color;
    width: $navigation-hamburger-size;
    height: $navigation-hamburger-size;
    display: block;
  }
}

//reset icon on megamenu
.nav-item.megamenu > a:before,
.nav-item.megamenu > button:before {
  display: none;
}

//-------------------INLINE MENU---------------------
.inline-menu {
  .link-list-wrapper {
    .link-list {
      position: relative;

      li {
        a {
          position: relative;

          &.large {
            padding-top: $inline-menu-linklist-v-padding;
            padding-bottom: $inline-menu-linklist-v-padding;
          }

          i {
            color: $primary-a3;
          }

          &:after {
            content: '';
            display: block;
            width: $inline-menu-line-width;
            background: $primary;
            position: absolute;
            right: 0;
            top: 0;
            height: 100%;
            transform-origin: center;
            transform: scaleY(0);
            transition: all 0.3s;
            z-index: 1;
          }

          &.active {
            span {
              color: $primary;
              text-decoration: none;
            }
          }

          &[aria-expanded='true'] {
            &:after {
              transform: scaleY(1);
            }
          }
        }
      }

      &:after {
        content: '';
        display: block;
        width: $inline-menu-line-width;
        background: linear-gradient(to bottom, rgba($neutral-2-a1, 1) 0%, rgba($neutral-2-a1, 0.3) 100%);
        position: absolute;
        right: 0;
        top: 0;
        height: 100%;
      }
    }
  }
}

//Tablet horizontal / small desktop
@media (min-width: #{map-get($grid-breakpoints, lg)}) {
  .row.row-column-border > [class^='col-'] .navbar {
    padding: 0;
  }

  .navbar {
    background: $navigation-bg-color-desktop;
    padding: 0;

    // navbar mobile
    .navbar-collapsable {
      position: relative;
      top: auto;
      right: auto;
      left: auto;
      bottom: auto;
      z-index: 1; // auto; xxx auto doesn't handle resize from md to lg when open
      background: none;
      display: block !important;
      transition: none;

      .overlay {
        display: none !important;
      }

      // menu wrapper
      .menu-wrapper {
        position: inherit;
        top: auto;
        bottom: auto;
        right: auto;
        left: auto;
        overflow-y: visible;
        transform: none;
        transition: none;
        background: $navigation-bg-color-desktop;

        .navbar-nav {
          margin-top: 0;
          padding: 0 $navigation-h-padding;
          overflow: inherit;

          .dropdown-menu {
            padding-bottom: $link-list-footer-distance-bottom;
          }
        }
      }

      /*lista menu*/
      .navbar-nav {
        margin-top: 0;
        padding: 0 $navigation-h-padding;

        li.nav-item {
          display: flex;

          a.nav-link,
          button.nav-link {
            display: flex;
            align-self: flex-end;
            align-items: center;
            font-weight: 400;
            padding: $navigation-v-padding $navigation-h-padding;
            color: $navigation-link-color-desk;
            border-bottom: $navigation-link-active-bar-size solid transparent;

            &.dropdown-toggle {
              svg {
                fill: $navigation-bg-color;
                margin-top: 3px;
              }
            }

            &[data-focus-mouse='true'] {
              border-color: transparent !important;
            }

            &.active {
              border-left: 0;
              border-color: $navigation-link-active-bar-color-desk;
              background: transparent;
            }

            &.disabled {
              span,
              .icon {
                opacity: $navigation-disabled-item-opacity;
              }
            }
          }
        }
      }
    }

    //wrapper pulsante di chiusura menu
    .close-div {
      display: none;
    }

    // Dropdown style tipo collapse
    .dropdown-menu {
      position: absolute;
      top: 100%;
      left: 0;
      z-index: $zindex-dropdown;
      //display: none; // none by default, but block on "open" of the menu
      float: left;
      min-width: $dropdown-min-width;
      padding: $dropdown-padding-y 0 0;
      margin: $dropdown-spacer 0 0; // override default ul
      font-size: $font-size-base; // Redeclare because nesting can cause inheritance issues
      color: $body-color;
      text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
      list-style: none;
      background-color: $dropdown-bg;
      background-clip: padding-box;
      border: $dropdown-border-width solid $dropdown-border-color;
      @include border-radius($dropdown-border-radius);
      @include box-shadow($dropdown-box-shadow);
      border-top-left-radius: 0;
      border-top-right-radius: 0;

      &.show {
        animation: dropdownFadeIn forwards $dropdown-menu-animation-speed;
        top: calc(100% - #{$dropdown-menu-vertical-shift});
      }

      &:before {
        display: block;
      }

      .link-list-wrapper {
        padding-left: 0;
        padding-right: 0;
        margin-bottom: 0;

        ul li {
          a {
            color: $primary;

            span,
            i {
              color: $primary;
            }
          }
        }
      }
    }

    .dropdown-toggle {
      display: block;
      justify-content: inherit;
    }
  }

  .custom-navbar-toggler {
    display: none;
  }

  .has-megamenu {
    .navbar-collapsable {
      width: 100%;
    }
  }

  .nav-item.megamenu {
    position: static;

    > a.dropdown-toggle,
    > button.dropdown-toggle {
      position: relative;

      &:before {
        content: '';
        position: absolute;
        top: auto;
        bottom: -$dropdown-menu-notch-base-size - 6;
        left: $dropdown-menu-notch-position-x;
        width: $dropdown-menu-notch-base-size * 3;
        height: $dropdown-menu-notch-base-size * 3;
        border-radius: $dropdown-menu-radius;
        background-color: $dropdown-bg;
        transform: rotate(45deg);
        opacity: 0;
        display: block;
        transition: opacity $dropdown-menu-animation-speed * 0.5 cubic-bezier(0.1, 0.57, 0.36, 0.99);
      }
    }

    > button.dropdown-toggle:before {
      bottom: -$dropdown-menu-notch-base-size - 8;
    }

    a.dropdown-toggle,
    button.dropdown-toggle {
      &.show {
        &:before {
          opacity: 1;
        }
      }
    }
  }

  .megamenu {
    .dropdown-menu {
      min-width: auto;
      left: $navigation-h-padding;
      right: $navigation-h-padding;
      animation-timing-function: cubic-bezier(0.1, 0.57, 0.36, 0.99);

      //hide arrow
      &:before {
        display: none;
      }

      &.show {
        animation: megamenuFadeIn forwards $dropdown-menu-animation-speed * 0.5;
      }
    }
  }
}