@prefixMemberCls: ~'@{yy-css-prefix}select-member-153';

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

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

    * {
        box-sizing: border-box;
    }
    // 容器样式
    &-wrapper {
        position: absolute;
        background-color: @yy-background-component;
        display: flex;
        flex-direction: column;
        border-radius: 3px;
        box-shadow: @yy-shadow-base;
        text-align: left;

        .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-color-base;
        padding: 0 20px;
        color: @yy-text-primary-color;
        font-size: @yy-font-size-base;
        .flex(row, center, space-between);

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

        &-close {
            color: @yy-text-primary-color;
            .cursor();
            font-size: 0;
        }
        &-search {
            position: relative;
            margin-right: 16px;
            // font-size: 0;
            // height: 24px;
            height: 32px;
            width: 240px;
            &-input {
                // height: 24px;
                outline: none!important;
                // border: none;
                // border-bottom: 1px solid @yy-text-primary-color;
                // width: 0;
                // padding-right: 20px;
                // opacity: 0;
                // font-size: 12px;
                // color: @yy-text-primary-color;
                // transition: .2s ease opacity, .3s ease width .1s;
                // &-focused {
                //     opacity: 1;
                //     width: 200px;
                // }
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                box-sizing: border-box;
                padding-left: 10px;
                padding-right: 45px;
                border-radius: 3px;
                border: 1px solid @yy-border-color-base;
                color: @yy-text-primary-color;
                font-size: 12px;
                transition: border .2s;
                &::placeholder {
                    color: @yy-text-disabled-color;
                    font-size: 12px;
                }
            }
            &:hover &-input {
                border-color: #737985;
            }
            &-icon {
                // .horizontal;
                // .cursor();
                // right: 0;
                // width: 18px;
                // height: 18px;
                // line-height: 18px;
                cursor: pointer;
                color: @yy-text-primary-color;
                position: absolute;
                right: 8px;
                top: 50%;
                transform: translateY(-50%);
            }
            &-clear {
                display: none;
                position: absolute;
                right: 34px;
                top: 50%;
                transform: translateY(-50%);
                color: #d3d3d3;
                &:hover {
                    color: #c3c3c3;
                }
                &::before {
                    display: block;
                }
            }

            &.keyword:hover &-clear{
                display: block;
            }
        }
    }

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

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

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

        &-btn {
            width: 68px;
            height: 30px;
            line-height: 29px;
            font-size: @yy-font-size-small;
            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-primary ;
            // }
        }

    }

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

        &-node {
            position: relative;
            &:hover {
                .section-dept-node-contain {
                    display: unset;
                }
                .select-checkbox {
                    border-color: #505766;
                }
            }

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

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

            &-expand-loading {
                position: absolute;
                left: 0;
                top: 0;
                width: 12px;
                height: 12px;
                font-size: 0;
            }

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

            &-content {
                cursor: pointer;
                position: relative;
                display: inline-block;
                width: 100%;
                font-size: @yy-font-size-small;
                color: @yy-text-primary-color;
                padding-right: 30px;
                .ellipsis;

            }
        }
    }

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

        &-checkbox {
            width: 30px;
            height: 42px;
            background-color: @yy-background-color-base;
            position: absolute;
            top: 0;
            right: 0;
            display: flex;
            align-items: center;
        }

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

        &-tabs {
            height: 42px;
            line-height: 42px;
            display: flex;
            background-color: @yy-background-color-base;
            white-space: nowrap;
            overflow: hidden;
            position: relative;
        }

        &-tab {
            padding: 0 16px;
            font-size: @yy-font-size-small;
            font-weight: 400;
            color: @yy-text-primary-color;
            .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-background-color-base;
            border-radius: 3px;
            color: @yy-text-primary-color;
            display: none;
            span {
                display: inline-block;
                font-size: @yy-font-size-small;
                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-color-info;
        }

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

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

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

    // 选择人员样式
    .section-member {
        height: 100%;
        position: relative;
        padding-top: 48px;
        &.section-recent {
            padding-top: 0;
        }
        .section-member-fixed {
            position: absolute;
            color: @yy-text-info-color;
            background-color: @yy-background-color-base;
            font-size: @yy-font-size-small;
            top: 12px;
            height: 30px;
            line-height: 30px;
            left: 11px;
            right: 11px;
            font-size: @yy-font-size-small;
            padding: 0 6px;
            a {
                color: @yy-text-info-color;
                margin: 0 3px;
                &.active {
                    color: @yy-primary-color;
                }
            }
        }
    }

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

        &-content {
            display: flex;
            align-content: center;
            align-items: flex-start;
            &.only-member-name {
                align-items: center;
            }
        }

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

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

        &-dept {
            color: #888;
            margin-bottom: 4px;
            .ellipsis;
        }

        &-duty {
            color: #888;
            .ellipsis;
        }

        &-security {
            &.COMMON {
				color: @yy-success-color ;
			}
			&.CORE {
				color: @yy-error-color;
			}
			&.IMPORTANT {
				color: @yy-warning-color;
			}
        }
    }

    .section-role {
        height: 100%;
        position: relative;
    }

    .section-role-node {
        &-content {
            box-sizing: border-box;
            padding: 5px;
            display: flex;
            &-name {
                flex: 1;
                min-width: 0;
                .ellipsis;
            }
        }
    }

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

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

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

            &-btn {
                .cursor();
            }
        }

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

        &-item {
            padding: 10px 26px 10px 16px;
            font-size: @yy-font-size-small;
            color: @yy-text-primary-color;
            position: relative;
            
            & > div {
                .ellipsis;
            }
            &-member {
                display: flex;
                align-items: flex-start;
                
                &-name {
                    margin-bottom: 4px;
                    color: @yy-text-primary-color;
                    .ellipsis;
                }
                &-dept {
                    color: @yy-text-info-color;
                    margin-bottom: 4px;
                    .ellipsis;
                }
                &-duty {
                    color: @yy-text-info-color;
                    .ellipsis;
                }
                &-info {
                    flex:1;
                    overflow: hidden;
                    margin-left: 10px;
                }
                &-security {
                    &.COMMON {
                        color: @yy-success-color ;
                    }
                    &.CORE {
                        color: @yy-error-color;
                    }
                    &.IMPORTANT {
                        color: @yy-warning-color;
                    }
                }
            }
            &-dept {
                > div {
                    line-height: 20px;
                    &:last-child {
                        color: #999;
                    }
                }
            }

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

            &:hover {
                background-color: @yy-background-color-base;

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

    // 搜索
    &-search {
        height: 100%;
        &-empty {
            display: none;
            &:first-child {
                display: block;
            }
        }
    }

    // checked
    .select-checkbox {
        display: inline-block;
        width: 16px;
        height: 16px;
        border: 1px solid @yy-border-color-base;
        border-radius: 3px;
        background-size: 10px;
        background-repeat: no-repeat;
        background-position: center;
        transition: .2s ease all;
        .cursor();
        &-checked {
            border-color:  #505766;
            background-color: @yy-background-component;
            background-image: url('../../../assets/images/check.svg');
        }
        &-indeterminate {
            border-color:  #505766;
            background-color: @yy-background-component;
            position: relative;
            &:after {
                position: absolute;
                height: 2px;
                width: 60%;
                top: 50%;
                left: 50%;
                content: "";
                margin: -1px 0 0 -30%;
                background-color: @yy-primary-color;
                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-background-color-base;
            padding: 0 16px;
            color: @yy-text-primary-color;
            font-size: @yy-font-size-small;
            display: flex;
            justify-content: space-between;
        }
        &-icon {
            color: @yy-text-info-color;
        }
    }
}