@mantine/core/styles/Badge.layer.css

React components library focused on usability, accessibility and developer experience

@layer mantine {.m-347db0ec{--badge-height-xs:calc(1rem*var(--mantine-scale));--badge-height-sm:calc(1.125rem*var(--mantine-scale));--badge-height-md:calc(1.25rem*var(--mantine-scale));--badge-height-lg:calc(1.625rem*var(--mantine-scale));--badge-height-xl:calc(2rem*var(--mantine-scale));--badge-fz-xs:calc(0.5625rem*var(--mantine-scale));--badge-fz-sm:calc(0.625rem*var(--mantine-scale));--badge-fz-md:calc(0.6875rem*var(--mantine-scale));--badge-fz-lg:calc(0.8125rem*var(--mantine-scale));--badge-fz-xl:calc(1rem*var(--mantine-scale));--badge-padding-x-xs:calc(0.375rem*var(--mantine-scale));--badge-padding-x-sm:calc(0.5rem*var(--mantine-scale));--badge-padding-x-md:calc(0.625rem*var(--mantine-scale));--badge-padding-x-lg:calc(0.75rem*var(--mantine-scale));--badge-padding-x-xl:calc(1rem*var(--mantine-scale));--badge-height:var(--badge-height-md);--badge-fz:var(--badge-fz-md);--badge-padding-x:var(--badge-padding-x-md);--badge-radius:calc(62.5rem*var(--mantine-scale));--badge-lh:calc(var(--badge-height) - 0.125rem*var(--mantine-scale));--badge-color:var(--mantine-color-white);--badge-bg:var(--mantine-primary-color-filled);--badge-bd:calc(0.0625rem*var(--mantine-scale)) solid transparent;-webkit-tap-highlight-color:transparent;align-items:center;background:var(--badge-bg);border:var(--badge-bd);border-radius:var(--badge-radius);color:var(--badge-color);cursor:inherit;display:inline-flex;font-size:var(--badge-fz);font-weight:700;height:var(--badge-height);justify-content:center;letter-spacing:calc(.01563rem*var(--mantine-scale));line-height:var(--badge-lh);overflow:hidden;padding:0 var(--badge-padding-x);text-decoration:none;text-overflow:ellipsis;text-transform:uppercase;width:fit-content}.m-347db0ec:where([data-block]){display:flex;width:100%}.m-347db0ec:where([data-circle]){padding-left:calc(.125rem*var(--mantine-scale));padding-right:calc(.125rem*var(--mantine-scale));width:var(--badge-height)}.m-fbd81e3d{--badge-dot-size:calc(var(--badge-height)/3.4)}:where([data-mantine-color-scheme=light]) .m-fbd81e3d{background-color:var(--mantine-color-white);border-color:var(--mantine-color-gray-4);color:var(--mantine-color-black)}:where([data-mantine-color-scheme=dark]) .m-fbd81e3d{background-color:var(--mantine-color-dark-5);border-color:var(--mantine-color-dark-5);color:var(--mantine-color-white)}.m-fbd81e3d:before{background-color:var(--badge-dot-color);border-radius:var(--badge-dot-size);content:"";display:block;height:var(--badge-dot-size);margin-right:var(--badge-dot-size);width:var(--badge-dot-size)}:where([dir=rtl]) .m-fbd81e3d:before{margin-left:var(--badge-dot-size);margin-right:0}.m-5add502a{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.m-91fdda9b{--badge-section-margin:calc(var(--mantine-spacing-xs)/2);align-items:center;display:inline-flex;justify-content:center}.m-91fdda9b:where([data-position=left]){margin-left:0;margin-right:var(--badge-section-margin)}:where([dir=rtl]) .m-91fdda9b:where([data-position=left]){margin-left:var(--badge-section-margin);margin-right:0}.m-91fdda9b:where([data-position=right]){margin-left:var(--badge-section-margin);margin-right:0}[dir=rtl] .m-91fdda9b:where([data-position=right]){margin-left:0;margin-right:var(--badge-section-margin)}}