/* src/badge/src/Badge.css */
.o-ui-badge {
  color: var(--hop-neutral-text);
  position: relative;
  width: max-content;
}
.o-ui-badge-anchor {
  position: absolute;
  top: 0;
  right: 0;
  transform: scale(1) translate(50%, -50%);
  transform-origin: 100% 0%;
}
.o-ui-badge-over-circle .o-ui-badge-anchor {
  top: 10%;
  right: 10%;
}
.o-ui-badge-count .o-ui-badge-anchor {
  background-color: var(--hop-primary-surface-strong);
  color: var(--hop-primary-text-strong);
  border-radius: var(--hop-shape-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 1.5rem;
  min-width: 1.5rem;
  padding: 0 0.4rem;
}
.o-ui-badge-text {
  font-family: var(--hop-overline-font-family);
  line-height: var(--hop-overline-line-height);
  letter-spacing: 0.015rem;
  text-transform: uppercase;
}
.o-ui-badge-text::before,
.o-ui-badge-text::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
}
.o-ui-badge-text::before {
  margin-bottom: var(--hop-overline-bottom-offset);
}
.o-ui-badge-text::after {
  margin-top: var(--hop-overline-top-offset);
}
.o-ui-badge-count.o-ui-badge-over-icon .o-ui-badge-anchor {
  top: -8%;
  right: -10%;
}
.o-ui-badge-dot .o-ui-badge-anchor {
  background-color: var(--hop-primary-surface-strong);
  border-radius: var(--hop-shape-circle);
  min-width: 1em;
  min-height: 1em;
}
.o-ui-badge-icon .o-ui-badge-anchor {
  top: 4%;
  right: 4%;
}
.o-ui-badge-icon.o-ui-badge-over-circle .o-ui-badge-anchor {
  top: 18%;
  right: 18%;
}
.o-ui-badge-icon.o-ui-badge-over-icon .o-ui-badge-anchor {
  top: 10%;
  right: 5%;
}

/* src/badge/src/index.css */