{"version":3,"file":"iconPicker.module.mjs","names":[],"sources":["../../../../package/common/iconPicker/iconPicker.module.pcss"],"sourcesContent":[".iconPicker {\n  border-width: 1px;\n  border-radius: var(--default-border-radius);\n  border-color: transparent;\n  border-style: solid;\n\n  &-label {\n    font-size: var(--text-small-font-size);\n    margin-bottom: 0.5em;\n  }\n\n  &-item {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    /* em, because the icon inside is 1em: a fixed box let the glyph outgrow its own circle. */\n    padding: 0.5em;\n    width: 1.5em;\n    height: 1.5em;\n    background: var(--background-accent);\n    border-radius: 200px;\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n    stroke: var(--text-color);\n    position: relative;\n\n    &:focus-visible {\n      outline: 1px solid var(--focus-border-color, var(--primary-color));\n    }\n\n    &-container {\n      display: flex;\n      flex-wrap: wrap;\n      justify-content: space-around;\n      gap: 0.5em 0.875em;\n    }\n\n    &-selected {\n      background: var(--primary-color);\n\n      /* The inherited --text-color is the page's, not this background's, so the same selected\n         state came out white on one theme and near-black on another. */\n      stroke: var(--text-on-primary);\n\n      /* The selected item's own background is --primary-color, which is also the\n         default --focus-border-color — use the on-primary color instead so the ring\n         stays visible on whichever item roving tabindex focuses by default. */\n      &:focus-visible {\n        outline-color: var(--text-on-primary);\n      }\n    }\n  }\n\n  &-error {\n    border-color: var(--error-color);\n  }\n}\n"],"mappings":""}