.tree {
    composes: cos-tree -v-text from global;
}
.treenode {
}
.header {
    composes: -v-px -v-h  -v-border-none rounded -v-bg-inapparent-primary from global;
}
.header:hover,
.header:global(.hover),
.header:global(.active),
.header:active {
    color: var(--color-white);
}
.tree:global(.dragging) .header:global(.tree-group):hover:not(:global(.active)){
    border:1px solid var(--color-primary-500);
}
.tree:global(.dragging) .content:global(.drag-off) .header:global(.tree-group):hover:not(:global(.active)){
    border:1px solid transparent;
}
.label {
    composes: cos-tree-label from global;
}
.arrow {
    composes: cos-tree-arrow -v-mr from global;
}
.content {
    
}
.prefix {
    composes: cos-tree-prefix -v-mr from global;
}
.subfix {
    composes: cos-tree-subfix -v-mr from global;
}
.input {
    composes: cos-tree-input from global;
}
.input:focus {
    opacity: 0.5;
}

.drag-handle {
    composes: cos-drag-handle from global;
    border-bottom: 1px solid var(--color-primary-500);
}
.drag-handle span{
    border: 1px solid var(--color-primary-500);
}