.app-nav {
  flex: 1;
  padding: 10px 0;

  &, a {
    color: rgba(white, 0.5);
  }

  ul {
    margin: 10px 0;
    padding: 0;
    list-style: none;
  }

  a {
    display: block;

    font-weight: normal;
    font-size: 13px;

    padding: 12px 18px;

    &:hover, &:focus {
      background: rgba(black, 0.25);
      text-decoration: none;

      .nav-icon {
        color: white;
      }
    }
  }

  .nav-icon {
    display: inline-block;
    text-align: center;
    width: 18px;
    margin-right: 8px;
    vertical-align: 0;
  }

  .nav-header {
    color: rgba(white, 0.25);

    text-transform: uppercase;
    font-weight: bold;
    font-size: 11px;

    padding: 5px 20px;
  }

  .active a {
    border-left: 4px solid $brand-primary;
    padding-left: 18px - 4px;

    background: rgba(white, 0.1);
    color: white;
  }

  .nav-badge {
    @extend .label;
    float: right;
    position: relative;
    top: 1px;
  }
}

@mixin collapsed-nav-header {
  border-bottom: 1px solid rgba(white, 0.1);
  height: 0;
  margin: 0 15px 14px;
  padding: 5px 0;
  text-indent: -99999px;
}

@include tablet {
  .app-nav {
    .nav-label, .nav-badge {
      display: none;
    }

    .nav-header {
      @include collapsed-nav-header;
    }

    .expanded & {
      .nav-header {
        display: block;
        border-bottom: none;
        height: auto;
        margin: 0;
        padding: 5px 20px;
        text-indent: 0;
      }

      .nav-label  { display: inline; }
      .nav-badge  { display: block; }
    }
  }
}

@include desktop {
  .collapsed .app-nav {
    .nav-label, .nav-badge {
      display: none;
    }

    .nav-header {
      @include collapsed-nav-header;
    }
  }
}