@import '../scss/init.scss';

.navDrawer {
  z-index: $z_navDrawer;
  height: 100vh;


  // keep navDrawer in the render tree
  pointer-events: none;
  @at-root .layout.is_drawerOpen & {
    pointer-events: auto;
  }

  &_front {

    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 10;

    &_header {
      flex: 0 0 56px;
      padding-left: $s_gutter;
      padding-right: $s_gutter;
      display: flex;
      align-items: center;
      border-bottom: 1px solid $c_divider;
    }

    &_body {
      flex: 1;
      @include allowScroll('y');
      padding-bottom: $s_gutter * 3;
    }

    &_body_section {
      padding-top: $s_gutter / 2;
      padding-bottom: $s_gutter / 2;
      border-bottom: 1px solid $c_divider;

      &:last-child {
        border-bottom-width: 0;
      }
    }
  }

  &_user {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: $s_gutter;
    padding-right: $s_gutter / 2; // icon
  }

  &_navLink {
    color: inherit;
    text-decoration: none;
    display: flex;
    height: $s_touchable;
    align-items: center;
    padding-left: $s_gutter;
    padding-right: $s_gutter;
    @include clipText;

    @at-root .navDrawer .collapse & {
      padding-left: $s_gutter + $s_icon + $s_gutter * 1.5;
    }
  }

  &_action {
    width: 100%;
    @include resetButton;

    &_inner {
      display: flex;
      align-items: center;
      padding-left: $s_gutter;
      padding-right: $s_gutter;
      height: $s_touchable;
    }

    &_icon {
      margin-right: 24px;
    }

    &_label {
      color: $c_text_primary;
    }
  }

  .collapse {
    &_header {
      padding-left: $s_gutter;
      padding-right: $s_gutter;
    }

    &.is_current .collapse_header {
      color: $c_primary;
      .mdIcon {
        color: inherit;
      }
    }
  }

  &_background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: $c_dialog_bg;

  }
}


// floating
.navDrawer {
  width: 100vw;

  &_front {
    background-color: $c_paper;
    color: $c_text_primary;
    width: 280px;

    transform: translateX(-100%);
    transition: 300ms;

    @at-root .layout.is_drawerOpen & {
      transform: translateX(0);
    }
  }

  &_user_actions button::before {
    color: $c_icon;
  }

  .collapse_header::before {
    color: $c_icon;
  }

  &_navLink.is_active {
    background-color: rgba($c_primary, 0.08);
  }

  &_background {
    opacity: 0;
    transition: 300ms;

    @at-root .layout.is_drawerOpen & {
      opacity: 1;
    }
  }
}


// fixed
@include respondTo_page(lg) {
  .navDrawer {
    width: $s_navDrawerWidth;
    z-index: $z_navDrawer - 1;

    &_header {
      visibility: hidden;
    }

    &_front {
      width: $s_navDrawerWidth;
      @include depth(3);
    }

    &_background {
      display: none;
    }

    &_user_avatar {
      box-shadow: 0 0 0 4px $c_icon;
    }
  }
};