/*  Originally created by @JohnieHjelm - http://jsfiddle.net/johniehjelm/zAVqU/4/ */

$slider-text-color: white;
$slider-bg-color: lighten(#444,0%);
$slider-selected-color: white;
$slider-selected-bg-color: lighten($_color2, 10%);

ul.slider {
  display: inline-block;
  position: relative;
  top: -3px;
  list-style:none;

    li{
      float:left;
      line-height:23px;

      font-size:12px;
      font-weight: bold;
      padding: 2px 10px 0;

      color: #B8B8B8;
      background: #E5E5E5;
      // background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#F3F3F3), to(#E5E5E5));
      background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ddd), to(#f1f1f1));

      border:1px solid #D5D5D5;
      text-decoration: none;

      -webkit-box-shadow:0 1px 0 #FFF inset, 0 0 5px rgba(0, 0, 0, .1) inset, 0 1px 1px rgba(0, 0, 0, .3);


      &:first-child{
        @include border-radius(5px 0 0 5px);
      }

      &:last-child {
        @include border-radius(0 5px 5px 0);
      }

      &:not(.selected) {
        text-shadow: 0 -1px 0 $slider-bg-color, 0 0 7px lighten($slider-text-color,20%);
      }


      &.selected {
        position: relative;
        top: 1px;
        color: $slider-selected-color;
        background: $slider-selected-bg-color;
        background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(darken($slider-selected-bg-color,7%)), to($slider-selected-bg-color));
        border: none;

        @include box-shadow( 0 1px 2px rgba(0, 0, 0, .7) inset, 0 1px 0 #FFF);
      }
    }
}
