// compress: true, sourceMap: true
p-layers {
    display: flex;
    flex-direction: column;
    .p_icon {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 30px;
        height: 30px;
        margin: 5px;
    }
    .p_name {
        display: flex;
        font-size: 11px;
        margin-left: 8px;
        align-items: center;
        color: #fdfdfb;
    }
    .p_name_input {
        // height: 100%;
        border: none;
        background-color: transparent;
        color: #fff;
    }
    .p_layers_top {
        display: flex;
        padding-left: 10px;
        height: 38px;
        line-height: 38px;
        font-size: 11px; // background-color: #63676d;
        background-color: #525458;
        color: #fdfdfd;
    }
    [layerele] {
        &.inselected {
            opacity: .7;
            animation: layerele_inselected_animate ease .7s infinite alternate;
        }
    }
    @keyframes layerele_inselected_animate {
        0% {
            opacity: .7;
        }
        100% {
            opacity: .5;
        }
    }
    .before_fakeele {
        // 拖拽前置判定用的伪装元素
        display: none;
        position: absolute;
        z-index: 4;
        left: 0;
        top: 0;
        width: 100%;
        height: 40%; // background-color: rgba(182, 62, 62, 0.231);
    }
    &[inselected="1"] {
        .before_fakeele {
            display: block;
        }
    }
    .p_layers_bottom {
        position: relative;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        height: 25px;
        line-height: 25px;
        background-color: #515458;
        .p_layers_bottom_title {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 0 10px;
            height: 25px;
            font-size: 10px;
            color: #fdfdfd;
            background-color: rgba(255, 255, 255, .1);
            cursor: pointer;
            transition: all ease .3s;
            .page_text {
                display: inline-block;
                width: 0;
                height: 25px;
                overflow: hidden;
                vertical-align: middle;
                transition: all ease .3s;
            }
            &:hover {
                border-radius: 3px;
                margin: 3px;
                height: 18px;
                .page_text {
                    width: 25px;
                }
            }
        }
        .p_layers_bottom_block {
            box-sizing: border-box;
            margin: 1px 4px;
            width: 35px;
            height: 23px;
            background-position: center;
            background-size: auto 10px;
            background-repeat: no-repeat;
            &:hover {
                border: rgba(0, 0, 0, .2) solid 1px;
                background-color: rgba(255, 255, 255, .1);
            }
            &.disable {
                opacity: .5;
                &:hover {
                    border: none;
                    background-color: none;
                }
            }
        }
        .addimgbtn {
            background-image: url(img/img.svg);
        }
        .addtextbtn {
            background-size: auto 14px;
            background-image: url(img/text.svg);
        }
        .deletebtn {
            position: absolute;
            right: 0;
            top: 0;
            background-image: url(img/delete.svg);
            background-size: auto 13px;
            align-self: flex-end;
            justify-self: flex-end;
        }
    }
    .p_layers_top_block_first {
        padding: 0 10px;
        font-size: 16px;
    }
    .p_layers_top_block {
        position: relative;
        padding: 0 10px 0 15px;
        &:before {
            position: absolute;
            left: 0;
            display: block;
            font-size: 6px;
            color: rgba(0, 0, 0, .3);
            content: "►";
        }
    }
    >[xv-content] {
        flex: 1;
        background-color: #393e41;
        padding-bottom: 5px;
        overflow-y: auto;
    }
    .tips_line {
        // 提示线
        width: 100%;
        height: 1px;
        background-color: #b63e3e;
        animation: tips_line_animate ease 1s infinite alternate;
    }
}

@keyframes tips_line_animate {
    0% {
        opacity: 1;
    }
    100% {
        opacity: .3;
    }
}

.layeranimate() {
    transition: background ease .1s;
}

p-page {
    position: relative;
    display: block;
    border-top: rgba(0, 0, 0, .1) solid 1px;
    cursor: pointer;
    &[selected="1"] {
        .ppage_inner {
            background-color: #3a89b6;
        }
        cursor: default;
    }
    &[packup="1"] {
        >.ppage_content {
            display: block;
        }
    }
    .ppage_jiao {
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center; // left: 10px;
        // top: 19px;
        // width: 16px;
        // height: 16px;
        left: 13px;
        top: 23px;
        width: 10px;
        height: 10px;
        border-radius: 9px;
        background-color: rgba(0, 0, 0, .15);
        .layeranimate();
        &::after {
            font-size: 11px;
            color: #fdfdfb; // content: "▾";
        }
    }
    .ppage_jiao_line {
        position: absolute; // top: 35px;
        top: 33px;
        left: 17px;
        width: 2px;
        height: ~"calc(100% - 50px)";
        background-color: rgba(0, 0, 0, .15);
        .layeranimate();
    }
    &.selected_pager {
        // background-color: #3a89b6;
        >.ppage_jiao {
            background-color: #3a89b6;
        }
        >.ppage_jiao_line {
            background-color: #3a89b6;
        }
    }
    .ppage_inner {
        position: relative;
        display: flex;
        flex-direction: row;
        padding-left: 30px;
        background-color: #404649;
        .layeranimate();
        .page_icon {
            position: relative;
            margin: 6px;
            width: 40px;
            height: 40px;
            .opa_bg();
        }
        [xv-tar="pageIcon"] {
            width: 100%;
            height: 100%;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
        }
    }
    .ppage_content {
        padding-left: 17px;
        background-color: #393e41; // background-color: #393e41;
    }
}

p-text {
    position: relative;
    display: flex;
    padding-left: 30px;
    border-top: rgba(0, 0, 0, .1) solid 1px;
    .layeranimate();
    cursor: pointer;
    &[selected="1"] {
        background-color: #3a89b6;
        cursor: default;
    }
    >.p_icon {
        font-size: 18px;
        color: #fdfdfd;
        font-family: serif;
        margin: 5px;
        background-color: rgba(255, 255, 255, 0.219);
        &:after {
            content: "T";
        }
    }
}

p-pic {
    position: relative;
    display: flex;
    padding-left: 30px;
    border-top: rgba(0, 0, 0, .1) solid 1px;
    .layeranimate();
    cursor: pointer;
    &[selected="1"] {
        background-color: #3a89b6;
        cursor: default;
    }
    >.p_icon {
        .opa_bg();
    }
    [xv-tar="imgicon"] {
        width: 100%;
        height: 100%;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    }
} // 透明背景图
.opa_bg() {
    background-image: linear-gradient(45deg, rgba(0, 0, 0, .3) 25%, transparent 0, transparent 75%, rgba(0, 0, 0, .3) 0), linear-gradient(45deg, rgba(0, 0, 0, .3) 25%, transparent 0, transparent 75%, rgba(0, 0, 0, .3) 0);
    background-position: 0 0, 5px 5px;
    background-size: 10px 10px;
    background-color: #fff;
}