@ozen-ui/kit/__inner__/esm/components/Badge/Badge.css

React component library

/* stylelint-disable */
.Badge {
  display: inline-flex;
  position: relative;
  vertical-align: middle;
  flex-shrink: 0;
}
.Badge-Content {
  --badge-content-scale: 1;
  z-index: var(--z-index-absolute);
  display: inline-flex;
  flex-shrink: 0;
  justify-content: center;
  position: absolute;
  transform: scale(var(--badge-content-scale))
    translate(var(--badge-content-translate));
  transform-origin: var(--badge-content-transform-origin);
  transition:
    transform var(--transition-default),
    color var(--transition-default),
    background-color var(--transition-default);
}
.Badge-Content_horizontalOrigin_left.Badge-Content_verticalOrigin_top {
    --badge-content-translate: -50%, -50%;
    --badge-content-transform-origin: 0% 0%;
    inset-inline-start: 0;
    inset-block-start: 0;
  }
.Badge-Content_horizontalOrigin_right.Badge-Content_verticalOrigin_top {
    --badge-content-translate: 50%, -50%;
    --badge-content-transform-origin: 100% 0%;
    inset-inline-end: 0;
    inset-block-start: 0;
  }
.Badge-Content_horizontalOrigin_left.Badge-Content_verticalOrigin_bottom {
    --badge-content-translate: -50%, 50%;
    --badge-content-transform-origin: 0% 100%;
    inset-inline-start: 0;
    inset-block-end: 0;
  }
.Badge-Content_horizontalOrigin_right.Badge-Content_verticalOrigin_bottom {
    --badge-content-translate: 50%, 50%;
    --badge-content-transform-origin: 100% 100%;
    inset-inline-end: 0;
    inset-block-end: 0;
  }
.Badge-Content_size_s {
      border-radius: 16px;
      padding: 0 8px;

      font: var(--typography-text-s_1-font);

      letter-spacing: var(--typography-text-s_1-letter_spacing, 0);

      text-transform: var(--typography-text-s_1-text_transform, none);
    }
.Badge-Content_size_xs {
      min-inline-size: 8px;
      border-radius: 8px;
      padding: 0 4px;

      font: var(--typography-text-3xs_1-font);

      letter-spacing: var(--typography-text-3xs_1-letter_spacing, 0);

      text-transform: var(--typography-text-3xs_1-text_transform, none);
    }
.Badge-Content_color_neutralDark {
      color: var(--color-content-action-on);
      background-color: var(--color-content-primary);
    }
.Badge-Content_color_neutralLight {
      color: var(--color-content-primary);
      background-color: var(--color-background-secondary);
    }
.Badge-Content_color_actionDark {
      color: var(--color-content-action-on);
      background-color: var(--color-background-success);
    }
.Badge-Content_color_actionLight {
      color: var(--color-content-success);
      background-color: var(--color-background-success-light);
    }
.Badge-Content_color_errorDark {
      color: var(--color-content-action-on);
      background-color: var(--color-background-error);
    }
.Badge-Content_color_errorLight {
      color: var(--color-content-error);
      background-color: var(--color-background-error-light);
    }
.Badge-Content_color_disabled {
      color: var(--color-content-disabled);
      background-color: var(--color-background-disabled);
    }
.Badge-Content_variant_dot {
    border-radius: 50%;
    padding: 0;
  }
.Badge-Content_variant_dot.Badge-Content_size_s {
    inline-size: 8px;
    block-size: 8px;
  }
.Badge-Content_variant_dot.Badge-Content_size_xs {
    min-inline-size: auto;
    inline-size: 6px;
    block-size: 6px;
  }
.Badge-Content_invisible {
    --badge-content-scale: 0;
  }
.Badge-Content_invisible.Badge-Content_variant_dot {
      visibility: hidden;
    }
.Badge-Content_onlyBadge {
    position: static;
    transform: scale(var(--badge-content-scale));
  }