@import "../../../../assets/less/core/boot.less";

@color-import-column-bg: #fff;
@color-import-column-border: #ccc;
@color-import-bound-bg: #e8eaeb;
@import-column-padding: 8px;
@import-column-font-size: 13px;

.import-behavior {

    ul {
        margin: 0;
        padding: 0;
        list-style: none;

        li {
            font-size: @import-column-font-size;
        }

        li.placeholder {
            display: block;
            position: relative;
        }

        li.dragged {
            position: absolute;
            z-index: 2000;
            .box-shadow(0 3px 6px rgba(0,0,0,.075));
        }
    }

    .import-file-columns,
    .import-db-columns {
        height: 400px;
        background: #f0f0f0;
        padding: 5px;
        overflow: auto;
    }
    .import-file-columns {
        .upload-prompt {
            display: block;
            text-align: center;
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            margin-top: -10px;
        }
    }

    .import-column-bindings > ul > li,
    .import-db-columns > ul > li {
        cursor: pointer;
    }

    ul li.dragged,
    .import-file-columns > ul > li,
    .import-db-columns > ul > li {
        background: @color-import-column-bg;
        border: 1px solid @color-import-column-border;
        border-radius: 3px;
        margin-bottom: 5px;

        div.import-column-name > span,
        > span {
            display: block;
            padding: @import-column-padding;
            padding-left: (@import-column-padding * 1.5);
        }
    }

    .import-db-columns > ul {
        > li {
            .column-icon {
                color: #ccc;
                position: relative;
                left: -3px;
            }
            &:hover .column-icon {
                color: #4da7e8;
            }

            &.is-required {
                .column-icon {
                    color: #ab2a1c;
                }
            }
        }
    }

    .import-file-columns > ul {
        > li {
            .clearfix;

            &.is-ignored {
                display: none;
            }

            .column-success-icon {
                display: none;
                position: relative;
                left: -2px;
                width: 15px;
            }

            &.is-matched {
                .column-success-icon {
                    display: inline-block;
                }
                .column-ignore-button {
                    display: none !important;
                }
            }
        }

        div.import-column-name {
            float: left;
            width: 45%;

            > span {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            a.column-label {
                color: #333;
            }

            a.column-ignore-button {
                color: #fff;
                background: #ccc;
                font-size: 10px;
                border-radius: 15px;
                display: inline-block;
                text-decoration: none;
                width: 15px;
                height: 15px;
                text-align: center;
                position: relative;
                top: -1px;
                left: -3px;
                &:hover {
                    background: #ab2a1c;
                }
            }
        }

        .import-column-bindings > ul {
            float: right;
            width: 55%;
        }
    }

    .import-column-bindings > ul {
        background: darken(@color-import-bound-bg, 5%);
        position: relative;
        min-height: (@import-column-padding * 2) + 18px;

        &:after {
            .triangle(right, 18px, (@import-column-padding * 2) + 18px, @color-import-column-bg);
            position: absolute;
            top: 0;
            left: 0;
        }

        &:before {
            position: absolute;
            padding: @import-column-padding;
            padding-left: 28px;
            content: attr(data-empty-text);
            color: rgba(0,0,0,.5);
        }

        > li {
            .column-icon {
                color: #595959;
                float: right;
                margin: 3px;
            }

            &:hover {
                .column-icon {
                    color: #333333;
                }
            }
        }

        > li:not(.dragged) {
            background: @color-import-bound-bg;
            position: relative;

            > span {
                display: block;
                padding: @import-column-padding;
                padding-left: 28px;
            }
        }
    }

}