@import '../../shared/mixins',
        '../../shared/reset',
        '../../shared/about-light';

/*
 * Copyright (c) 2012-2013 Thibaut Courouble
 * http://www.cssflow.com
 *
 * Licensed under the MIT License:
 * http://www.opensource.org/licenses/mit-license.php
 */

$navCounterHeight: 20px;
$navCounterDefaultColor: #e23442;
$navCounterColors: green #75a940, blue #3b8de2;

html, body { min-height: 100%; }

body {
  font: 12px/20px 'Lucida Grande', Verdana, sans-serif;
  color: #404040;
  background: #404040;
  @include radial-gradient(circle, #555, #333 80%);
}

.container {
  margin: 120px auto;
  width: 480px;
  text-align: center;

  .nav {
    display: inline-block;
    text-align: left;
  }
}

.nav {
  padding: 4px;
  background: rgba(black, .04);
  border-radius: 23px;
  @include box-shadow(inset 0 1px rgba(black, .08), 0 -1px rgba(black, .3), 0 1px rgba(white, .12));
}

.nav-list {
  padding: 0 6px;
  height: 34px;
  background: #f4f5f7;
  border-radius: 18px;
  @include linear-gradient(top, white, #e1e2eb);
  @include box-shadow(inset 0 0 0 1px rgba(white, .3), 0 1px 1px rgba(black, .2));

  > li {
    float: left;
    height: 17px;
    margin: 8px 0;

    & + li { border-left: 1px dotted #989ca8; }
  }
}

.nav-link {
  float: left;
  position: relative;
  margin-top: -8px;
  padding: 0 14px;
  line-height: 34px;
  font-size: 10px;
  font-weight: bold;
  color: #555;
  text-decoration: none;
  text-shadow: 0 1px white;

  &:hover {
    color: #333;
    text-decoration: underline;
  }
}

.nav-counter {
  position: absolute;
  top: -1px;
  right: 1px;
  min-width: $navCounterHeight - 12px;
  height: $navCounterHeight;
  line-height: $navCounterHeight;
  margin-top: - $navCounterHeight / 2 - 1px;
  padding: 0 6px;
  font-weight: normal;
  color: white;
  text-align: center;
  text-shadow: 0 1px rgba(black, .2);
  background: $navCounterDefaultColor;
  border: 1px solid desaturate(darken($navCounterDefaultColor, 20%), 10%);
  border-radius: $navCounterHeight / 2 + 1px;
  @include linear-gradient(top, lighten($navCounterDefaultColor, 10%), darken($navCounterDefaultColor, 5%));
  @include box-shadow(inset 0 0 1px 1px rgba(white, .1), 0 1px rgba(black, .12));
}

@each $pair in $navCounterColors {
  .nav-counter-#{nth($pair, 1)} {
    $color: nth($pair, 2);
    background: $color;
    border: 1px solid desaturate(darken($color, 20%), 10%);
    @include linear-gradient(top, lighten($color, 10%), darken($color, 5%));
  }
}