// 自己的函数库
@import "./lib.less";
html,
body {
    padding: 0;
    margin: 0;
}
.app {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 99;
}

@main-color: #1c3e64;
@main-height: 22px;

.buttons {
    position: fixed;
    z-index: 100;
    background-color: #ffffff;
    bottom: 1px;
    right: 1px;
}

.btn {
    .-btn(@main-color, @main-height);
}

// json-edit 样式
.locus-json-edit {
    height: 100%;
    overflow: auto;
    padding: 5px 0;
    box-sizing: border-box;
    .lje {
        &-line {
            &.the-root {
                > .lje-cols {
                    .sub-key,
                    .sub-is {
                        display: block !important;
                    }
                    .sub-remove {
                        display: none !important;
                    }
                }
            }
        }
        &-cols {
            padding: 1px 10px;
            display: flex;
            &.sub-type-object,
            &.sub-type-array {
                .sub-full {
                    display: none;
                }
            }
            &.sub-type-string,
            &.sub-type-number {
                .sub-add {
                    display: none;
                }
            }
            &.sub-type-null,
            &.sub-type-true,
            &.sub-type-false {
                .sub-add,
                .sub-full {
                    display: none;
                }
            }
        }
        &-col {
            float: left;
            margin-left: 2px;
            &.sub-full {
                flex: 1;
            }
            &.sub-key {
                width: 80px;
            }
            &.sub-icon {
                width: @main-height + 2;
            }
            &.sub-key,
            &.sub-is {
                display: none;
            }
        }
        &-select {
            .-select(@main-color, @main-height);
            border-radius: 3px;
        }
        &-ipt {
            .-ipt(@main-color, @main-height);
            input {
                border-radius: 3px;
            }
        }
        &-remove {
            height: @main-height - 2;
            border: 1px solid #dedede;
            position: relative;
            border-radius: 3px;
            margin: 1px;
            &:before {
                height: 2px;
                background-color: #dedede;
                width: 70%;
                display: block;
                content: "";
                left: 15%;
                top: 9px;
                position: absolute;
            }

            &:hover {
                border-color: @main-color;
                &:before {
                    background-color: @main-color;
                }
            }
        }
        &-add {
            height: @main-height - 2;
            border: 1px solid #dedede;
            position: relative;
            border-radius: 3px;
            margin: 1px;
            &:before {
                height: 2px;
                background-color: #dedede;
                width: 70%;
                display: block;
                content: "";
                left: 15%;
                top: 9px;
                position: absolute;
            }
            &:after {
                width: 2px;
                background-color: #dedede;
                height: 70%;
                display: block;
                content: "";
                left: 9px;
                top: 15%;
                position: absolute;
            }

            &:hover {
                border-color: @main-color;
                &:before,
                &:after {
                    background-color: @main-color;
                }
            }
        }

        &-is {
            height: @main-height;
            border: 1px solid transparent;
            position: relative;
            border-radius: 3px;
            text-align: center;
        }

        &-child {
            padding: 5px 0 5px 15px;
            position: relative;
            &:before {
                content: "";
                width: 0;
                position: absolute;
                top: 5px;
                bottom: 15px;
                border-left: 1px dashed #cccccc;
            }
            &.the-key > .lje-line > .lje-cols {
                .sub-key,
                .sub-is {
                    display: block;
                }
            }
        }
    }
}