{"version":3,"file":"tree.module.mjs","names":[],"sources":["../../../../package/common/tree/tree.module.pcss"],"sourcesContent":[".tree {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  color: var(--text-color);\n\n  &-disabled {\n    opacity: 0.5;\n  }\n\n  &-node {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    box-sizing: border-box;\n    min-height: var(--tree-node-height, 32px);\n    padding-right: 8px;\n    border-radius: var(--default-border-radius);\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n    user-select: none;\n\n    &:hover {\n      background: var(--background-accent);\n    }\n\n    &:focus-visible {\n      outline: var(--focus-border-color, var(--primary-color)) solid 2px;\n      outline-offset: -2px;\n    }\n\n    &-selected {\n      background: var(--tree-selected-background, var(--primary-color));\n      color: var(--tree-selected-color, var(--text-on-primary));\n\n      &:hover {\n        background: var(--tree-selected-background, var(--primary-color));\n      }\n\n      &:focus-visible {\n        outline-color: var(--tree-selected-color, var(--text-on-primary));\n      }\n    }\n\n    &-disabled {\n      opacity: 0.5;\n      cursor: default;\n\n      &:hover {\n        background: transparent;\n      }\n    }\n  }\n\n  &-toggle {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex: none;\n    width: 1.25em;\n    height: 1.25em;\n    font-size: 0.8em;\n    border-radius: 50%;\n    transition: transform 0.15s;\n\n    &-open {\n      transform: rotate(90deg);\n    }\n\n    /* Kept in the layout rather than removed, so leaf labels line up with their siblings'. */\n    &-hidden {\n      visibility: hidden;\n    }\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  }\n\n  &-label {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  &-empty {\n    padding: 12px 8px;\n    color: var(--text-dark);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .tree-toggle {\n    transition: none;\n  }\n}\n"],"mappings":""}