@import '@devui/theme/styles-var/devui-var.scss';

.#{$devui-prefix}-badge {
  position: relative;
  display: inline-block;

  &__content {
    font-size: $devui-font-size-sm;
    color: $devui-light-text;
  }

  &--count {
    padding: 0 4px;
    min-width: 16px;
    height: 16px;
    line-height: 16px;
    border-radius: $devui-border-radius-full;
    background: $devui-brand;
    text-align: center;
  }

  &--danger {
    background: $devui-danger;
  }

  &--warning {
    background: $devui-warning;
  }

  &--waiting {
    background: $devui-waiting;
  }

  &--success {
    background: $devui-success;
  }

  &--info {
    background: $devui-brand;
  }

  &--common {
    background: $devui-unavailable;
    color: $devui-aide-text;
  }

  &--top-left {
    left: 0;
    top: 0;
    transform: translate(-50%, -50%);
  }

  &--top-right {
    right: 0;
    top: 0;
    transform: translate(50%, -50%);
  }

  &--bottom-left {
    left: 0;
    bottom: 0;
    transform: translate(-50%, 50%);
  }

  &--bottom-right {
    right: 0;
    bottom: 0;
    transform: translate(50%, 50%);
  }

  &--fixed {
    position: absolute;
  }

  &--dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
  }

  &--show {
    visibility: visible;
    opacity: 1;
    transition: all $devui-animation-duration-fast $devui-animation-ease-out;
  }

  &--hidden {
    visibility: hidden;
    opacity: 0;
    transition: all $devui-animation-duration-fast $devui-animation-ease-in;
  }
}