:root {
  --sb-edit-z-index-high: 1010;
  --sb-edit-z-index-mid: 1002;
  --sb-edit-z-index-base: 1001;
  --primary-rect-color: #0087e0;
}

.sb-anchor-name {
  anchor-name: var(--anchor-name);
}

.sb-draggable-wrapper {
  &[data-is-dragged="true"] {
    visibility: hidden;
  }
}

.sb-new-component-dragging-layer {
  width: 100vw;
  height: 100vh;
  z-index: var(--sb-edit-z-index-high);
  position: fixed;
}

.sb-interaction-layer-wrapper {
  z-index: var(--sb-edit-z-index-high);
  width: 0;
  height: 0;
  top: 0;
  left: 0;
}

.sb-edit-drag-preview {
  pointer-events: none;
  background: #e0000029;
  border: 1px solid red;
  width: 100%;
  height: 100%;
  box-shadow: inset 0 0 0 3px #e0000029;

  &[data-is-valid-drop="true"] {
    border: 1px solid var(--primary-rect-color);
    background: #0087e029;
    box-shadow: inset 0 0 0 3px #0087e029;
  }
}

.sb-edit-selection-rect {
  border: 2px solid var(--primary-rect-color);
  pointer-events: none;
  z-index: var(--sb-edit-z-index-base);
  position: absolute;

  &.sb-edit-focus {
    border: 1px solid var(--primary-rect-color);
  }

  &.sb-edit-target {
    border: 2px solid #c2b9dd;
  }

  &.sb-edit-target-mode.sb-edit-focus {
    background: #7c4ff80a;
    border: 1px solid #c2b9dd;
  }
}

.sb-target-mode-border {
  top: anchor(top);
  left: anchor(left);
  right: anchor(right);
  bottom: anchor(bottom);
  pointer-events: none;
  position: absolute;
}

.sb-target-mode-border-top-right, .sb-target-mode-border-top-left, .sb-target-mode-border-bottom-right, .sb-target-mode-border-bottom-left {
  box-sizing: border-box;
  width: 12px;
  height: 12px;
  position: absolute;
}

.sb-target-mode-border-top-right {
  border-top: 2px solid #7c4ff8;
  border-left: 2px solid #7c4ff8;
  top: 0;
  left: 0;
}

.sb-target-mode-border-top-left {
  border-top: 2px solid #7c4ff8;
  border-right: 2px solid #7c4ff8;
  top: 0;
  right: 0;
}

.sb-target-mode-border-bottom-right {
  border-bottom: 2px solid #7c4ff8;
  border-right: 2px solid #7c4ff8;
  bottom: 0;
  right: 0;
}

.sb-target-mode-border-bottom-left {
  border-bottom: 2px solid #7c4ff8;
  border-left: 2px solid #7c4ff8;
  bottom: 0;
  left: 0;
}

.resize-handle {
  border: 1px solid var(--primary-rect-color);
  width: 12px;
  height: 12px;
  z-index: var(--sb-edit-z-index-high);
  pointer-events: auto;
  background-color: #fff;
  border-radius: 50%;
  position: absolute;

  & .bp5-popover-target {
    width: 100%;
    height: 100%;
  }

  &.top-left-resize-handle {
    cursor: nw-resize;
    top: -6px;
    left: -6px;
  }

  &.top-right-resize-handle {
    cursor: ne-resize;
    top: -6px;
    right: -6px;
  }

  &.bottom-right-resize-handle {
    cursor: se-resize;
    bottom: -6px;
    right: -6px;
  }

  &.bottom-left-resize-handle {
    cursor: sw-resize;
    bottom: -6px;
    left: -6px;
  }

  &.top-resize-handle {
    cursor: ns-resize;
    pointer-events: auto;
    background-color: #0000;
    border: none;
    width: auto;
    height: 12px;
    top: -6px;
    left: 0;
    right: 0;
  }

  &.right-resize-handle {
    cursor: ew-resize;
    pointer-events: auto;
    background-color: #0000;
    border: none;
    width: 12px;
    height: auto;
    top: 0;
    bottom: 0;
    right: -6px;
  }

  &.bottom-resize-handle {
    cursor: ns-resize;
    pointer-events: auto;
    background-color: #0000;
    border: none;
    width: auto;
    height: 12px;
    bottom: -6px;
    left: 0;
    right: 0;
  }

  &.left-resize-handle {
    cursor: ew-resize;
    pointer-events: auto;
    background-color: #0000;
    border: none;
    width: 12px;
    height: auto;
    top: 0;
    bottom: 0;
    left: -6px;
  }
}

.resize-handle-edge:after {
  content: "";
  border: 1px solid var(--primary-rect-color);
  box-sizing: border-box;
  background: #fff;
  border-radius: 3px;
  transition: height .2s ease-in-out;
  position: absolute;
}

.left-resize-handle-edge:after {
  width: 6px;
  height: 16px;
  top: calc(50% - 8px);
  left: calc(50% - 2px);
}

.right-resize-handle-edge:after {
  width: 6px;
  height: 16px;
  top: calc(50% - 8px);
  right: calc(50% - 2px);
}

.top-resize-handle-edge:after {
  width: 16px;
  height: 6px;
  top: calc(50% - 2px);
  left: calc(50% - 8px);
}

.bottom-resize-handle-edge:after {
  width: 16px;
  height: 6px;
  bottom: calc(50% - 2px);
  left: calc(50% - 8px);
}

.bp5-unstyled-popover > .bp5-popover-content {
  background: none !important;
  padding: 0 !important;
}

.sb-edit-interaction-rect-actions {
  position-try-fallbacks: flip-block, --actions-below-header;
  position: absolute;
}

.sb-edit-selection-name-pill {
  max-width: 140px;
}

.sb-edit-selection-name-pill, .sb-edit-add-to-chat-button, .sb-edit-edit-component-button {
  color: #fff;
  white-space: nowrap;
  background-color: var(--primary-rect-color);
  text-overflow: ellipsis;
  z-index: var(--sb-edit-z-index-mid);
  border: none;
  border-radius: 3px;
  outline: none;
  padding: 2px 4px;
  font-size: 11px;
  display: block;
  overflow: hidden;
  cursor: pointer !important;

  & * {
    cursor: pointer !important;
  }

  &:hover {
    box-shadow: 0px 3px 8px -1px var(--primary-rect-color);
  }

  &:active, &:focus {
    background-color: var(--primary-rect-color);
    opacity: .8;
  }
}

.sb-edit-actions-target-mode .sb-edit-selection-name-pill:not([data-pill-type="SELECTED"]), .sb-edit-actions-target-mode .sb-edit-add-to-chat-button, .sb-edit-actions-target-mode .sb-edit-edit-component-button {
  background-color: #643adf;

  &:hover {
    box-shadow: 0 3px 8px -1px #643adf;
  }

  &:active, &:focus {
    background-color: #4d32a0;
  }
}

.sb-edit-add-to-chat-button, .sb-edit-edit-component-button {
  justify-content: center;
  align-items: center;
  display: flex;

  & svg {
    width: 16px;
    height: 16px;
  }
}

@position-try --actions-below-header {
  margin-bottom: -24px;
  margin-right: 3px;
}

.sb-reparent-rect {
  border: 1px solid var(--primary-rect-color);
  pointer-events: none;
  z-index: var(--sb-edit-z-index-base);
  animation: 2s infinite radial-gradient-animation;
  position: absolute;
}

@keyframes radial-gradient-animation {
  0% {
    box-shadow: inset 0 0 #0087e080;
  }

  100% {
    box-shadow: inset 0 0 20px 20px #0087e01a;
  }
}

.sb-edit-drop-placeholder {
  pointer-events: none;
  z-index: var(--sb-edit-z-index-base);
  position: absolute;

  &[data-is-active="true"] {
    border: 1px solid var(--primary-rect-color);
    box-shadow: inset 0 0 0 3px #0087e029;
  }

  &[data-is-valid-drop="false"] {
    border-color: #f45252;
  }
}

.sb-edit-drop-target-outline {
  pointer-events: none;
  z-index: var(--sb-edit-z-index-base);
  border: 1px dashed var(--primary-rect-color);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;

  &[data-invalid-target="true"] {
    border-color: #f45252;
  }
}