smart-webcomponents-react/source/styles/components/smart.layout.css

[](https://jqwidgets.com/license/)

smart-splitter{width:var(--smart-splitter-default-width);height:var(--smart-splitter-default-height);position:relative}smart-splitter[dragged]{cursor:w-resize}smart-splitter[orientation=horizontal][dragged]{cursor:s-resize}smart-splitter-item>.smart-container{overflow:hidden;position:relative;padding:var(--smart-splitter-item-padding)}.smart-splitter smart-splitter-bar{min-width:5px;width:var(--smart-splitter-bar-size);position:relative;user-select:none;overflow:hidden;touch-action:none}.smart-splitter smart-splitter-bar>.smart-container{display:flex;align-items:center;justify-content:center;flex-direction:column-reverse}.smart-splitter smart-splitter-bar.smart-element{background:var(--smart-surface);border-color:var(--smart-surface-color);color:var(--smart-surface-color);border-radius:initial}.smart-splitter smart-splitter-bar[focus] .smart-splitter-resize-button>span,.smart-splitter smart-splitter-bar[focus] .smart-splitter-resize-button>span::after,.smart-splitter smart-splitter-bar[focus] .smart-splitter-resize-button>span::before{background-color:var(--smart-ui-state-color-active);border-color:var(--smart-ui-state-color-active);color:var(--smart-ui-state-color-active)}.smart-splitter smart-splitter-bar[focus].smart-element{outline:0;background:var(--smart-ui-state-active);color:var(--smart-ui-state-color-active)}.smart-splitter smart-splitter-bar[locked] .smart-splitter-resize-button>span{visibility:hidden}.smart-splitter smart-splitter-bar[locked] .smart-splitter-resize-button>span:after,.smart-splitter smart-splitter-bar[locked] .smart-splitter-resize-button>span:before{content:none}.smart-splitter smart-splitter-bar[locked][hover]{background-color:var(--smart-ui-state-hover);color:var(--smart-ui-state-color-hover)}.smart-splitter smart-splitter-bar[locked][focus]{background-color:var(--smart-ui-state-active);color:var(--smart-ui-state-color-active)}.smart-splitter smart-splitter-bar[show-far-button] .smart-splitter-far-collapse-button,.smart-splitter smart-splitter-bar[show-near-button] .smart-splitter-near-collapse-button{visibility:visible;width:100%}.smart-splitter smart-splitter-bar[item-collapsed]{cursor:initial}.smart-splitter smart-splitter-bar[item-collapsed]>.smart-container{flex-direction:initial}.smart-splitter smart-splitter-bar[item-collapsed] .smart-splitter-resize-button{display:none}.smart-splitter smart-splitter-bar[item-collapsed] .smart-splitter-resize-button>span:after,.smart-splitter smart-splitter-bar[item-collapsed] .smart-splitter-resize-button>span:before{content:initial}.smart-splitter smart-splitter-bar[item-collapsed] .smart-splitter-far-collapse-button>span,.smart-splitter smart-splitter-bar[item-collapsed] .smart-splitter-near-collapse-button>span{transform:rotate(270deg)}.smart-splitter smart-splitter-bar[item-collapsed] .smart-splitter-far-collapse-button.smart-visibility-hidden,.smart-splitter smart-splitter-bar[item-collapsed] .smart-splitter-near-collapse-button.smart-visibility-hidden{width:initial}.smart-splitter smart-splitter-bar[item-collapsed] .smart-splitter-near-collapse-button>span{transform:translate(-50%,-50%) rotate(270deg)}.smart-splitter smart-splitter-bar[item-collapsed] .smart-splitter-far-collapse-button>span{transform:translate(-50%,-50%) rotate(90deg)}.smart-splitter smart-splitter-item{overflow:hidden}.smart-splitter smart-splitter-item>.smart-container>.smart-content{width:100%;height:100%;overflow:auto;padding:var(--smart-splitter-item-content-padding)}.smart-splitter smart-splitter-item.smart-element{background-color:inherit;color:inherit;border-radius:initial}.smart-splitter smart-splitter-item[collapsed]{overflow:hidden;padding:initial}.smart-splitter .smart-splitter{margin:0;width:100%;height:100%;border:none}.smart-splitter .smart-splitter smart-splitter-bar{background-color:var(--smart-primary);color:var(--smart-primary-color)}.smart-splitter>.smart-container{display:flex;position:relative;overflow:inherit}.smart-splitter>.smart-container>smart-splitter-item{height:100%;flex-shrink:0;width:var(--smart-splitter-item-size)}.smart-splitter>.smart-container>smart-splitter-bar{flex-shrink:0;height:var(--smart-splitter-bar-fit-size)}.smart-splitter>.smart-container>smart-splitter-bar[locked]{cursor:default}.smart-splitter>.smart-container>.smart-splitter-bar-feedback{height:100%;flex-shrink:0}.smart-splitter .smart-splitter-bar-feedback{min-width:5px;width:var(--smart-splitter-bar-size);user-select:none;overflow:hidden;touch-action:none;position:absolute;background-color:var(--smart-ui-state-hover);color:var(--smart-ui-state-color-hover);opacity:.5}.smart-splitter .smart-splitter-bar-feedback.limit-reached{background-color:var(--smart-error)}.smart-splitter .smart-splitter-resize-button{width:100%;position:relative;font-family:var(--smart-font-family-icon);height:40px;display:flex;justify-content:center;align-items:center;cursor:inherit}.smart-splitter .smart-splitter-resize-button>span{width:6px;height:6px;border:1px solid var(--smart-surface-color);background-color:var(--smart-surface-color);color:var(--smart-surface-color);border-radius:50%;cursor:inherit}.smart-splitter .smart-splitter-resize-button>span:after,.smart-splitter .smart-splitter-resize-button>span:before{position:absolute;transform:translate(-50%,-50%);content:"";width:4px;height:4px;border-radius:50%;border:1px solid var(--smart-surface-color);background-color:var(--smart-surface-color);color:var(--smart-surface-color);pointer-events:none;font-family:var(--smart-font-family-icon)}.smart-splitter .smart-splitter-resize-button>span:before{left:50%;top:calc(50% - var(--smart-splitter-bar-size))}.smart-splitter .smart-splitter-resize-button>span:after{top:calc(50% + var(--smart-splitter-bar-size));left:50%}.smart-splitter .smart-splitter-far-collapse-button,.smart-splitter .smart-splitter-near-collapse-button{height:20px;position:relative;font-family:var(--smart-font-family-icon);cursor:pointer;visibility:hidden;width:0}.smart-splitter .smart-splitter-far-collapse-button .smart-arrow,.smart-splitter .smart-splitter-near-collapse-button .smart-arrow{position:absolute;top:50%;left:50%;width:auto;height:auto}.smart-splitter .smart-splitter-far-collapse-button .smart-arrow:after,.smart-splitter .smart-splitter-near-collapse-button .smart-arrow:after{content:var(--smart-icon-arrow-down);position:absolute;display:flex;align-items:center;justify-content:center;pointer-events:none;width:100%;height:100%;top:0;line-height:normal}.smart-splitter .smart-splitter-far-collapse-button>span{transform:translate(-50%,-50%) rotate(270deg)}.smart-splitter .smart-splitter-near-collapse-button .smart-arrow{transform:translate(-55%,-50%) rotate(90deg)}.smart-splitter:not([readonly])>.smart-container>smart-splitter-bar[hover]{cursor:w-resize}.smart-splitter:not([dragged])>.smart-container>smart-splitter-bar:not([focus]) .smart-splitter-far-collapse-button,.smart-splitter:not([dragged])>.smart-container>smart-splitter-bar:not([focus]) .smart-splitter-near-collapse-button{color:inherit}.smart-splitter:not([dragged])>.smart-container>smart-splitter-bar[hover]:not([item-collapsed]):not([focus]) .smart-splitter-far-collapse-button,.smart-splitter:not([dragged])>.smart-container>smart-splitter-bar[hover]:not([item-collapsed]):not([focus]) .smart-splitter-near-collapse-button{color:var(--smart-ui-state-color-hover)}.smart-splitter:not([dragged]) smart-splitter-bar.smart-element,.smart-splitter:not([dragged]) smart-splitter-bar[hover]{background-color:var(--smart-ui-state-hover);border-color:var(--smart-ui-state-border-hover);color:var(--smart-ui-state-color-hover)}.smart-splitter:not([dragged]) smart-splitter-bar[hover]:not([item-collapsed]):not([focus]) .smart-splitter-resize-button span,.smart-splitter:not([dragged]) smart-splitter-bar[hover]:not([item-collapsed]):not([focus]) .smart-splitter-resize-button span:after,.smart-splitter:not([dragged]) smart-splitter-bar[hover]:not([item-collapsed]):not([focus]) .smart-splitter-resize-button span:before{background-color:var(--smart-ui-state-color-hover);border-color:var(--smart-ui-state-color-hover);color:var(--smart-ui-state-color-hover)}.smart-splitter:not([dragged]) smart-splitter-bar[focus]{background-color:var(--smart-ui-state-active);border-color:var(--smart-ui-state-border-active);color:var(--smart-ui-state-color-active)}.smart-splitter:not([dragged]) smart-splitter-bar[focus]:not([item-collapsed]) .smart-splitter-resize-button span,.smart-splitter:not([dragged]) smart-splitter-bar[focus]:not([item-collapsed]) .smart-splitter-resize-button span:after,.smart-splitter:not([dragged]) smart-splitter-bar[focus]:not([item-collapsed]) .smart-splitter-resize-button span:before{background-color:var(--smart-ui-state-color-active);border-color:var(--smart-ui-state-color-active);color:var(--smart-ui-state-color-active)}.smart-splitter:not([dragged]) smart-splitter-bar:not([item-collapsed]):not([focus]) .smart-splitter-far-collapse-button[hover],.smart-splitter:not([dragged]) smart-splitter-bar:not([item-collapsed]):not([focus]) .smart-splitter-near-collapse-button[hover]{color:var(--smart-ui-state-color-hover)}.smart-splitter[dragged]{cursor:w-resize;pointer-events:none;user-select:none;touch-action:none}.smart-splitter[dragged]:not([animation=none])>.smart-container>smart-splitter-item{transition:none}.smart-splitter[auto-fit-mode=overflow]>.smart-container{overflow:auto}.smart-splitter[orientation=horizontal]>.smart-container{flex-direction:column}.smart-splitter[orientation=horizontal]>.smart-container>smart-splitter-item{width:100%;height:var(--smart-splitter-item-size)}.smart-splitter[orientation=horizontal]>.smart-container>smart-splitter-bar{width:var(--smart-splitter-bar-fit-size);min-height:5px;height:var(--smart-splitter-bar-size)}.smart-splitter[orientation=horizontal]>.smart-container>smart-splitter-bar>.smart-container{flex-direction:row}.smart-splitter[orientation=horizontal]>.smart-container>smart-splitter-bar .smart-splitter-far-collapse-button,.smart-splitter[orientation=horizontal]>.smart-container>smart-splitter-bar .smart-splitter-near-collapse-button{width:0;height:100%}.smart-splitter[orientation=horizontal]>.smart-container>smart-splitter-bar .smart-splitter-resize-button,.smart-splitter[orientation=horizontal]>.smart-container>smart-splitter-bar[show-far-button] .smart-splitter-far-collapse-button,.smart-splitter[orientation=horizontal]>.smart-container>smart-splitter-bar[show-near-button] .smart-splitter-near-collapse-button{width:20px;height:100%}.smart-splitter[orientation=horizontal]>.smart-container>smart-splitter-bar .smart-splitter-far-collapse-button>span{transform:translate(-50%,-45%) rotate(0)}.smart-splitter[orientation=horizontal]>.smart-container>smart-splitter-bar .smart-splitter-near-collapse-button>span,.smart-splitter[orientation=horizontal]>.smart-container>smart-splitter-bar[item-collapsed] .smart-splitter-far-collapse-button>span{transform:translate(-50%,-50%) rotate(180deg)}.smart-splitter[orientation=horizontal]>.smart-container>smart-splitter-bar .smart-splitter-resize-button>span:before{left:calc(50% - var(--smart-splitter-bar-size));top:50%}.smart-splitter[orientation=horizontal]>.smart-container>smart-splitter-bar .smart-splitter-resize-button>span:after{top:50%;left:calc(50% + var(--smart-splitter-bar-size))}.smart-splitter[orientation=horizontal]>.smart-container>smart-splitter-bar[item-collapsed] .smart-splitter-near-collapse-button>span{transform:translate(-50%,-50%) rotate(0)}.smart-splitter[orientation=horizontal]>.smart-container>.smart-splitter-bar-feedback{width:100%;min-height:5px;height:var(--smart-splitter-bar-size)}.smart-splitter[orientation=horizontal] smart-splitter-item[collapsed]{min-width:0;min-height:0}.smart-splitter[orientation=horizontal]:not([resize-mode=none]):not([readonly])>.smart-container>smart-splitter-bar[hover]:not([locked]),.smart-splitter[orientation=horizontal][dragged]{cursor:s-resize}.smart-splitter[resize-mode=none]>.smart-container>smart-splitter-bar{cursor:default}.smart-splitter[disabled]>.smart-container>smart-splitter-bar{cursor:default;outline:0;border:none;box-shadow:none}.smart-splitter[dragging-not-allowed]>.smart-container>.smart-splitter-bar-feedback,.smart-splitter[dragging-not-allowed]>.smart-container>smart-splitter-bar,.smart-splitter[orientation][disabled]>.smart-container>smart-splitter-bar{cursor:default}.smart-splitter:not([animation=none]) .smart-splitter-far-collapse-button .smart-arrow,.smart-splitter:not([animation=none]) .smart-splitter-near-collapse-button .smart-arrow{transition:transform .2s ease-out}.smart-splitter:not([animation=none])>.smart-container>smart-splitter-item.animate{transition:all .25s cubic-bezier(.4,0,.2,1)}.smart-splitter[orientation-change]:not([animation=none])>.smart-container>smart-splitter-item{transition:none}.smart-splitter[show-locked-items]>.smart-container>smart-splitter-item[locked]>.smart-container:after{position:absolute;content:var(--smart-icon-lock);font-family:var(--smart-font-family-icon);opacity:.25;font-size:calc(2.5 * var(--smart-splitter-font-size));top:50%;left:50%;transform:translate(-50%,-50%)}.smart-splitter[right-to-left] .smart-splitter>.smart-container{direction:initial}.smart-splitter[right-to-left] smart-splitter-item>.smart-container>.smart-content{direction:rtl}
smart-layout{display:block;--smart-layout-buttons-border-radius:50%;--smart-layout-context-menu-default-width:var(--smart-menu-vertical-default-width);--smart-layout-context-menu-default-height:auto;overflow:initial;width:600px;height:600px}smart-layout>.smart-container{position:relative}smart-tab-layout-group[position=left] .smart-layout-tab,smart-tab-layout-group[position=right] .smart-layout-tab{padding:24px 12px}.smart-layout-tab,smart-tab-layout-group[position=bottom] .smart-layout-tab,smart-tab-layout-group[position=top] .smart-layout-tab{padding:12px 24px}smart-tab-layout-group[position=left] .smart-layout-tab:after,smart-tab-layout-group[position=right] .smart-layout-tab:after{position:absolute;bottom:0;top:0;width:100%;height:100%;content:"";transition:all .2s ease;transform:perspective(5px) rotateY(2deg);transform-origin:left;left:0;right:-1px;border-radius:0 8px 8px 0}smart-tab-layout-group[position=right] .smart-layout-tab label,smart-tab-layout-group[position=right] .smart-layout-tab.selected .smart-close-button{margin-right:5px}smart-tab-layout-group[position=left] .smart-layout-tab:after{right:0;border-radius:0 8px 8px 0}smart-tab-layout-group[position=left] .smart-layout-tab label,smart-tab-layout-group[position=left] .smart-layout-tab.selected .smart-close-button{transform:rotateY(0);margin-left:-5px}smart-tab-layout-group[position=bottom] .smart-layout-tab:after{transform-origin:top;transform:perspective(5px) rotateX(-2deg);top:0;border-radius:0 0 8px 8px}smart-tab-layout-group[position=bottom] .smart-layout-tab label,smart-tab-layout-group[position=bottom] .smart-layout-tab.selected .smart-close-button{margin-top:-5px}.smart-layout smart-layout-group{display:grid;overflow:hidden}.smart-layout smart-layout-group[data-id=root]{width:100%;height:100%;overflow:hidden;grid-template-columns:1fr}.smart-layout smart-tab-layout-group{display:grid;overflow:hidden;grid-template-rows:35px 1fr;border-right:1px solid var(--smart-border);border-bottom:1px solid var(--smart-border)}.smart-layout smart-tab-layout-group .smart-layout-tab-strip{background:var(--smart-surface);display:flex;overflow:hidden;border-bottom:2px solid var(--smart-primary)}.smart-layout smart-tab-layout-group[position=bottom]{grid-template-rows:1fr 35px}.smart-layout smart-tab-layout-group[position=bottom]>.smart-layout-tab-strip{border:none;border-top:2px solid var(--smart-primary)}.smart-layout smart-tab-layout-group[position=left] .smart-layout-tab-strip .smart-layout-tab .smart-close-button:after,.smart-layout smart-tab-layout-group[position=right] .smart-layout-tab-strip .smart-layout-tab .smart-close-button:after{margin-left:initial;margin-top:5px}.smart-layout smart-tab-layout-group[position=left]{grid-template-columns:35px 1fr;grid-template-rows:initial}.smart-layout smart-tab-layout-group[position=left]>.smart-layout-tab-strip{writing-mode:vertical-rl;transform:rotate(180deg);justify-content:flex-end;align-items:center;border:none;border-left:2px solid var(--smart-primary)}.smart-layout smart-tab-layout-group[position=right]{grid-template-columns:1fr 35px;grid-template-rows:initial}.smart-layout smart-tab-layout-group[position=right]>.smart-layout-tab-strip{writing-mode:vertical-rl;align-items:center;border:none;border-left:2px solid var(--smart-primary)}.smart-layout smart-tab-layout-group[orientation=vertical]{height:100%}.smart-layout smart-tab-layout-group[orientation=horizontal]{width:100%}.smart-layout smart-tab-layout-item{overflow:hidden}.smart-layout smart-tab-layout-item>smart-layout-group{width:100%;height:100%}.smart-layout .smart-layout-context-menu{opacity:1;transform:scale(1);transform-origin:0;-webkit-transform-origin:0;position:absolute;background:var(--smart-background);color:var(--smart-background-color);box-shadow:var(--smart-elevation-8);border-radius:var(--smart-border-radius);width:var(--smart-layout-context-menu-default-width);height:var(--smart-layout-context-menu-default-height);z-index:var(--smart-editor-drop-down-z-index)}.smart-layout .smart-layout-context-menu.smart-visibility-hidden{opacity:.2;transform:scale(0)}.smart-layout .smart-layout-context-menu>div{width:100%;padding:10px;display:flex;align-items:center;justify-content:space-between;overflow:hidden}.smart-layout .smart-layout-context-menu>div:not([disabled]){cursor:pointer}.smart-layout .smart-layout-context-menu>div[hover]{background-color:var(--smart-ui-state-hover);border-color:var(--smart-ui-state-border-hover);color:var(--smart-ui-state-color-hover)}.smart-layout .smart-layout-context-menu>div[disabled]{pointer-events:none;cursor:default;opacity:.5}.smart-layout .smart-layout-buttons-container{position:absolute;width:100px;height:100px;left:calc(50% - 50px);top:calc(50% - 50px);z-index:9999}.smart-layout .smart-layout-buttons-container div{position:absolute;display:flex;align-items:center;justify-content:center;color:var(--smart-primary-color);background:var(--smart-primary);font-family:var(--smart-font-family-icon);font-size:var(--smart-font-size);padding:5px;left:calc(50% - var(--smart-editor-addon-width)/ 2);width:var(--smart-editor-addon-width);height:var(--smart-editor-addon-width);cursor:pointer;border-top-left-radius:var(--smart-layout-buttons-border-radius);border-top-right-radius:var(--smart-layout-buttons-border-radius);border-bottom-left-radius:var(--smart-layout-buttons-border-radius);border-bottom-right-radius:var(--smart-layout-buttons-border-radius);z-index:1;touch-action:none}.smart-layout .smart-layout-buttons-container div:after{content:var(--smart-icon-plus)}.smart-layout .smart-layout-buttons-container div:active{color:var(--smart-ui-state-color-active);border-color:var(--smart-ui-state-active);background-color:var(--smart-ui-state-active);opacity:var(--smart-button-opacity-active)}.smart-layout .smart-layout-buttons-container div:hover{color:var(--smart-ui-state-color-hover);border-color:var(--smart-ui-state-hover);background-color:var(--smart-ui-state-hover);opacity:var(--smart-button-opacity-active)}.smart-layout .smart-layout-buttons-container div[position=rotate]:after{content:var(--smart-icon-reload)}.smart-layout .smart-layout-buttons-container div[position=center]{top:calc(50% - var(--smart-editor-addon-width)/ 2)}.smart-layout .smart-layout-buttons-container div[position=left]{top:calc(50% - var(--smart-editor-addon-width)/ 2);left:0}.smart-layout .smart-layout-buttons-container div[position=right]{left:initial;top:calc(50% - var(--smart-editor-addon-width)/ 2);right:0}.smart-layout .smart-layout-buttons-container div[position=top]{top:0}.smart-layout .smart-layout-buttons-container div[position=bottom]{bottom:0}.smart-layout .smart-layout-drop-area{position:absolute;width:100%;height:100%;z-index:99;pointer-events:none;left:0;top:0;opacity:0;background:rgba(var(--smart-primary-rgb),.2);transition:opacity .2s ease-in-out}.smart-layout .smart-layout-item{height:auto;overflow:hidden;background:var(--smart-background);border-right:1px solid var(--smart-border);border-bottom:1px solid var(--smart-border)}.smart-layout .smart-layout-item[hover]{overflow:hidden}.smart-layout [data-id]{position:relative}.smart-layout:not([animation=none]) .smart-layout-context-menu{transition:opacity .2s ease-in,visibility .2s ease-in,transform .2s ease-in}.smart-layout:not([animation=none]) .smart-layout-buttons-container div:active,.smart-layout:not([animation=none]) .smart-layout-buttons-container div:hover{transition:background-color .1s linear,box-shadow 280ms ease-in-out}.smart-layout:not([animation=none]) .smart-layout-buttons-container div[position=left]{animation:leftRight .2s ease-in}.smart-layout:not([animation=none]) .smart-layout-buttons-container div[position=right]{animation:rightLeft .2s ease-in}.smart-layout:not([animation=none]) .smart-layout-buttons-container div[position=top]{animation:topBottom .2s ease-in}.smart-layout :not([animation=none]) .smart-layout-buttons-container div[position=bottom]{animation:bottomTop .2s ease-in}.smart-layout.outline .smart-layout-splitter{opacity:1}.smart-layout .smart-layout-splitter{z-index:999;position:absolute;background:var(--smart-border);border:1px solid var(--smart-border);top:0;left:0;opacity:0;transition:opacity .2s ease-in-out}.smart-layout .smart-layout-splitter:hover{border-color:var(--smart-primary);border-style:dashed}.smart-layout .smart-layout-splitter:not([root-splitter]){transition:opacity .2s ease-in-out,width .2s ease-in-out,height .2s ease-in-out}.smart-layout .smart-layout-splitter.active{background:var(--smart-primary);border-color:var(--smart-primary)}.smart-layout .smart-layout-splitter.error{background:var(--smart-error);border-color:var(--smart-error)}.smart-layout .smart-layout-splitter.horizontal{height:1px;width:100%;bottom:0;top:initial;cursor:s-resize}.smart-layout .smart-layout-splitter.horizontal.last{top:0;bottom:initial;display:none}.smart-layout .smart-layout-splitter.vertical{width:1px;height:100%;right:0;left:initial;cursor:e-resize}.smart-layout .smart-layout-splitter.vertical.last{left:0;right:initial;display:none}.smart-layout .smart-layout-group[hover]>.smart-layout-splitter.horizontal,.smart-layout .smart-layout-group[hover]>.smart-layout-splitter.vertical,.smart-layout .smart-layout-item[hover]>.smart-layout-splitter.horizontal,.smart-layout .smart-layout-item[hover]>.smart-layout-splitter.vertical,.smart-layout .smart-layout-splitter[drag].horizontal,.smart-layout .smart-layout-splitter[drag].vertical{opacity:1;z-index:99}.smart-layout-tab{grid-row:1;display:flex;align-items:center;justify-content:center;min-width:0;position:relative;overflow:hidden;cursor:pointer;font-family:var(--smart-font-family);box-sizing:border-box;transition:background-color .2s ease-in-out}.smart-layout-tab:after{position:absolute;left:0;bottom:0;right:0;width:100%;height:120%;border-top-left-radius:8px;border-top-right-radius:8px;content:"";transition:all .2s ease;transform:perspective(5px) rotateX(2deg);transform-origin:bottom}.smart-layout-tab:hover{color:var(--smart-primary)}.smart-layout-tab.selected{color:var(--smart-primary-color)}.smart-layout-tab.selected:after{background:var(--smart-primary)}.smart-layout-tab.selected .smart-close-button{z-index:10;color:inherit}.smart-layout-tab.selected .smart-close-button:after{content:var(--smart-icon-close);width:16px;height:16px;cursor:pointer;font-family:var(--smart-font-family-icon);margin-left:5px;text-align:center;display:flex;align-items:center;justify-content:center;pointer-events:none}.smart-layout-tab label{cursor:pointer;text-overflow:ellipsis;overflow:hidden;z-index:9;margin-top:2px;color:inherit}.smart-layout-feedback{box-shadow:var(--smart-elevation-24);background:var(--smart-background);position:absolute;width:300px;height:150px;max-height:150px;overflow:hidden;left:0;top:0;pointer-events:none;transform-origin:top left;transform:scale(1);transition:transform .25s ease-in-out}.smart-layout-feedback.dragging{transform:scale(.5)}.smart-layout-overlay{position:absolute;z-index:999;left:0;top:0;width:100%;height:100%;opacity:.01;background:#000}@keyframes topBottom{0%{top:calc(-1 * var(--smart-editor-addon-width))}100%{top:0}}@keyframes bottomTop{0%{bottom:calc(-1 * var(--smart-editor-addon-width))}100%{bottom:0}}@keyframes leftRight{0%{left:calc(-1 * var(--smart-editor-addon-width))}100%{left:0}}@keyframes rightLeft{0%{right:calc(-1 * var(--smart-editor-addon-width))}100%{right:0}}