.label {
  position: relative;
  top: -1px;
  color: #fff;
  background: $secondary;
  font-weight: $fw-semi;
  display: inline-block;
  vertical-align: baseline;
  text-transform: uppercase;
  border-radius: 3px;
  letter-spacing: 0.07em;
  padding: 6px 10px 5px;

  @include rem(font-size, 13px);
  @include rem(line-height, 13px);
  @include rem(margin, 0 4px);
  @include color-modifier(background);

  &:hover {
    color: #fff;
  }

  &:first-child {
    margin-left: 0;
  }

  .icon {
    @include rem(font-size, 12px);
    @include rem(margin-right, 4px);
  }

  &--text {
    background: transparent;
    font-weight: $fw-semi;
    letter-spacing: .02em;

    @include rem(font-size, 13px);
    @include rem(line-height, 13px);
    @include rem(padding-left, 4px);
    @include rem(padding-right, 4px);

    &.label {
      @include color-modifier(color);
    }

    .label--gray {
      color: $gray-dark;
    }
  }

  &--rounded {
    @include rem(border-radius, 20px);
  }

  &--flat {
    color: $grey;
    border: 2px solid;
    background: transparent;
    letter-spacing: 0.07em;
    padding: 4px 10px 3px;

    &.label {
      @include color-modifier(color);
    }
  }

  &--muted {
    &.label--primary {
      background-color: rgba($primary, .15);
      color: $primary;
    }

    &.label--violet {
      background-color: rgba($violet, .15);
      color: $violet;
    }

    &.label--green {
      background-color: rgba($green, .15);
      color: $green;
    }

    &.label--red {
      background-color: rgba($red, .15);
      color: $red;
    }

    &.label--yellow {
      background-color: rgba($yellow, .15);
      color: $yellow;
    }

    &.label--gray {
      background-color: $border-alt;
      color: $gray-dark;
    }
  }
}

.label_group {
  font-size: 0;

  .label {
    display: inline-block;
    vertical-align: middle;
    float: none;
    border-radius: 0;
    margin-left: 0;
    margin-right: 0;

    &:first-child {
      border-radius: $border-radius 0 0 $border-radius;
    }

    &:last-child {
      border-radius: 0 $border-radius $border-radius 0;
    }
  }
}

.winner_label {
  font-size: 10px;
  font-weight: $fw-bold;
  color: #bcc1c8;
  width: 22px;
  height: 22px;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  line-height: 22px;
  background: url(../img/competition/winner_2.svg) no-repeat center;

  &--yellow {
    color: #fff;
    background: url(../img/competition/winner_1.svg) no-repeat center;
  }
}