@import "_variables.less";
@import "bootstrap_addons/_mixins.less";

// =======================
// Mega Menu
// =======================

//Level 0
//Font
@menuItemFontSize: 16px;
@menuItemFontFamily: @baseFontFamily;

//Margin
@menuItemMargin: 34px;

//Colors
@menuItemColor: @textColor;
@menuItemBgColor: transparent;
@menuItemBgActColor: transparent;
@menuItemDescColor: @textColor;

//Parent Icon
@menuParentIcon: '\e071';
@menuParentIconSize: 28px;
@menuParentIconColor: #bcbcbc;
@menuParentIconMargin: -24px;

//Level 1+
//Font
@subMenuItemFontSize: @baseFontSize;
@subMenuItemFontFamily: @sansFontFamily;
@subMenuItemLineHeight: @baseLineHeight;

//Colors
@subMenuBg: @grayLighter;
@subMenuItemColor: @textColor;
@subMenuItemBgColor: none;

//Layout
@subMenuBorder: none;
@subMenuMarginTop: 13px;

.icemegamenu {
  float: right;
  position: static;
  > ul {
    clear: both;
    margin: 7px 0;
    padding: 0;
    width: 100%;
    z-index: 999;
    .clearfix;
    > li {
      display: block;
      float: left;
      position: relative;
      z-index: 1;
      + li {
        margin-left: @menuItemMargin;
      }
      > a.iceMenuTitle {
        display: block;
        font: bold (@menuItemFontSize)~"/"(@menuItemLineHeight) @menuItemFontFamily;
        padding: 0px;
        position: relative;
        z-index: 1;
        color: @menuItemColor;
        background: @menuItemBgColor;
        text-transform: uppercase;
        * {
          font: inherit;
        }
        &.hover,
        &.icemega_active {
          color: @menuItemActColor;
          background: @menuItemBgActColor;
        }
      }
      &.hover {
        > a.iceMenuTitle {
          color: @menuItemActColor;
          background: @menuItemBgActColor;
          &.menu-login-form {
            background: none;
            color: @headingsColor;
          }
        }
      }
      span.icemega_desc {
        color: @menuItemDescColor;
        display: block;
        line-height: 1.25em;
        padding: 0;
      }
      &.parent {
        > .iceMenuTitle,
        > .icemega_title {
          &:after {
            content: @menuParentIcon;
            font-family: @md;
            font-size: @menuParentIconSize;
            color: @menuParentIconColor;
            right: @menuParentIconMargin;
            line-height: 0;
            position: absolute;
            top: 50%;
            .translate(0%, -50%);
          }
        }
      }

      &.fullwidth {
        position: static;
      }

    }
  }

  .ice-megamenu-toggle {
    display: none;
  }
}

/* when dont have subtitle */
.icemegamenu > ul > li > a.iceMenuTitle > span.icemega_nosubtitle {
  display: inline-block;
}

// Submenu
ul.icesubMenu {
  .border-radius(@borderRadiusSmall);
  height: 0;
  left: 50%;
  margin: 0;
  opacity: 0;
  overflow: hidden;
  padding: 38px 0;
  pointer-events: none;
  position: absolute;
  text-align: left;
  top: 100%;
  .transition(all .25s ease-out);
  .translate(-50%, 30px);
  z-index: 9999;
  background: @subMenuBg;
  border: @subMenuBorder;
  ul {
    margin-bottom: 0;
  }
  li {
    text-transform: none;
    a.iceMenuTitle {
      display: block;
      font: (@subMenuItemFontSize)~"/"(@subMenuItemLineHeight) @subMenuItemFontFamily;
      padding: 4px 20px;
      color: @subMenuItemColor;
    }
    &.active,
    &:hover,
    &.hover {
      > a.iceMenuTitle {
        color: @subMenuItemActColor;
        background: @subMenuItemBgActColor;
      }
    }
  }
  &.sub_level_1 {
    margin-top: @subMenuMarginTop;
  }
  &.sub_level_2 {
    margin-top: -15px;
  }
}

li[class*=iceMenuLiLevel] {
  padding: 0;
  &:before {
    display: none;
  }
}

#icemegamenu li.iceMenuLiLevel_1.hover {
  > ul.icesubMenu {
    opacity: 1;
    overflow: visible;
    pointer-events: auto;
    .translate(-50%, 0px);
  }
}

#icemegamenu li.iceMenuLiLevel_1 li.hover > ul.icesubMenu {
  height: auto;
  opacity: 1;
  overflow: visible;
  pointer-events: auto;
  .translate(0, 0px);
}

#icemegamenu ul.icesubMenu.visible {
  height: auto;
}

ul.icesubMenu ul > li {
  position: relative;
}

/* when is parent */
ul.icesubMenu {
  > li {
    &:before {
      display: none;
    }
    > .iceCols {
      max-width: 100% !important;
    }
  }
}

/* Second Level Dropdown */
ul.sub_level_2,
ul.sub_level_3,
ul.sub_level_4,
ul.sub_level_5 {
  left: 100%;
  margin-left: 10px;
  top: 0px;
  .translate(30px, 0);
  z-index: 99999;
}

ul.icesubMenu ul > li.hover > ul {
  opacity: 1;
  overflow: visible;
  .translate(0, 0);
  visibility: visible;
}

.icesubMenu .icemega_cover_module span.iceModuleTile {
  display: block;
}

.ice_righttoleft {
  left: auto !important;
  right: 0;
}

.icemega_modulewrap {
  padding: 20px 20px 0px;
  .item__module,
  .item,
  .mod-article-single {
    margin-bottom: 0;
  }
}

.nav-collapse .icesubMenu {
  .nav > li > a,
  .dropdown-menu a {
    margin-bottom: 0;
    padding: 0;
  }
}

.nav-collapse.collapse {
  height: auto;
}

// Full Width Submenu
.fullwidth {
  position: static !important;
  &.hover {
    ul.icesubMenu.sub_level_1 {
      .translate(0, 0px) !important;
    }
  }
  ul.icesubMenu.sub_level_1 {
    left: 0px;
    padding: 0;
    .translate(0, 30px);
    &:before {
      display: none;
    }
    .icemega_cover_module {
      .moduleTitle {
        border-bottom: 2px solid @globalColor;
        padding-bottom: 11px;        
      }
      h4 {
        font-size: 26px;
        font-weight: bold;
        margin-bottom: 18px;
      }
      ul.list {
        li {
          margin: 0 !important;
          > a, > span {
            .border-radius(@borderRadiusSmall);
            display: block;
            padding: 9px 16px;
          }
          > a:hover {
            background: @globalColor2;
            color: white;
          }
        }
      }
      .icemega_modulewrap {
        padding: 0;
      }
    }
    .iceCols {
      > ul {
        padding: 0 20px;
      }
    }
    > li {
      padding: 38px 20px;
      position: relative;
      > .iceCols {
        & + .iceCols {
          &:before {
            // background: @tableBorderColor;
            bottom: 31px;
            content: '';
            position: absolute;
            top: 30px;
            width: 1px;
          }
        }
      }
    }
  }
}

@media (max-width: 979px) {
  .icemegamenu {
    overflow: visible !important;
  }
}