@use '~flux/components/css/mixin';

.treeViewSelectList {
    display: flex;
    flex-flow: column;
    padding: 9px;
}

.treeViewSelectEmpty {
    @include mixin.text(small);

    padding: 12px 6px;
    color: var(--foreground-secondary);
    text-align: center;
}

// Hover and highlight mirror .menuItem / .menuItemHighlighted (Menu.module.scss), so options here
// look identical to the menu items the form select renders. There is deliberately no selected
// state: the checkbox / radio carries that, the same way the Solvidi filter tree does it.
.treeNode {
    composes: treeNode from './primitive/TreeNode.module.scss';

    &.isSelectable,
    &.isExpandable {
        cursor: pointer;

        @include mixin.hover {
            background: var(--gray-50);
        }

        &:active {
            background: var(--gray-100);
        }
    }

    &.isHighlighted {
        background: var(--primary-100);
        color: var(--primary-600);

        @include mixin.hover {
            background: var(--primary-100);
        }
    }

    // Disabled and cascade-locked nodes stay dimmed but keep their marker clickable, so the look
    // comes from this class rather than the disabled attribute — pointer-events: none would kill
    // the expand toggle.
    &.isDisabled {
        color: var(--foreground-secondary);
        cursor: default;

        @include mixin.hover {
            background: transparent;
        }

        &:active {
            background: transparent;
        }
    }
}

// The row is the control, so its checkbox / radio must not claim a cursor of its own.
.treeNodeControl {
    cursor: inherit;
}