// evawp mobile menu configuration
$overlay            : true;
$evawp_menu_type       : overlay; // overlay or shift
$evawp_menu_direction  : right;  // left or right 
$evawp_menu_animation  : all 0.2s linear;
$evawp_overlay_color   : rgba(#000, 0.5);
$evawp_menu_width      : 300px;   
$evawp_menu_color      : #fff;
$evawp_menu_text_color : #000;  
// $evawp-font            : Oswald; // if you inherit font then remove this variable

//  font-size
$evawp-fs-first-level  : 1.03rem; /* fs = font size */
$evawp-fs-rest-level   : 0.95rem; 
   
// sub menu arrow
$evawp_submenu_indicator_arrow_width    : 30px;
$evawp_submenu_indicator_arrow_color    : #000;
$evawp_submenu_indicator_arrow_animation : true;

// close button
$evawp_close_button_size      : 20px;
$evawp_close_button_position  : right;
$evawp_colse_button_animation : true;
$close-icon-color: #000;

// Arrow width
$arrow-width: 1px;

//Browser reset
.evawp-menu{
    ul {
        margin: 0;
        padding: 0;
    }
    a { text-decoration: none; }
}

// OVERLAY FOR MOBILE MENU
@if ( $overlay ){
  .evawp-mobile-menu-overlay {
      background-color: $evawp_overlay_color;
      position: fixed;
      left: 0;
      bottom: 0;
      right: 0;
      top: 0;
      z-index: 99;
      opacity: 0;
      visibility: hidden;
      -webkit-transition: all 0.3s ease-in-out;
         -moz-transition: all 0.3s ease-in-out;
              transition: all 0.3s ease-in-out;

      &.evawp-menu-open {
        opacity: 1;
        visibility: visible;
      }
  }
} // End overlay

@if( shift == $evawp_menu_type) and (left == $evawp_menu_direction ){
  body{
    position: relative;
    left: 0;
    -webkit-transition: $evawp_menu_animation;
       -moz-transition: $evawp_menu_animation;
            transition: $evawp_menu_animation;
    &.evawp-menu-open{
      left: $evawp_menu_width;
    }
  }
}

@if( shift == $evawp_menu_type) and (right == $evawp_menu_direction ){
  body{
    position: relative;
    right: 0;
    -webkit-transition: $evawp_menu_animation;
       -moz-transition: $evawp_menu_animation;
            transition: $evawp_menu_animation;
    &.evawp-menu-open{
      right: $evawp_menu_width;
    }
  }
}

body {
  overflow-X: hidden;

  &.evawp-menu-open{
    overflow-y: hidden;
  }
}

//gh-shift-menu
.evawp-mobile-menu {
    position: fixed;
    top: 0;
    height: 100%;
    overflow-y: auto;
    width: $evawp_menu_width;
    z-index: 99999;
    overflow-x: hidden;
    background-color: $evawp_menu_color;
    -webkit-transition: $evawp_menu_animation;
       -moz-transition: $evawp_menu_animation;
            transition: $evawp_menu_animation;

    //overlay right menu
    @if (overlay == $evawp_menu_type) and (right == $evawp_menu_direction) {
      right: -$evawp_menu_width;
      &.evawp-menu-open{
          right: 0;
      }
    }

    @if (overlay == $evawp_menu_type) and (left == $evawp_menu_direction) {
      left: -$evawp_menu_width;
      &.evawp-menu-open{
          left: 0;
      }
    }

    @if( shift == $evawp_menu_type) and (left == $evawp_menu_direction ){
      left: -$evawp_menu_width;
      &.evawp-menu-open{
          left: 0;
      }
    }

    @if( shift == $evawp_menu_type) and (right == $evawp_menu_direction ){
      right: -$evawp_menu_width;
      &.evawp-menu-open{
          right: 0;
      }
    }

    ul.menu {
        margin: 0;
        padding: 0;
        list-style: none;
        @if variable-exists(evawp-font) {
            font-family: #{$evawp-font};
        }

        > li {
            > a {
                padding: 10px 35px 10px 15px;
                display: block;
                font-weight: 300;
                font-size: $evawp-fs-first-level;
                text-transform: capitalize;
                color: $evawp_menu_text_color;
                position: relative;
            }

            ul {
                background-color: darken($evawp_menu_color, 3%);
                display: none;

                li {
                    list-style: none;
                    position: relative;

                    a {
                        display: block;
                        padding: 10px 35px 10px 15px;
                        border-bottom: 1px solid darken($evawp_menu_color, 5%);
                        color: $evawp_menu_text_color;
                        font-size: $evawp-fs-rest-level;
                        position: relative;
                    }

                    ul {
                        li {
                            a {
                                padding: 8px 0 8px 25px;
                            }
                        }
                    }
                }
            }
        }
        //li
    }
    //ul
}
//shift_menu

.evawp-arrow-box {
    display: inline-block;
    float: right;
    width: $evawp_submenu_indicator_arrow_width;
    transition: all 0.3s linear;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;

    @if $evawp_submenu_indicator_arrow_animation{
      -webkit-transfrom: scale(0.5);
      -moz-transfrom: scale(0.5);
      transform: scale(0.5);

      .evawp-menu-open &{
        -webkit-transfrom: scale(1);
           -moz-transfrom: scale(1);
                transform: scale(1);
       -webkit-transition: all 0.4s ease-in-out 0.2s;
          -moz-transition: all 0.4s ease-in-out 0.2s;
              transition: all 0.4s ease-in-out 0.2s;
      }
    }

    &.open {
        transform: rotate(180deg);
    }

    .evawp-down-arrow {
        width: 8px;
        height: 8px;
        position: absolute;
        top: 46%;
        left: 60%;
        transform: translate(-50%, -50%);

        &:after,
        &:before {
            content: '';
            position: absolute;
            height: 100%;
            width: $arrow-width;
            background-color: $evawp_submenu_indicator_arrow_color;
        }

        &:after {
            transform: rotate(45deg) translateX(3px);
            transform-origin: right;
        }

        &:before {
            transform: rotate(-45deg) translateX(-3px);
            transform-origin: left;
        }
    }
} // evawp-arrow-box

.evawp-close-wrapper {
    text-align: $evawp_close_button_position;
    padding: 10px 7px;

    .evawp-inner-box {
        width: $evawp_close_button_size;
        height: $evawp_close_button_size;
        cursor: pointer;
        display: inline-block;
        position: relative;
        background: transparent;
        border: none;
        @if $evawp_colse_button_animation{
          -webkit-transform: scale(0) rotate(180deg);
          -moz-transform: scale(0) rotate(180deg);
           transform: scale(0) rotate(180deg);

          .evawp-menu-open &{
            -webkit-transform: scale(1) rotate(0deg);
               -moz-transform: scale(1) rotate(0deg);
                    transform: scale(1) rotate(0deg);
            -webkit-transition: all 0.4s ease-in-out 0.3s;
               -moz-transition: all 0.4s ease-in-out 0.3s;
                   transition: all 0.4s ease-in-out 0.3s;
          }

        }

        .evawp-inner{
          display: inline-block;
          &:after, &:before{
            content: "";
            position: absolute;
            background-color: $close-icon-color; 
            top: 50%;
            left: 50%;
            width: 2px;
            height: 100%;
            -webkit-transform: translate( -50%, -50% ) rotate(45deg);
                    transform: translate( -50%, -50% ) rotate(45deg);
          }
          &:before{
            -webkit-transform: translate(-50%, -50%) rotate( -45deg);
                    transform: translate(-50%, -50%) rotate( -45deg);
          }

        }
    }

}


$evawp-line-color : #008b9e;
$evawp-line-animation: 0.35s ease;

//Menu Toggle Design
.menu-toggler, .sliding-menu-toggler{
    margin-top: 0;
    margin-left: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    float: right;
    font-size: 32px;
    width: 24px;
    height: 24px;
    cursor: pointer;
    padding: 0;
    position: relative;
    margin-right: 10px;

    &:focus{
        outline: 1px solid #fff;
    }
$evawp-line-color : #fff;
$evawp-line-animation: 0.35s ease;

//Menu Toggle Design
.menu-toggler, .sliding-menu-toggler{
    margin-top: 0.55rem;
    margin-left: 0.3rem;
    background: transparent;
    border: none;
    box-shadow: none;
    float: right;
    font-size: 32px;
    width: 24px;
    height: 24px;
    cursor: pointer;
    padding: 0;
    position: relative;
    margin-right: 10px;

    &:focus{
        outline: 1px solid #fff;
    }
    
    span {
        display: block;
        position: absolute;
        height: 2px;
        width: 100%;
        background: $evawp-line-color;
        opacity: 1;
        left: 0;

        -webkit-transform: rotate(0deg);
           -moz-transform: rotate(0deg);
                transform: rotate(0deg);

        -webkit-transition: transform #{$evawp-line-animation};
           -moz-transition: transform #{$evawp-line-animation};
                transition: transform #{$evawp-line-animation};

        &:nth-child(1) {
            top: 0px; 
        }
        &:nth-child(2),
        &:nth-child(3) {
            top: 8px;
        }
        &:nth-child(4) {
            top: 16px;
        }
    }

    &.evawp-menu-open {
        z-index: 9;
        span {
            &:nth-child(1) {
                top: 8px;
                width: 0%;
                left: 50%;
            }
            &:nth-child(2) {
                -webkit-transform: rotate(45deg);
                -moz-transform: rotate(45deg);
                transform: rotate(45deg);
            }
            &:nth-child(3) {
                 -webkit-transform: rotate(-45deg);
                 -moz-transform: rotate(-45deg);
                 transform: rotate(-45deg);
            }
            &:nth-child(4) {
                top: 18px;
                width: 0%;
                left: 50%;
            }
        }
    }
}
    
    span {
        display: block;
        position: absolute;
        height: 3px;
        width: 100%;
        background: $evawp-line-color;
        opacity: 1;
        left: 0;

        -webkit-transform: rotate(0deg);
           -moz-transform: rotate(0deg);
                transform: rotate(0deg);

        -webkit-transition: transform #{$evawp-line-animation};
           -moz-transition: transform #{$evawp-line-animation};
                transition: transform #{$evawp-line-animation};

        &:nth-child(1) {
            top: 0px; 
        }
        &:nth-child(2),
        &:nth-child(3) {
            top: 8px;
        }
        &:nth-child(4) {
            top: 16px;
        }
    }

    &.evawp-menu-open {
        z-index: 9;
        span {
            &:nth-child(1) {
                top: 8px;
                width: 0%;
                left: 50%;
            }
            &:nth-child(2) {
                -webkit-transform: rotate(45deg);
                -moz-transform: rotate(45deg);
                transform: rotate(45deg);
            }
            &:nth-child(3) {
                 -webkit-transform: rotate(-45deg);
                 -moz-transform: rotate(-45deg);
                 transform: rotate(-45deg);
            }
            &:nth-child(4) {
                top: 18px;
                width: 0%;
                left: 50%;
            }
        }
    }
}