/*
Sortable

These are the styles that give our drag & drop components their look.

Markup:
<div class="kss-modifier__description text-bold kss-style">List of sortable items</div>
<ul style="padding: 0; margin: 0;">
    <li class="sortable-item">
        <span>Sortable item 1</span>
    </li>
    <li class="sortable-item">
        <span>Sortable item 2</span>
    </li>
    <li class="sortable-item">
        <span>Sortable item 3</span>
    </li>
</ul>
<br/>
<br/>
<div class="kss-modifier__description text-bold kss-style">Drop zone placeholder</div>
<ul style="padding: 0; margin: 0;">
    <li style="list-style: none;" class="fancy-placeholder">
    </li>
</ul>

Name: sortable

Styleguide 2.19.1
*/

@color-sortable-placeholder-bg: @theme-green2;
@color-sortable-placeholder-border: @theme-green1;
@sortable-height: 40px;

// ui-sortable
.sortable-item {
    position: relative;
    height: @sortable-height;
    line-height: @sortable-height;
    padding: 0 10px 0 4px;
    list-style: none;
    cursor: move;
    border-bottom: 1px solid @color-border-main;

    &.ui-sortable-helper {
        border-bottom-color: transparent;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
        background-color: @color-popover-link-bg;
    }

    &.ui-state-disabled {
        cursor: default;
    }

    &:hover {
        background-image: linear-gradient(@color-border-main 40%, rgba(255, 255, 255, 0) 0%);
        background-size: 2px 5px;
        background-position: left center;
        background-repeat: repeat-y;

        &.ui-state-disabled {
            background: none;
        }
    }
}

.fancy-placeholder {
    height: @sortable-height;
    background-color: @color-sortable-placeholder-bg;
    border: 1px dashed @color-sortable-placeholder-border;
}