@dnb/eufemia/cjs/components/badge/style/dnb-badge.css

DNB Eufemia Design System UI Library

/*
* Badge component
*
*/
/*
 * Utilities
 */
.dnb-badge {
  --badge-font-size: var(--font-size-x-small);
  --badge-width: 1.5rem;
  --badge-height: 1.5rem;
  --badge-border-radius-information: calc(var(--badge-height) / 4);
  --badge-border-radius-notification: calc(var(--badge-height) / 2);
  --badge-line-height: var(--line-height-x-small);
  display: inline-flex;
  font-weight: var(--font-weight-medium);
  flex-flow: row wrap;
  white-space: nowrap;
  justify-content: center;
  align-content: center;
  align-items: center;
  width: var(--badge-width);
  height: var(--badge-height);
  font-size: var(--badge-font-size);
}
.dnb-badge, .dnb-core-style .dnb-badge {
  line-height: var(--badge-line-height);
}
.dnb-badge__root {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
  flex-shrink: 0;
}
.dnb-badge__root .dnb-badge {
  display: flex;
  overflow: hidden;
  position: absolute;
  z-index: 2;
}
.dnb-badge--variant-notification {
  border-radius: var(--badge-border-radius-notification);
}
.dnb-badge--variant-information {
  border-radius: var(--badge-border-radius-information);
  min-width: var(--badge-width);
  width: auto;
  padding: 0 var(--spacing-xx-small);
}
.dnb-badge--horizontal-left {
  left: 0;
}
.dnb-badge--horizontal-right {
  right: 0;
}
.dnb-badge--vertical-bottom {
  bottom: 0;
}
.dnb-badge--vertical-top {
  top: 0;
}
.dnb-badge--inline.dnb-badge--vertical-top {
  transform: translateY(-25%);
}
.dnb-badge--inline.dnb-badge--vertical-bottom {
  transform: translateY(25%);
}