smart-webcomponents-react 19.0.0 → 19.0.5

package/source/styles/default/smart.layout.css

@@ -1,466 +1,466 @@
-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=right] .smart-layout-tab, smart-tab-layout-group[position=left] .smart-layout-tab {
-  padding: 24px 12px;
-}
-smart-tab-layout-group[position=right] .smart-layout-tab:after, smart-tab-layout-group[position=left] .smart-layout-tab:after {
-  position: absolute;
-  left: 0;
-  bottom: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  border-top-left-radius: 0px;
-  border-bottom-left-radius: 0px;
-  border-bottom-right-radius: 8px;
-  border-top-right-radius: 8px;
-  content: "";
-  transition: all 0.2s ease;
-  transform: perspective(5px) rotateY(2deg);
-  transform-origin: left;
-  left: 0;
-  right: -1px;
-}
-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: 0px;
-  border-top-right-radius: 8px;
-  border-bottom-right-radius: 8px;
-  border-bottom-left-radius: 0px;
-  border-top-left-radius: 0px;
-}
-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(0deg);
-  margin-left: -5px;
-}
-smart-tab-layout-group[position=top] .smart-layout-tab, smart-tab-layout-group[position=bottom] .smart-layout-tab {
-  padding: 12px 24px;
-}
-smart-tab-layout-group[position=bottom] .smart-layout-tab:after {
-  transform-origin: top;
-  transform: perspective(5px) rotateX(-2deg);
-  border-top-left-radius: 0px;
-  border-bottom-left-radius: 8px;
-  border-bottom-right-radius: 8px;
-  border-top-right-radius: 0px;
-  top: 0;
-}
-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: 0.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: 0.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: 0px;
-  top: 0px;
-  opacity: 0;
-  background: rgba(var(--smart-primary-rgb), 0.2);
-  transition: opacity 0.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 0.2s ease-in, visibility 0.2s ease-in, transform 0.2s ease-in;
-}
-.smart-layout:not([animation=none]) .smart-layout-buttons-container div:hover, .smart-layout:not([animation=none]) .smart-layout-buttons-container div:active {
-  transition: background-color 100ms linear, box-shadow 280ms ease-in-out;
-}
-.smart-layout:not([animation=none]) .smart-layout-buttons-container div[position=left] {
-  animation: leftRight 0.2s ease-in;
-}
-.smart-layout:not([animation=none]) .smart-layout-buttons-container div[position=right] {
-  animation: rightLeft 0.2s ease-in;
-}
-.smart-layout:not([animation=none]) .smart-layout-buttons-container div[position=top] {
-  animation: topBottom 0.2s ease-in;
-}
-.smart-layout *:not([animation=none]) .smart-layout-buttons-container div[position=bottom] {
-  animation: bottomTop 0.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: 0px;
-  left: 0px;
-  opacity: 0;
-  transition: opacity 0.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 0.2s ease-in-out, width 0.2s ease-in-out, height 0.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: 0px;
-  top: initial;
-  cursor: s-resize;
-}
-.smart-layout .smart-layout-splitter.horizontal.last {
-  top: 0px;
-  bottom: initial;
-  display: none;
-}
-.smart-layout .smart-layout-splitter.vertical {
-  width: 1px;
-  height: 100%;
-  right: 0px;
-  left: initial;
-  cursor: e-resize;
-}
-.smart-layout .smart-layout-splitter.vertical.last {
-  left: 0px;
-  right: initial;
-  display: none;
-}
-.smart-layout .smart-layout-splitter[drag].horizontal, .smart-layout .smart-layout-splitter[drag].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-group[hover] > .smart-layout-splitter.horizontal,
-.smart-layout .smart-layout-group[hover] > .smart-layout-splitter.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;
-  padding: 12px 24px;
-  font-family: var(--smart-font-family);
-  box-sizing: border-box;
-  transition: background-color 0.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 0.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: 0px;
-  top: 0px;
-  pointer-events: none;
-  transform-origin: top left;
-  transform: scale(1);
-  transition: transform 0.25s ease-in-out;
-}
-.smart-layout-feedback.dragging {
-  transform: scale(0.5);
-}
-
-.smart-layout-overlay {
-  position: absolute;
-  z-index: 999;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  opacity: 0.01;
-  background: black;
-}
-
-@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;
-  }
+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=right] .smart-layout-tab, smart-tab-layout-group[position=left] .smart-layout-tab {
+  padding: 24px 12px;
+}
+smart-tab-layout-group[position=right] .smart-layout-tab:after, smart-tab-layout-group[position=left] .smart-layout-tab:after {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  border-top-left-radius: 0px;
+  border-bottom-left-radius: 0px;
+  border-bottom-right-radius: 8px;
+  border-top-right-radius: 8px;
+  content: "";
+  transition: all 0.2s ease;
+  transform: perspective(5px) rotateY(2deg);
+  transform-origin: left;
+  left: 0;
+  right: -1px;
+}
+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: 0px;
+  border-top-right-radius: 8px;
+  border-bottom-right-radius: 8px;
+  border-bottom-left-radius: 0px;
+  border-top-left-radius: 0px;
+}
+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(0deg);
+  margin-left: -5px;
+}
+smart-tab-layout-group[position=top] .smart-layout-tab, smart-tab-layout-group[position=bottom] .smart-layout-tab {
+  padding: 12px 24px;
+}
+smart-tab-layout-group[position=bottom] .smart-layout-tab:after {
+  transform-origin: top;
+  transform: perspective(5px) rotateX(-2deg);
+  border-top-left-radius: 0px;
+  border-bottom-left-radius: 8px;
+  border-bottom-right-radius: 8px;
+  border-top-right-radius: 0px;
+  top: 0;
+}
+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: 0.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: 0.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: 0px;
+  top: 0px;
+  opacity: 0;
+  background: rgba(var(--smart-primary-rgb), 0.2);
+  transition: opacity 0.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 0.2s ease-in, visibility 0.2s ease-in, transform 0.2s ease-in;
+}
+.smart-layout:not([animation=none]) .smart-layout-buttons-container div:hover, .smart-layout:not([animation=none]) .smart-layout-buttons-container div:active {
+  transition: background-color 100ms linear, box-shadow 280ms ease-in-out;
+}
+.smart-layout:not([animation=none]) .smart-layout-buttons-container div[position=left] {
+  animation: leftRight 0.2s ease-in;
+}
+.smart-layout:not([animation=none]) .smart-layout-buttons-container div[position=right] {
+  animation: rightLeft 0.2s ease-in;
+}
+.smart-layout:not([animation=none]) .smart-layout-buttons-container div[position=top] {
+  animation: topBottom 0.2s ease-in;
+}
+.smart-layout *:not([animation=none]) .smart-layout-buttons-container div[position=bottom] {
+  animation: bottomTop 0.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: 0px;
+  left: 0px;
+  opacity: 0;
+  transition: opacity 0.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 0.2s ease-in-out, width 0.2s ease-in-out, height 0.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: 0px;
+  top: initial;
+  cursor: s-resize;
+}
+.smart-layout .smart-layout-splitter.horizontal.last {
+  top: 0px;
+  bottom: initial;
+  display: none;
+}
+.smart-layout .smart-layout-splitter.vertical {
+  width: 1px;
+  height: 100%;
+  right: 0px;
+  left: initial;
+  cursor: e-resize;
+}
+.smart-layout .smart-layout-splitter.vertical.last {
+  left: 0px;
+  right: initial;
+  display: none;
+}
+.smart-layout .smart-layout-splitter[drag].horizontal, .smart-layout .smart-layout-splitter[drag].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-group[hover] > .smart-layout-splitter.horizontal,
+.smart-layout .smart-layout-group[hover] > .smart-layout-splitter.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;
+  padding: 12px 24px;
+  font-family: var(--smart-font-family);
+  box-sizing: border-box;
+  transition: background-color 0.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 0.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: 0px;
+  top: 0px;
+  pointer-events: none;
+  transform-origin: top left;
+  transform: scale(1);
+  transition: transform 0.25s ease-in-out;
+}
+.smart-layout-feedback.dragging {
+  transform: scale(0.5);
+}
+
+.smart-layout-overlay {
+  position: absolute;
+  z-index: 999;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0.01;
+  background: black;
+}
+
+@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;
+  }
 }