@universal-material/web/badge/badge.styles.js

Material web components

import { css } from 'lit';
export const styles = css `
  .container {
    --_badge-size: var(--u-badge-small-size, 6px);
    font-family: var(--u-font-family, var(--u-font-family, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"));
    line-height: var(--u-badge-line-height, var(--u-label-s-line-height, 1rem));
    font-size: var(--u-badge-font-size, var(--u-label-s-font-size, 0.6875rem));
    letter-spacing: var(--u-badge-letter-spacing, var(--u-label-s-letter-spacing, 0.0454545455rem));
    font-weight: var(--u-badge-font-weight, var(--u-label-s-font-weight, var(--u-font-weight-medium, 500)));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--_badge-size);
    height: var(--_badge-size);
    line-height: var(--_badge-size);
    background-color: var(--u-badge-color, var(--u-color-error, rgb(179, 38, 30)));
    color: var(--u-badge-color, var(--u-color-on-error, rgb(255, 255, 255)));
    border-radius: calc(var(--_badge-size) / 2);
  }
  .container:not(.static) {
    --_badge-inline-start: calc(100% - var(--_badge-size));
    position: absolute;
    top: 0;
    inset-inline-start: var(--_badge-inline-start);
  }
  .container:not(.empty) {
    --_badge-size: var(--u-badge-large-size, 16px);
    top: var(--u-badge-top-offset, -2px);
    inset-inline-start: calc(var(--_badge-inline-start) - var(--u-badge-inline-offset, -4px));
    padding-inline: var(--u-badge-padding, 4px);
  }
`;
//# sourceMappingURL=badge.styles.js.map