@prefixMemberCls: ~'yy-select-member';

.position() {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.@{prefixMemberCls} {
    transition: @yy-transition-time ease opacity;
    position: fixed;
    z-index: 2019;
    .position;
    background-color: @yy-bg-opacity;

    * {
        box-sizing: border-box;
    }
    // 容器样式
    &-wrapper {
        position: absolute;
        background-color: #fff;
        display: flex;
        flex-direction: column;
        border-radius: 3px;

        .resize-bar {
            position: absolute;
            width: 14px;
            height: 14px;
            background-size: 10px;
            background-repeat: no-repeat;
            background-position: center;
        }

        .resize-br {
            right: 6px;
            bottom: 6px;
            .cursor(nw-resize);
            background-image: url(../../images/scale.svg);
        }
    }

    // 头部样式
    &-header {
        height: 50px;
        border-bottom: 1px solid @yy-border-primary;
        padding: 0 20px;
        color: @yy-text-primary;
        font-size: @yy-font-size-sm;
        .flex(row, center, space-between);

        &-title {
            flex: 1;
            height: 100%;
            line-height: 50px;
        }

        &-close {
            color: @yy-text-default;
            .cursor();
            font-size: @yy-font-size-md;
        }
        &-search {
            position: relative;
            margin-right: 30px;
            font-size: 0;
            height: 24px;
            &-input {
                height: 24px;
                outline: none!important;
                border: none;
                border-bottom: 1px solid @yy-text-primary;
                width: 0;
                padding-right: 20px;
                opacity: 0;
                font-size: 12px;
                color: @yy-text-primary;
                transition: .2s ease opacity, .3s ease width .1s;
                &-focused {
                    opacity: 1;
                    width: 200px;
                }
            }
            &-icon {
                .horizontal;
                .cursor();
                right: 0;
                width: 18px;
                height: 18px;
                background: url('../../images/search.png') no-repeat center;
                background-size: contain;
            }
        }
    }

    &-body {
        flex: 1;
        overflow: hidden;
    }

    // 底部样式
    &-footer {
        height: 60px;
        padding: 0 20px;
        border-top: 1px solid @yy-border-primary;
        .flex(row, center, space-between);

        &-warning {
            color: @yy-primary-color;
            font-size: @yy-font-size-xs;
        }

        &-btn {
            width: 68px;
            height: 30px;
            line-height: 29px;
            font-size: @yy-font-size-xs;
            text-align: center;
            box-sizing: border-box;
            border-radius: 4px;
            color: white;
            display: inline-block;
            vertical-align: middle;
            margin-left: 10px;
            .cursor();

            &-primary {
                background: @yy-primary-color;
                border: 1px solid @yy-primary-color;
            }

            &-default {
                border: 1px solid @yy-default-color;
                background: @yy-default-color;
                color: @yy-text-default ;
            }
        }

    }

    // tree节点样式
    &-tree {
        padding: 4px 0 4px 16px;
        font-size: 0;

        &-node {
            position: relative;
            &:hover {
                .section-dept-node-contain {
                    display: unset;
                }
            }

            &-expand {
                padding-left: 20px;
            }

            &-expand-icon {
                .horizontal();
                left: 0;
                height: 12px;
            }

            &-expand-loading {
                position: absolute;
                left: 0;
                top: 0;
                width: 11px;
                height: 11px;
                background-size: contain;
                background-repeat: no-repeat;
                background-position: center;
                display: inline-block;
                background-image: url('../../images/loading.svg');
                .rotate;
            }

            &-checkbox {
                .horizontal();
                right: 14px;
                height: 16px;
            }

            &-content {
                position: relative;
                display: inline-block;
                width: 100%;
                font-size: @yy-font-size-xs;
                color: @yy-text-default;
                padding-right: 30px;
                .ellipsis;
            }
        }
    }

    // section样式
    &-section {
        float: left;
        width: 56.25%;
        height: 100%;
        display: flex;
        flex-direction: column;

        &-fixed {
            height: 42px;
            line-height: 42px;
            display: flex;
            background-color: @yy-bg-primary;
            white-space: nowrap;
            overflow: hidden;
            position: relative;
            .ps__rail-x {
                display: none;
            }
        }

        &-tab {
            padding: 0 16px;
            font-size: @yy-font-size-xs;
            font-weight: 400;
            color: @yy-text-default;
            .cursor();
            position: relative;

            &-active {
                color: @yy-primary-color;

                &:after {
                    position: absolute;
                    content: '';
                    left: 10px;
                    right: 10px;
                    height: 4px;
                    bottom: 0;
                    background-color: @yy-primary-color;
                    border-radius: 2px;
                }
            }
        }

        &-body {
            flex: 1;
            position: relative;
            overflow: hidden;
        }


    }

    // 选择组织样式
    .section-dept-node {
        &-contain {
            .horizontal;
            .cursor();
            right: 34px;
            height: 20px;
            line-height: 20px;
            background-color: @yy-bg-primary;
            border-radius: 3px;
            color: @yy-text-default;
            display: none;
            span {
                display: inline-block;
                font-size: @yy-font-size-xs;
                transform: scale(.8)
            }
        }
    }
    .section-dept-children {
        padding-left: 20px;
        position: relative;

        &:before {
            position: absolute;
            content: '';
            top: 0;
            bottom: 0;
            width: 1px;
            background-color: @yy-border-info;
        }

        .section-dept-children-item {
            position: relative;

            &:before {
                position: absolute;
                content: '';
                top: 19px;
                left: 0;
                width: 13px;
                height: 1px;
                background-color: @yy-border-info;
            }

            &:last-child {
                &:after {
                    position: absolute;
                    content: '';
                    top: 20px;
                    bottom: 0;
                    left: 0;
                    width: 1px;
                    background-color: #fff;
                }
            }
        }
    }

    // 选择人员样式
    .section-member {
        height: 100%;
        position: relative;
        padding-top: 48px;

        .section-member-fixed {
            position: absolute;
            color: @yy-text-info;
            background-color: @yy-bg-primary;
            font-size: @yy-font-size-xs;
            top: 12px;
            height: 30px;
            line-height: 30px;
            left: 11px;
            right: 11px;
            font-size: @yy-font-size-xs;
            padding: 0 6px;
            a {
                color: @yy-text-info;
                margin: 0 3px;
                &.active {
                    color: @yy-primary-color;
                }
            }
        }
    }

    // 选择人员节点样式
    .section-member-node {
        padding: 5px 0;

        &-content {
            display: flex;
            align-content: center;
            align-items: center;
        }

        &-info {
            margin-left: 10px;
            flex: 1;
            overflow: hidden;
        }

        &-name {
            margin-bottom: 4px;
            color: @yy-text-primary;
            .ellipsis;
        }

        &-dept {
            color: @yy-text-info;
            .ellipsis;
        }
    }

    // 已选择
    &-selected {
        float: right;
        height: 100%;
        width: 43.75%;
        border-left: 1px solid @yy-border-primary;
        display: flex;
        flex-direction: column;

        &-fixed {
            height: 42px;
            background-color: @yy-bg-primary;

            &-clear {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 0 16px;
                height: 100%;
                font-size: @yy-font-size-xs;
                color: @yy-text-default;
            }

            &-btn {
                .cursor();
            }
        }

        &-content {
            flex: 1;
        }

        &-item {
            padding: 10px 26px 10px 16px;
            font-size: @yy-font-size-xs;
            color: @yy-text-default;
            position: relative;
            
            & > div {
                .ellipsis;
            }
            &-member {
                display: flex;
                align-items: center;
                
                &-name {
                    margin-bottom: 4px;
                    color: @yy-text-primary;
                    .ellipsis;
                }
                &-dept {
                    color: @yy-text-info;
                    .ellipsis;
                }
                &-info {
                    flex:1;
                    overflow: hidden;
                    margin-left: 10px;
                }
            }

            &-remove {
                .horizontal;
                right: 16px;
                height: 12px;
                font-size: @yy-font-size-xs;
                color: @yy-text-info;
                display: none;
            }

            &:hover {
                background-color: @yy-bg-default;

                .@{prefixMemberCls}-selected-item-remove {
                    display: unset;
                }
            }
        }
    }

    // 搜索
    &-search {
        height: 100%;
    }

    // checked
    .select-checkbox {
        display: inline-block;
        width: 16px;
        height: 16px;
        border: 1px solid @yy-border-default;
        border-radius: 3px;
        background-size: 10px;
        background-repeat: no-repeat;
        background-position: center;
        transition: .2s ease all;
        .cursor();
        &-checked {
            background-color: @yy-text-default;
            border-color: @yy-text-default;
            background-image: url('../../../assets/images/check.svg');
        }
        &-indeterminate {
            background-color: @yy-text-default;
            border-color: @yy-text-default;
            position: relative;
            &:after {
                position: absolute;
                height: 2px;
                width: 60%;
                top: 50%;
                left: 50%;
                content: "";
                margin: -1px 0 0 -30%;
                background-color: #fff;
                border-radius: 10px;
            }
        }
    }
    // expand
    .select-expand {
        display: inline-block;
        width: 12px;
        height: 12px;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        background-image: url('../../../assets/images/packdown.svg');
        .cursor();
        &-open {
            background-image: url('../../../assets/images/packup.svg');
        }
    }

    // collapse
    &-collapse {
        &-title {
            height: 30px;
            line-height: 30px;
            background-color: @yy-bg-default;
            padding: 0 16px;
            color: @yy-text-default;
            font-size: @yy-font-size-xs;
            display: flex;
            justify-content: space-between;
        }
        &-icon {
            color: @yy-text-info;
        }
    }
}