$font-family-h: 'Helvetica Neue', Tahoma, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', STHeitiSC, sans-serif;
$font-family-a: 'Helvetica Neue', Tahoma, 'PingFang SC', 'Hiragino Sans GB', SimSun, STHeitiSC, sans-serif;
@mixin opacity($val) {
  filter: Alpha(opacity=($val * 100));
  -webkit-opacity: $val;
  -moz-opacity: $val;
  -o-opacity: $val;
  opacity: $val;
}
/*
  主色
*/
$c1: #004170;
$c2: #005999;
$c3: #1687d9;
$c4: #96d0fa;
/*
  中性色
*/
$m1: #36434d;
$m2: #667580;
$m3: #acb7bf;
$m4: #e4ebf0;
$m5: #f5f8fa;
$list_height: 309px;
$header_height: 34px;

.transfer {
    button.btn {
        display: block;
        padding: 0;
        margin: 20px 0;
        width: 26px;
        height: 26px;
        line-height: 22px;
        border: 1px solid transparent;
        border-radius: 2px;
        text-align: center;
        vertical-align: middle;
        cursor: pointer;
        outline: transparent;
        box-shadow: 0 1px 2px rgba(0,0,0,0.3);
        background-color: $c3;
        background-clip: border-box;
        color: #ffffff;
    }

    button.btn:disabled {
        @include opacity(0.6);
        box-shadow: none;
        cursor: not-allowed;
    }
}

.transfer-list {
    position: relative;
    display: inline-block;
    overflow: hidden;
    border: 1px solid #e4ebf0;
    border-radius: 2px;
    box-sizing: border-box;
    padding-top: 34px;
    height: $list_height + $header_height + 1;
    vertical-align: middle;
    .transfer-list__text {
        position: absolute;
        top: 0;
        width: 100%;
        height: 34px;
        text-indent: 15px;
        line-height: 34px;
        background: $m5;
        color: #3d5566;
        font-size: 14px;
        .transfer-list__btn_dire {
            position: absolute;
            display: inline-block;
            right: 10px;
            margin: 7px 0;
            width: 20px;
            height: 20px;
            background-color: $m4;
        }
    }
    .transfer-list__text-bottom {
        width: 100%;
        height: 1px;
        background-color: $m4;
    }
    .transfer-list__body {
        overflow: auto;
        overflow-x:hidden;
        height: $list_height;
        ul {
            width: 100%;
            min-height: $list_height;
            padding: 0;
            margin: 0;
        }
        .transfer-list__item {
            position: relative;
            height: 30px;
            line-height: 30px;
            font-size: 12px;
            color: #03101a;
            cursor: pointer;
            list-style: none;
            transition: 0.1s all;
            .transfer-list__item__text {
                display: inline-block;
                overflow: hidden;
                width: calc(100% - 40px);
                height: 100%;
                text-indent: 16px;
                -webkit-text-overflow: ellipsis;
                -moz-text-overflow: ellipsis;
                -o-text-overflow: ellipsis;
                text-overflow: ellipsis;
                white-space: nowrap;
                -webkit-user-select: none;
                -khtml-user-select: none;
                -moz-user-select: none;
                -o-user-select: none;
                user-select: none;
                &.child-node{
                    width: calc(100% - 50px);
                }
            }
            .transfer-list__item__drop-icon {
                position: absolute;
                right: 16px;
                top: 0;
                bottom: 0;
                display: inline-block;
                padding: 9px 2px;
                width: 14px;
                vertical-align: middle;
                z-index: 2;
                span {
                    display: inline-block;
                    float: left;
                    width: 14px;
                    height: 2px;
                    margin-bottom: 2px;
                    background: $m4;
                }
            }
            &.active,
            &:hover {
                background-color: $m5;
                color: $c3;
                .transfer-list__item__drop-icon span {
                    background-color: $c3;
                }
            }
            &:after {
                content: '';
                position: absolute;
                display: block;
                bottom: 0;
                width: 100%;
                height: 1px;
                background-color: $m5;
            }
            &:nth-last-of-type(1):after{
                display: none;
            }
            &:nth-of-type(-n+10):after{
                display: block;
            }
            &.transfer-list__item_fallback {
                display: none;
            }
            &.transfer-list__item_ghost {
                background: $m5;
                color: $c3;
                box-shadow: 0 2px 4px 0 rgba(3,15,26,0.20);
                @include opacity(0.9);
                .transfer-list__item__drop-icon span {
                    background-color: $c3;
                }
            }
            .icon-check {
                margin: 0 -6px 0 16px;
                position: relative;
                bottom: 10px;
            }
        }
        .treeNoHoverColor {
            &:hover {
                color: #0a131a;
            }
        }
        .tree-dnd-panel {
            ul {
                min-height: auto;
            }
            .ul-list li li {
                padding-left: 50px;
            }
            .tree-list__item {
                line-height: 30px;
                font-size: 12px;
                font-family: $font-family-h;
                border-bottom: 1px solid #f5f8fa;
                .list-item-div {
                    &:hover {
                        background-color: #f5f8fa;
                    }
                }
                .icon-tv {
                    display: inline-block;
                    font-size: 16px;
                    margin: 0 10px 0 16px;
                    color: #c2cbd1;
                    vertical-align: middle;
                }
                .icon-check {
                    margin-right: 10px;
                    position: relative;
                    top: 2px;
                }
                .tree-list__item__text {
                    max-width: calc(100% - 42px);
                    display: inline-block;
                    color: #0a131a;
                    vertical-align: middle;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
                ul {
                    border-top: 1px solid #f5f8fa;
                    li:last-child {
                        border-bottom: none;
                    }
                }
                &:hover {
                    cursor: pointer;
                }
                .no-ul-li {
                    &:hover {
                       background-color: #f5f8fa;
                    }
                    .tree-list__item__text {
                        max-width: calc(100% - 24px);
                    }
                }
                .tree-list__item__empty {
                    font-size:12px;
                    color:#c2cbd1;
                    margin-left: 25px;
                }
            }
            .base-search-component {
                width: 210px;
                margin: 12px;
                .base-search-input {
                    input {
                        height: 18px;
                    }
                    .base-search-input-default {
                        line-height: 16px;
                        .base-search-input-icon {
                            line-height: 16px;
                        }
                    }
                }

            }
            .hidden-ul {
                ul {
                    display: none;
                    border-top: none;
                }
            }
        }
    }
}

.transfer-operation {
    display: inline-block;
    margin: 0 25px;
    vertical-align: middle;
    .btn-icon {
        .u-icon {
            width: 5px;
            height: 10px;
            display: inline-block;
        }
    }
}

.transfer-adjustment {
    display: inline-block;
    margin: 0 0 0 15px;
    vertical-align: middle;
    .btn.btn_default:disabled {
        background-color: $m5;
    }
    button.btn {
        font-size: 8px;
        color: $m3;
        background-color: $m5;
        .u-icon {
            width: 6px;
            height: 5px;
            display: inline-block;
        }
    }
}