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

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

    .material-row {
        border: 1px solid $gray40;
    }

    &:hover .drag-handle {
        visibility: visible;
    }

    .icon-wrapper {
        padding: 12px 24px;

        &:first-child {
            border-right: 1px solid $gray40;
        }
    }

    .text-wrapper {
        padding-left: 6px;
    }

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

        .drag-handle {
            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);

        .drag-handle {
            visibility: visible;
        }
    }

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