gx-designer-view {
  display: block;
}
gx-designer-view .root {
  z-index: 9999;
  position: fixed;
}
gx-designer-view .root.selected {
  outline-width: 2px;
  outline-style: solid;
  outline-color: var(--color-border-item-selected);
  outline-offset: -1px;
}
gx-designer-view .root.highlight {
  animation-name: gx-designer-view-highlight;
  animation-duration: 0.25s;
  animation-iteration-count: 2;
  animation-delay: 0.1;
}
gx-designer-view .root.smooth {
  transition: top 0.1s, left 0.1s, width 0.1s, height 0.1s;
}
gx-designer-view .root .surface {
  height: 100%;
}
gx-designer-view .root gx-designer-tool-bar, gx-designer-view .root .gx-designer-tool-bar {
  position: absolute;
  z-index: 3;
}
gx-designer-view .root gx-designer-tool-bar.location-outside-top, gx-designer-view .root .gx-designer-tool-bar.location-outside-top {
  bottom: 100%;
}
gx-designer-view .root gx-designer-tool-bar.location-outside-right, gx-designer-view .root .gx-designer-tool-bar.location-outside-right {
  left: 100%;
}
gx-designer-view .root gx-designer-tool-bar.location-outside-bottom, gx-designer-view .root .gx-designer-tool-bar.location-outside-bottom {
  top: 100%;
}
gx-designer-view .root gx-designer-tool-bar.location-outside-left, gx-designer-view .root .gx-designer-tool-bar.location-outside-left {
  right: 100%;
}
gx-designer-view .root gx-designer-tool-bar.location-inside-sticky, gx-designer-view .root .gx-designer-tool-bar.location-inside-sticky {
  position: sticky;
  top: 0px;
  max-width: min-content;
}
gx-designer-view .root gx-designer-tool-bar.location-viewport-top, gx-designer-view .root .gx-designer-tool-bar.location-viewport-top {
  position: fixed;
  top: 5px;
  left: 50%;
  transform: translate(-50%, 0px);
}
gx-designer-view .root {
  /* workaround to bug of chromium with position:sticky */
}
gx-designer-view .root gx-designer-tool-bar.location-inside-sticky {
  position: absolute;
  top: var(--sticky-top);
  max-width: min-content;
}
gx-designer-view .root {
  /* end of workaround */
}
gx-designer-view .root gx-designer-tool-box {
  z-index: 1;
}
gx-designer-view .root gx-designer-tool-dimension {
  z-index: 2;
}

@keyframes gx-designer-view-highlight {
  0% {
    outline-width: 2px;
    outline-offset: -1px;
  }
  50% {
    outline-width: 6px;
    outline-offset: -3px;
  }
  100% {
    outline-width: 2px;
    outline-offset: -1px;
  }
}