{
  "$schema": "https://schemas.wp.org/trunk/block.json",
  "apiVersion": 3,
  "name": "psb/product-spot",
  "version": "1.0.0",
  "title": "Product Spot",
  "category": "widgets",
  "description": "Add interactive hotspots to product image.",
  "keywords": [
    "Product Spot",
    "Product hotspot",
    "Product spotlight",
    "Product spot light"
  ],
  "textdomain": "product-spot",
  "attributes": {
    "align": {
      "type": "string",
      "default": ""
    },
    "alignment": {
      "type": "string",
      "default": "center"
    },
    "themeSl": {
      "type": "string",
      "default": "simple"
    },
    "iconMode": {
      "type": "string",
      "default": "global"
    },
    "globalIcon": {
      "type": "string",
      "default": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\" id=\"plus\"><path d=\"M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4\"></path></svg>"
    },
    "img": {
      "type": "object",
      "default": {
        "url": "",
        "alt": "",
        "title": ""
      }
    },
    "hotspots": {
      "type": "array",
      "default": []
    },
    "styles": {
      "type": "object",
      "default": {
        "width": {
          "desktop": "100%",
          "tablet": "100%",
          "mobile": "100%"
        },
        "imgRadius": "8px",
        "hotspot": {
          "width": {
            "desktop": "24px",
            "tablet": "22px",
            "mobile": "18px"
          },
          "height": {
            "desktop": "24px",
            "tablet": "22px",
            "mobile": "18px"
          },
          "colors": {
            "color": "#fff",
            "bg": "#0f34da"
          },
          "padding": "10px",
          "border": {
            "width": "2px",
            "style": "solid",
            "color": "#fff",
            "radius": "50%"
          },
          "iconWidth": "20px",
          "iconHeight": "20px"
        },
        "info": {
          "bg": "#F6F6F6",
          "radius": "8px",
          "padding": "15px"
        },
        "title": {
          "color": "#111827",
          "typo": {
            "fontSize": 16,
            "fontWeight": "700",
            "fontFamily": "inter"
          }
        },
        "desc": {
          "color": "#374151",
          "typo": {
            "fontSize": 14,
            "fontFamily": "inter"
          }
        },
        "btnGroup": {
          "column": 6,
          "gap": "10px",
          "index": {
            "colors": {
              "color": "#4b5563",
              "bg": "#f9f9f9"
            },
            "hoverColors": {
              "color": "#4b5563",
              "bg": "#c8c0c091"
            },
            "radius": "50%"
          },
          "activeIndex": {
            "colors": {
              "color": "#ffffff",
              "bg": "#0f34da"
            }
          }
        }
      }
    },
    "options": {
      "type": "object",
      "default": {
        "isTitle": true,
        "isDesc": true
      }
    }
  },
  "supports": {
    "align": [
      "wide",
      "full"
    ],
    "html": false
  },
  "example": {
    "attributes": {}
  },
  "editorScript": [
    "file:./index.js",
    "wp-api"
  ],
  "editorStyle": "file:./index.css",
  "style": "file:./view.css",
  "render": "file:./render.php",
  "viewScript": "file:./view.js"
}