/* Shape editor. Override any --ed-* property on the svg or an ancestor to theme it;
   --ed-fill defaults to --ed-accent. */
:where(:root) {
  --ed-bg: #fff;
  --ed-ink: #444;
  --ed-accent: #2a6fdb;
  --ed-grid-minor: rgb(0 0 0 / 0.045);
  --ed-grid-major: rgb(0 0 0 / 0.11);
  --ed-grid-axis: rgb(0 0 0 / 0.3);
  --ed-fill-opacity: 0.18;
  --ed-muted: #8a8a8a;
  --ed-muted-opacity: 0.5;
  --ed-handle-bg: #fff;
}

:where(.ed-svg) {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--ed-bg);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  outline: none;
}
.ed-svg:focus-visible { outline: 2px solid var(--ed-accent); outline-offset: -2px; }

.ed-svg path,
.ed-svg rect,
.ed-svg ellipse,
.ed-svg circle { vector-effect: non-scaling-stroke; }

.ed-grid-minor,
.ed-grid-major,
.ed-grid-axis { fill: none; stroke-width: 1; shape-rendering: crispEdges; }
.ed-grid-minor { stroke: var(--ed-grid-minor); }
.ed-grid-major { stroke: var(--ed-grid-major); }
.ed-grid-axis { stroke: var(--ed-grid-axis); }

.ed-fills { opacity: var(--ed-fill-opacity); }
.ed-fill { fill: var(--ed-fill, var(--ed-accent)); stroke: none; }
.ed-fills-muted { opacity: calc(var(--ed-fill-opacity) * var(--ed-muted-opacity)); }
.ed-fills-muted .ed-fill { fill: var(--ed-muted); }

.ed-shape { fill: none; stroke: var(--ed-ink); stroke-width: 1; }
.ed-shape.is-muted { stroke: var(--ed-muted); stroke-dasharray: 4 3; }
.ed-shape.is-hover { stroke: var(--ed-accent); stroke-width: 2; stroke-opacity: 0.5; }
.ed-shape.is-selected { stroke: var(--ed-accent); stroke-width: 1; stroke-opacity: 1; }

.ed-bbox { fill: none; stroke: var(--ed-accent); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0.7; }
.ed-handle { fill: var(--ed-handle-bg); stroke: var(--ed-accent); stroke-width: 1; }
.ed-centre { fill: none; stroke: var(--ed-accent); stroke-width: 1; }
.ed-snap { fill: none; stroke: var(--ed-accent); stroke-width: 1.5; }
.ed-ruler { fill: var(--ed-ruler-bg, #f3f3f3); stroke: var(--ed-grid-axis); stroke-width: 1; }
.ed-ruler-ticks { fill: none; stroke: var(--ed-grid-axis); stroke-width: 1; shape-rendering: crispEdges; }
.ed-ruler-label { fill: var(--ed-ink); font-family: system-ui, sans-serif; pointer-events: none; }