@import '../../src/style/tools.css';

.bx-badge {
  display: inline-block;
  padding: 2px 5px;
  font-size: 10px;
  line-height: 1;
  text-align: center;
  color: var(--badge-font-color);
  background-color: var(--badge-bg-color);
  background-clip: padding-box;

  &.bx-badge-dot {
    width: 8px;
    height: 8px;
    padding: 0 0;
    border-radius: 999px;
  }

  &.bx-badge-circle {
    border-radius: 999px;
  }

  &.bx-badge-number {
    width: 15px;
    height: 15px;
    line-height: 15px;
    padding: 0 0;
    text-align: center;
  }

  &.bx-badge-label {
    padding: 3px 6px;
    border-radius: 999px;
    border-bottom-left-radius: 0;

    & .bx-badge-label--subscript {
      right: 7px;
      transform: translate(100%, -50%);
    }
  }

  &.bx-badge--android {
    font-size: 11px;
  }

  &.bx-badge--outline {
    border: 1px solid var(--badge-outline-color);
  }

  &.bx-badge--subscript {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(50%, -50%);
  }
}
