.ui-designer{display:flex;flex-direction:column}.ui-designer>.content{flex:1;overflow:auto}.ui-designer>.content>.workspace{overflow:auto;padding:5px}.ui-designer>.content>.workspace>.viewport{position:relative;width:100%;height:100%;background-color:var(--colorNeutralBackground1);border:1px solid var(--colorNeutralStroke1)}.ui-designer>.content>.workspace>.viewport>.resizer{position:absolute;width:10px;height:10px;background-color:var(--colorBrandBackground2);border:1px solid var(--colorBrandStroke2);border-radius:var(--borderRadiusCircular)}.ui-designer>.content>.workspace>.viewport>.resizer.bottom-right{bottom:0;right:0;cursor:nwse-resize;transform:translate(50%,50%)}.ui-designer>.content>.workspace>.viewport>.resizer.right{top:50%;right:0;cursor:ew-resize;transform:translateX(50%)}.ui-designer>.content>.workspace>.viewport>.resizer.bottom{bottom:0;left:50%;cursor:ns-resize;transform:translateY(50%)}.ui-designer>.root-elements{padding:var(--spacingHorizontalM);display:flex;gap:var(--spacingHorizontalM)}.ui-designer>.root-elements.drop{border:1px dashed var(--colorBrandStroke2);background-color:rgba(18,103,180,.1)}.ui-designer.outline-mode .ui-host{border-color:var(--colorNeutralStroke2);border-style:dashed;padding:5px!important}.ui-designer.outline-mode .ui-host .ui-container{border-color:var(--colorNeutralStroke2);border-style:dashed;padding:5px!important;gap:5px!important}.thickness-editor{position:relative;width:calc(100% - 60px);height:80px;border:1px solid var(--colorNeutralStroke1);border-radius:var(--borderRadiusXLarge);margin:2rem}.thickness-editor>.top{position:absolute;top:0;left:50%;transform:translate(-50%,-50%)}.thickness-editor>.end{position:absolute;top:50%;left:100%;transform:translate(-50%,-50%)}.thickness-editor>.bottom{position:absolute;top:100%;left:50%;transform:translate(-50%,-50%)}.thickness-editor>.start{position:absolute;top:50%;left:0;transform:translate(-50%,-50%)}.thickness-editor>.center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}