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

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

body {
  font: 13px/20px 'Lucida Grande', Tahoma, Verdana, sans-serif;
  color: #404040;
  background: #fafafa;
}

.container {
  margin: 50px auto;
  width: 640px;

  > div { margin-bottom: 20px; }
}

.progress {
  height: 20px;
  background: #ebebeb;
  border-left: 1px solid transparent;
  border-right: 1px solid transparent;
  border-radius: 10px;

  > span {
    $color: #ccc;
    position: relative;
    float: left;
    margin: 0 -1px;
    min-width: 30px;
    height: 18px;
    line-height: 16px;
    text-align: right;
    background: $color;
    border: 1px solid;
    border-color: darken($color, 5%) darken($color, 10%) darken($color, 18%);
    border-radius: 10px;
    @include linear-gradient(top, lighten($color, 14%), lighten($color, 6%) 70%, $color);
    @include box-shadow(inset 0 1px rgba(white, .3), 0 1px 2px rgba(black, .2));

    > span {
      padding: 0 8px;
      font-size: 11px;
      font-weight: bold;
      color: #404040;
      color: rgba(black, .7);
      text-shadow: 0 1px rgba(white, .4);
    }

    &:before {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 1;
      height: 18px;
      background: url('../img/progress.png') 0 0 repeat-x;
      border-radius: 10px;
    }
  }

  $colors: green #85c440, red #db3a27, orange #f2b63c, blue #5aaadb;

  @each $pair in $colors {
    .#{nth($pair, 1)} {
      $color: nth($pair, 2);
      background: $color;
      border-color: darken($color, 5%) darken($color, 10%) darken($color, 18%);
      @include linear-gradient(top, lighten($color, 20%), lighten($color, 8%) 70%, $color);
    }
  }
}