@mixin base-sidenav {
  top: 0;
  bottom: 0;
  flex: 0 0 auto;
  transition: none;
  font-weight: 500;
  min-height: 100vh;
  width: $sidebar-width;
  color: $sidebar-color;
  box-sizing: content-box;
  z-index: $sidebar-z-index;
  background-clip: content-box;
  border-right: $sidebar-border;
  font-size: $sidebar-font-size;
  background-color: $sidebar-bg;
}

@mixin sidenav-body {
  bottom: 0;
  flex: 1 1 0%;
  width: inherit;
  overflow-y: auto;
  overflow-x: hidden;
  top: $header-height;
  margin-bottom: $footer-height + $space-lg;
  padding-bottom: $footer-height + $space-lg;
  transition: left ease-in-out 0.15s, right ease-in-out 0.15s;
}

@mixin sidenav-collapse {
  bottom: 0;
  display: flex;
  position: fixed;
  font-size: 18px;
  cursor: pointer;
  align-items: center;
  width: $sidebar-width;
  height: $footer-height;
  justify-content: flex-end;
  color: $sidebar-icon-color;
  background: $sidebar-collapse-bg;
  border-top: 1px solid $sidebar-collapse-bd;

  > .c-sidenav-menu-icon {
    @include icon-arrow(left);

    right: 14px;
  }

  &:hover {
    background-color: $sidebar-collapse-bg-hover;
  }
}


@mixin sidenav-menu {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: $space-0;
  padding-left: $space-0;
  flex-direction: column;
  // min-height: 100vh;
}


@mixin sidenav-menu-link {
  display: flex;
  position: relative;
  align-items: flex-start;
  border-radius: $radius-sm;
  color: $sidebar-link-color;
  margin: $sidebar-link-margin;
  padding: $sidebar-link-padding;
  line-height: $sidebar-link-line-height;
  transition: background-color ease-in-out 0.15s, color ease-in-out 0.15s;

  .c-sidenav-menu-icon {
    color: $sidebar-icon-color;
    margin: $sidebar-icon-margin;
    font-size: $sidebar-icon-font-size;
  }

  &:hover {
    color: $sidebar-link-hover-color;
    background-color: $sidebar-link-hover-bg;

    .c-sidenav-menu-icon {
      color: $sidebar-icon-color-active;
    }
  }

  &-active {
    font-weight: $font-weight-bold;
    color: $sidebar-link-active-color;
    background-color: $sidebar-link-active-bg;

    .c-sidenav-menu-icon {
      color: $sidebar-icon-color-active;
    }
  }
}