@charset "utf-8";
@import (optional, reference) "var.less";
/*Drag & drop*/
._holder-drag,
._holder-drop {
    --_holder-radius: var(--_r);
    --_holder-c-bd: var(--_c-ignore);
    --_holder-c-txt: var(--_c-ignore);
    color: var(--_holder-c-txt);
    border: 2px dashed var(--_holder-c-bd);
    border-radius: var(--_holder-radius);
    .v3-flex-center;
    box-sizing: border-box;
    min-width: var(--_sz-body);
    min-height: var(--_sz-body);
}
._holder-drag {
    pointer-events: none;
    z-index: 0;
}
._holder-drop {
    .v3-trans-all(var(--_dur-1));
    min-height: var(--_sz-font);
    &[moving] {
        --_holder-c-bd: var(--_c-prim);
        --_holder-c-txt: var(--_c-prim);
    }
}
._holder-origin{
    opacity: 0.5;
    pointer-events: none;
    z-index: 0;
}
._drop-arrow {
    font-size: var(--_sz-ignore);
    color: var(--_c-prim);
    line-height: 1em;
    height: 1em;
    pointer-events: none;
    position: absolute;
    .v3-trans-all(var(--_dur-1));
    &[placement=left] {
        left: 0;
        &[point=before] {
            top: 0;
            translate: -100% -50%;
        }
        &[point=after] {
            bottom: 0;
            translate: -100% 50%;
        }
        &[point=inside] {
            top: 50%;
            translate: -100% -50%;
        }
    }
    &[placement=right] {
        rotate: 180deg;
        right: 0;
        &[point=before] {
            top: 0;
            translate: 100% -50%;
        }
        &[point=after] {
            bottom: 0;
            translate: 100% 50%;
        }
        &[point=inside] {
            top: 50%;
            translate: 100% -50%;
        }
    }
    &[placement=top] {
        rotate: 90deg;
        top: 0;
        &[point=before] {
            left: 0;
            translate: -50% -100%;
        }
        &[point=after] {
            right: 0;
            translate: 50% -100%;
        }
        &[point=inside] {
            left: 50%;
            translate: -50% -100%;
        }
    }
    &[placement=bottom] {
        rotate: -90deg;
        bottom: 0;
        &[point=before] {
            left: 0;
            translate: -50% 100%;
        }
        &[point=after] {
            right: 0;
            translate: 50% 100%;
        }
        &[point=inside] {
            left: 50%;
            translate: -50% 100%;
        }
    }
}
[draggable]{
    touch-action: none;
    position: relative;
    z-index: 2;
}
[draggable]:hover {
    cursor: grab;
}
[drag] {
    pointer-events: none;
    opacity: .5;
}
[drop=ing] {
}
[drop=ed] {
}
