.editor-media:has(.draggablelayer.expand) {
  &::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: repeating-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.08) 0,
      rgba(255, 255, 255, 0.08) 0.75em,
      rgba(0, 0, 0, 0.12) 0.75em,
      rgba(0, 0, 0, 0.12) 1.5em
    );
    mix-blend-mode: screen;
  }
}

.cropcont {
  position: absolute;
  z-index: 1000;
}

.draggablelayer:not(.current) {
  pointer-events: none;
  .draggablehandles {
    display: none;
  }
  .cropdarkenhole {
    box-shadow: 0 0 99em 99em rgba(0, 0, 0, 0.9) !important;
  }
}

@keyframes pulse-animation {
  0% {
    box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.66);
  }
  100% {
    box-shadow: 0 0 0 2em rgba(0, 0, 0, 0);
  }
}

.draggablelayer {
  --x: 20%;
  --y: 20%;
  --width: 50%;
  --height: 50%;
  --o: 1;

  &.loading {
    &::after {
      content: '';
      position: absolute;
      width: 1em;
      aspect-ratio: 1;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: rgba(255, 255, 255, 0.8);
      border-radius: 50em;
      animation: pulse-animation 1s infinite;
    }
    .embedimg {
      opacity: 0;
    }
  }
  .embedimg {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
  }
  &.expand {
    .embedimg {
      z-index: 2;
      object-fit: fill;
      box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.18),
        0 0.5em 2em rgba(0, 0, 0, 0.44);
    }

    .draggablehandles.moveonly {
      background: none;
      border-color: rgba(255, 255, 255, 0.8);

      .handle.move {
        width: 100%;
        height: 100%;
        z-index: 1;

        &::before {
          width: 0.9em;
          opacity: 0.8;
        }

        &::after {
          display: none;
        }
      }
    }
  }
  .cm {
    top: var(--y);
    left: var(--x);
    width: var(--width);
    height: var(--height);
  }

  .cropdarken {
    position: absolute;
    overflow: hidden;
    z-index: 900;

    .cropdarkenhole {
      position: absolute;
      box-shadow: 0 0 100vw 100vw rgba(0, 0, 0, 0.766);
    }
  }

  .draggablehandles {
    position: absolute;

    z-index: 1000;
    --grid-color: rgba(255, 255, 255, 0.33);
    --grid-thick: 1px;

    --tier-one: 33.334%;
    --tier-two: 66.667%;

    background:
      linear-gradient(
        180deg,
        transparent var(--tier-one),
        var(--grid-color) var(--tier-one),
        var(--grid-color) calc(var(--tier-one) + var(--grid-thick)),
        transparent calc(var(--tier-one) + var(--grid-thick))
      ),
      linear-gradient(
        180deg,
        transparent var(--tier-two),
        var(--grid-color) var(--tier-two),
        var(--grid-color) calc(var(--tier-two) + var(--grid-thick)),
        transparent calc(var(--tier-two) + var(--grid-thick))
      ),
      linear-gradient(
        90deg,
        transparent var(--tier-one),
        var(--grid-color) var(--tier-one),
        var(--grid-color) calc(var(--tier-one) + var(--grid-thick)),
        transparent calc(var(--tier-one) + var(--grid-thick))
      ),
      linear-gradient(
        90deg,
        transparent var(--tier-two),
        var(--grid-color) var(--tier-two),
        var(--grid-color) calc(var(--tier-two) + var(--grid-thick)),
        transparent calc(var(--tier-two) + var(--grid-thick))
      );

    border: 1px dashed white;

    --handle-thick: 0.35em;
    --handle-wide: 26%;
    --handle-placement: calc(var(--handle-thick) * -0.5);

    --corner-width: 0.666em;
    --corner-r: 2px;
    --corner-color: white;
    --corner-placement: calc(var(--corner-width) * -0.5);

    &.nogrid {
      background: none;
    }

    .handle {
      background: white;
      position: absolute;
      border-radius: var(--handle-thick);

      &.top,
      &.bottom {
        left: 50%;
        transform: translateX(-50%);
        width: var(--handle-wide);
        height: var(--handle-thick);
        cursor: ns-resize;
      }
      &.top {
        top: var(--handle-placement);
      }
      &.bottom {
        bottom: var(--handle-placement);
      }

      &.right,
      &.left {
        top: 50%;
        transform: translateY(-50%);
        height: var(--handle-wide);
        width: var(--handle-thick);
        cursor: ew-resize;
      }
      &.right {
        right: var(--handle-placement);
      }
      &.left {
        left: var(--handle-placement);
      }

      &.corner {
        width: var(--corner-width);
        aspect-ratio: 1;
        border: 1px solid var(--corner-color);
        border-radius: var(--corner-r);
        background: none;
        box-shadow: inset 0 0 calc(var(--corner-width) * 0.5)
          rgba(0, 0, 0, 0.666);
      }
      &.topleft,
      &.topright {
        top: var(--corner-placement);
      }
      &.topleft,
      &.bottomleft {
        left: var(--corner-placement);
      }
      &.topright,
      &.bottomright {
        right: var(--corner-placement);
      }
      &.bottomleft,
      &.bottomright {
        bottom: var(--corner-placement);
      }
      &.topleft,
      &.bottomright {
        cursor: nwse-resize;
      }
      &.topright,
      &.bottomleft {
        cursor: nesw-resize;
      }

      &::after {
        content: '';
        position: absolute;
        background: none;
        width: 300%;
        height: 300%;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }

      transition: all calc(var(--spd-insp) * 1.5) ease;
      &:hover {
        --corner-width: 1em;
        --corner-r: 1em;
        --corner-placement: calc(var(--corner-width) * -0.5);
        --handle-thick: 0.45em;
        --handle-wide: 33%;
        --handle-placement: calc(var(--handle-thick) * -0.5);
      }

      &.move {
        cursor: move;
        width: 33%;
        height: 33%;
        background: none;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 0;

        &::before {
          content: '';
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          background: radial-gradient(white 1px, transparent 1px);
          width: calc(var(--corner-width) * 1);
          aspect-ratio: 1;
          border: 1px solid rgba(255, 255, 255, 0.363);
          border-radius: var(--corner-r);
          box-shadow: inset 0 0 calc(var(--corner-width) * 0.5)
            rgba(0, 0, 0, 0.666);
          transition: all var(--spd-insp) ease;
        }
      }
    }
  }
}

.editor-tool-panel {
  background-color: var(--background-main);
  border-radius: var(--grid-corners-radius);
  padding: 0.5em;
}

.toolsep {
  width: 2em;
  height: 1px;
  background-color: var(--c-dark-dim);
  margin: 0.5em auto;
}
.editor-tool-params {
  padding: 0.25em;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;

  .toolbar {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 0.25em;

    .toolsep {
      grid-column: span 4;
    }
  }
}

.editor-geometry-controls {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 0.65em;
  padding: 0.25em;
  color: color-mix(in srgb, var(--text-primary) 85%, transparent);
}

.editor-geometry-section {
  display: flex;
  flex-direction: column;
  gap: 0.4em;
}

.editor-dimensions {
  position: relative;
  min-width: 9em;
  padding-bottom: 0.5em;
}

.editor-dimensions-fields {
  display: flex;
  flex-direction: column;
  gap: 0.85em;
}

.editor-dimension {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 0.3em;

  .smart-control {
    width: auto;
    min-width: 0;
    padding: 0;
    margin: 0;
    grid-template-columns: 1.5em minmax(0, 1fr);
  }

  .smart-control-label {
    font-size: 0.8em;
    margin: 0;
    padding: 0;
    justify-content: center;
  }

  .smart-control-value {
    min-width: 0;
  }
}

.editor-dimension-unit {
  font-size: 0.7em;
}

.editor-dimension-alternate {
  grid-column: 1 / -1;
  text-align: right;
  font-size: 0.7em;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--text-primary) 55%, transparent);
  padding: 0.25em 0 0 0;
}

.editor-dimension-link {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-75%);
  display: flex;
  padding: 0.1em;
  border: 0;
  border-radius: 0.25em;
  background: transparent;
  color: color-mix(in srgb, var(--text-primary) 55%, transparent);
  cursor: pointer;

  .material-symbols-outlined {
    font-size: 1em;
  }

  &.current {
    color: var(--text-primary);
    background: color-mix(in srgb, var(--text-primary) 12%, transparent);
  }

  &:disabled {
    cursor: default;
  }
}

.editor-geometry-row,
.editor-geometry-toggle-group,
.editor-geometry-axis-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35em;
}

.editor-geometry-label {
  font-size: 0.65em;
  line-height: 1;
  color: color-mix(in srgb, var(--text-primary) 72%, transparent);
  display: flex;
  align-items: center;
  gap: 0.5em;
  .icon {
    font-size: 1.25em;
  }
}

.editor-anchor-grid {
  display: grid;
  grid-template-columns: repeat(3, 0.8em);
  grid-template-rows: repeat(3, 0.8em);
  border: 1px solid color-mix(in srgb, var(--text-primary) 35%, transparent);
}

.editor-anchor-option {
  position: relative;
  width: 0.8em;
  height: 0.8em;
  padding: 0;
  border: 0;
  border-right: 1px solid
    color-mix(in srgb, var(--text-primary) 18%, transparent);
  border-bottom: 1px solid
    color-mix(in srgb, var(--text-primary) 18%, transparent);
  background: transparent;
  cursor: pointer;
}

.editor-anchor-option:nth-child(3n) {
  border-right: 0;
}

.editor-anchor-option:nth-child(n + 7) {
  border-bottom: 0;
}

.editor-anchor-option::after {
  position: absolute;
  content: '';
  inset: 50% auto auto 50%;
  width: 0.35em;
  height: 0.35em;
  border-radius: 50%;
  background: transparent;
  transform: translate(-50%, -50%);
}

.editor-anchor-option:hover::after,
.editor-anchor-option.current::after {
  background: var(--text-primary);
  box-shadow: 0 0 0.25em
    color-mix(in srgb, var(--text-primary) 80%, transparent);
}

.editor-geometry-toggle,
.editor-axis-toggle button,
.editor-shrink-toggle {
  border: 1px solid color-mix(in srgb, var(--text-primary) 25%, transparent);
  background: color-mix(in srgb, var(--text-primary) 6%, transparent);
  color: color-mix(in srgb, var(--text-primary) 65%, transparent);
  cursor: pointer;
}

.editor-geometry-toggle {
  min-width: 2.1em;
  padding: 0.1em 0.35em;
  border-radius: 1em;
  font-size: 0.65em;
}

.editor-geometry-toggle.current,
.editor-axis-toggle button.current,
.editor-shrink-toggle.current {
  border-color: var(--power-primary-color);
  background: var(--power-primary-color);
  color: white;
}

.editor-axis-toggle {
  display: flex;
}

.editor-axis-toggle button {
  padding: 0.1em 0.35em;
  font-size: 0.65em;
}

.editor-axis-toggle button:first-child {
  border-radius: 0.3em 0 0 0.3em;
}

.editor-axis-toggle button + button {
  border-left: 0;
}

.editor-axis-toggle button:last-child {
  border-radius: 0 0.3em 0.3em 0;
}

.editor-shrink-toggle {
  display: flex;
  align-items: center;
  gap: 0.25em;
  justify-content: center;
  padding: 0.3em;
  border-radius: 0.35em;
  font-size: 0.65em;
}

.editor-shrink-toggle .material-symbols-outlined {
  font-size: 1.1em;
}

.editor-tool {
  border: none;
  background: none;
  padding: 0.5em;
  font-size: 1em;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5em;
  justify-content: center;
  border-radius: calc(var(--grid-corners-radius) * 0.5);

  transition: background-color var(--spd-insp) ease;

  &:hover {
    background-color: var(--c-dark-dim);
  }

  &.current {
    background-color: var(--power-primary-color);
    color: white;
  }

  .icon {
    font-size: 1.25em;
    color: inherit;
  }
}

.ctrlstools {
  padding: 0.5em 0.75em;
  display: flex;
  flex-direction: column;
  gap: 0.5em;

  .foldable-section {
    margin-top: 0;
    margin-bottom: 1em;
    padding-top: 0;
  }

  &.viewer3d-container {
    width: 100%;
  }
}

.colorgradepreview {
  position: absolute;
  z-index: 0;
}

.launch-editor {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  margin: 1em 0.5em 0 0.5em;
  color: #fff;
  padding: 0.5em 1em 0.5em 0.5em;
  background-color: rgba(0, 0, 0, 0.33);
  scale: 1;
  border-radius: calc(var(--grid-corners-radius) * 0.5);

  font-size: 0.85em;

  transition:
    background-color var(--spd-insp) ease,
    scale var(--spd-insp) ease;
  .icon.edit {
    color: rgba(255, 255, 255, 0.572);
    font-size: 1.25em;
  }
  &:hover {
    /* background-color: rgba(255, 255, 255, 0.939); */
    scale: 0.96;
    background-color: rgba(0, 0, 0, 0.7);
    box-shadow: 0 0 1.25em rgba(248, 242, 232, 0.267);
    /* color: black;
    .icon.edit {
      color: #171717;
    } */
  }
}

.editor-menu {
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 0.5em;

  button {
    min-height: var(--control-height);
    padding: 0.5em 0.75em;
    color: inherit;
    background: var(--background-main);

    border-radius: calc(var(--grid-corners-radius) * 0.5);
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 0.25em;

    cursor: pointer;

    &.save {
      background-color: var(--power-primary-color);
      color: white;
    }

    .icon {
      font-size: var(--control-icon-size);
    }

    &:hover {
      background-color: var(--c-dark-dim);
    }
    &.save:hover {
      background-color: color-mix(
        in srgb,
        var(--power-primary-color),
        white 12%
      );
    }
  }
}

.nomediafound {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 999;
  padding: 2em;
  background-color: #f6f6f6;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.editor-mask {
  position: absolute;
  background-color: transparent;
  z-index: 80;
  filter: invert(0) brightness(0.6) sepia(1) hue-rotate(318deg) saturate(6);
  mix-blend-mode: screen;

  canvas {
    position: absolute;
    width: 100% !important;
    height: 100% !important;
    touch-action: none;
    -ms-touch-action: none;
  }
}

.editor-mask.increase-visibility {
  mix-blend-mode: difference;
}

.radiuspreview {
  --r: 10px;
  --x: 0;
  --y: 0;
  position: absolute;
  z-index: 999;
  top: var(--y);
  left: var(--x);
  background-color: transparent;
  border: 1px solid white;
  box-shadow:
    inset 0 0 0px 0.25em green,
    inset 0 0 2em red;
  border-radius: 9999em;
  width: var(--r);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.contents.open .string-collection {
  display: initial !important;
}

.valuepreview.string .expandpreview {
  display: none;
}

.lognode {
  position: absolute;
  top: 0;
  left: 0;
  width: 2.5em;
  aspect-ratio: 1;
  border: none;
  z-index: 9;
  background: none;

  display: block;
  cursor: inherit;
}

.viewer3dframe {
  position: absolute;
  z-index: 80;

  iframe {
    color-scheme: light;
    background: transparent;
  }
}

.scene-scaffold-badge {
  position: absolute;
  z-index: 2;
  top: 1rem;
  left: 1rem;
  padding: 0.4rem 0.65rem;
  border-radius: 999px;
  background: #8a2cdd;
  color: var(--white);
  font-size: 0.72rem;
  font-weight: 650;
  line-height: 1;
  letter-spacing: 0.02em;
  pointer-events: none;
  text-transform: lowercase;
}

.scene3d-drop-zone {
  position: absolute;
  z-index: 80;
  background: var(--white);

  .viewer3dframe {
    inset: 0;
  }
}

.scene3d-empty-state {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  background: var(--background-main);
  color: color-mix(in srgb, var(--text-primary) 70%, transparent);
  flex-direction: column;
}

.viewer3d-container.scene {
  padding-top: 10%;
}

.viewer3d-container .scene-tab.open {
  display: flex;
  flex-direction: column;
  padding-bottom: 4rem;
}

.viewer3d-container .scene-tab > .scene-node-panel {
  background: var(--background-main);
}

/* The iframe swallows drag events, which freezes a drag passing over the
   viewport on its way to the hierarchy */
#root.scene-node-drag .scene3d-drop-zone iframe {
  pointer-events: none;
}

#root.library-drag-model .scene-model-drop-zone.ready {
  iframe {
    pointer-events: none;
  }

  &::after {
    content: 'Drop model into scene';
    position: absolute;
    inset: 0;
    z-index: 84;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed var(--power-secondary-color);
    background: color-mix(
      in srgb,
      var(--power-secondary-color) 12%,
      transparent
    );
    color: white;
    font-weight: 700;
    pointer-events: auto;
  }
}

.editor-media:has(.viewer3dframe.transparent) {
  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    --checker-dark: #3f37700a;
    --checker-light: #f7f7f7;
    --checker-size: 2em;
    background-image:
      linear-gradient(45deg, var(--checker-dark) 25%, transparent 25%),
      linear-gradient(-45deg, var(--checker-dark) 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, var(--checker-dark) 75%),
      linear-gradient(-45deg, transparent 75%, var(--checker-dark) 75%),
      linear-gradient(0deg, var(--checker-light), var(--checker-light));
    background-size: var(--checker-size) var(--checker-size);
    background-position:
      0 0,
      0 calc(var(--checker-size) / 2),
      calc(var(--checker-size) / 2) calc(-1 * var(--checker-size) / 2),
      calc(-1 * var(--checker-size) / 2) 0px;
  }
}

/* Hides empty foldable sections; notably in viewer3d editor */
#inspector .foldable-section:has(.cont.ctrls:empty) {
  display: none;
}

/* Hide ugly "orphan" separators before empty content */
#inspector .ctrl-sep:last-child {
  display: none;
}

.trimPreview {
  --x: 0px;
  --y: 0px;
  --width: 0px;
  --height: 0px;
  --scale: 1;
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--width) * var(--scale));
  height: calc(var(--height) * var(--scale));
  transform-origin: top left;
  transform: translate(
    calc(var(--x) * var(--scale)),
    calc(var(--y) * var(--scale))
  );

  border: 1px solid #ffffff;
  box-shadow:
    0 0 3.5em 0.33em rgba(0, 0, 0, 0.704),
    0 0 0 1px black;
  z-index: 100;
}

.trimLoading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 1em;
  background-color: rgba(0, 0, 0, 0.666);
  color: #fff;
  text-align: center;
  z-index: 200;
  border-radius: 50em;
}

.packshot-preview-container {
  position: absolute;
  right: var(--grid-gap);
  top: calc(var(--control-height) + 2 * var(--grid-gap));
  z-index: 100;
  display: flex;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.85);
  color: #f6f6f6;
  border-radius: var(--grid-corners-radius);
  height: 22.5em;
  width: 22.5em;

  .packshot-preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5em 0.75em;
    flex-shrink: 0;
  }

  .packshot-preview {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 0.5em;

    img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  }

  .preview-image {
    width: 100%;
    height: 100%;
  }

  .packshot-preview-header button {
    display: flex;
    padding: 0.25em;
    color: inherit;
  }

  .preview-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ccc;

    .icon {
      font-size: 2em;
    }
  }

  .preview-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #e57373;
    gap: 0.5em;

    .icon {
      font-size: 2em;
    }
  }
}