.label {
  display: inline-block;
  padding: $spacer-xxs;
  font-size: $font-size-xs;

  &.green {
    @extend %heading-font-regular;

    color: $slides-label-text-color;
    background-color: $slides-label-background-color;
  }
}

.label-big {
  display: inline-block;
  padding: $spacer-xs;
  font-size: $font-size-base;

  &.hint {
    @extend %heading-font-bold;

    color: $training-label-text-color;
    text-transform: uppercase;
    border: 4px solid $training-label-text-color;
  }

  &.badge,
  &.badge--inverted {
    @extend %heading-font-bold;

    color: $badge-text-color;
    text-transform: uppercase;
    background-color: $badge-background-color;
  }

  &.badge--inverted {
    color: $badge-text-color-inverted;
    background-color: $badge-background-color-inverted;
  }
}

//Breakpoints
@media screen and (min-width: $grid-breakpoint-md) {
  .label {
    margin-right: $spacer-xxs;
  }
}