{"version":3,"file":"menu.module.mjs","names":[],"sources":["../../../../package/common/menu/menu.module.pcss"],"sourcesContent":[".menuPanel {\n  padding: 0;\n}\n\n.menu {\n  display: flex;\n  flex-direction: column;\n  min-width: 180px;\n  padding: 4px 0;\n  box-sizing: border-box;\n  font-family: var(--default-font);\n  font-size: var(--default-font-size);\n  color: var(--text-color);\n\n  /* Chrome (background, shadow, radius, positioning) comes from the Popover panel\n     this renders inside — keep only the list itself here. */\n\n  &-trigger {\n    /* The trigger is only here to give Escape somewhere to return the focus to;\n       it must not become a box of its own in the consumer's layout. */\n    display: contents;\n  }\n\n  &-item {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    width: 100%;\n    padding: 8px 12px;\n    border: none;\n    background: none;\n    font: inherit;\n    color: inherit;\n    text-align: left;\n    white-space: nowrap;\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n    box-sizing: border-box;\n    transition: background 0.1s;\n\n    /* An entry with an `href` is an <a>. */\n    text-decoration: none;\n\n    /* `:focus`, not `:focus-visible`: the entry with the focus is the one the\n       arrow keys are on, and it has to look like it whether the menu was opened\n       by keyboard or by mouse. `:focus-visible` would stay dark after a click on\n       the trigger, because the browser does not count that as keyboard input.\n\n       Not `--background-accent-light`: the panel under this list is\n       `--background-modal`, and the default theme gives both the same colour, so\n       the highlight was invisible. Dropdown and MultiSelect pick this one too. */\n    &:hover:not(:disabled),\n    &:focus {\n      background: var(--background-accent);\n    }\n\n    /* The ring would sit on top of the neighbouring rows' backgrounds; the row\n       highlight above is what marks the active entry. */\n    &:focus {\n      outline: none;\n    }\n\n    &:disabled {\n      opacity: 0.45;\n      cursor: default;\n    }\n\n    &-danger {\n      color: var(--error-color);\n    }\n\n    &-icon {\n      /* FontAwesome's own rule is unlayered, so it outranks `width` from inside the library's layer and\n         reads this instead. `width` still sizes a custom icon. */\n      --fa-width: 1em;\n\n      flex: none;\n      width: 1em;\n      text-align: center;\n    }\n\n    &-label {\n      flex: 1;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    &-shortcut {\n      flex: none;\n      margin-left: 16px;\n      font-size: 0.85em;\n      color: var(--text-light);\n    }\n  }\n\n  &-separator {\n    height: 1px;\n    margin: 4px 0;\n    background: var(--border-color);\n  }\n\n  &-heading {\n    padding: 6px 12px 2px;\n    font-size: 0.8em;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.04em;\n    color: var(--text-light);\n  }\n}\n"],"mappings":""}