{
    "$schema": "https://schemas.wp.org/trunk/theme.json",
    "version": 3,
    "title": "Appointment Button with Icon",
    "slug": "appointment-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--accent-5); color: var(--wp--preset--color--base); border-radius: 50%; font-size: 16px; font-weight: bold; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }",
        "typography": {
            "fontSize": "16px",
            "fontWeight": "600",
            "textAlign": "left",
            "textTransform": "none"
        },
        "border": {
            "radius": "25px",
            "width": "0"
        },
        "color": {
            "background": "var:preset|color|base",
            "text": "var:preset|color|accent-4"
        },
        "spacing": {
            "padding": {
                "top": "5px",
                "right": "5px",
                "bottom": "5px",
                "left": "20px"
            }
        }
    }
}