/* ======================================================
    <!-- DragDrop List -->
/* ====================================================== */
.custom-draggable-list {

    --custom-draggable-content-bg: transparent;
    --custom-draggable-content-color: inherit;
    --custom-draggable-border-color: #ddd;
    --custom-draggable-wrapper-radius: 0.25rem;
    --custom-draggable-control-radius: 0.25rem;
    --custom-draggable-primary-color: #ffa940;
    --custom-draggable-content-diff-bg: #fafafa;
    --custom-draggable-content-diff-border-color: #d9d9d9;
    --custom-draggable-control-fs: 0.75rem;
    --custom-draggable-control-w: 100px;
    --custom-draggable-btn-confirm-bg: #52c41a;
    --custom-draggable-btn-cancel-bg: #ff4d4f;
    --custom-draggable-btn-color: #fff;


    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    position: relative;
    border: 1px solid var(--custom-draggable-border-color);
    border-radius: var(--custom-draggable-wrapper-radius);

    li {
        margin: 0;
        padding: 0;
    }

    .custom-draggable-list__item {
        padding: 0;
        position: relative;
        transition: transform 0.15s ease;
        position: relative;

        .custom-draggable-list__itemcontent {
            padding: 10px 15px;
            background: var(--custom-draggable-content-bg);
            color: var(--custom-draggable-content-color);
            border-bottom: 1px solid var(--custom-draggable-border-color);
            display: flex;
            align-items: center;
            user-select: none;
            transition: all 0.15s ease;

            .custom-draggable-list__itemcontent-inner {
                display: flex;
                align-items: center;
                justify-content: space-between;
                width: 100%;
                
            }
        }

        &:last-child {
            .custom-draggable-list__itemcontent {
                border-bottom: none;
            }
        }

        &.disabled {
            pointer-events: none !important;
            opacity: .4 !important;
        }
    }

    &.alternate-collapse {
        .custom-draggable-list__collapse-arrow {
            cursor: pointer;
            display: inline-block;
            width: 20px;
            text-align: center;
            user-select: none;
            margin-left: .2rem;
            
            svg {
                transition: all 0.15s ease;
            }

            &:hover {
                opacity: 0.7;
            }
        }

        .custom-draggable-list__item {
            &.has-children {
                position: relative;
            }

            &.collapsed {
                .custom-draggable-list__collapse-arrow svg {
                    transform: rotate(-90deg);
                }
            }
        }
    }

    .custom-draggable-list__item.draggable .custom-draggable-list__itemcontent {
        padding-left: 1.5em;
    }


    &.handle-pos-right .custom-draggable-list__item.draggable .custom-draggable-list__itemcontent,
    &.icon-hide .custom-draggable-list__item.draggable .custom-draggable-list__itemcontent {
        padding-left: .5rem;
    }


    .custom-draggable-list__item {
        &.block.draggable {
            cursor: move;
        }

        &.dragging .custom-draggable-list__itemcontent {
            background: #fff9e6;
            border: 1px dashed #ffd591;
            opacity: 0.8;
        }

        &.drag-over .custom-draggable-list__itemcontent {
            background: #fff9e6;
            border: 2px solid #ffd591;
        }

        &.drag-over-top::before {
            content: '';
            position: absolute;
            top: -3px;
            left: 0;
            right: 0;
            height: 2px;
            background: var(--custom-draggable-primary-color);
            border-radius: 1px;
        }

        &.drag-over-bottom::after {
            content: '';
            position: absolute;
            bottom: -3px;
            left: 0;
            right: 0;
            height: 2px;
            background: var(--custom-draggable-primary-color);
            border-radius: 1px;
        }
    }

    /* Fix the problem that mobile terminals cannot be touched, DO NOT USE "<svg>" */
    .custom-draggable-list__handle {
        color: #999;
        padding: 5px;
        cursor: move;
        transition: color 0.15s ease;
        position: absolute;
        width: 1em;
        height: 1em;
        top: 50%;
        transform: translateY(-50%);
        z-index: 1;
        display: flex;
        align-items: center;
        font-size: 0.75rem;

        &.left {
            left: 0;
        }

        &.right {
            right: 1em;
        }
    }

    .custom-draggable-list__item,
    .custom-draggable-list__itemcontent {
        transition: all 0.15s ease;
    }


    .custom-draggable-list__item {
        &.editing .custom-draggable-list__itemcontent,
        &:hover .custom-draggable-list__itemcontent {
            background: var(--custom-draggable-content-diff-bg);
            border-color: var(--custom-draggable-content-diff-border-color);
        }
        

        &.block:hover .custom-draggable-list__handle {
            color: var(--custom-draggable-primary-color);
        }

    }    

    &.handle .custom-draggable-list__handle:hover {
        color: var(--custom-draggable-primary-color);
    }

    /* FORM */
    .custom-draggable-list__edit-form {
        display: flex;
        flex: 1;
        gap: 10px;
        align-items: center;

        input {
            padding: 4px 8px;
            border: 1px solid var(--custom-draggable-border-color);
            border-radius: var(--custom-draggable-control-radius);
            font-size: var(--custom-draggable-control-fs);
            width: var(--custom-draggable-control-w);
        }
    }

    .custom-draggable-list__edit-buttons {
        display: flex;
        gap: 5px;

        button {
            padding: .2rem .5rem;
            border: none;
            font-size: 0.75rem;
            border-radius: var(--custom-draggable-control-radius);
            cursor: pointer;
    
            &:first-child {
                background: var(--custom-draggable-btn-confirm-bg);
                color: var(--custom-draggable-btn-color);
            }

            &:last-child {
                background: var(--custom-draggable-btn-cancel-bg);
                color: var(--custom-draggable-btn-color);
            }

            &:hover {
                opacity: 0.8;
            }
        }
    }

}