/**
 * Copyright 2014 Vecna Technologies, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you
 * may not use this file except in compliance with the License.  You may
 * obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
 * implied.  See the License for the specific language governing
 * permissions and limitations under the License.
 */

.badge {
  display: inline-block;
  min-width: 1.2em;
  padding: 1px 3px;
  padding: 1px\9; // IE8 and below
  background: #ccd6e0;
  text-align: center;
  font-family: sans-serif;
  font-size: $base-size * 0.75;
  font-weight: 300;
  line-height: 1em;
  color: #333;
  vertical-align: text-top;
  border-radius: 1em;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);

  &.primary {
    background: $badge-color;
    color: #fff;
  }

  &.warning {
    background: $badge-warning-color;
    color: #fff;
  }

  // Vertically center content and prevent badge from squashing when empty
  &:before {
    content: "";
    display: inline-block;
    height: 100%;
    width: 0;
    vertical-align: middle;
  }

  &.multi {
    position: relative;
    margin-left: 1ex;
    padding-top: 3px;
    border: none;
    background: none;
    border-radius: 0;
    z-index: 0;

    &:before, &:after {
      content: "";
      display: block;
      position: absolute;
      top: -1px;
      left: -1px;
      width: 110%;
      height: 110%;
      border: solid 1px #aaa;
      background: #eee;
      border-radius: 2px;;
    }

    &:before {
      -webkit-transform: rotate(-10deg);
      z-index: -2;
    }

    &:after {
      z-index: -1;
    }
  }
}

.label {
  color: $label-blue;
}

.label.green {
  color: $label-green;
}

.label.orange {
  color: $label-orange;
}