{"version":3,"file":"commandPalette.module.mjs","names":[],"sources":["../../../../package/common/commandPalette/commandPalette.module.pcss"],"sourcesContent":[".commandPalette {\n  --modal-padding: var(--spacing-s);\n  --modal-body-bleed: 0;\n\n  width: 640px;\n\n  /* Near the top rather than centred, so the panel does not jump as the list shrinks while\n     typing. A sheet overrides both with its own doubled selector. */\n  align-self: flex-start;\n  margin-top: 12vh;\n\n  &-search {\n    display: flex;\n    align-items: center;\n    gap: var(--spacing-s);\n    padding: var(--spacing-s) var(--spacing-m);\n    border-bottom: 1px solid var(--border-color);\n\n    &-icon {\n      flex: none;\n      color: var(--text-light);\n    }\n  }\n\n  &-input {\n    flex: 1;\n    min-width: 0;\n    padding: 4px 0;\n    border: none;\n    outline: none;\n    background: transparent;\n    font: inherit;\n    font-size: 1.1em;\n    color: var(--text-color);\n\n    &::placeholder {\n      color: var(--text-light);\n    }\n  }\n\n  &-list {\n    max-height: min(24rem, 60vh);\n    max-height: min(24rem, 60dvh);\n    overflow-y: auto;\n    padding: 4px 0;\n\n    &:empty {\n      display: none;\n    }\n  }\n\n  &-item {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 8px 12px;\n    border-radius: var(--default-border-radius);\n    color: var(--text-color);\n    white-space: nowrap;\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n\n    /* Same token as Menu's highlight: `--background-accent-light` matches the modal surface in\n       the default theme. */\n    &-active {\n      background: var(--background-accent);\n    }\n\n    &-danger {\n      color: var(--error-color);\n    }\n\n    &-disabled {\n      opacity: 0.45;\n      cursor: default;\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  &-heading {\n    padding: 10px 12px 4px;\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  &-separator {\n    height: 1px;\n    margin: 4px 0;\n    background: var(--border-color);\n  }\n\n  &-empty {\n    padding: var(--spacing-l) var(--spacing-m);\n    text-align: center;\n    color: var(--text-light);\n  }\n\n  &-status {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    border: 0;\n    clip-path: inset(50%);\n    overflow: hidden;\n    white-space: nowrap;\n  }\n}\n"],"mappings":""}