// Survival ✚ Kit

// Horizontal Navigation Low-level Method.
//
// It's meant to be called from other predifined mixins to avoid calling so many variables per call.
// Used from ul/ol
@mixin horizontal-navigation(
    $height,
    $color,
    $hover-color,
    $active-color,
    $text-shadow,
    $bg,
    $bg-hover,
    $bg-active,
    $box-shadow,
    $box-shadow-hover,
    $box-shadow-active,
    $border-left,
    $border-right,
    $padding,
    $margin,
    $border-radius,
    $font-weight,
    $font-size,
    $tab-space // Sets a tabbing space.
  ) {
  // $bg none or transparent will remove the background.
  @if $tab-space == none { $tab-space:0;}
  @if $bg == none { $bg:transparent;}
	@if $bg-active == auto { $bg-active:$bg-hover; }
	@if $active-color == auto { $active-color:$hover-color; }

  // Border Calculation
  // ----------------------------------------
  // Check if borders are set to anything but none / auto.
  @if $border-left != none and $border-right != none and $border-left != auto and $border-right != auto {
    // Borders where explicitly set.
    @include _sk-nav-borders($border-left, $border-right);
  } @else if $border-left == auto and $border-right == auto and $bg != transparent{
    // Borders calculated magically.
    @include _sk-nav-borders(lighten($bg, 10%), darken($bg, 10%));
  }

  height:$height; // instead of clearfix, to keep shadows alive.
  margin: 0;
  list-style:none;

  // Links and input
  li, a {
    display:block;
    float:left;  // this can make it inline or block level.
    line-height:$height;
  }


  a {
    @if $font-weight != none {
      font-weight: $font-weight;
    }
    @if $padding != none {
      padding:$padding;
    }
    @if $margin != none {
      margin:$margin;
    }
    @if $font-size != none {
      font-size:$font-size;
    }

    text-decoration:none;
    color:$color;

    @if $bg != transparent {
      background:$bg;
    }

    @if $box-shadow != none {
      @include box-shadow($box-shadow);
    }

    @if $text-shadow != none {
      @include text-shadow($text-shadow, 1px, 1px, 1px);
    }

    @if $border-radius != none {
      @include border-radius($border-radius);
    }

    // Feature for tabs.
    @if $tab-space != 0 {
      margin-top: -($tab-space);
    }

    // States
    // ----------------------------------------

    &:hover{
      @include _sk-nav-effects($hover-color, $bg-hover, $text-shadow, $box-shadow-hover, $bg-hover);
      text-decoration:none;
    }

    &:visited {
      color:$active-color;
    }
    &.active {
      @include _sk-nav-effects($active-color, $bg-active, $text-shadow, $box-shadow-active, $bg-hover);
      // Add tab space.
      @if $tab-space != 0 {
        height:$height + $tab-space;
      }
    }
  }
}

// Mixin used to generate Background effects by the horizontal-navigation mixin.
@mixin _sk-nav-effects($color, $bg, $text-shadow, $box-shadow, $bg-hover) {
	@if $color != auto {
	  color:$color;
	}
  @if $bg != transparent {
    @if $bg-hover == auto {
       background:darken($bg,3%);
    } @else {
      background:$bg;
    }
    @if $box-shadow != none{
      @include box-shadow($box-shadow);
    }
  }
  // Remove the text shadow of hover.
  @if $text-shadow != none {
    @include text-shadow(none);
  }
}

// Low level mixin.
// Invoked by other mixins.
//
// @var $left the left border.
// @var $right the right border
@mixin _sk-nav-borders($left, $right) {
  li:first-child, li.first {
    border-left:1px solid $right;
  }// li:first-child
  li:last-child, li.last {
    border-right:1px solid $left;
  }
  a {
    border:{
      left: 1px solid $left;
      right: 1px solid $right;
    };
    &.active, &.active:hover {
      border:{
        left:1px solid transparent;
        right:1px solid transparent;
      };
    }
    &:hover {
      border:{
        left:1px solid transparent;
        right:1px solid transparent;
      };
    }
  }
}

//
// @TODO: Add docs to tabs!
//
@mixin navigation-classes($opts: tabs) {
  $opts: join($opts, force list);
  .nav {
    list-style: none;
    margin-bottom: $base-line-height;
    margin-left: 0;
  }

  // Make links block level
  .nav > li > a {
    display: block;
  }
  .nav > li > a:hover {
    background-color: #EEEEEE;
    text-decoration: none;
  }

  // Common styles
  .nav-tabs {
    @extend .nav;
    @include pie-clearfix();
  }
  .nav-tabs > li, .nav-pills > li {
    float: left;
  }
  .nav-tabs > li > a {
    line-height: 14px;
    margin-right: 2px;
    padding-left: 12px;
    padding-right: 12px; // keeps the overall height an even number
  }

  .nav-tabs {
    border-bottom: 1px solid #ddd;
  }

  .nav-tabs > li {
    margin-bottom: -1px;
  }

  .nav-tabs > li > a {
    @include border-radius(4px 4px 0 0);
    border: 1px solid transparent;
    padding-bottom: 9px;
    padding-top: 9px;
    &:hover {
      border-color: #EEEEEE #EEEEEE #ddd;
    }
  }
  .nav-tabs > .active {
    a, a:hover {
      background-color: #FFF;
      border: 1px solid #ddd;
      border-bottom-color: transparent;
      color: gray;
      cursor: default;
    }
  }
}