// Tree-specific styles for reorderable components

.drop-indicator {
    &.drop-above::before {
        content: '';
        position: absolute;
        top: -3px;
        left: var(--drop-line-padding, 0);
        right: 0;
        height: 10px;
        background: var(--reorderable-drop-indicator-color);
        border-radius: var(--reorderable-drop-indicator-radius);
        z-index: 10;
    }

    &.drop-below::after {
        content: '';
        position: absolute;
        bottom: -3px;
        left: var(--drop-line-padding, 0);
        right: 0;
        height: 10px;
        background: var(--reorderable-drop-indicator-color);
        border-radius: var(--reorderable-drop-indicator-radius);
        z-index: 10;
    }

    &.drop-child::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--reorderable-drop-child-bg);
        border-radius: var(--reorderable-focus-radius);
        pointer-events: none;
        z-index: 1;
    }
}