@use '~@epam/uui/assets/styles/dnd' as *;

.dragElement {
    position: relative;
    padding: 6px 0;
    margin: 0 24px;
    @include dnd-cursor-style();

    .materialRow {
        border: 1px solid var(--uui-control-border);
    }

    &:hover .dragHandle {
        visibility: visible;
    }

    .iconWrapper {
        padding: 12px 24px;

        &:first-child {
            border-right: 1px solid var(--uui-control-border);
        }

        svg {
            fill: var(--uui-icon);
        }
    }

    .textWrapper {
        padding-left: 6px;
    }

    &:global(.uui-dragged-out) {
        .dndItem {
            opacity: 0.25;
        }

        .dragHandle {
            visibility: hidden;
        }
    }

    :global(.uui-drag-ghost) {
        box-shadow: 0 6px 18px 0 rgba(29, 30, 38, 0.05), 0 3px 12px 0 rgba(29, 30, 38, 0.05);

        .dragHandle {
            visibility: visible;
        }
    }

    .dragHandle {
        position: absolute;
        left: 8px;
        top: 12px;
        bottom: 12px;
        align-self: stretch;
        visibility: hidden;
    }
}

:global(.uui-dragging) {
    .dragElement {
        &:hover .dragHandle {
            visibility: hidden;
        }
    }
}
