// compress: true, sourceMap: true
.dir_list {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding-right: 15px;
    font-size: 12px;
    color: #dbdbdb;

    .list_title_line {
        display: flex;
        flex-direction: row;
        height: 40px;
        padding-left: 20px;
        padding-right: 15px;
        margin-bottom: 2px;
        line-height: 40px;
        font-weight: bold;
        border-bottom: 1px rgba(170, 170, 170, .2) solid;
        color: #fdfdfd;
    }

    .dir_list_body {
        position: relative;
        flex: 1;
        overflow: auto;

        .dir_list_body_scroll {
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            overflow: auto;

            &:after {
                content: "";
                display: block;
                height: 10px;
            }

            &:empty:after {
                content: "空";
                text-align: center;
                height: 50px;
                line-height: 50px;
            }
        }
    }

    .dir_list_line {
        display: flex;
        flex-direction: row;
        padding-left: 20px;
        padding-right: 15px;
        line-height: 40px;

        &:hover {
            background-color: rgba(255, 255, 255, .1);

            .dir_list_closebtn {
                width: 26px;
                margin-left: 10px;
            }
        }

        .dir_list_block:nth-child(1) {
            font-size: 13px;
            cursor: pointer;
        }
    }

    .dir_list_block:nth-child(1) {
        margin-right: 30px;
        flex: 1;
        width: 100px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }

    .dir_list_block:nth-child(2) {
        text-align: right;
        flex-shrink: 0;
    }

    .dirpath {
        display: inline-block;
        margin-left: 10px;
        font-size: 11px;
        color: #818181;
    }

    .dir_list_closebtn {
        margin-top: 7px;
        margin-left: 0;
        width: 0;
        height: 26px;
        line-height: 26px;
        text-align: center;
        overflow: hidden;
        transition: all ease .3s;
        cursor: pointer;

        &:after {
            content: "×";
            font-size: 18px;
            color: #fdfdfd;
        }

        &:hover {
            background-color: rgba(219, 219, 219, .1)
        }
    }

    dirline {
        &[runtype="1"] {
            // 准备打开
            color: #1c6ac4;
        }

        &[runtype="2"] {
            // 已经打开了
            color: #2ac41c;

        }

        &[runtype="1"],
        &[runtype="2"] {

            .dir_list_block:nth-child(1) {
                cursor: default;
            }

            &:hover {
                .dir_list_closebtn {
                    width: 0;
                    margin-left: 0;
                }

            }
        }

        &[stat="2"] {
            // 打开项目错误的状态
            color: #fb4747;

            &:before {
                display: block;
                margin: 10px 10px 0 0;
                // position: absolute;
                // left: 0;
                // top: 0;
                // width: 50px;
                padding: 0 6px;
                height: 18px;
                line-height: 18px;
                font-size: 10px;
                border-radius: 5px;
                text-align: center;
                content: "打开错误";
                // color: rgba(197, 10, 10, 0.87);
                color: #fb4747;
                border: rgba(197, 10, 10, 0.87) solid 1px;
            }
        }
    }
}