igniteui-webcomponents/components/badge/themes/badge.base.css.js

Ignite UI for Web Components is a complete library of UI components, giving you the ability to build modern web applications using encapsulation and the concept of reusable components in a dependency-free approach.

import { css } from 'lit';
export const styles = css `:host{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;scrollbar-width:var(--ig-scrollbar-size);scrollbar-color:var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background)}:host ::-webkit-scrollbar{width:var(--ig-scrollbar-size);height:var(--ig-scrollbar-size);background:var(--ig-scrollbar-track-background)}:host ::-webkit-scrollbar-thumb{background:var(--ig-scrollbar-thumb-background)}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host([hidden]),[hidden]{display:none !important}:host{--size: 1.375rem;--_badge-size: var(--size);width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-weight:500;vertical-align:top}[part=base]{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;min-width:var(--size);min-height:var(--size);line-height:1;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow:hidden;white-space:nowrap;font-family:var(--ig-font-family);font-weight:inherit}::slotted(*){--size: calc(var(--_badge-size) / 2) !important;font-size:calc(var(--_badge-size)/2) !important}:host(:not(:empty)) [part=base]{padding:calc(var(--size)/8) calc(var(--size)/5.5)}:host([variant=info]){background:hsla(var(--ig-info-500), var(--ig-info-a));color:color-mix(in oklch, var(--ig-info-500-contrast) 100%, transparent)}:host([variant=success]){background:hsla(var(--ig-success-500), var(--ig-success-a));color:color-mix(in oklch, var(--ig-success-500-contrast) 100%, transparent)}:host([variant=warning]){background:hsla(var(--ig-warn-500), var(--ig-warn-a));color:color-mix(in oklch, var(--ig-warn-500-contrast) 100%, transparent)}:host([variant=danger]){background:hsla(var(--ig-error-500), var(--ig-error-a));color:color-mix(in oklch, var(--ig-error-500-contrast) 100%, transparent)}:host([shape=rounded]),:host([outlined][shape=rounded]) [part=base]{border-radius:calc(var(--size)*2)}`;
//# sourceMappingURL=badge.base.css.js.map