//
// Labels
// --------------------------------------------------

.label {
  display: inline;

  padding: $label-padding;
  background-color: $label-bg-color;
  border-radius: $label-border-radius;

  font-size: em($label-font-size);
  line-height: $label-line-height;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;

  // Empty labels collapse automatically (not available in IE8)
  &:empty {
    display: none;
  }

  // Quick fix for labels in buttons
  .btn & {
    position: relative;
    top: -1px;
  }
}

.label:link,
.label:visited {
  color: inherit;

  &.u-bg-dark {
    color: $text-color-inverse;
  }

  &:hover {
    background-image: linear-gradient($label-link-hover-overlay, $label-link-hover-overlay);
  }

  &:active {
    background-image: linear-gradient($label-link-active-overlay, $label-link-active-overlay);
  }
}


// Colors
// Contextual variations (linked labels get darker on :hover)

// .label-pro {
//   @include font-family-circular();

//   background-color: $label-pro-bg-color;

//   color: $label-pro-color;
//   font-style: italic;
//   font-weight: $font-weight-bold;
//   text-transform: uppercase;
// }

.labeled-img {
  display: inline-block;
  position: relative;
  max-width: 100%; // Necessary for Firefox, when used with an .img-responsive

  .label {
    position: absolute;
    bottom: $labeled-img-position-bottom;
    left: $labeled-img-position-left;

    line-height: 1;
  }
}