// =============================================================================
// SCSS/SITE/STACKS/INTEGRITY/_MEGAMENU.SCSS
// -----------------------------------------------------------------------------
// Styling for the megamenu.
// =============================================================================

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

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

.x-nav .x-megamenu {
  > .sub-menu {
    a {
      padding: 6px 10px;
      white-space: normal;
      border-radius: 4px;
    }

    > li {
      float: left;
      margin: 18px 0;
      border-right: 1px solid darken($navbarBackground, 5%);
      padding: 0 18px;

      > a {
        margin: 0;
        @include font-size(1.4);
        text-transform: uppercase;
        color: $navbarLinkColorHover;
        background-color: transparent;

        &:after {
          display: none;
        }
      }

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

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

}



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

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

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

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

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



// Responsive Styles
// =============================================================================

@include break(cubs) {
  .x-nav .x-megamenu {
    > .sub-menu {
      position: static;
      width: auto !important;
      padding: 0 !important;

      > li {
        float: none;
        margin-top: 0;
        margin-bottom: 0;
        border-right: 0;
        padding: 0;

        > a {
          color: inherit;
          text-transform: none;

          &:after {
            display: inline;
          }
        }

        > .sub-menu {
          width: auto;
        }
      }
    }

    &.col-2,
    &.col-3,
    &.col-4,
    &.col-5 {
      > .sub-menu > li {
        width: auto;
      }
    }
  }
}