@layer components {
  /* Dropdowns and text boxes positioned on a diagram image (#1324). Each widget is
     centred on its x/y percentage of the image, so positions hold as it scales. Below
     the minimum width the diagram scrolls sideways rather than squeezing the widgets. */
  .diagram-overlay-scroll {
    margin-block: 0.75rem;
    overflow-x: auto;
  }
  .diagram-overlay {
    max-inline-size: 60rem;
    min-inline-size: 36rem;
    position: relative;
  }
  .diagram-overlay__image {
    block-size: auto;
    display: block;
    inline-size: 100%;
  }
  .diagram-overlay__widget,
  .diagram-marker {
    position: absolute;
    translate: -50% -50%;
  }
  .diagram-overlay__widget {
    inset-block-start: var(--y);
    inset-inline-start: var(--x);
    white-space: nowrap;

    .dropdown-readonly-value,
    .textbox-readonly-value {
      background: var(--color-surface);
      border: 1px solid var(--color-border);
      border-radius: 3px;
      padding: 0.1em 0.3em;
    }
  }

  /* Authoring: click the image to place a widget, drag a marker to move it */
  .diagram-widgets-editor {
    .diagram-overlay--editor { cursor: crosshair; }

    fieldset {
      border: none;
      display: flex;
      gap: 1rem;
      margin: 0.5rem 0 0;
      padding: 0;
    }
    legend {
      float: inline-start;
      font-size: 0.9rem;
      margin-inline-end: 0.5rem;
    }
  }
  .diagram-widgets-editor__remove {
    display: block;
    font-size: 0.9rem;
    margin-block-start: 0.5rem;
  }
  .diagram-marker {
    background: var(--color-primary);
    border: 2px solid var(--color-surface);
    border-radius: 999px;
    color: var(--color-surface);
    cursor: grab;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.15em 0.5em;
    touch-action: none;

    &:active { cursor: grabbing; }
    &:focus-visible { outline: 3px solid var(--color-accent, var(--color-primary)); outline-offset: 2px; }
  }
}