{"version":3,"file":"optionPicker.module.mjs","names":[],"sources":["../../../../package/common/optionPicker/optionPicker.module.pcss"],"sourcesContent":[".optionPicker {\n  display: flex;\n  width: 100%;\n  border-radius: var(--default-border-radius);\n  border: 1px solid var(--border-color);\n  transition: border-color 0.15s;\n  justify-content: space-around;\n  position: relative;\n  overflow: hidden;\n\n  /* :has(:focus-visible) rather than :focus-within, so this only lights up on\n       keyboard focus — same as the per-option ring below, not on a mouse click. */\n  &:has(:focus-visible) {\n    border-color: var(--focus-border-color, var(--primary-color));\n  }\n\n  &-chip {\n    position: absolute;\n    height: 100%;\n    top: 0;\n    left: 0;\n    background: var(--primary-color);\n\n    /* Must follow the shorthand above, which resets background-image. */\n    background-image: var(--primary-gradient, none);\n    border-radius: var(--default-border-radius);\n    transition:\n      left 0.25s ease-in-out,\n      width 0.25s ease-in-out;\n  }\n\n  &-option {\n    position: relative;\n    width: 100%;\n    height: 100%;\n    display: block;\n    align-content: center;\n    text-align: center;\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n    padding: var(--option-picker-padding, var(--spacing-m));\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    border-radius: var(--default-border-radius);\n    transition: color 0.25s;\n    box-sizing: border-box;\n\n    &:focus-visible {\n      outline: var(--focus-border-color, var(--primary-color)) solid 2px;\n      outline-offset: -2px;\n    }\n\n    &-active {\n      color: var(--text-on-primary);\n\n      /* The active option sits on the primary-color chip, so the default\n               primary-color outline above is invisible against it — use the\n               on-primary color instead, same as the option's own text/icon color. */\n      &:focus-visible {\n        outline-color: var(--text-on-primary);\n      }\n    }\n  }\n}\n"],"mappings":""}