.side_module {
  position: fixed;
  height: 100%;
  width: 0;
  z-index: 7;
  top: 0;
  left: 0;

  -webkit-transition: -webkit-transform 350ms ease;
  transition: -webkit-transform 350ms ease;
  transition: transform 350ms ease;
  transition: transform 350ms ease, -webkit-transform 350ms ease;
  //
  // state: hidden
  //
  &.is-hidden{
    -webkit-transform: translateX(-#{$sidebar-width - 0px});
    transform: translateX(-#{$sidebar-width - 0px});
  }
}

.sidebar {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  width: $sidebar-width;
  background: $sidebar_bgc;

  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;

  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;

  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;

  -ms-flex-line-pack: justify;
  align-content: space-between;

  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}




.sidebar__toggle  {
  position: absolute;
  left: $sidebar-width;
  width: $sidebar-toggle_width;
  height: 100%;
  background: $sidebar-toggle_bgc;
  display: block;
  cursor: pointer;

  // toggle button
  span{
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: 2.3em;
    text-rendering: auto;

    -webkit-font-smoothing: antialiased;

    -webkit-transition: all 400ms ease;
    transition: all 400ms ease;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);

    color: $logo-main-color;
    position: absolute;
    top: 5px;
    right: 5px;

    &::before{
      content: "\f054";
      display: inline-block;
    }
  }

  // change color of toggle button on hover
  &:hover{
    span{
      color: darken($logo-main-color, 12);
    }
  }
}

// toggle button on hidden state
.side_module.is-hidden .sidebar__toggle {

  span {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
}
