
@keyframes ants{
    to{
        background-position: 100%;
    }
}
body{
    user-select: none;
}
// var
$color-main: #388bfe;
$utilsWidth: 300px;
$headerHandleHeight: 45px;
*{
    box-sizing: border-box;
}
input{
    border-width: 0px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    outline: none;
}
// extend
.full-block{
    background-color: $color-main;
    color: #fff;
}
.border-block{
    color: $color-main;
    border: 1px solid;
}
// public
*{padding: 0px; margin: 0px;box-sizing: border-box;}
.flex{
    display: flex;
}
.flex-space-x{
    justify-content: space-between;
}
.flex-center-y{
    align-items: center;
}

// export css inner
.al-flex-end-x{
    justify-content: flex-end;
}
.al-flex-center-x{
    justify-content: center;
}
.al-flex-space-between-x{
    justify-content: space-between;
}
.box{
    position: fixed;
    top: -100vw;
    left: -100vh;
    opacity: 0;
}
.loading{
    position: fixed;
    top: -100vw;
    left: -100vh;
    opacity: 0;
}
// start
.div_layout{
    .util_panel{
        background-color: #fbfbfb;
        padding-top: calc(#{$headerHandleHeight});
        .switch{    
            // background: rgb(230, 230, 230);
            padding: 10px;
            border-right: 1px solid rgb(230, 230, 230);
            .iconfont{
                color: #000;
            }
            .active{
                color: $color-main
            }
        }
        .panel{
            // padding: 10px;
        }
        .add-layout{
            padding: 10px;
            >P{
                background-color: #fff;
            }
            .layout-svg{
                width: 200px;
                display: inline-block;
                margin-top: 20px;
            }
        }
        .add{
            color: #999;
            >p{
                margin-bottom: 10px;
                .iconfont{
                    color: #555;
                    font-weight: bold;
                    font-size: 16px;
                    display: inline-block;
                    margin-right: 6px;
                }
            }
        }
        .footer-bar{
            position: fixed;
            bottom: 0px;
            left: 0px;
            width: 100%;
            background-color: #fff;
            box-shadow: 1px 1px 1px rgb(0, 0, 0);
            border-top: 1px solid rgba(0, 0, 0, .1);
            z-index: 9;
            .iconfont{
                padding: 5px 20px;
            }
        }
    }
    .HandleColumn{    
        width: $utilsWidth;
        height: calc(100vh - 50px);
        overflow: auto;
        background-color: #fff;
        transition: width 2s;
        .edit-attribute{
            .slider-text-box{
                .name{
                    width: 5em;
                }
                .slider{
                    width: 150px;
                }
                input{
                    width: 40px;
                    border: 1px solid rgba(0, 0, 0, 0.3);
                    border-radius: 2px;
                    text-align: center;
                }
            }
            .input-textarea{
                width: 100%;
                border: 1px solid rgba(0, 0, 0, .4);
                border-radius: 2px;
                padding: 8px;
                margin-top: 5px;
            }
            .color-box{
                position: absolute;
            }
            .sketch-color-price-box::after {
                content: '';
                display: block;
                position: absolute;
                width: 0px;
                height: 0px;
                top: 0px;
                right: -14px;
                border: 14px solid;
                border-top-color: #fff;
                border-bottom-width: 0px;
                border-left-color: #fff;
                border-right-color: transparent;
                border-top-width: 14px;
                border-left-width: 5px;
                border-right-width: 16px;
            }
            .sketch-color-price-box::before {
                content: '';
                display: block;
                position: absolute;
                width: 0px;
                height: 0px;
                top: -1px;
                right: -16px;
                border: 0px solid;
                border-top-color: #cacaca;
                border-right-color: transparent;
                border-top-width: 17px;
                border-right-width: 17px;
            }
        }
        .color-set-box{
            .name{
                width: 50px;
            }
            .showCurrentColor{
                display: inline-block;
                width: 35px;
                height: 15px;
                border: 1px solid rgba(0, 0, 0, .1);
                border-radius: 2px;
                margin-left: 10px;
                margin-right: 10px;
            }
            input{
                width: 147px;
                border-width: 0px;
            }
        }
        .button{
            display: inline-block;
            line-height: 30px;
            padding: 0 10px;
            border-radius: 4px;
            @extend .full-block;    
            cursor: pointer;
        }
        .inert-layout-button{
            margin-top: 20px;
        }
        .cloumn{
            margin-left: 20px;
            width: 40px;
            border: 1px solid rgba(0, 0, 0, 0.3);
            border-radius: 2px;
            text-align: center;
        }
        .button-delect{
            margin-left: 20px;
        }
        .title-name{
            border-bottom: 1px solid rgba(0, 0, 0, .4);
            padding: 10px 20px;
            margin-bottom: 10px;
        }
        .group-title-name{
            line-height: 50px;
            font-size: 16px;
            font-weight: bold;
        }
        .inner{
            padding: 0px 20px;
        }
        .select-button{
            .item{
                display: inline-block;
                line-height: 30px;
                padding: 0 10px;
                border-radius: 4px;
                cursor: pointer;
                color: #fff;
                background: #388bfe;
                margin: 10px 8px;
            }
        }
        .select-text-align{
            margin: 14px 0px;
            img{
                width: 25%;
            }
        }
        .otherInfo{
            padding-left: 20px;
            color: #666
        }
        .no-tree{
            .tip-text{
                color: rgb(102, 102, 102);
                font-weight: 600;
                margin-top: 10px;
                font-size: 14px;
                padding: 10px;
                box-sizing: border-box;
                text-align: center;
            }
            .tip-button{              
                color: rgb(153, 153, 153);
                font-size: 13px;
                margin: 15px 10px 0px;
                padding: 20px;
                border-width: 1px;
                border-style: solid;
                border-color: rgb(221, 221, 221);
                border-image: initial;
                border-radius: 3px;
            }
        }
    }

    .cat-ast{
        position: fixed;
        top: 0px;
        left: 0px;
        height: 100vh;
        width: 100vw;
        background-color: #fff;
        z-index: 5;
        .ast-show{
            width: 800px;
            max-height: 90vh;
            overflow: auto;
            border: 1px solid rgba(0, 0, 0, .1);
            margin-top: 20px;
        }
        .ast-copy-box{
            margin-top: 20px;
            margin-left: 20px;
            .ast-copy{
                width: 100px;
                height: 100px;
                overflow: auto;
                border: 1px solid rgba(0, 0, 0, .1);
            }
        }
    }
    .preview{
        padding: 20px;
        .title{
            margin-bottom: 10px;
        }
        .preview-box{
            width: 350px;
            height: 500px;
            border: 1px solid #ccc;
            border-radius: 6px;
            overflow: auto;
        }
        textarea{
            width: 400px;
            height: 400px;
        }
    }
    .DebugLayout{
        flex: auto;
        height: 100vh;
        background-color: #eee;
        padding-top: 50px;
        .header-handle{
            position: fixed;
            top: 0px;
            left: 0px;
            width: calc(100vw - #{$utilsWidth});
            height: $headerHandleHeight;
            background-color: #fff;
            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
            border-right: 1px solid rgba(0, 0, 0, 0.1);
            box-sizing: border-box;
            padding-right: 20px;
            padding-left: 20px;
            .save-button{}
        }
        .view-box{
            background: #fff;
            margin: auto;
            overflow: auto;
            .flex{
                position: relative;
                // background-color: rgb(153, 93, 181)!important;
                // background-size: 16px 16px;
                // background-image: linear-gradient(to top right,#ccc 25%,transparent 0,transparent 75%,#ccc 0,#ccc),linear-gradient(to top right,#ccc 25%,transparent 0,transparent 75%,#ccc 0,#ccc);
                // background-position: 0 0,8px 8px;
                >* {     
                    // border: 1px solid;
                    // border-image: linear-gradient(to right, #fb3 25%, #58a 0, #58a 50%, yellowgreen 0, yellowgreen 75%, rgb(129, 189, 189) 0) 1 1;
                    border: 1px solid transparent;
                    background-image: 
                    linear-gradient(white,white),
                    repeating-linear-gradient(-0deg, rgba(0, 100, 250, .5) 0, rgba(0, 100, 250, .5) 25%, white 25%, white 50%);
                    background-size: 20px 20px;
                    background-clip: padding-box,border-box;
                }
            }
            .item-selected-status{
            }
        }
        .contextMenu-wrap{
            z-index: 100;
            position: fixed;
            background: linear-gradient(to right, #c6c7cf, #f0f0f0);
            box-shadow: 0px 2px 5px #999999;
            border-radius: 4px;
            padding-top: 5px;
            .contextMenu-option{
              padding: 0px 50px 2px 15px;
              min-width: 160px;
              cursor: default;
              font-size: 14px;
              &:hover {
                background: #388bfe;
                color: white;
              }
              &:active {
                color: #b5b7be;
                background: linear-gradient(to top, #555, #444);
              }
            }
            .contextMenu-separator{
              width: 100%;
              height: 1px;
              background: #b5b7be;
              margin: 2px 0;
            }
        }
        .editor-transform {
            box-sizing: border-box;
            border: 1px solid #fff;
            position: fixed;
            z-index: 5;
            cursor: move;
            pointer-events: none;
            .editor-grip {
                padding: 11px;
                position: absolute;
                left: 0;
                top: 0;
                z-index: 5;
                pointer-events: auto;
                b {
                    box-sizing: border-box;
                    display: block;
                    background: #fff;
                    border: 1px solid #666;
                    width: 7px;
                    height: 7px;
                }
            }
            .editor-grip-nw {
                cursor: nwse-resize;
                padding: 11px; 
                margin-top: -14.5px; 
                margin-left: -14.5px;
            }
            .editor-grip-sw {
                cursor: nesw-resize;
                margin-top: -14.5px; 
                margin-left: -14.5px;
                top: 100%;
            }
            .editor-grip-ne {
                cursor: nesw-resize;
                left: 100%;
                top: 0%;
                padding: 11px;
                margin-top: -14.5px;
                margin-left: -14.5px;
            }
            .editor-grip-se {
                cursor: nwse-resize;
                left: 100%;
                top: 100%;
                padding: 11px;
                margin-top: -14.5px;
                margin-left: -14.5px;
            }
        }
        .editor-transform:before {
            content: "";
            box-sizing: content-box;
            border: 1px dashed #666;
            height: 100%;
            width: 100%;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 1;
            margin: -1px 0 0 -1px;
        }
        .dragEnter-transform:before {
            content: "";
            box-sizing: content-box;
            border: 1px dashed rgb(250, 200, 230);
            height: 100%;
            width: 100%;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 2;
            margin: -1px 0 0 -1px;
        }
    }
}
.homeIndex{
    .head{
        margin-bottom: 40px;
        .logo{
            .logo-ipc{}
        }
    }
    .title{
        margin: 8px 0 28px;
        font-weight: 600;
        font-size: 68px;
        font-family: Avenir,-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Helvetica Neue',Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol',sans-serif;
        line-height: 76px;
        letter-spacing: 0;
    }
    .text-wrapper{
        width: 500px;
        color: #314659;
        font-size: 20px;
        line-height: 40px;
    }
    .github-btn{
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        min-width: 520px;
        margin-top: 24px;
        .components {
            color: #fff;
            background: #2f54eb;
        }
        .banner-btn {
            display: inline-block;
            height: 40px;
            padding: 0 24px;
            font-size: 16px;
            font-family: -apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Helvetica Neue',Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';
            line-height: 38px;
            text-align: center;
            text-decoration: none;
            border: 1px solid #2f54eb;
            border-radius: 100px;
        }
        .ant-btn-primary {
            color: #fff;
            background-color: #1890ff;
            border-color: #1890ff;
            text-shadow: 0 -1px 0 rgba(0,0,0,0.12);
            -webkit-box-shadow: 0 2px 0 rgba(0,0,0,0.045);
            box-shadow: 0 2px 0 rgba(0,0,0,0.045);
        }
        .language {
            color: #2f54eb;
            margin-left: 16px;
            margin-right: 16px;
        }
        .gh-count{
            margin-left: 6px;
            padding: 3px 10px 3px 8px;
            font-size: 16px;
            line-height: 22px;
            border-radius: 4px;
            position: relative;
            background-color: #fafafa;
            border: 1px solid #d4d4d4;
            transition: color .3s ease;
            color: #333;
            text-decoration: none;
            white-space: nowrap;
            cursor: pointer;
            font-weight: 700;
        }
        .gh-count:before, .gh-count:after {
            content: '';
            position: absolute;
            display: inline-block;
            width: 0;
            height: 0;
            border-color: transparent;
            border-style: solid;
        }
        .gh-count:after {
            top: 50%;
            left: -4px;
            z-index: -1;
            margin-top: -5px;
            border-width: 5px 5px 5px 0;
            border-right-color: #d4d4d4;
        }
        .gh-count:before {
            top: 50%;
            left: -3px;
            margin-top: -4px;
            border-width: 4px 4px 4px 0;
            border-right-color: #fafafa;
        }
    }
}