beta-parity-react/ui/Badge/index.css

Beta Parity React Components

.badge{align-items:center;border-radius:9999px;border-style:none;border-width:1px;display:flex;flex-shrink:0;font-family:IBM Plex Sans,Helvetica Neue,Arial,sans-serif;font-size:.75rem;font-weight:600;gap:.25rem;justify-content:center;letter-spacing:.02em;line-height:1rem;overflow:hidden;text-overflow:ellipsis;-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap;width:-moz-fit-content;width:fit-content}.badge,.badge.medium{min-height:1.5rem;min-width:1.5rem;padding:.25rem .375rem}.badge.small{min-height:1.25rem;min-width:1.25rem;padding:.125rem .375rem}.badge.extra-small{font-size:.6875rem;gap:.125rem;line-height:.875rem;min-height:.875rem;min-width:.875rem;padding:0 .1875rem}.badge i,.badge img,.badge svg{height:1rem;width:1rem}.badge.extra-small i,.badge.extra-small img,.badge.extra-small svg,.badge.small i,.badge.small img,.badge.small svg{height:.75rem;width:.75rem}.badge.dotted i,.badge.dotted img,.badge.dotted svg{display:none}.badge.outlined{border-style:solid}.badge.outlined.gray{background-color:var(--par-color-bg-badge-outlined-gray);border-color:var(--par-color-border-badge-outlined-gray);color:var(--par-color-text-badge-outlined-gray)}.badge.outlined.red{background-color:var(--par-color-bg-badge-outlined-red);border-color:var(--par-color-border-badge-outlined-red);color:var(--par-color-text-badge-outlined-red)}.badge.outlined.green{background-color:var(--par-color-bg-badge-outlined-green);border-color:var(--par-color-border-badge-outlined-green);color:var(--par-color-text-badge-outlined-green)}.badge.outlined.yellow{background-color:var(--par-color-bg-badge-outlined-yellow);border-color:var(--par-color-border-badge-outlined-yellow);color:var(--par-color-text-badge-outlined-yellow)}.badge.outlined.blue{background-color:var(--par-color-bg-badge-outlined-blue);border-color:var(--par-color-border-badge-outlined-blue);color:var(--par-color-text-badge-outlined-blue)}.badge.outlined.orange{background-color:var(--par-color-bg-badge-outlined-orange);border-color:var(--par-color-border-badge-outlined-orange);color:var(--par-color-text-badge-outlined-orange)}.badge.outlined.cyan{background-color:var(--par-color-bg-badge-outlined-cyan);border-color:var(--par-color-border-badge-outlined-cyan);color:var(--par-color-text-badge-outlined-cyan)}.badge.outlined.violet{background-color:var(--par-color-bg-badge-outlined-violet);border-color:var(--par-color-border-badge-outlined-violet);color:var(--par-color-text-badge-outlined-violet)}.badge.outlined.lime{background-color:var(--par-color-bg-badge-outlined-lime);border-color:var(--par-color-border-badge-outlined-lime);color:var(--par-color-text-badge-outlined-lime)}.badge.glass.gray{background-color:var(--par-color-bg-badge-glass-gray);border-color:var(--par-color-border-badge-glass-gray);color:var(--par-color-text-badge-glass-gray)}.badge.glass.red{background-color:var(--par-color-bg-badge-glass-red);border-color:var(--par-color-border-badge-glass-red);color:var(--par-color-text-badge-glass-red)}.badge.glass.green{background-color:var(--par-color-bg-badge-glass-green);border-color:var(--par-color-border-badge-glass-green);color:var(--par-color-text-badge-glass-green)}.badge.glass.yellow{background-color:var(--par-color-bg-badge-glass-yellow);border-color:var(--par-color-border-badge-glass-yellow);color:var(--par-color-text-badge-glass-yellow)}.badge.glass.blue{background-color:var(--par-color-bg-badge-glass-blue);border-color:var(--par-color-border-badge-glass-blue);color:var(--par-color-text-badge-glass-blue)}.badge.glass.orange{background-color:var(--par-color-bg-badge-glass-orange);border-color:var(--par-color-border-badge-glass-orange);color:var(--par-color-text-badge-glass-orange)}.badge.glass.cyan{background-color:var(--par-color-bg-badge-glass-cyan);border-color:var(--par-color-border-badge-glass-cyan);color:var(--par-color-text-badge-glass-cyan)}.badge.glass.violet{background-color:var(--par-color-bg-badge-glass-violet);border-color:var(--par-color-border-badge-glass-violet);color:var(--par-color-text-badge-glass-violet)}.badge.glass.lime{background-color:var(--par-color-bg-badge-glass-lime);border-color:var(--par-color-border-badge-glass-lime);color:var(--par-color-text-badge-glass-lime)}.badge.solid.gray{background-color:var(--par-color-bg-badge-solid-gray);border-color:var(--par-color-border-badge-solid-gray);color:var(--par-color-text-badge-solid-gray)}.badge.solid.red{background-color:var(--par-color-bg-badge-solid-red);border-color:var(--par-color-border-badge-solid-red);color:var(--par-color-text-badge-solid-red)}.badge.solid.green{background-color:var(--par-color-bg-badge-solid-green);border-color:var(--par-color-border-badge-solid-green);color:var(--par-color-text-badge-solid-green)}.badge.solid.yellow{background-color:var(--par-color-bg-badge-solid-yellow);border-color:var(--par-color-border-badge-solid-yellow);color:var(--par-color-text-badge-solid-yellow)}.badge.solid.blue{background-color:var(--par-color-bg-badge-solid-blue);border-color:var(--par-color-border-badge-solid-blue);color:var(--par-color-text-badge-solid-blue)}.badge.solid.orange{background-color:var(--par-color-bg-badge-solid-orange);border-color:var(--par-color-border-badge-solid-orange);color:var(--par-color-text-badge-solid-orange)}.badge.solid.cyan{background-color:var(--par-color-bg-badge-solid-cyan);border-color:var(--par-color-border-badge-solid-cyan);color:var(--par-color-text-badge-solid-cyan)}.badge.solid.violet{background-color:var(--par-color-bg-badge-solid-violet);border-color:var(--par-color-border-badge-solid-violet);color:var(--par-color-text-badge-solid-violet)}.badge.solid.lime{background-color:var(--par-color-bg-badge-solid-lime);border-color:var(--par-color-border-badge-solid-lime);color:var(--par-color-text-badge-solid-lime)}