import { html } from "lit";
const canvasStyle = "transform: translate(-50%, -50%); width: min(1100px, 92vw); max-height: 88vh; overflow: auto; padding: 8px 12px 24px;";
const sectionStyle = "margin-bottom: 24px;";
const gridStyle = "display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px 16px; align-items: start;";
const itemStyle = "display: flex; flex-direction: column; align-items: center; gap: 8px;";
const stageStyle = "position: relative; width: 140px; height: 130px;";
const stageTallStyle = "position: relative; width: 180px; height: 220px;";
const buttonAnchorStyle = "position: absolute; left: 50%; bottom: 0;";
const labelStyle = "font-size: 11px; line-height: 1.2; text-align: center; font-family: sans-serif;";
function renderOverview(content) {
  return html`<div style=${canvasStyle}>${content}</div>`;
}
export {
  buttonAnchorStyle,
  canvasStyle,
  gridStyle,
  itemStyle,
  labelStyle,
  renderOverview,
  sectionStyle,
  stageStyle,
  stageTallStyle
};
//# sourceMappingURL=poi-button-story-utils.js.map
