@layer surfaces {
  [data-anchored-editing-surface] {
    --anchored-editing-surface-inline-size: 336px;
    --anchored-editing-surface-viewport-gap: var(--space-cluster);
    --anchored-editing-surface-available-block-size: var(--surface-overlay-max-block);
    --motion-transform-base: translateX(-50%);

    inset: auto;
    left: 50%;
    margin: 0;
    position: fixed;
    right: auto;
    top: auto;
    transform: var(--motion-transform-base);
    transform-origin: 50% calc(100% + 18px);
    z-index: var(--z-popover);
  }

  [data-anchored-editing-surface] .selection-inspector-header {
    align-items: center;
    display: grid;
    gap: var(--space-related);
    grid-template-columns: minmax(0, 1fr) auto;
    inline-size: 100%;
    min-block-size: 0;
  }

  [data-anchored-editing-surface] .selection-inspector-heading {
    display: grid;
    gap: 2px;
    min-inline-size: 0;
  }

  [data-anchored-editing-surface] .selection-inspector-title {
    color: var(--text);
    font-size: var(--ui-font-size);
    font-weight: var(--ui-font-weight-strong);
    letter-spacing: -0.012em;
    line-height: 1.25;
    margin: 0;
  }

  [data-anchored-editing-surface] .selection-inspector-summary {
    color: var(--text-muted);
    font-size: var(--ui-font-size-compact);
    line-height: var(--type-line-meta);
    margin: 0;
    max-inline-size: 42ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  [data-anchored-editing-surface] .selection-inspector-summary:empty { display: none; }

  [data-anchored-editing-surface] [data-anchored-editing-header],
  [data-anchored-editing-surface] [data-anchored-editing-footer] {
    flex: 0 0 auto;
  }

  [data-anchored-editing-surface] [data-anchored-editing-body] {
    min-block-size: 0;
  }

  [data-anchored-editing-surface][data-busy="true"] { cursor: progress; }

  [data-anchored-editing-surface] .selection-inspector-close {
    align-items: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--shape-panel);
    block-size: 32px;
    color: var(--text-muted);
    display: inline-flex;
    inline-size: 32px;
    justify-content: center;
    justify-self: end;
    min-block-size: 32px;
    min-inline-size: 32px;
    padding: 0;
  }

  [data-anchored-editing-surface] .selection-inspector-close svg {
    block-size: 16px;
    inline-size: 16px;
  }

  [data-anchored-editing-surface] .selection-inspector-close:hover {
    background: var(--panel-control-surface-hover);
    border-color: var(--panel-control-border-hover);
    color: var(--text);
  }

  [data-anchored-editing-surface] .selection-inspector-close:focus-visible {
    box-shadow: none;
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
  }

  @media (pointer: coarse) {
    [data-anchored-editing-surface] .selection-inspector-close {
      block-size: 44px;
      inline-size: 44px;
      min-block-size: 44px;
      min-inline-size: 44px;
    }
  }
}

@layer components {
  @media (forced-colors: active) {
    [data-anchored-editing-surface] .selection-inspector-close:focus-visible {
      outline: 2px solid CanvasText;
      outline-offset: 2px;
    }
  }
}