/*------------------------------------
  Badges v1
------------------------------------*/

[class*="u-badge-v1"] {
  background-color: $g-color-gray-light-v3;
  box-sizing: content-box;
}

.u-badge-v1 {
  @include px-to-rem("min-width", 18px);
  @include px-to-rem("min-height", 18px);
  @include px-to-rem("line-height", 18px);
  @include px-to-rem("padding", 3px);

  &.g-brd-around {
    @include px-to-rem("line-height", 16px);
  }

  &--xs {
    @include px-to-rem("min-width", 14px);
    @include px-to-rem("min-height", 14px);
    @include px-to-rem("line-height", 14px);
    @include px-to-rem("font-size", 10px);
    @include px-to-rem("padding", 2px);

    &.g-brd-around {
      @include px-to-rem("line-height", 12px);
    }
  }

  &--sm {
    @include px-to-rem("min-width", 16px);
    @include px-to-rem("min-height", 16px);
    @include px-to-rem("line-height", 16px);
    @include px-to-rem("font-size", 11px);
    @include px-to-rem("padding", 2px);

    &.g-brd-around {
      @include px-to-rem("line-height", 14px);
    }
  }

  &--md {
    @include px-to-rem("min-width", 18px);
    @include px-to-rem("min-height", 18px);
    @include px-to-rem("line-height", 18px);
    @include px-to-rem("font-size", 13px);
    @include px-to-rem("padding", 3px);

    &.g-brd-around {
      @include px-to-rem("line-height", 16px);
    }
  }

  &--lg {
    @include px-to-rem("min-width", 20px);
    @include px-to-rem("min-height", 20px);
    @include px-to-rem("line-height", 20px);
    @include px-to-rem("font-size", 15px);
    @include px-to-rem("padding", 3px);

    &.g-brd-around {
      @include px-to-rem("line-height", 18px);
    }
  }

  &--xl {
    @include px-to-rem("min-width", 26px);
    @include px-to-rem("min-height", 26px);
    @include px-to-rem("line-height", 26px);
    @include px-to-rem("font-size", 17px);
    @include px-to-rem("padding", 3px);

    &.g-brd-around {
      @include px-to-rem("line-height", 24px);
    }
  }
}