@import '~styles/schema.scss';
@import '~styles/utils.scss';

$animation-length: 0.33s;

$menu-box-shadow: 0px 0px 4px 4px rgba(0,0,0,0.45);


@mixin animate($type) {
  transition: $type $animation-length;
  -webkit-transition: $type $animation-length;
  -moz-transition: $type $animation-length;
  -o-transition: $type $animation-length;
  transition-timing-function: ease-in-out;
  -webkit-transition-timing-function: ease-in-out;
  -moz-transition-timing-function: ease-in-out;
  -o-transition-timing-function: ease-in-out;
}


@mixin anim($content) {
  transition: $content;
  -webkit-transition: $content;
  -moz-transition: $content;
  -o-transition: $content;
}


/* side menu styles */
.side-menu-layout {
  position:relative;
  width:100%;
  height:100%;
  padding:0px;
  margin:0px;
  border:0px;
  overflow:hidden;

  .side-menu-overlay {
    position:fixed;
    display:none;
    left:0px;
    top:0px;
    right:0px;
    bottom:0px;
    opacity: 0;
    background-color:#000000;
  }

  .top-menu-bar {
    top:0px;
    position:fixed;
    width:100%;
    height: $top-menu-bar-height;
    color: $menu-color;
    background-color:$menu-background-color;
    list-style-type: none;
    overflow-y:hidden;
  }

  .side-menu {
    .side-menu-info-section {
      @include anim(#{height $animation-length, opacity $animation-length});
      top:0px;
      height:240px;
      overflow: hidden;
    }
  }

  &.docked {
    .top-menu-bar {
      display: none;
    }

    .side-menu {
      @include animate(width);
    }
    .layout-content {
      @include animate(padding);
    }
  }

  &.docked.open {
    .side-menu {
      width:$side-menu-width;
      box-shadow: $menu-box-shadow;

      .side-menu-item span {
        opacity: 1;
      }
    }

    .side-menu-info-section {
      top:0px;
      height:240px;
      opacity:1;
    }

    .layout-content {
      padding-left:$side-menu-width + 10px;
    }
  }

  &.docked.closed {
    .side-menu {
      width:$side-menu-closed-width;
      box-shadow: $menu-box-shadow;
      padding-top: $top-menu-bar-height;

      .side-menu-item span {
        opacity: 0;
      }
    }

    .side-menu-info-section {
      height:0px;
      opacity:0;
    }

    .layout-content {
      padding-left:$side-menu-closed-width + 10px;
    }
  }

  &.overlay {

    .side-menu{
      width:$side-menu-width;
      @include animate(transform);
    }      

    .side-menu-overlay {
      @include anim(#{visibility 0s linear  $animation-length, opacity $animation-length});
    }

    .layout-content {
      padding-top: $top-menu-bar-height;
    }

    .top-menu-bar {
      display: block;
    }
  }

  &.overlay.open {
    .side-menu-overlay {
      display:block;
      opacity:0.47;
    }

    .side-menu {
      transform: translateX(0);
      box-shadow: $menu-box-shadow;
    }
  }

  &.overlay.closed {
    .side-menu-overlay {
      opacity:0;
    }

    .side-menu {
      transform: translateX(-$side-menu-width - 5);
    }

  }

  .side-menu {
    position:fixed;
    top:0px;
    height:100%;
    z-index:2;
    left:0px;
    background-color:$theme-main-color;
    overflow-y:auto;
    overflow-x:hidden;
  }


  .layout-content {
    padding: 0px 10px;
    overflow-y: auto;

  }

  .side-menu-button {
    top:0px;
    left:0px;
    width: $top-menu-bar-height;
    height: $top-menu-bar-height;
    z-index: 3;
    position:fixed;

    font-size: 24px;
    font-weight: 100;
    padding: 15px;

    text-decoration: none;
    font-weight: bolder;
    color: $menu-color;
    background:none;
    border:none;

    &:hover {
        color: $menu-color-active;
    }
  }
}


.side-menu-item {
  display: block;
  text-transform:capitalize;
  background:none;
  border:none;
  width:100%;
  height:$top-menu-bar-height;
  text-align:left;
  overflow:hidden;

  .icon,
  .icon:before {
    font-size: 24px;
    color: $menu-color;
  }

  .icon {
    display: inline-block;
    width: 58px;
    padding: 15px;
  }



  &:hover {
    color:$menu-color-active;
    background-color:$menu-background-color-hover;
  }

  span {
    text-transform: uppercase;
    font-weight:bolder;
    color:$menu-color;
    overflow-y: hidden;
    @include animate(opacity);
  }
}

.side-menu-item.active {
  .icon,
  span {
    color:$menu-color-active;       
  }
}

.side-menu-header {
  padding: 20px;
}



.top-menu-bar {
  display: none;
}

@media (max-width: 800px) {
  .layout-overlay {
      top: 58px !important;
  }

  .layout-content {
    padding-top:58px;
    > div {
      padding: 10px;
    }
  }

  .top-menu-bar {
    display: block;
  }

}



.side-menu::-webkit-scrollbar {
  width: 5px; 
}

.side-menu::-webkit-scrollbar-track {
  background-color: lighten($theme-main-color, 3%) 
}

.side-menu::-webkit-scrollbar-thumb {
  background-color: darken($theme-main-color, 5%) 
}

.side-menu::-webkit-scrollbar-button {
  background-color: $theme-main-color; 
}

.side-menu::-webkit-scrollbar-corner {
  background-color: $theme-main-color; 
}

.side-menu::-webkit-scrollbar-button:start:decrement {
  display: none; 
}

.side-menu::-webkit-scrollbar-button:end:increment {
  display: none; 
}
