:root {
  --aunt-badge-border-radius: var(--aunt-border-radius-max);
  --aunt-badge-font-size: var(--aunt-font-size-sm);
  --aunt-badge-font-weight: var(--aunt-font-weight-bold);
  --aunt-badge-padding: 0 var(--aunt-padding-base);
  --aunt-badge-border-width: var(--aunt-border-width-base);
  --aunt-badge-border-style: solid;
  --aunt-badge-border-color: var(--aunt-white-color);
  --aunt-badge-color: var(--aunt-red);
  --aunt-badge-dot-size: calc(6 * var(--aunt-hd));
  --aunt-badge-dot-color: var(--aunt-red);
}
.aunt-badge {
  display: inline-flex;
  box-sizing: content-box;
  vertical-align: middle;
  position: relative;
}
.aunt-badge__content {
  cursor: pointer;
  z-index: 2;
  color: #fff;
  background-color: var(--aunt-badge-color);
  white-space: nowrap;
  border-radius: var(--aunt-badge-border-radius);
  font-size: var(--aunt-badge-font-size);
  font-weight: var(--aunt-badge-font-weight);
  padding: var(--aunt-badge-padding);
  border-width: var(--aunt-badge-border-width);
  border-style: solid;
  border-color: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.aunt-badge--bordered {
  border-color: var(--aunt-badge-border-color);
}
.aunt-badge--fixed {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(50%, -50%);
  transform-origin: 100%;
}
.aunt-badge--dot {
  padding: 0;
  min-width: 0;
  width: var(--aunt-badge-dot-size);
  height: var(--aunt-badge-dot-size);
  background-color: var(--aunt-badge-dot-color);
  border-radius: 100%;
}