/**
 * 全览（All）视图：把所有启用画布的图元渲染在主 TransformWrapper 内的同一张
 * 大画布里，每个画布占据各自的区域。仅用细边框区分区域，无背景色 / 网格。
 *
 * 视觉规则：
 * - 大画布自身没有背景（沿用外层 map-area 背景）；
 * - 每个区域只有一条细边框 + 圆角；
 * - 区域左上角小 chip 显示画布名，半透明白底 + 模糊，不拦截图元交互。
 */

.pisell-floor-map-layout-overview {
  &--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(0, 0, 0, 0.45);
    font-size: 14px;
  }

  &-area {
    /**
     * 区域边框：浅色外观深色描边，深色外观浅色描边；
     * 都用 2px 粗描边，避免在大画布远缩放时被吃成 1 个亚像素而看不见。
     * 自身不响应平移/缩放（由主 TransformWrapper 接管），仅作为区域边框；
     * 内部 ItemLayer 的图元仍可点击/hover。
     */
    border: 2px solid rgba(0, 0, 0, 0.22);
    border-radius: 8px;
    box-sizing: border-box;

    /**
     * 深色外观下深色描边几乎贴近背景，区域分割不可见——切换到浅色描边。
     * 选择器命中 PisellFloorMapLayout 根容器上的 `data-appearance-mode="dark"`，
     * 该属性来源于外层 ResourceWallViewportToolbar 浅/深切换按钮。
     */
    [data-appearance-mode='dark'] & {
      border-color: rgba(255, 255, 255, 0.32);
    }
  }

  /**
   * 区域标题：左上角 chip，半透明白底 + 模糊；不占独立行高。
   * pointer-events: none 让标题不拦截图元交互（点击/拖拽）。
   */
  &-area-title {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    display: inline-block;
    max-width: calc(100% - 16px);
    padding: 2px 10px;
    font-size: 12px;
    line-height: 1.5;
    color: rgba(0, 0, 0, 0.65);
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(8px);
    border-radius: 999px;
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
  }
}
