src/components/Tree/components/TreeItem/TreeItem.module.css
.Wrapper {
list-style: none;
box-sizing: border-box;
padding-left: var(--spacing);
cursor: auto;
&.clone {
display: inline-block;
pointer-events: none;
width: 100%;
padding: 0;
margin-top: 20px;
opacity: 0.8;
.TreeItem {
--vertical-padding: 0;
border-radius: var(--radius-md);
box-shadow: 0px 15px 15px 0 rgba(34, 33, 81, 0.1);
}
}
&.ghost {
&.indicator {
opacity: 1;
position: relative;
z-index: 1;
.TreeItem {
&:before {
position: absolute;
display: block;
content: '';
left: 0px;
top: -6px;
border: 5px solid transparent;
border-left: 8px solid var(--indigo-300);
z-index: 1;
}
&:after {
position: absolute;
display: block;
content: '';
left: 0px;
right: 0px;
top: -2px;
height: 2px;
background: var(--indigo-200);
z-index: 0;
}
}
}
&:not(.indicator) {
opacity: 0.5;
}
.TreeItem > * {
box-shadow: none;
background-color: transparent;
}
}
}
.TreeItem {
--vertical-padding: 0;
position: relative;
display: flex;
align-items: center;
padding: var(--vertical-padding) 0;
background-color: #fff;
color: #222;
box-sizing: border-box;
}
.Text {
flex-grow: 1;
padding-left: 0.5rem;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.Count {
position: absolute;
top: -6px;
right: -6px;
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #2389ff;
font-size: 0.6rem;
font-weight: 600;
color: #fff;
}
.disableInteraction {
pointer-events: none;
}
.disableSelection,
.clone {
.Text,
.Count {
user-select: none;
-webkit-user-select: none;
}
}