:root {
  --badge-content-padding: 2px 6px;
  --badge-default-color: #f5f5f5;
  --badge-primary-color: var(--color-primary);
  --badge-danger-color: var(--color-danger);
  --badge-success-color: var(--color-success);
  --badge-warning-color: var(--color-warning);
  --badge-info-color: var(--color-info);
}
.ppsv-badge {
  display: inline-block;
  position: relative;
}
.ppsv-badge__content {
  color: #fff;
  border-radius: 100px;
  font-size: 12px;
  padding: 2px 6px;
  vertical-align: middle;
  text-align: center;
  display: inline-block;
}
.ppsv-badge__icon {
  padding: 2px 4px;
}
.ppsv-badge__position {
  border: 2px #fff solid;
  z-index: 2;
}
.ppsv-badge--default {
  background: var(--badge-default-color);
}
.ppsv-badge--primary {
  background: var(--badge-primary-color);
}
.ppsv-badge--info {
  background: var(--badge-info-color);
}
.ppsv-badge--warning {
  background: var(--badge-warning-color);
}
.ppsv-badge--success {
  background: var(--badge-success-color);
}
.ppsv-badge--danger {
  background: var(--badge-danger-color);
}
.ppsv-badge--right-top {
  position: absolute;
  top: 0;
  right: 0;
  transform: translateY(-50%) translateX(50%);
}
.ppsv-badge--left-top {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(-50%) translateX(-50%);
}
.ppsv-badge--right-bottom {
  position: absolute;
  bottom: 0;
  right: 0;
  transform: translateY(50%) translateX(50%);
}
.ppsv-badge--left-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  transform: translateY(50%) translateX(-50%);
}
.ppsv-badge__dot {
  box-sizing: content-box;
  width: 8px;
  height: 8px;
  border-radius: 8px;
  padding: 0;
}
.ppsv-badge__dot--right {
  right: 6px;
}
.ppsv-badge__dot--left {
  left: 6px;
}
.ppsv-badge-fade-enter-active,
.ppsv-badge-fade-leave-active {
  transition: opacity 0.15s var(--cubic-bezier);
}
.ppsv-badge-fade-enter-from,
.ppsv-badge-fade-leave-to {
  opacity: 0;
}