@import 'xtend-library/src/extensions/badge/_badge.less';

/**
 * badge
 */

.badge {
  border-radius: 0;
  border-width: 1px;
  border-style: solid;
  border-color: transparent;
  .font-sans-semibold();
  .line-height-small();
  letter-spacing: .025em;
  text-transform: uppercase;
  // default options
  .badge-medium();
}

.badge-container {
  .list();
  .list-space(tiny);
  align-items: center;
}

// variant

.badge-default {
  border-color: @shade-200;
  background: @shade-200;
  .text-default();
}

.badge-primary {
  border-color: @accent;
  background: @accent;
  .text-inverse();
}

.badge-success {
  border-color: @success;
  background: @success;
  .text-inverse();
}

.badge-error {
  border-color: @error;
  background: @error;
  .text-inverse();
}

// size

.badge-small {
  padding: .3rem .8rem;
  font-size: 1.1rem;
}

.badge-medium {
  padding: .3rem .8rem;
  font-size: 1.3rem;
}

.badge-large {
  padding: .5rem 1rem;
  font-size: 1.5rem;
}

// special

.badge-squared {
  border-radius: 0;
}