[data-ui-surface="shell"] .hatch-inspector { overflow: visible; }

[data-ui-surface="shell"] .hatch-inspector__body {
  display: flex;
  flex-direction: column;
  gap: var(--arhix-space-row);
  padding: var(--arhix-space-micro);
  overflow-y: auto;
  max-height: min(480px, calc(100vh - 2 * var(--arhix-space-edge)));
  box-sizing: border-box;
  border-radius: inherit;
}

[data-ui-surface="shell"] .hatch-inspector > .inspector-scroll-indicator {
  position: absolute;
  right: calc(100% + var(--arhix-scroll-indicator-gap));
}
[data-ui-surface="shell"] .hatch-inspector:hover > .inspector-scroll-indicator:not([hidden]) {
  opacity: 1;
}

[data-ui-surface="shell"] .hatch-option {
  display: flex;
  width: 100%;
  height: var(--arhix-control-height);
  flex: none;
  padding: 0 var(--arhix-space-micro);
  align-items: center;
  text-align: left;
  gap: var(--arhix-space-gap);
  border: 0;
  border-radius: var(--arhix-radius-control);
  background: transparent;
  color: var(--arhix-ink);
  cursor: pointer;
  font: inherit;
}

[data-ui-surface="shell"] .hatch-option:is(:hover, :focus-visible) { background: var(--arhix-surface); }
[data-ui-surface="shell"] .hatch-option[aria-pressed="true"] { background: var(--arhix-accent-tint); }
[data-ui-surface="shell"] .hatch-option__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.25;
}

[data-ui-surface="shell"] :is(.hatch-preview, .inspector-graphic-preview[data-preview="hatch"]) {
  overflow: hidden;
  --arhix-canvas-ink: var(--arhix-drawing-preview-ink);
}

[data-ui-surface="shell"] :is(.hatch-preview, .inspector-graphic-preview[data-preview="hatch"]) > svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* The hatch sample occupies the same surface as the colour picker. */
[data-ui-surface="shell"] :is([data-hatch-definition-preview], [data-hatch-style-preview]) {
  box-sizing: border-box;
  border: 1px solid var(--arhix-line);
  background: var(--arhix-drawing-preview-bg);
  cursor: default;
}
[data-ui-surface="shell"] :is([data-hatch-definition-preview], [data-hatch-style-preview]) > svg {
  display: block;
  width: 100%;
  height: 100%;
}
[data-ui-surface="shell"] [data-ui-theme-scope="dark"] :is([data-hatch-definition-preview], [data-hatch-style-preview]) {
  background: var(--arhix-surface-soft);
  --arhix-canvas-ink: var(--arhix-scene-card-ink);
}

[data-ui-surface="shell"] [data-hatch-style-menu] {
  z-index: var(--arhix-layer-popover-menu);
}
[data-ui-surface="shell"] [data-hatch-style] .inspector-panel__graphic-row {
  margin: var(--arhix-space-block) 0 0;
}
[data-ui-surface="shell"] :is([data-hatch-style], [data-hatch-simple])[hidden] { display: none; }
[data-ui-surface="shell"] [data-hatch-style-preview] { padding: 0; cursor: pointer; }