node.module.css

.header {
    composes: reset from '../reset.module.css';
    margin: 0;
    position: relative;
    line-height: 20px;
}
.header__chevron {
    composes: reset from '../reset.module.css';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 18px;

    color: var(--colors-ContrastBrighter);
    line-height: 20px;
    text-align: center;

    cursor: pointer;

    &:hover {
        color: var(--colors-PrimaryBlue);
    }
}
.header__chevron--isCollapsed > svg {
    transform: translateY(3px) translateX(-2px) rotate(-90deg);
}
.header__chevron--isHiddenInIndex {
    opacity: .5;
}

.header__chevron--isLoading,
.header__chevron--isLoading:hover {
    color: var(--colors-ContrastBrighter) !important;
}

.header__chevron--isLoading > svg {
    margin-top: 6px;
}

.header__iconWrapper {
    width: 2em;
    display: inline-block;
    position: absolute;
    text-align: center;
}

.header__data {
    composes: reset from '../reset.module.css';
    position: relative;
    display: inline-block;
    width: 100%;
    padding: .1em 0;

    border-left: 2px solid transparent;

    white-space: nowrap;

    cursor: pointer;
}

.header__data--isHiddenInIndex {
    opacity: .5;
}
.header__data--isHidden {
    text-decoration: line-through;
}
.header__data--isDragging {
    opacity: .2;
}
.header__data--isDirty {
    border-left: 2px solid var(--colors-Warn);
}

.header__data--isFocused {
    background: var(--colors-ContrastNeutral);

    &.header__data--isHiddenInIndex,
    &.header__data--isHidden {
        opacity: .8;
    }
}
.header__data--acceptsDrop {
    background-color: var(--colors-PrimaryBlue);
}
.header__data--acceptsDrop *,
.header__data--deniesDrop * {
    pointer-events: none;
}

.header__labelWrapper {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    line-height: 1.5;
    vertical-align: middle;
}
.header__label {
    composes: reset from '../reset.module.css';
    margin-left: 2em;

    .header__data--isActive & {
        color: var(--colors-PrimaryBlue);
    }
}

.contents {
    composes: reset from '../reset.module.css';
}

.dropTarget {
    position: absolute;
    left: 0;
    right: 0;
    padding-left: 15px;
    height: 2px;
    visibility: hidden;

    [data-is-drag-happening] & {
        visibility: visible;
    }
}
.dropTarget--before {
    top: -5px;
    z-index: var(--zIndex-SideBar-DropTargetBefore);
    padding-top: 4px;
    padding-bottom: 4px;
}
.dropTarget--after {
    bottom: 1px;
    z-index: var(--zIndex-SideBar-DropTargetAfter);
    padding-top: 6px;
    padding-bottom: 0;
}
.dropTarget__inner {
    visibility: hidden;
    margin-top: -8px;
    height: 0;
}
.dropTarget__inner--acceptsDrop {
    z-index: 100000;
    visibility: visible;
}
.dropTarget__inner svg {
    fill: var(--colors-PrimaryBlue);
}