//
// NAVIGATION
// ******************************************************************








#woo-styleguide {
  nav {
    @include transition(all .3s ease);
    background-color: transparent;
    display: block;
    font-size: 0.8em;
    left: 0;
    bottom: 0;
    padding: 0;
    position: fixed;
    text-align: left;
    top: 0;
    width: 10px;
    z-index: 1000;

    .preview {
      @include transition(all .3s ease);
      background-color: $primary-color;
      bottom: 0;
      left: 0;
      position: fixed;
      top: 0;
      width: 0px;
      z-index: 1000;
    }

    a.menu {
      @include transition(all .3s ease);
      @include inline-icon('menu');
      cursor: pointer;
      pointer-events: auto;
      color: $nav-menu-icon-color;
      display: block;
      font-size: 1.2em;
      line-height: 2em;
      margin-right: 0;
      text-align: right;
      z-index: 1000;
      span { display: none; }

      &:hover { box-shadow: none; }
    }

    .nav-item {
      @include transition(all .3s ease .2s);
      cursor: pointer;
      overflow: hidden;
      position: relative;
      opacity: 0;

      &.open,
      &:hover {
        .nav-item-title { color: $nav-link-hover-color; }
        .nav-item-icon:after { background: $nav-link-hover-color; }
      }

      &.open {
        .nav-item-icon {
          &:after {
            @include icon('arrow-down');
            background: none;
            color: $nav-link-hover-color;
            top: 20px;
            right: 23px;
          }
        }
        ul.nav-item-list { display: block; }
      }

      .nav-item-title {
        @include transition(all .3s ease);
        font-weight: 500;
        margin-bottom: 1px;
        text-transform: uppercase;
      }

      .nav-item-icon {
        position: absolute;
        bottom: 0;
        right: 0;
        top: 0;
        width: 40px;
        &:after {
          content: '';
          height: 1px;
          width: 12px;
          background: rgba($nav-link-color, .5);
          top: 26px;
          position: absolute;
          right: 22px;
          line-height: 100%;
        }
      }
    }

    a {
      @include transition(all .3s ease);
      box-shadow: 0 1px 0 0 transparent;
      color: $nav-link-color;
      font-family: $header-font;
      font-size: 1em;
      display: block;
      padding: 20px;
      &:hover {
        color: $nav-link-hover-color;
      }
    }

    .nav-item-list {
      @include transition(all .3s ease);
      background-color: transparent;
      display: none;
      overflow: hidden;
      padding: 10px 0;
      margin: 0;

      li {
        display: block;
        &:last-child { margin-right: 0; }

        a {
          font-size: 13px;
          padding-left: 45px;
          position: relative;
          &:before {
            box-shadow: inset 0 0 0 1px $nav-link-hr-color;
            border-radius: 1000px;
            left: 25px;
            position: absolute;
            width: 10px;
            height: 10px;
            content: '';
            font-size: 10px;
            vertical-align: top;
            margin-top: 4px;
          }
        }
      }
    }
  }
}