//
// Countdown
// -------------------------------------------------------------------

.countdown {
  .box {
    margin-bottom: 30px;
    padding: {
      top: floor($grid-vertical-step * 3); //~72px
      right: $grid-vertical-step; //~24px
      bottom: floor($grid-vertical-step * 2.5); //~60px
      left: $grid-vertical-step; //~24px
    }
    border-radius: $border-radius-default;
    text-align: center;
    -ms-word-wrap: break-word;
    word-wrap: break-word;
  }
  .digit {
    font: {
      size: ceil($font-size-base * 5.14);
      weight: 300;
    }
    line-height: 1;
  }
  .description {
    margin: $grid-vertical-step 0 0; //~24px 0 0
    color: $gray;
    font-size: $font-size-base;
  }

  // Color Skins
  &.skin-default .box {
    background-color: rgba($brand-default, .05);
    .digit { color: $brand-default; }
  }
  &.skin-primary .box {
    background-color: rgba($brand-primary, .05);
    .digit { color: $brand-primary; }
  }
  &.skin-info .box {
    background-color: rgba($brand-info, .05);
    .digit { color: $brand-info; }
  }
  &.skin-success .box {
    background-color: rgba($brand-success, .05);
    .digit { color: $brand-success; }
  }
  &.skin-warning .box {
    background-color: rgba($brand-warning, .05);
    .digit { color: $brand-warning; }
  }
  &.skin-danger .box {
    background-color: rgba($brand-danger, .05);
    .digit { color: $brand-danger; }
  }
  &.skin-light .box {
    background-color: rgba($light-color, .05);
    .digit { color: $brand-primary; }
    .description { color: rgba($light-color, .5); }
  }
}