.main-extend{height:100%;position:relative;width:24px}.main-extend-control{background-color:var(--el-bg-color);box-sizing:border-box;font-size:12px;padding:8px 0;width:24px}.main-extend-control .box{align-items:center;cursor:pointer;display:flex;flex-direction:column;justify-content:center;letter-spacing:4px;padding:6px 0;width:100%}.main-extend-control .box .el-icon{margin-bottom:5px;margin-left:2px}.main-extend-control .box span{text-align:center;writing-mode:vertical-lr;-webkit-writing-mode:vertical-lr}.main-extend-control .box.active,.main-extend-control .box:hover{--bg-color:#f0f0f0;background-color:var(--bg-color)}.main-extend-content{--bg-color:#fff;background-color:var(--bg-color);border-left:1px solid var(--border-color);border-right:1px solid var(--border-color);flex-direction:column;height:100%;position:absolute;right:24px;top:0;transition:width .5s;width:var(--width,520px);z-index:9}.main-extend-content,.main-extend-content>.header{--border-color:#e5ecf0;display:flex;overflow:hidden}.main-extend-content>.header{align-items:center;box-shadow:inset 0 -1px var(--border-color);height:42px;padding:0 12px}.main-extend-content>.header>.title{flex:1;font-size:14px;width:0}.main-extend-content>.header .el-icon{cursor:pointer}.main-extend-content>.body{box-sizing:border-box;flex:1;height:0;padding:10px}:is(.dark) .main-extend-control .box.active,:is(.dark) .main-extend-control .box:hover{--bg-color:var(--el-bg-color-fixed)}:is(.dark) .main-extend-content{--bg-color:var(--el-bg-color);--border-color:var(--el-bg-color-fixed)}:is(.dark) .main-extend-content .header{--border-color:var(--el-bg-color-fixed)}