.side-nav > ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

// On phones, the index sidebar will pretty much take care of itself. The
// navigation list is a .dropdown-select and will be shown as the title-
// control; the new discussion button is the primary-control. On anything
// larger than a phone, however, we need to affix the sidebar and expand the
// .dropdown-select into a plain list.
@media @tablet, @desktop, @desktop-hd {
  .side-nav {
    // Expand the dropdown-select component into a normal nav list.
    & .dropdown-select {
      display: block;

      .expand-dropdown();

      & .dropdown-menu {
        .nav-list();
      }
    }
  }
}

@media @tablet {
  .side-nav {
    padding: 15px 0;
    white-space: nowrap;
    overflow: auto;
    -webkit-overflow-scrolling: touch;

    &:after {
      content: " ";
      position: absolute;
      left: 0;
      right: 0;
      margin-top: 15px;
      border-bottom: 1px solid @fl-body-secondary-color;
    }

    & > ul > li, & .dropdown-menu > li {
      display: inline-block;
      margin-right: 25px;
    }

    & .dropdown-select .dropdown-menu > li > a .fa {
      margin-right: 3px;
    }

    & .affix {
      position: static;
    }
  }
}

@media @desktop, @desktop-hd {
  .side-nav {
    float: left;

    &, & > ul {
      width: 175px;
    }
    & > ul {
      margin-top: 30px;

      &.affix {
        top: 56px;
      }
      & > li {
        margin-bottom: 10px;
      }
    }
  }
}