{"version":3,"file":"chip.module.mjs","names":[],"sources":["../../../../package/common/chip/chip.module.pcss"],"sourcesContent":[".chip {\n  border-radius: 99999px;\n  width: fit-content;\n  position: relative;\n  box-sizing: border-box;\n  max-width: 100%;\n\n  &-clickable {\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\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 chip 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  &-inner {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n    padding: 4px 8px;\n\n    & > * {\n      white-space: nowrap;\n    }\n  }\n\n  &-text {\n    text-overflow: ellipsis;\n    overflow: hidden;\n  }\n\n  &-thumbnail {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: 18px;\n    height: 18px;\n    background: rgb(0 0 0 / 8%);\n    border-radius: 18px;\n    overflow: hidden;\n    background-size: cover;\n  }\n\n  &-container {\n    display: flex;\n    gap: 8px;\n    flex-wrap: wrap;\n\n    &-inline {\n      flex-wrap: nowrap;\n      overflow: auto;\n    }\n  }\n}\n"],"mappings":""}