.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 a {
    position: relative;
    color: rgba(white, 0.25);

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

    padding: 5px 20px;

    &::after {
      @extend .ion;
      content: $ionicon-var-arrow-down-b;

      float: right;
      margin-top: 2px;

      opacity: 0.75;
    }

    &:hover, &:focus {
      background: none;

      &::before, &::after {
        opacity: 1 !important;
      }
    }
  }

  .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;
  }

  .collapsed {
    li {
      display: none;

      &.nav-header {
        display: block;
      }
    }
  }
}

@mixin collapsed-nav-header {
  height: 0;
  padding: 10px 15px 15px;
  text-indent: -99999px;

  &::after {
    display: none;

    position: absolute;
    top: 4px;
    left: 50%;
    margin-left: -3px;

    text-indent: 0;
  }

  &::before {
    content: "";

    position: absolute;
    left: 15px;
    right: 15px;
    top: 50%;
    margin-top: -4px;

    border-bottom: 1px solid rgba(white, 0.1);
    opacity: 0.75;
  }
}

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

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

    .collapsed .nav-header a {
      &::after {
        display: block;
      }
    }

    .expanded & {
      .nav-header a {
        height: auto;
        padding: 5px 20px;
        text-indent: 0;

        &::before {
          display: none;
        }

        &::after {
          display: block;
          position: static;
          margin-left: 0;
        }
      }

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

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

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

    .collapsed .nav-header a {
      &::after {
        display: block;
      }
    }
  }
}