{"version":3,"file":"badge.module.mjs","names":[],"sources":["../../../../package/common/badge/badge.module.pcss"],"sourcesContent":[".wrapper {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  isolation: isolate;\n}\n\n.badge {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  min-width: 1.5em;\n  height: 1.5em;\n  padding: 0 0.375em;\n  border-radius: var(--default-border-radius);\n  font-size: 0.75em;\n  font-weight: 600;\n  line-height: 1;\n  white-space: nowrap;\n\n  /* Always solid: too small for a tint, an outline or a gradient. */\n  &-dot {\n    min-width: 0.8em;\n    width: 0.8em;\n    height: 0.8em;\n    padding: 0;\n    border-radius: 100%;\n    background: var(--tone);\n\n    &.badge-position-top-right {\n      transform: translate(20%, -20%);\n    }\n\n    &.badge-position-top-left {\n      transform: translate(-20%, -20%);\n    }\n\n    &.badge-position-bottom-right {\n      transform: translate(20%, 20%);\n    }\n\n    &.badge-position-bottom-left {\n      transform: translate(-20%, 20%);\n    }\n  }\n\n  /* An opaque page-coloured base under the style, or the content shows through Light, Outlined\n     and Neutral's fill. */\n  &-overlay {\n    position: absolute;\n    z-index: 1;\n\n    &.badge-style-filled {\n      background: var(--tone-gradient), linear-gradient(var(--tone-fill), var(--tone-fill)), var(--background);\n    }\n\n    &.badge-style-light {\n      background: linear-gradient(var(--tone-light), var(--tone-light)), var(--background);\n    }\n\n    &.badge-style-outlined {\n      background: var(--background);\n    }\n  }\n\n  &-position {\n    &-top-right {\n      top: 0;\n      right: 0;\n      transform: translate(50%, -50%);\n    }\n\n    &-top-left {\n      top: 0;\n      left: 0;\n      transform: translate(-50%, -50%);\n    }\n\n    &-bottom-right {\n      bottom: 0;\n      right: 0;\n      transform: translate(50%, 50%);\n    }\n\n    &-bottom-left {\n      bottom: 0;\n      left: 0;\n      transform: translate(-50%, 50%);\n    }\n  }\n\n  &-style {\n    &-filled {\n      background: var(--tone-fill);\n\n      /* Must follow the shorthand above, which resets background-image. */\n      background-image: var(--tone-gradient);\n      color: var(--tone-contrast);\n    }\n\n    &-light {\n      background: var(--tone-light);\n      color: var(--tone-text);\n    }\n\n    /* An inset shadow rather than a border, so an outlined badge is exactly as big as the rest. */\n    &-outlined {\n      box-shadow: inset 0 0 0 1px var(--tone-outline);\n      color: var(--tone-text);\n    }\n  }\n}\n"],"mappings":""}