/* .smart-sortable */
.smart-sortable {
    display: block;
}

    .smart-sortable:not([disabled]) {
        touch-action: none;
    }

    .smart-sortable:not([items]).smart-containe,
    .smart-sortable:not([items]) > .smart-container,
    .smart-sortable .smart-sortable-items-parent {
        display: flex;
        flex-direction: column;
    }

    .smart-sortable[dragged] > .smart-container {
        user-select: none;
    }

    .smart-sortable:not([items])[mode="horizontal"] > .smart-container,
    .smart-sortable[mode="horizontal"] .smart-sortable-items-parent {
        flex-direction: row;
    }

    .smart-sortable .smart-sortable-item {
        transform: translate(0, 0);
        position: relative;
    }

    .smart-sortable:not([drag-mode="handle"]):not([disabled]) .smart-sortable-item {
        cursor: grab;
    }

    .smart-sortable:not([animation="none"]) .smart-sortable-item {
        transition: transform 0.15s ease-in;
    }

        .smart-sortable:not([animation="none"]) .smart-sortable-item.returning {
            transition: left 0.15s ease-in, top 0.15s ease-in;
        }

    .smart-sortable .smart-sortable-item.dragged {
        position: absolute;
        box-shadow: var(--smart-elevation-4);
        z-index: 9999999;
    }

    .smart-sortable[drag-mode="handle"] .smart-sortable-item:before,
    .smart-sortable[drag-mode="handle"] .smart-sortable-item:after {
        content: var(--smart-icon-ellipsis);
        position: absolute;
        left: 100%;
        top: calc(50% - var(--smart-sortable-handle-size) / 2);
        width: var(--smart-sortable-handle-size);
        height: var(--smart-sortable-handle-size);
        display: flex;
        align-items: flex-end;
        justify-content: center;
        font-family: var(--smart-font-family-icon);
        font-size: var(--smart-font-size);
        line-height: calc(var(--smart-sortable-handle-size) - var(--smart-font-size) / 2);
        cursor: grab;
        visibility: hidden;
        opacity: 0;
        transition: visibility 0.2s ease-in, opacity 0.2s ease-in;
        color: var(--smart-background-color);
    }

    .smart-sortable[handle-position="left"] .smart-sortable-item:before,
    .smart-sortable[handle-position="left"] .smart-sortable-item:after {
        left: calc(-1 * var(--smart-sortable-handle-size));
    }

    .smart-sortable[drag-mode="handle"]:not([disabled]) .smart-sortable-item:hover:before,
    .smart-sortable[drag-mode="handle"]:not([disabled]) .smart-sortable-item:hover:after {
        z-index: 9999999;
    }

    .smart-sortable[drag-mode="handle"]:not([disabled]) .smart-sortable-item:hover:before,
    .smart-sortable[drag-mode="handle"]:not([disabled]) .smart-sortable-item:hover:after,
    .smart-sortable[drag-mode="handle"][handle-visibility="visible"]:not([disabled]) .smart-sortable-item:before,
    .smart-sortable[drag-mode="handle"][handle-visibility="visible"]:not([disabled]) .smart-sortable-item:after,
    .smart-sortable[drag-mode="handle"] .smart-sortable-item.dragged:before,
    .smart-sortable[drag-mode="handle"] .smart-sortable-item.dragged:after {
        visibility: visible;
        opacity: 0.5;
    }

    .smart-sortable .smart-sortable-item.placeholder:before,
    .smart-sortable .smart-sortable-item.placeholder:after {
        content: none;
    }

    .smart-sortable[drag-mode="handle"] .smart-sortable-item:before {
        transform: rotate(-90deg);
    }


    .smart-sortable[drag-mode="handle"] .smart-sortable-item:after {
        transform: rotate(90deg);
    }

    .smart-sortable[drag-mode="handle"][handle-position="bottom"] .smart-sortable-item:before,
    .smart-sortable[drag-mode="handle"][handle-position="top"] .smart-sortable-item:before,
    .smart-sortable[drag-mode="handle"][handle-position="bottom"] .smart-sortable-item:after,
    .smart-sortable[drag-mode="handle"][handle-position="top"] .smart-sortable-item:after {
        left: calc(50% - var(--smart-sortable-handle-size) / 2);
        top: 100%;
        align-items: center;
        transform: none;
    }

    .smart-sortable[drag-mode="handle"][handle-position="bottom"] .smart-sortable-item:after {
        align-items: flex-start;
    }

    .smart-sortable[drag-mode="handle"][handle-position="top"] .smart-sortable-item:before,
    .smart-sortable[drag-mode="handle"][handle-position="top"] .smart-sortable-item:after {
        top: calc(-1 * var(--smart-sortable-handle-size));
    }

    .smart-sortable[drag-mode="handle"][handle-position="top"] .smart-sortable-item:after {
        align-items: flex-end;
    }

    /* --- Right To Left ---*/

    smart-sortable[right-to-left] .smart-sortable-items-parent {
        direction: rtl;
    }

    /* --- */