@layer onyx.density{.onyx-density-compact .onyx-badge,.onyx-badge.onyx-density-compact{--onyx-badge-icon-padding:var(--onyx-spacing-4xs);--onyx-badge-icon-size:1rem}.onyx-badge,.onyx-density-default .onyx-badge,.onyx-badge.onyx-density-default{--onyx-badge-icon-padding:var(--onyx-spacing-3xs);--onyx-badge-icon-size:1rem}.onyx-density-cozy .onyx-badge,.onyx-badge.onyx-density-cozy{--onyx-badge-icon-padding:var(--onyx-spacing-4xs);--onyx-badge-icon-size:1.5rem}}@layer onyx.component{.onyx-badge{--onyx-badge-background-color:var(--onyx-color-component-cta-default);--onyx-badge-color:var(--onyx-color-base-neutral-100);--onyx-badge-hover-background-color:var(--onyx-color-component-cta-default-hover);--onyx-badge-focus-color:var(--onyx-color-component-focus-primary);--onyx-badge-active-background-color:var(--onyx-color-base-secondary-900);--onyx-badge-active-color:var(--onyx-color-base-neutral-100);max-width:100%;padding:var(--onyx-density-3xs) var(--onyx-density-sm);border-radius:var(--onyx-radius-component-badge);background-color:var(--onyx-badge-background-color);color:var(--onyx-badge-color);font-family:var(--onyx-font-family-paragraph);vertical-align:middle;text-align:center;cursor:default;border:none;max-height:max-content;font-style:normal;display:inline-block}.onyx-badge:has(.onyx-badge__icon){padding:var(--onyx-badge-icon-padding)}.onyx-badge:has(.onyx-badge__icon) .onyx-icon{--icon-size:var(--onyx-badge-icon-size)}.onyx-badge:is(button){cursor:pointer;transition:background-color var(--onyx-duration-sm), box-shadow var(--onyx-duration-sm);outline:none}.onyx-badge:is(button):hover{background-color:var(--onyx-badge-hover-background-color)}.onyx-badge:is(button):focus-visible{outline:var(--onyx-outline-width) solid var(--onyx-badge-focus-color)}.onyx-badge:is(button):active{filter:brightness(.9)}.onyx-badge--active{background-color:var(--onyx-badge-active-background-color);color:var(--onyx-badge-active-color)}.onyx-badge--primary{--onyx-badge-color:var(--onyx-color-text-icons-neutral-button)}.onyx-badge--neutral{--onyx-badge-background-color:var(--onyx-color-base-neutral-700);--onyx-badge-hover-background-color:var(--onyx-color-base-neutral-400);--onyx-badge-focus-color:var(--onyx-color-component-focus-neutral);--onyx-badge-active-background-color:var(--onyx-color-base-neutral-900)}.onyx-badge--danger{--onyx-badge-background-color:var(--onyx-color-base-danger-500);--onyx-badge-hover-background-color:var(--onyx-color-base-danger-200);--onyx-badge-focus-color:var(--onyx-color-component-focus-danger);--onyx-badge-active-background-color:var(--onyx-color-base-danger-800)}.onyx-badge--warning{--onyx-badge-background-color:var(--onyx-color-base-warning-800);--onyx-badge-hover-background-color:var(--onyx-color-base-warning-200);--onyx-badge-focus-color:var(--onyx-color-component-focus-warning);--onyx-badge-active-background-color:var(--onyx-color-base-warning-700)}.onyx-badge--success{--onyx-badge-background-color:var(--onyx-color-base-success-800);--onyx-badge-hover-background-color:var(--onyx-color-base-success-200);--onyx-badge-focus-color:var(--onyx-color-component-focus-success);--onyx-badge-active-background-color:var(--onyx-color-base-success-700)}.onyx-badge--info{--onyx-badge-background-color:var(--onyx-color-base-info-800);--onyx-badge-hover-background-color:var(--onyx-color-base-info-200);--onyx-badge-focus-color:var(--onyx-color-base-info-200);--onyx-badge-active-background-color:var(--onyx-color-base-info-700)}.onyx-badge__icon{display:flex}.onyx-badge--dot{width:max-content;height:max-content;padding:var(--onyx-density-2xs);border-radius:var(--onyx-radius-full)}}