.sidenav {
  z-index: var(getCssVar(sidenav-z-index));
  width: var(getCssVar(sidenav-width));
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: flex;
  flex-direction: column;
  transform: translateX(-105%);
  transition: transform ease;
  overflow: hidden;

  .btn {
    flex-shrink: 0;
  }

  &.sidenav-right {
    left: initial;
    right: 0;
    transform: translateX(105%);
  }

  &.active {
    transform: translateX(0);
    overflow-y: auto;
  }

  @include responsive('md-up') {
    &.sidenav-fixed {
      transform: none;
    }
  }

  &:hover {
    overflow-y: auto;
  }

  @media (hover: none) {
    overflow-y: auto;
  }

  .sidenav-header {
    min-height: var(getCssVar(sidenav-header-height));
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1rem 0.5rem;
    position: relative;
    flex-shrink: 0;

    .sidenav-logo {
      height: var(getCssVar(sidenav-logo-height));
    }
  }

  .sidenav-link {
    color: inherit;
    text-decoration: none;
    display: block;
    padding: 0 0.75rem;
    transition: background-color 0.23s ease;
    line-height: 3rem;
    flex-shrink: 0;
    cursor: pointer;

    &:hover,
    &.active {
      background-color: var(getCssVar(hover-background));
    }
  }

  .sidenav-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 0.5rem;
    margin-top: auto;
    flex-shrink: 0;
  }

  &.hover-text,
  .hover-text,
  &.hover-text-dark,
  .hover-text-dark {
    &.sidenav-link,
    .sidenav-link {
      transition: color 0.3s ease;

      &:hover,
      &.active {
        background-color: inherit !important;
      }
    }
  }

  &.hover-text,
  .hover-text {
    &.sidenav-link,
    .sidenav-link {
      &:hover,
      &.active {
        color: var(getCssVar(hover-text-color));
      }
    }
  }

  &.hover-text-dark,
  .hover-text-dark {
    &.sidenav-link,
    .sidenav-link {
      &:hover,
      &.active {
        color: var(getCssVar(hover-text-color-dark));
      }
    }
  }
}

.sidenav .dropdown .dropdown-content {
  z-index: var(getCssVar(dropdown-z-index-sidenav));
}