@import "inc/bootstrap";

.qti-orderInteraction {
    .arrow-bar {
        text-align: center;
        span {
            margin: 3px auto;
            @include font-size(25);
            color: mix(#fff, $textColor, 50%);
            background: mix(#fff, $uiClickableDefaultBg, 50%);
            cursor: default;
            height: 40px;
            &.active {
                background: $uiClickableDefaultBg;
                cursor: pointer;
                color: $textColor;
                &:hover {
                    color: $textHighlight;
                    background: $uiClickableHoverBg;
                }
            }
            &.triggered {
                color: $textHighlight;
                background: $uiClickableHoverBg;
            }
        }
    }

    &.qti-vertical {
        .order-interaction-area {
            display: table;
            border-collapse: separate;
            border-spacing: 5px 5px 5px 0;
            width: 100%;
        }
        ul.source, ul.target,
        ol.source, ol.target {
            display: table-cell;
            width: 43%;
            padding-left: 40px;
            padding-right: 3px;

            @include rtl {
                padding-left: 3px;
                padding-right: 40px;
            }
        }
        .arrow-bar {
            .icon-move-before {
                @include icon-up;
            }
            .icon-move-behind {
                @include icon-down;
            }
            display: table-cell;
            vertical-align: middle;
            padding: 5px;
            span {
                padding: 8px 0;
                display: block;
                width: 50px;
                &.inactive {
                    visibility: hidden;
                }
            }
            &.middle {
                span.inactive {
                    display: none;
                }
            }
        }
        .icon-add-to-selection,
        .icon-remove-from-selection {
            @include rtl {
                transform: scale(-1);
            }
        }
    }

    &.qti-horizontal {
        .block-listing {
            min-height: 38px;
        }
        .arrow-bar {
            margin-bottom: 10px;

            span {
                padding: 0 15px;
                display: inline-block;
                line-height: 1.6;
                &.inactive {
                    visibility: hidden;
                }
                &.icon-move-before {
                    @include icon-up;
                }
                &.icon-move-behind {
                    @include icon-down;
                }
            }
        }
        .icon-move-after,
        .icon-move-before {
            @include rtl {
                transform: scale(-1);
            }
        }
    }
    li {
        &.dragged {
            border-color: whiten($info, .2) !important;
            list-style: none;
        }
    }
    .drag-container {
        position: absolute;
        display: none;
        padding: 0;
        margin: 0;
        z-index: 1;
    }
}