v4web-components/dist/collection/components/others/lab-ds-badge/lab-ds-badge.css

Stencil Component Starter

:host {
  display: block;
}

.badge {
  display: inline-flex;
  cursor: default;
  align-items: center;

  padding-right: var(--lab-ds-semantic-selectable-space-padding-s);
  padding-left: var(--lab-ds-semantic-selectable-space-padding-s);
  gap: var(--lab-ds-semantic-selectable-space-gap-s);

  border-radius: var(--lab-ds-semantic-selectable-border-radius-pill);
  border-width: var(--lab-ds-semantic-selectable-border-width-m);
  border-style: solid;
}

.badge .label {
  display: flex;
  align-items: center;
  color: var(--lab-ds-semantic-color-fg-default);
}

.badge.small {
  padding-top: var(--lab-ds-semantic-selectable-space-padding-xxs);
  padding-bottom: var(--lab-ds-semantic-selectable-space-padding-xxs);

  font: var(--lab-ds-semantic-typography-body-none-decoration-p4-bold);
}

.badge.medium {
  padding-top: var(--lab-ds-semantic-selectable-space-padding-xs);
  padding-bottom: var(--lab-ds-semantic-selectable-space-padding-xs);

  font: var(--lab-ds-semantic-typography-body-none-decoration-p3-bold);
}

.badge.success {
  border-color: var(--lab-ds-semantic-placeholder-color-border-dark-success);
  color: var(--lab-ds-semantic-placeholder-color-bg-dark-success);
}

.badge.error {
  border-color: var(--lab-ds-semantic-placeholder-color-border-dark-error);
  color: var(--lab-ds-semantic-placeholder-color-bg-dark-error);
}

.badge.warning {
  border-color: var(--lab-ds-semantic-placeholder-color-border-dark-warning);
  color: var(--lab-ds-semantic-placeholder-color-bg-dark-warning);
}

.badge.ghost {
  border-color: transparent;
}

.badge.dot {
  border-color: transparent;
}

.badge.dot .success {
  background-color: var(--lab-ds-semantic-placeholder-color-bg-dark-success);
}

.badge.dot .error {
  background-color: var(--lab-ds-semantic-placeholder-color-bg-dark-error);
}

.badge.dot .warning {
  background-color: var(--lab-ds-semantic-placeholder-color-bg-dark-warning);
}

.badge.dot .holder {
  border-radius: 10rem;
}

.badge.dot .label {
  display: none;
}