/* Extension Mega Menu */

// Global Styles

.mega-text {
  width: 34px;
  height: 34px;
  display: inline-block;
  user-select: none;
  background-color: $g-brand-color;
  font-size: 12px;
  font-weight: 600;
  line-height: 34px;
  text-align: center;
  cursor: pointer;
  color: $g-white;
}


.mega-menu-list {
  > ul {
    > li {
      > a {
        display: block;
        padding: 10px 22px;
        color: $g-black;
        text-transform: uppercase;
        font-weight: 600;
        font-size: 12px;
      }
      &.js-active {
        background: linear-gradient(225deg, $g-brand-color,$g-brand-color);
        > a {
          color: $g-white;
        }
      }
    }
  }
}
.mega-menu-content {
  display: none;// Add class js-active through jQuery
}
.mega-menu-content.js-active {
  display: block;
}
.mega-menu-content {
  [class*="col-"] {
    > ul {
      > li {
        > a {
          padding: 4px 0;
          display: block;
          color: $g-brand-secondary-color;
          font-size: 13px;
          transition: color 0.5s;
          &:hover {
            color: darken($g-brand-color, 1%);
          }
        }
      }
    }

    > ul {
      > .mega-list-title {
        > a {
          font-weight: 700;
        }
      }
    }

  }
}
.mega-menu-content {
  > h5 {
    font-weight: 600;
    margin: 6px 0 0;
    font-size: 12px;
    color: $g-black;
  }
}







// Less than
@media (max-width: $g-mobileBreakpoint * 1px) {
// Same styles that we created for portrait mode
  .toggle-mega-text {
    width: 34px;
    display: inline-block;
    height: 34px;
    user-select: none;
    background-color: $g-brand-color;
    font-size: 12px;
    font-weight: 600;
    line-height: 34px;
    text-align: center;
    cursor: pointer;
    color: $g-white;
  }



// Through jQuery display:block is added
   .mega-menu {
      display: none;
  }

  // by default .mega-menu-wrap in portrait mode doesn't have any properties and display:block
  // behavior will apply


  .mega-menu-list {
    padding: 20px;
    border: 1px solid #f6f6f6;
    > ul {
      > li {
        position: relative;// Relative for just span toggle
      }
    }
  }


  .mega-menu-content {
    padding:20px;
  }



  .mega-menu-content {
    .row {
      display: block;
    }
    [class*="col-"] {
      margin-bottom: 15px; // margin bottom
      max-width: 100%; // Apply to all columns
    }
  }


  .mega-image {
    display:none;
  }

}

// Desktop Styles Greater than
@media (min-width: ($g-mobileBreakpoint + 1) * 1px) {
  .js-open.mega-text {
    animation: mypulse 1s;
  }
  .js-open.mega-text ~ .mega-menu {
    display: block;
  }

  .mega-menu {
    display: none;
    padding: 30px;
    width: 100%; // Because There are some categories which has no sub categories
    background-color: $g-white;
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.13);
    position: absolute;
    z-index: 998;
    top: 100%;
  }

  .mega-menu-wrap {
    display: flex;
    flex-wrap: nowrap;
  }

  .mega-menu-list {
    flex: 0 0 20%;
    max-width: 20%;
  }



  .mega-menu-content {
    flex: 0 0 80%;
    max-width: 80%;
    overflow-y:auto;
    padding: 0 17px;
    height: 370px;
    transition: opacity 0.5s;
    display: none;
    // Added through jQuery when hover, opacity: 0;
    // Width
    &::-webkit-scrollbar {
      width: 8px;
    }


    // Track
    &::-webkit-scrollbar-track {
      background: #eee;
    }

    // Handle
    &::-webkit-scrollbar-thumb {
      background: #888;
    }

    // Handle on hover
    &::-webkit-scrollbar-thumb:hover {
      background: #555;
    }

  }





  // Mega-Banner Hover effect
  .mega-banner {
    position: relative;
    overflow: hidden;
    img {
      transform: scale(1);
      transition: all 0.6s ease-in-out;
    }

    &:hover {
      img {
        transform: scale(1.1);
      }
    }
  }

  .mega-image {
    margin: auto 0;
  }

}
