@import 'mixins';

[class^="icon-"].badge:empty {
  display: inline-block;
}

.video-badge,
.collaboration-badge,
.wip-badge,
.iotd-badge,
.top-pick-badge,
.top-pick-nomination-badge,
.iotd-queue-badge,
.iotd-stats-badge {
  text-align: center;
  margin: 0;
  padding: 0;
  @include box-shadow;
  @include rounded-corners(16px);
  height: 20px;
  width: 20px;
  color: $white;
  border: 1px solid $white;
  font-size: 12px;
  line-height: 20px;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, .4);
}

.video-badge {
  $lighter-link-color: lighten($link-color, 10%);

  font-size: 10px;
  background: $lighter-link-color;
  background: -webkit-gradient(linear, left top, left bottom, from($lighter-link-color), to(darken($lighter-link-color, 10%)));
  background: -webkit-linear-gradient(top, $lighter-link-color, darken($lighter-link-color, 10%));
  background: -moz-linear-gradient(top, $lighter-link-color, darken($lighter-link-color, 10%));
  background: -ms-linear-gradient(top, $lighter-link-color, darken($lighter-link-color, 10%));
  background: -o-linear-gradient(top, $lighter-link-color, darken($lighter-link-color, 10%));
  background-image: -ms-linear-gradient(top, $lighter-link-color 0%, darken($lighter-link-color, 10%) 100%);

  -webkit-box-shadow: rgba(0, 0, 0, 0.8) 0 1px 5px, $lighter-link-color 0 0 10px;
  -moz-box-shadow: rgba(0, 0, 0, 0.8) 0 1px 5px, $lighter-link-color 0 0 10px;
  box-shadow: rgba(0, 0, 0, 0.8) 0 1px 5px, $lighter-link-color 0 0 10px;
}

.collaboration-badge {
  background: $blue;
  background: -webkit-gradient(linear, left top, left bottom, from($blue), to(darken($blue, 10%)));
  background: -webkit-linear-gradient(top, $blue, darken($blue, 10%));
  background: -moz-linear-gradient(top, $blue, darken($blue, 10%));
  background: -ms-linear-gradient(top, $blue, darken($blue, 10%));
  background: -o-linear-gradient(top, $blue, darken($blue, 10%));
  background-image: -ms-linear-gradient(top, $blue 0%, darken($blue, 10%) 100%);

  -webkit-box-shadow: rgba(0, 0, 0, 0.8) 0 1px 5px, $blue 0 0 10px;
  -moz-box-shadow: rgba(0, 0, 0, 0.8) 0 1px 5px, $blue 0 0 10px;
  box-shadow: rgba(0, 0, 0, 0.8) 0 1px 5px, $blue 0 0 10px;
}

.wip-badge {
  background: $link-color;
}

.iotd-badge {
  background: $gold;
  background: -webkit-gradient(linear, left top, left bottom, from($gold), to(darken($gold, 10%)));
  background: -webkit-linear-gradient(top, $gold, darken($gold, 10%));
  background: -moz-linear-gradient(top, $gold, darken($gold, 10%));
  background: -ms-linear-gradient(top, $gold, darken($gold, 10%));
  background: -o-linear-gradient(top, $gold, darken($gold, 10%));
  background-image: -ms-linear-gradient(top, $gold 0%, darken($gold, 10%) 100%);

  -webkit-box-shadow: rgba(0, 0, 0, 0.8) 0 1px 5px, $gold 0 0 10px;
  -moz-box-shadow: rgba(0, 0, 0, 0.8) 0 1px 5px, $gold 0 0 10px;
  box-shadow: rgba(0, 0, 0, 0.8) 0 1px 5px, $gold 0 0 10px;
}

.top-pick-badge {
  background: $silver;
  background: -webkit-gradient(linear, left top, left bottom, from($silver), to(darken($silver, 10%)));
  background: -webkit-linear-gradient(top, $silver, darken($silver, 10%));
  background: -moz-linear-gradient(top, $silver, darken($silver, 10%));
  background: -ms-linear-gradient(top, $silver, darken($silver, 10%));
  background: -o-linear-gradient(top, $silver, darken($silver, 10%));
  background-image: -ms-linear-gradient(top, $silver 0%, darken($silver, 10%) 100%);

  color: lighten($silver, 20%);

  -webkit-box-shadow: rgba(0, 0, 0, 0.8) 0 1px 5px, $silver 0 0 10px;
  -moz-box-shadow: rgba(0, 0, 0, 0.8) 0 1px 5px, $silver 0 0 10px;
  box-shadow: rgba(0, 0, 0, 0.8) 0 1px 5px, $silver 0 0 10px;
}

.top-pick-nomination-badge {
  background: $bronze;
  background: -webkit-gradient(linear, left top, left bottom, from($bronze), to(darken($bronze, 10%)));
  background: -webkit-linear-gradient(top, $bronze, darken($bronze, 10%));
  background: -moz-linear-gradient(top, $bronze, darken($bronze, 10%));
  background: -ms-linear-gradient(top, $bronze, darken($bronze, 10%));
  background: -o-linear-gradient(top, $bronze, darken($bronze, 10%));
  background-image: -ms-linear-gradient(top, $bronze 0%, darken($bronze, 10%) 100%);
  color: $gold;


  -webkit-box-shadow: rgba(0, 0, 0, 0.8) 0 1px 5px, $bronze 0 0 10px;
  -moz-box-shadow: rgba(0, 0, 0, 0.8) 0 1px 5px, $bronze 0 0 10px;
  box-shadow: rgba(0, 0, 0, 0.8) 0 1px 5px, $bronze 0 0 10px;
}

.iotd-queue-badge {
  background: $green;
  background: -webkit-gradient(linear, left top, left bottom, from($green), to(darken($green, 10%)));
  background: -webkit-linear-gradient(top, $green, darken($green, 10%));
  background: -moz-linear-gradient(top, $green, darken($green, 10%));
  background: -ms-linear-gradient(top, $green, darken($green, 10%));
  background: -o-linear-gradient(top, $green, darken($green, 10%));
  background-image: -ms-linear-gradient(top, $green 0%, darken($green, 10%) 100%);
  color: $white;


  -webkit-box-shadow: rgba(0, 0, 0, 0.8) 0 1px 5px, $green 0 0 10px;
  -moz-box-shadow: rgba(0, 0, 0, 0.8) 0 1px 5px, $green 0 0 10px;
  box-shadow: rgba(0, 0, 0, 0.8) 0 1px 5px, $green 0 0 10px;
}

.iotd-stats-badge {
  background: $white;
  background: -webkit-gradient(linear, left top, left bottom, from($white), to(darken($white, 10%)));
  background: -webkit-linear-gradient(top, $white, darken($white, 10%));
  background: -moz-linear-gradient(top, $white, darken($white, 10%));
  background: -ms-linear-gradient(top, $white, darken($white, 10%));
  background: -o-linear-gradient(top, $white, darken($white, 10%));
  background-image: -ms-linear-gradient(top, $white 0%, darken($white, 10%) 100%);
  color: $black;


  -webkit-box-shadow: rgba(0, 0, 0, 0.8) 0 1px 5px, $black 0 0 10px;
  -moz-box-shadow: rgba(0, 0, 0, 0.8) 0 1px 5px, $black 0 0 10px;
  box-shadow: rgba(0, 0, 0, 0.8) 0 1px 5px, $black 0 0 10px;
}

.astrobin-image-container .badges a {
  display: block;
}
