// =============================================================================
// _MEGAMENU.SCSS
// -----------------------------------------------------------------------------
// Site styles.
// =============================================================================

// =============================================================================
// TABLE OF CONTENTS
// -----------------------------------------------------------------------------
//   01. Base Styles
//   02. Navbar Layout Styles
// =============================================================================

// Base Styles
// =============================================================================

.desktop .x-nav .x-megamenu {
  > .sub-menu {
    a {
      padding: 1px 0;
      white-space: normal;
    }

    > li {
      float: left;
      padding: 16px 18px;

      > a {
        border-top: 2px solid $navbarLinkBorderColor;
        padding: 10px 0 5px;
        @include font-size(1.7);
        text-transform: uppercase;
        color: $navbarLinkColorHover;

        > span:after {
          display: none;
        }
      }

      > .sub-menu {
        display: block !important;
        position: static;
        visibility: visible !important;
        width: 100%;
        min-width: 0;
        padding: 0;
        @include box-shadow(#{none});

        > li {
          &:last-child {
            a {
              padding-bottom: 0;
            }
          }
        }
      }
    }
  }

  &.col-2 > .sub-menu > li { width: 50%;      &:nth-child(3n) { clear: left; } }
  &.col-3 > .sub-menu > li { width: 33.3333%; &:nth-child(4n) { clear: left; } }
  &.col-4 > .sub-menu > li { width: 25%;      &:nth-child(5n) { clear: left; } }
  &.col-5 > .sub-menu > li { width: 20%;      &:nth-child(6n) { clear: left; } }

}



// Navbar Layout Styles
// =============================================================================

.x-navbar-static-active,
.x-navbar-fixed-top-active {
  .desktop .x-nav .x-megamenu {
    position: static;

    > .sub-menu {
      padding: 18px;
      left: 0;
      right: 0;
    }
  }
}

.x-navbar-fixed-left-active,
.x-navbar-fixed-right-active {
  .desktop .x-nav .x-megamenu {
    position: relative;

    > .sub-menu {
      padding: 18px;
      width: 600px;
    }
  }
}