{
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 3,
  "title": "Schedule Button with Icon",
  "slug": "schedule-with-icon",
  "blockTypes": [
    "core/button"
  ],
  "styles": {
    "css": "position: relative; width: fit-content; display: inline-flex; align-items: center; gap: 12px; &::after { content: '↗'; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; background: var(--wp--preset--color--base); color: var(--wp--preset--color--accent-5); border-radius: 50%; font-size: 16px; font-weight: bold; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }",
    "typography": {
      "fontSize": "clamp(12px, 2.5vw, 16px)",
      "fontWeight": "600",
      "textAlign": "left",
      "textTransform": "none"
    },
    "border": {
      "radius": "25px",
      "width": "0"
    },
    "color": {
      "background": "var:preset|color|contrast",
      "text": "var:preset|color|base"
    },
    "spacing": {
      "padding": {
        "top": "5px",
        "right": "5px",
        "bottom": "5px",
        "left": "20px"
      }
    }
  }
}