.nav {
  background-color: rgba($lbry-gray-1, 0.7);
  color: $lbry-gray-5;
  min-width: var(--side-nav-width);
  padding: $spacing-width * 1/3;

  hr {
    border: solid 1px $lbry-gray-2;
    margin: $spacing-vertical $spacing-vertical * 2/3;
    width: 24px;
  }

  @media (min-width: $medium-breakpoint) {
    padding-left: $spacing-width;
    width: calc(var(--side-nav-width) * 1.4);
  }

  @media (min-width: $large-breakpoint) {
    width: calc(var(--side-nav-width) * 1.6);
  }
}

// Sidebar links
.nav__primary {
  padding-top: 80px;
}

.nav__link {
  color: inherit;
  white-space: nowrap;

  .btn__label {
    margin-left: $spacing-vertical * 1/3;
  }

  .btn {
    font-size: 16px;
    font-weight: 600;
    line-height: 36px;

    &:hover {
      color: $lbry-black;
    }

    @media only screen and (min-width: $medium-breakpoint) {
      font-size: 18px;
      line-height: 40px;
    }

    @media only screen and (min-width: $large-breakpoint) {
      font-size: 21px;
      line-height: 50px;
    }
  }
}

.nav__link--sub {
  margin-left: 5px;
  padding-left: $spacing-vertical * 2/3;

  .btn {
    font-size: 14px;
    font-weight: 500;
    line-height: 30px;

    @media only screen and (min-width: $medium-breakpoint) {
      font-size: 15px;
      font-weight: 600;
      line-height: 30px;
    }

    @media only screen and (min-width: $large-breakpoint) {
      font-size: 18px;
      line-height: 40px;
    }
  }
}

.nav__link--active {
  color: $lbry-black;
}

.nav__sub-links {
  color: $lbry-gray-5;
  padding-bottom: $spacing-vertical * 1/3;
}

// Sub links animations
// The -appear, -leave classes are added by "react-transition-group"
.nav__sub-appear,
.nav__sub-leave {
  max-height: 0;
  opacity: 0;
}

.nav__sub-appear.nav__sub-appear-active {
  // using max-height is a hack to animate to height "auto"
  // Needs to be some arbitrarily large height
  max-height: 500px;
  opacity: 1;
  transition: all var(--animation-duration) var(--animation-style);
}

.nav__sub {
  padding-top: 5px;
}