.code-editor {
    display: flex;
    height: 100%;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.left-box {
    width: 100%;
    height: 100%;
}

.right-box {
    display: flex;
    height: 100%;
    width: 100%;
    flex-direction: column; 
    position: relative;

    app-monaco-editor {
        width: 100%;
        height: 100%;
    }
}

nz-tabset {
    background: #242424;
    width: 100%;

    ::ng-deep {
        nz-tabs-nav {
            height: 30px;
            margin: 0 !important;
        }

        .ant-tabs-tab {
            font-size: 12px !important;
            margin: 0 !important;
            border-radius: 0 !important;
            padding: 0 !important;
            border: none !important;
            box-shadow: 0 0 1px #555;

            button {
                color: #a5a5a5;
            }
        }

        .ant-tabs-ink-bar {
            height: 1px !important;
        }

        .ant-tabs-tab-active {
            background: #222222 !important;

            button {
                color: #fff !important;
            }
        }
    }

    &.ant-tabs-editable-card {
        ::ng-deep {
            // button {
            //     padding: 0 !important;
            //     color: #a5a5a5;
            // }

            .ant-tabs-nav-more {
                padding: 0 12px !important;
            }

            .ant-tabs-tab-remove {
                height: 100%;
                padding: 5px;
                margin: 0;
            }

            .ant-tabs-tab-btn {
                padding: 0 !important;
                height: 100%;
                display: flex;
                align-items: center;
            }

            .tab-inner {
                padding: 8px 0 8px 8px;

                .blue-point {
                    display: inline-flex;
                    width: 5px;
                    height: 5px;
                    border-radius: 50%;
                    background: #1890ff;
                }
            }
        }
    }
}