@patreon/studio/module/components/Badge/Badge.module.css

Patreon Studio Design System

.variantPrimary {
  --Badge-background-color: var(--global-rich-surfaceAlt-default);
  --Badge-color: var(--global-rich-regular-default);
}

.variantSecondary {
  --Badge-background-color: var(--global-primary-surfaceSubtle-default);
  --Badge-color: var(--global-content-muted-default);
}

.dot {
  background-color: var(--Badge-background-color);
  border-radius: var(--global-radius-circle);
  color: var(--Badge-color);
  height: 6px;
  transform: translate(var(--Badge-dotOffset-x, 0), var(--Badge-dotOffset-y, 0));
  width: 6px;
}

.text {
  background-color: var(--Badge-background-color);
  border-radius: var(--global-radius-pill);
  box-sizing: border-box;
  color: var(--Badge-color);
  height: 24px;
  min-width: 24px;
  padding: var(--global-space-x4) var(--global-space-x8);
  text-align: center;
  transform: translate(var(--Badge-textOffset-x, 0), var(--Badge-textOffset-y, 0));
  width: -moz-min-content;
  width: min-content;
}

.positionTopLeft {
  --Badge-dotOffset-x: 33%;
  --Badge-dotOffset-y: 33%;
  --Badge-textOffset-x: 8px;
  --Badge-textOffset-y: 50%;
}

.positionTopRight {
  --Badge-dotOffset-x: -33%;
  --Badge-dotOffset-y: 33%;
  --Badge-textOffset-x: -8px;
  --Badge-textOffset-y: 50%;
}

.positionBottomLeft {
  --Badge-dotOffset-x: 33%;
  --Badge-dotOffset-y: -33%;
  --Badge-textOffset-x: 8px;
  --Badge-textOffset-y: -50%;
}

.positionBottomRight {
  --Badge-dotOffset-x: -33%;
  --Badge-dotOffset-y: -33%;
  --Badge-textOffset-x: -8px;
  --Badge-textOffset-y: -50%;
}