// ===================================
//             Navigation
// ===================================




%menu-closed {
  display:none;
}
%menu-open {
  display:block;
}

%nav {
  @extend %clear;
  &:not(.inline) {
    > ul:not(.row) {
      display:inline-block;
    }
  } 
  ul {
    display:block;
    list-style:none;
    margin:0;
    padding:0;
    li {
      display:block;
      position:relative;
      a, a:visited {
        display:block;
        width:100%;
        word-wrap:break-word;
        padding:0.25em 1em;
        background:$button-color;
        border-top:1px solid $button-active;
        color:$button-text;
        font-weight:bold;
        font-size:1em;
        text-decoration:none;
        cursor:pointer;
        line-height:1.5;
        @include transition(background-color 0.25s ease-out);
        &:hover, &:focus {
          background:$button-active;
          color:$button-text;
          text-decoration:none;
        }
        &.active {
          &:hover, &:focus {
            background:$button-active;
          }
        }
        &.disabled {
          @include state(disabled,normal,desaturate($button-color,20%));
        }
      }
      &:first-child {
        a, a:visited {
          border-top:none;
        }
      }
      &.menu {
        &.disabled {
          > a, > a:visited {
            @include state(disabled,normal,desaturate($button-color,20%));
          }
        }
        > a, > a:visited {
          &:after {
            content:'\f0d7';
            display:inline-block;
            width:1.1em;
            margin-left:0.25em;
            font-family:FontAwesome;
            font-weight:normal;
            font-style:normal;
            font-size:1.1em;
            text-decoration:inherit;
            -webkit-font-smoothing:antialiased;
            line-height:normal;
            vertical-align:baseline;
            background-image:none;
            background-position:0% 0%;
            background-repeat:repeat;
            margin-top:0;
          }
        }
        &.on {
          > a, > a:visited {
            background:$button-active;
            text-decoration:none;
          }
          > ul {
            @extend %menu-open;
          }
        }
      }
      &:first-child {
        a, a:visited {
          @include rounded($radius $radius 0 0);
        }
      }
      &:last-child {
        a, a:visited {
          @include rounded(0 0 $radius $radius);
        }
      }
      &:only-child {
        a, a:visited {
          @include rounded($radius);
        }
      }
    }
    ul {
      @extend %menu-closed;
      position:absolute;
      left:100%;
      top:0;
      width:auto;
      z-index:101;
      li {
        a, a:visited {
          @include rounded(0);
          border:none;
          border-top:1px solid $button-color;
          background:lighten($button-color, 5%);
          &:hover, &:active {
            background:lighten($button-active, 5%);
          }
          &.disabled {
            @include state(disabled,normal,desaturate(lighten($button-color, 5%),20%));
          }
        }
        &:first-child {
          a, a:visited {
            border-top:none;
            @include rounded(0 $radius 0 0);
          }
        }
        &:last-child {
          a, a:visited {
            @include rounded(0 0 $radius $radius);
          }
        }
        &:only-child {
          a, a:visited {
            @include rounded(0 $radius $radius 0);
          }
        }
      }
    }
    // horizontal grid navigation
    &.row {
      li {
        a, a:visited {
          border-left:1px solid $button-active;
          border-top:none;
          @include rounded(0);
        }
        &:first-child {
          a, a:visited {
            border-left:none;
            @include rounded($radius 0 0 $radius);
          }
        }
        &:last-child {
          a, a:visited {
            @include rounded(0 $radius $radius 0);
          }
        }
        &:only-child {
          a, a:visited {
            @include rounded($radius);
          }
        }
      }
      ul {
        @extend %menu-closed;
        position:absolute;
        left:auto;
        top:auto;
        min-width:100%;
        z-index:101;
        li {
          a, a:visited {
            @include rounded(0);
            border-left:none;
            border-top:1px solid $button-active;
          }
          &:first-child {
            a, a:visited {
              @include rounded(0);
            }
          }
          &:last-child {
            a, a:visited {
              @include rounded(0 0 $radius $radius);
            }
          }
        }
      }
    }
  }
  // horizontal inline navigation
  &.inline {
    width:auto;
    ul {
      font-size:0;
      li {
        font-size:$font-size;
        display:inline-block;
        white-space-collapse:discard;
        float:none;
        a, a:visited {
          border-left:1px solid $button-active;
          border-top:none;
        }
        &:first-child {
          a, a:visited {
            border-left:none;
            @include rounded($radius 0 0 $radius);
          }
        }
        &:last-child {
          a, a:visited {
            @include rounded(0 $radius $radius 0);
          }
        }
        &:only-child {
          a, a:visited {
            @include rounded($radius);
          }
        }
        ul {
          @extend %menu-closed;
          // display:none;
          position:absolute;
          left:auto;
          top:auto;
          min-width:100%;
          z-index:101;
          li {
            display:block;
            a, a:visited {
              @include rounded(0);
              border-left:none;
              border-top:1px solid $button-active;
            }
            &:first-child {
              a, a:visited {
                @include rounded(0);
              }
            }
            &:last-child {
              a, a:visited {
                @include rounded(0 0 $radius $radius);
              }
            }
          }
        }
      }
    }
  }
  // hamburger menu
  &.menu {
    .menu-toggle {
      @extend .button;
      display:none !important;
    }
  }
}
// pagination
%pagination {
  ul {
    margin:10px auto;
    display:block;
    list-style-type:none;
    li {
      display:inline-block;
      @include rounded($radius);
      padding:0 3px 0 2px;
      min-width:29px;
      a {
        display:block;
        background:$button-color;
        font-size:1em;
        line-height:1.5;
        font-weight:bold;
        color:$button-text;
        text-decoration:none;
        text-align:center;
        padding:0 3px;
        @include rounded(4px);
        &:hover, &:focus {
          background:$button-active;
          color:$button-text;
        }
        &.disabled {
          @include state(disabled,normal,desaturate($button-color,20%));
        }
      }
      &.active {
        a {
          @include state(disabled,normal,desaturate($button-color,20%));
        }
      }
      &.prev, &.next {
        a {
          padding:0 4px;
          background:$button-color;
          color:#fff;
          &:hover, &:focus {
            background:$button-active;
          }
        }
      }
      &.disabled {
        a {
          @include state(disabled,normal,desaturate($button-color,20%));
        }
      }
      &:first-child {
        a, a:visited {
          @include rounded($radius);
        }
      }
      &:last-child {
        a, a:visited {
          @include rounded($radius);
        }
      }
    }
  }
}
.no-js {
  %nav {
    ul {
      li.menu {
        ul {
          @extend %menu-open;
          display:none;
        }
        &:hover, &:focus {
          ul {
            display:block !important;
          }
        }
      }
    }
  }
}
%breadcrumbs {
  list-style:none;
  margin:0;
  padding:0;
  font-size:0.8em;
  li {
    display:inline-block;
    padding:0.2em 0;
    a, a:visited {
      border:none;
      color:gray;
      &:before {
        content:'>';
        display:inline-block;
        margin:0 0.5em;
        color:gray !important;
      }
      &:hover, &:focus {
        color:$link-color;
      }
    }
    &:first-child a {
      &:before {
        display:none;
      }
    }
  }
}
@if $tags {
  nav {
    @extend %nav;
  }
}
@if $classes {
  .nav {
    @extend %nav;
  }
  .pagination {
    @extend %pagination;
  }
  .breadcrumbs {
    @extend %breadcrumbs;
  }
}