// Badges
//
// Badges for highlighting things. E.g. blog tags, comment counts etc. You may also apply these
// mixins without using a class. See Mixins for more detail.
//
// Styleguide: components.badges

// Badge sizes
//
// Markup: ../../kss-templates/badges.hbs
//
// .badge--small - A smaller badge
// .badge--large - A bigger badge
// .badge--x-large - The biggest badge
//
// Styleguide: components.badges.sizes
.badge {
  @include badge;
  @include badge-size;
  @include badge-skin;
}

.badge--small {
  @include badge-size($size: 'small');
}

.badge--large {
  @include badge-size($size: 'large');
}

.badge--x-large {
  @include badge-size($size: 'x-large');
}

// Badge skins
//
// Markup: ../../kss-templates/badges.hbs
//
// .badge--secondary - Secondary badge.
// .badge--tertiary - Tertiary badge.
//
// Styleguide: components.badges.skins
.badge--secondary {
  @include badge-skin($skin: 'secondary');
}

.badge--tertiary {
  @include badge-skin($skin: 'tertiary');
}

// Badge with icons
//
// Note there are currently issues when you use the .replace-icon class on a
// badge due to the line height of the hidden text. Use at own risk.
//
// Markup: ../../kss-templates/badges-with-icons.hbs
//
// .badge--small - A small badge with an icon
// .badge--large - A large badge with an icon
// .badge--x-large - An extra large badge with an icon
//
// Styleguide: components.badges.badges-with-icons

.badge--icon {
  &:after {
    margin-left: em(4px);
  }
}