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

@columns-bg: @tertiary-bg;
@column-label-color: @text-color;
@column-item-bg: @input-bg;
@column-item-border: @input-border;

@bound-color: @emphasis-color;
@bound-bg: @secondary-bg;

@unbound-color: @tertiary-color;
@unbound-bg: @secondary-bg;

@column-padding: 8px;
@column-font-size: 13px;

.import-behavior {
    ul {
        margin: 0;
        padding: 0;
        list-style: none;

        li {
            font-size: @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: @columns-bg;
        padding: 5px;
        overflow: auto;
    }

    .import-db-columns {
        > ul {
            min-height: 380px;
        }
    }

    .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: @column-item-bg;
        border: 1px solid @column-item-border;
        border-radius: 3px;
        margin-bottom: 5px;

        div.import-column-name > span,
        > span {
            display: block;
            padding: @column-padding;
            padding-left: (@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: @column-label-color;
            }

            a.column-ignore-button {
                color: @secondary-color;
                background: @secondary-bg;
                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 {
                    color: white;
                    background: #ab2a1c;
                }
            }
        }

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

    .import-column-bindings > ul {
        background: @unbound-bg;
        position: relative;
        min-height: (@column-padding * 2) + 18px;

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

        &:before {
            position: absolute;
            padding: @column-padding;
            padding-left: 28px;
            content: attr(data-empty-text);
            color: @unbound-color;
        }

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

            &:hover {
                .column-icon {
                    color: @emphasis-color;
                }
            }
        }

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

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