// Recursive
.ah-list {
  margin: 0;
  padding: 0;
  li {
    list-style: none;
  }
  // Recursive
  ul {
    margin: 0;
    padding: 0;
  }
}



// Design Default Template 1  .ah-list--design1 > li > a
  .ah-list--design1 {
    > li {
      display: inline-block;
      > a {
        display: inline-block;
        font-size: 16px;// icon
        padding: 28px 18px; // padding top bottom height 80/2 =40 / 2 = 20 so + 4 = 24
}
}
  }


  // For Index 1
.ah-list--link-color-secondary {
  > li {
    > a {
      color:$g-brand-secondary-color;
    }
  }
}


// For Index 2 / Index 3, but on tablet devices it would become secondary color
.ah-list--link-color-white {
  > li {
    > a {
      color: $g-white;
    }
  }
}




// Custom Design Default Template 2  .ah-list--design1 > li > a
.ah-list--design2 {
  > li {
    display: inline-block;
    > a {
      font-weight: 700;
      font-size: 12px;
      display: inline-block;
      padding: 31px 14px;
    }
  }
}

// Level 1 , 2 and so on recursive
.has-dropdown > ul .has-dropdown {
  position: relative;
}


// Level 0
.has-dropdown > ul {
    background-color: $g-white;
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.13);
    position: absolute;
    text-align: left;
    padding: 20px 0 20px; // only top bottom
    z-index: 999;
    white-space: nowrap;
    transition: all 0.3s ease;
     top:120%; // increment increase distance from item (means bottom)
    opacity: 0;
    visibility: hidden;
    > li {
      > a {
        display: block;
        padding: 8px 20px;
        color: $g-brand-secondary-color;
        font-size: 12px;
        font-weight: 600;
      }
    }
  }


// This class should apply on list item with class has-dropdown
// Modifier 1: For Left Side
.has-dropdown--ul-left-100 > ul {
   left: 100%;
 }

// Modifier 2: For Right Side
.has-dropdown--ul-right-100 > ul {
  right: 100%;
}

// Global Styles end


// Less than
@media (max-width: $g-mobileBreakpoint * 1px) {

	// Recursive style
  .menu-init {
    // Remove all angle downs on mobile menu
    .fa-angle-down {
      &:before {
        content: none;
      }
    }
  }


  .menu-init.js-open {
    .ah-lg-mode {
      left:0;
      transition: all .4s ease-in-out;
    }
    &:after {
      content: "";
      width: 100%;
      height: 100%;
      position: fixed;
      top: 0;
      left: 0;
      display: block;
      background-color: rgba(0,0,0,.7);
      z-index: 19999;
    }
  }



  .ah-lg-mode {
    position: fixed; // Relative to the .container
    left: -315px;// iphone 5 has total width 320px
    width: 315px;
    height: 100%;
    top: 0;
    background-color: $g-white;
    z-index: 20000;
    overflow-y: auto;
  }


  .ah-close {
    color: $g-brand-secondary-color;
    padding: 20px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: block;
  }

  // For Dropdown
  .ah-list {
    > li {
      position: relative;
      display: block;
     // padding:0;
      border-top: 1px solid $g-border-color;
      > a {
        display: block;
        padding:8px 18px;
      }
    }
    > li:last-child {
      border-bottom: 1px solid $g-border-color;
    }




    // Default
    &--design1,&--design2 {
      > li {
        > a {
          font-weight: normal;
          font-size: 14px;
        }
      }
    }

  }



  .ah-list--link-color-white {
    > li {
      > a {
        color: $g-brand-secondary-color;
      }
    }
  }




  .js-menu-toggle {
    width: 21px;
    display: block;
    height: 21px;
    border-radius: 50%;
    background-color: $g-white;
    box-shadow: 1px 1px 0 0 rgba(0, 0, 0, 0.13);
    position: absolute;// position relative to list item
    right: 15px;
    top:6px;// same as top-bottom padding of link
    transition: all .3s;
    cursor: pointer;
    &:after {
      font-family: 'Font Awesome 5 Free';
      content: "\F067";
      position: absolute;// position relative to span
      top: 50%;
      width: 100%;
      font-weight: 900;
      color: $g-brand-secondary-color;
      display: block;
      transform: translateY(-50%);
      text-align: center;
      font-size: 8px;
    }

    &.js-toggle-mark {
      &:after {
        content: "\F068";
      }
    }

  }


  // Dropdown style Level 0
  .has-dropdown > ul {
    width: 100% !important;
    box-shadow: none;
    transition: none;
    position: static;
    padding: 0 0 10px;
    opacity: 1;
    visibility: visible;
    // through jquery
    display: none;// This property is very important helps to remove transition flash of dropdown when window
    // is resize

    > li {
      padding: 0;
      > a {
        display: block;
      }
    }
  }







  // Hard coded settings for level0 mobile language , currency
  // Level 0
  .ah-list > li > ul > li > a {
    padding: 8px 36px;// 18*2 = 36px
  }

  .ah-list > li > ul > li > ul > li > a {
    padding: 8px 54px;//18 * 3 = 54
  }

  // Level 2
  .ah-list > li > ul > li > ul > li > ul > li > a {
    padding: 8px 72px;//18 * 4 = 72
  }




}




// Greater than
@media (min-width: ($g-mobileBreakpoint + 1) * 1px) {

  .toggle-button {
    display: none;
  }

  .ah-close {
    display: none;
  }

  // Hover effect for level 0 list
  .ah-list {
    > li {
      > a:hover {
        color: $g-brand-color;
      }
    }
  }

  // Hover only works on desktop mode
  // Level 0
  .has-dropdown > ul {
    > li:hover {
      background-color: #fbfbfb;
    }
  }


  .has-dropdown:hover > ul {
    opacity: 1;
    visibility: visible;
  }

  // Level 0
  .ah-list > .has-dropdown:hover > ul {
    top: 100%; // increment increase distance from item (means bottom)
  }

  // after Level 0, apply on all nested dropdowns
  .has-dropdown .has-dropdown:hover > ul {
    top: 0;
  }






  // Apply only to first list items which has drop down
  .ah-list {
    // li
    > .has-dropdown:hover > a {
      color: $g-brand-color;
    }
  }

  // Icon settings
    .has-dropdown {
      > a {
        // It is place inside anchor element. By default computed line-height of anchor is 18px
        .fa-angle-down {
          // So anchor has line-height 18px for vertical center we also need to set the icon line-height 18px
          font-size: 10px;
          line-height: 18px;
          float: right;
        }
      }

      &:hover {
        > a {
          // Right
          .i-state-right:before {
            content: "\F105";
          }
        }
    }

    }

}