//
// BASIC STYLE FOR MEGAMENU
// -------------------------
.t4-megamenu {

  // THE MEGAMENU
  //--------------------------------------------

  // Global Menu Inner padding
  // -------------------------
  .mega-inner {
    padding-bottom: $grid-gutter-width / 2;
    padding-top: $grid-gutter-width / 2;
    @include clearfix();
  }

  // Menu Grids
  // ----------
  .row {

  }

  .row + .row  {
 
  }

  // Dropdown Sub Menus
  // ------------------
  .dropdown-submenu {
  }


  // Nav in Megamenu
  // ---------------
  .mega-col-nav {
  }

  // Inner padding
  .mega-col-nav .mega-inner {
  }

  .mega-col-nav .mega-col-title {
  }

  // Inner padding for nav in 1 column
  .col-lg.mega-col-nav .mega-inner,
  .col-md.mega-col-nav .mega-inner,
  .col-sm.mega-col-nav .mega-inner,
  .col-xs.mega-col-nav .mega-inner {
  }


  // The Nav
  .mega-nav,
  .dropdown-menu .mega-nav {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .mega-nav > li,
  .dropdown-menu .mega-nav > li {
  }

  .mega-nav > li a,
  .dropdown-menu > li a {
    padding: $nav-link-padding-y $nav-link-padding-x;
  }

  .dropdown-menu .mega-nav > li .separator {
  }

  // The caret
  .nav-link > .dropdown-toggle {

  }

  .mega-nav .dropdown-submenu > a::after {
    margin-right: 0;
  }


  // Modules in Megamenu
  // -------------------
  .mega-col-module {
  }

  // Inner padding
  .mega-col-module .mega-inner {
  }

  // The module
  .t4-module {
  }

  .t4-module .module-inner {
    padding: 0;
  }


  // Module Title
  // Navigation title
  .t4-module .module-title,
  .mega-col-nav .mega-col-title,
  .mega-col-module .mega-col-title {
    background: $t4-module-title-bg;
    border-bottom: 1px solid $border-color;
    font-size: $font-size-lg;
    font-weight: $font-weight-semibold;
    line-height: normal;
    margin: 0 0 $spacer;
    padding: 0;
    text-transform: none;

    span {
      border: 0;
      color: $t4-module-title-color;
      display: inline-block;
      padding: 0 0 $spacer/2 0;
    }
  }

  // Module Content
  .t4-module .module-ct {
  }

  // Navigation in Module
   .t4-module .nav,
   .mega-col-module .nav {
    list-style: none;
    margin: 0;
    padding: 0;

    li.nav-item {
      list-style: none;
      flex-basis: 100%;

      a {
        display: block;
        padding: $spacer/2 0;

        &:hover, &:focus, &:active {
          background-color: $gray-100;
        }
      }
    }
  }

  // Login form Module
  .t4-module {
    #login-form {
      ul.unstyled {
        padding-left: 0;

        li {
          padding-top: 0;
        }
      }
    }
  }

  // List in Module
  // Reset List Style in Module
  .t4-module ul {
  }

  .t4-module ul li {
  }

  .t4-module ul li a {

    // Link states
    &:hover, &:focus, &:active {
    }
  }

  // Nav in Module
  .dropdown-menu .t4-module .nav {
  }

  .dropdown-menu .t4-module .nav li {
  }

  .dropdown-menu .t4-module .t4-module li a {
    // Link states
    &:hover, &:focus, &:active {
    }
  }

  // The caption
  // -----------
  .mega-caption {
    display: block;
    font-weight: normal;
    opacity: 0.8;
  }

  // The caret
  // ---------
  .nav .caret,
  .dropdown-submenu .caret,
  .mega-menu .caret {
    display: none;
  }

  // Show the caret on level 0 only
  .dropdown-toggle:after {
    display: none;
  }

  .dropdown-toggle .item-caret {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 20px;
    width: 20px;

    &::before {
      border-top: 4px solid $body-color;
      border-left: 4px solid transparent;
      border-right: 4px solid transparent;
      content: "";
      display: block;
    }
  }


  // The icon
  // --------
  .nav [class^="icon-"],
  .nav [class*=" icon-"],
  .nav .fa {
    margin-right: $spacer/4;
  }


  // Menu alignment
  // --------------
  .mega-align-left > .dropdown-menu {
    left: 0;
  }

  .mega-align-right > .dropdown-menu {
    left: auto;
    right: 0;
  }

  .mega-align-center > .dropdown-menu {
      left: 50%;
      transform: translate(-50%, 0);
  }

  .dropdown-submenu.mega-align-left > .dropdown-menu {
    left: 100%;
  }

  .dropdown-submenu.mega-align-right > .dropdown-menu {
    left: auto;
    right: 100%;
  }

  .mega-align-justify {
    position: static;
  }

  .mega-align-justify > .dropdown-menu {
    left: 0;
    right: 0;
    margin-left: 0;
    top: auto;
  }

} // End


// The Dropdown
// ------------
.navbar-expand {
  @each $breakpoint in map-keys($grid-breakpoints) {
    $next: breakpoint-next($breakpoint, $grid-breakpoints);
    $infix: breakpoint-infix($next, $grid-breakpoints);

    &#{$infix} {
      .t4-megamenu .dropdown-menu {
        @include media-breakpoint-down($breakpoint) {
          left: 0 !important;
          margin-top: 0 !important;
          margin-left: 0 !important;
          -webkit-transform: none !important;
          -ms-transform: none !important;
          opacity: 1 !important;
          transform: none !important;
          width: auto !important;
        }
      }

    }
  }
}


// T4 MEGAMENU TYPOGRAPHY
// ----------------------
.t4-megamenu {
  .nav-link {
    display: inline-flex;
    align-items: center;
  }

  .badge-hot,
  .badge-new,
  .badge-popular {
    // Has sub-nav
    &.dropdown {
      > .nav-link {
        .item-caret {
          position: relative;
        }
      }
    }

    // Don't have sub-nav
    > .nav-link {
      position: relative;

      &:after {
        background-color: $red;
        border-radius: 3px;
        border: 0;
        color: $white;
        content: "Hot";
        display: inline-block!important;
        font-size: 9px;
        line-height: 1;
        letter-spacing: 0.5px;
        margin: 0 0 0 $spacer / 4;
        padding: 3px 4px;
        top: -8px;
        position: relative;
        float: none;
        text-transform: uppercase;
      }
    }
  }

  // Badge new
  .badge-new {
    > .nav-link {
      &:after {
        background-color: $green;
        content: "New";
      }
    }
  }

  // Badge Popular
  .badge-popular {
    > .nav-link {
      // padding-right: 62px;

      &:after {
        background-color: $blue;
        content: "Popular";
      }
    }

    &.dropdown {
      > .nav-link {
      }
    }
  }

}


//
// T4 MEGAMENU Animation
// ---------------------
.t4-megamenu.animate {

  .dropdown {
    > .dropdown-menu {
      backface-visibility: hidden;
      opacity: 0;
    }

    &.animating > .dropdown-menu {
      //@include transition(all 400ms);
      display: block;
    }

    &.show.animating > .dropdown-menu,
    &.animating.open > .dropdown-menu {
      opacity: 1;
    }
  }

  &.zoom {
    .dropdown {
      > .dropdown-menu {
        -webkit-transform: scale(0, 0);
            -ms-transform: scale(0, 0);
                transform: scale(0, 0);

        transform-origin: 20% 20%;
      }

      &.show.animating > .dropdown-menu {
        transform: scale(1, 1);
      }
    }

    //special case for level 0
    .level0 > .mega-align-center {
      > .dropdown-menu {
        -webkit-transform: scale(0, 0) translate(-50%, 0);
            -ms-transform: scale(0, 0) translate(-50%, 0);
                transform: scale(0, 0) translate(-50%, 0);

        transform-origin: 0% 20%;
      }

      &.show.animating > .dropdown-menu {
        -webkit-transform: scale(1, 1) translate(-50%, 0);
            -ms-transform: scale(1, 1) translate(-50%, 0);
                transform: scale(1, 1) translate(-50%, 0);
      }
    }
  }

  &.elastic {
    .dropdown {
      & > .dropdown-menu {
        -webkit-transform: scale(0, 1);
            -ms-transform: scale(0, 1);
                transform: scale(0, 1);
        transform-origin: 10% 0;
      }

      &.show.animating > .dropdown-menu {
        -webkit-transform: scale(1, 1);
            -ms-transform: scale(1, 1);
                transform: scale(1, 1);
      }
    }

    .level0 {
      > .dropdown > .dropdown-menu {
        -webkit-transform: scale(1, 0);
            -ms-transform: scale(1, 0);
                transform: scale(1, 0);
      }

      .show.animating > .dropdown-menu {
        -webkit-transform: scale(1, 1);
            -ms-transform: scale(1, 1);
                transform: scale(1, 1);
      }

      > .mega-align-center {
        > .dropdown-menu {
          transform: scale(1,0) translate(-50%, 0);
          -webkit-transform: scale(1,0) translate(-50%, 0);
          -ms-transform: scale(1,0) translate(-50%, 0);
        }

        &.show.animating > .dropdown-menu {
          -webkit-transform: scale(1,1) translate(-50%, 0);
              -ms-transform: scale(1,1) translate(-50%, 0);
                  transform: scale(1,1) translate(-50%, 0);
        }
      }
    }
  }

  &.slide {
    .dropdown {
      /* Level 0 */
      &.animating > .dropdown-menu {
        //overflow: hidden;
      }

      > .dropdown-menu {
        backface-visibility: hidden;
        margin-top: -30%;
      }

      &.show.animating > .dropdown-menu {
        margin-top: 0%;
      }

      /* Level > 0 */
      .dropdown-menu {
        min-width: 0;
        margin-top: -$spacer;
        transition-property: margin-top, opacity;
        transition-timing-function: ease;

        > div {
          min-width: 200px;
          margin-top: 0;
          margin-left: -500px;
          width: 100%;
        }
      }

      &.animating > .dropdown-menu > div {
        margin-left: 0;
      }
    }
  }

  &.flipping {
    .dropdown {

      /* Level 0 */
      > .dropdown-menu {
        transform-origin: 50% 0%;
        transform: perspective(600px) rotateX(-90deg);
        transition-property: transform;
        transition-timing-function: ease;
      }

      &.show.animating > .dropdown-menu {
        transform: perspective(600px) rotateX(0deg);
      }

      /* Level > 0 */
      .dropdown > .dropdown-menu {
        
      }
    }
  }

  &.fading {
    .dropdown {
      &.show.animating > .dropdown-menu {
        transition-property: opacity;
        transition-timing-function: ease;
      }
    }
  }

  &.zoom {
    .dropdown {
      &.show.animating > .dropdown-menu {
        transition-property: transform;
        transition-timing-function: ease;
      }
    }
  }

  &.elastic {
    .dropdown {
      &.show.animating > .dropdown-menu {
        transition-property: transform;
        transition-timing-function: ease;
      }
    }
  }

  .animating.show {
    z-index: 2000;
  }
}
