{
    "id": "button_style_arrow_builder",
    "mixin": "button_style_arrow",
    "module": "sisass_components/buttons",
    "selector": ".button_style_arrow_builder_button",
    "adapter": "button_style_arrow",
    "parent_aliases": { "position": "p" },
    "title": "Constructor de button_style_arrow",
    "description": "Configura el doble contorno, la dirección de la flecha y los estados del botón.",
    "option_sets": {
        "border_styles": ["none", "solid", "dashed", "dotted", "double"],
        "cursors": [
            "auto",
            "default",
            "none",
            "context-menu",
            "help",
            "pointer",
            "progress",
            "wait",
            "cell",
            "crosshair",
            "text",
            "vertical-text",
            "alias",
            "copy",
            "move",
            "no-drop",
            "not-allowed",
            "grab",
            "grabbing",
            "e-resize",
            "n-resize",
            "ne-resize",
            "nw-resize",
            "s-resize",
            "se-resize",
            "sw-resize",
            "w-resize",
            "ew-resize",
            "ns-resize",
            "nesw-resize",
            "nwse-resize",
            "col-resize",
            "row-resize",
            "all-scroll",
            "zoom-in",
            "zoom-out",
            "inherit",
            "initial",
            "revert",
            "revert-layer",
            "unset"
        ],
        "displays": ["flex", "inline-flex", "block", "inline-block"]
    },
    "groups": [
        { "id": "content", "label": "Contenido y flecha", "open": true },
        { "id": "dimensions", "label": "Dimensiones", "open": true },
        { "id": "colors", "label": "Colores", "open": true },
        { "id": "borders", "label": "Bordes" },
        { "id": "typography", "label": "Tipografía", "description": "Las familias tipográficas de esta documentación solo están cargadas en la vista previa. Para reproducir el resultado, carga la fuente elegida en tu proyecto." },
        { "id": "behavior", "label": "Comportamiento y posición", "description": "Position recibe un map con la posición y los desplazamientos del botón." }
    ],
    "fields": [
        { "path": "label", "label": "Texto del botón", "group": "content", "control": "text", "default": "Siguiente", "full": true, "output": false },
        { "path": "icon", "key": "icon", "aliases": ["i"], "label": "Dirección de la flecha", "group": "content", "control": "select", "default": "right", "options": [{ "value": "right", "label": "Derecha" }, { "value": "left", "label": "Izquierda" }], "css_variable": "--builder-icon" },
        { "path": "width", "key": "width", "aliases": ["w"], "label": "Width", "group": "dimensions", "control": "text", "default": "150px", "css_variable": "--builder-width" },
        { "path": "height", "key": "height", "aliases": ["h"], "label": "Height", "group": "dimensions", "control": "text", "default": "47px", "css_variable": "--builder-height" },
        { "path": "aspect_ratio", "key": "aspect_ratio", "aliases": ["ratio", "ar"], "preferred_alias": "ar", "label": "Aspect ratio", "help": "opcional", "group": "dimensions", "control": "text", "default": null, "optional": true, "placeholder": "null", "css_variable": "--builder-aspect-ratio" },
        { "path": "padding", "key": "padding", "aliases": ["pa"], "label": "Padding", "group": "dimensions", "control": "text", "default": "10px", "css_variable": "--builder-padding" },
        { "path": "bg", "key": "bg", "aliases": [], "label": "Fondo normal", "group": "colors", "control": "color", "default": "#ffffff", "allow_css_value": true, "css_variable": "--builder-bg" },
        { "path": "color", "key": "color", "aliases": ["c"], "label": "Texto normal", "group": "colors", "control": "color", "default": "#000000", "allow_css_value": true, "css_variable": "--builder-color" },
        { "path": "bg_hover", "key": "bg_hover", "aliases": ["bgh"], "label": "Fondo hover", "group": "colors", "control": "color", "default": "#000000", "allow_css_value": true, "css_variable": "--builder-bg-hover" },
        { "path": "color_hover", "key": "color_hover", "aliases": ["ch"], "label": "Texto hover", "group": "colors", "control": "color", "default": "#ffffff", "allow_css_value": true, "css_variable": "--builder-color-hover" },
        { "path": "bg_active", "key": "bg_active", "aliases": ["bga"], "label": "Fondo activo", "group": "colors", "control": "color", "default": "#000000", "allow_css_value": true, "css_variable": "--builder-bg-active" },
        { "path": "color_active", "key": "color_active", "aliases": ["ca"], "label": "Texto activo", "group": "colors", "control": "color", "default": "#ffffff", "allow_css_value": true, "css_variable": "--builder-color-active" },
        { "path": "bg_disabled", "key": "bg_disabled", "aliases": ["bgd"], "label": "Fondo disabled", "group": "colors", "control": "color", "default": "#b3b3b3", "allow_css_value": true, "css_variable": "--builder-bg-disabled" },
        { "path": "color_disabled", "key": "color_disabled", "aliases": ["cd"], "label": "Texto disabled", "group": "colors", "control": "color", "default": "#666666", "allow_css_value": true, "css_variable": "--builder-color-disabled" },
        { "path": "border_radius", "key": "border_radius", "aliases": ["radius"], "label": "Border radius", "group": "borders", "control": "text", "default": "0px", "css_variable": "--builder-border-radius" },
        { "path": "border", "key": "border", "aliases": ["bd"], "label": "Border normal", "group": "borders", "control": "border", "default": "1px solid #000000", "options_source": "border_styles", "css_variable": "--builder-border" },
        { "path": "border_hover", "key": "border_hover", "aliases": ["bdh"], "label": "Border hover", "group": "borders", "control": "border", "default": "1px solid #000000", "options_source": "border_styles", "css_variable": "--builder-border-hover" },
        { "path": "border_active", "key": "border_active", "aliases": ["bda"], "label": "Border activo", "group": "borders", "control": "border", "default": "1px solid #000000", "options_source": "border_styles", "css_variable": "--builder-border-active" },
        { "path": "border_disabled", "key": "border_disabled", "aliases": ["bdd"], "label": "Border disabled", "group": "borders", "control": "border", "default": "1px solid #b3b3b3", "options_source": "border_styles", "css_variable": "--builder-border-disabled" },
        { "path": "tf.align", "key": "align", "aliases": ["a"], "parent": "tf", "label": "Align", "group": "typography", "control": "select", "default": "left", "options": ["left", "center", "right", "justify"], "css_variable": "--builder-text-align" },
        { "path": "tf.transform", "key": "transform", "aliases": ["t"], "parent": "tf", "label": "Transform", "group": "typography", "control": "select", "default": "initial", "options": ["initial", "uppercase", "lowercase", "capitalize"], "css_variable": "--builder-text-transform" },
        { "path": "tf.decoration", "key": "decoration", "aliases": ["d"], "parent": "tf", "label": "Decoration", "group": "typography", "control": "select", "default": "initial", "options": ["initial", "none", "underline", "line-through"], "css_variable": "--builder-text-decoration" },
        { "path": "tf.wrap", "key": "wrap", "aliases": ["wr"], "parent": "tf", "label": "Wrap", "group": "typography", "control": "select", "default": "initial", "options": ["initial", "nowrap", "wrap", "balance"], "css_variable": "--builder-text-wrap" },
        { "path": "tf.size", "key": "size", "aliases": ["s"], "parent": "tf", "label": "Size", "group": "typography", "control": "text", "default": "1rem", "css_variable": "--builder-font-size" },
        { "path": "tf.family", "key": "family", "aliases": ["f"], "parent": "tf", "label": "Family", "group": "typography", "control": "select", "default": "sans-serif", "quote": true, "options": [{ "value": "sans-serif", "label": "sans-serif (predeterminada)" }, "Nunito Sans", "Fira Sans", "Montserrat", "Roboto"], "css_variable": "--builder-font-family" },
        { "path": "tf.weight", "key": "weight", "aliases": ["w"], "parent": "tf", "label": "Weight", "group": "typography", "control": "select", "default": "normal", "options": ["normal", "bold", "300", "500", "700", "900"], "css_variable": "--builder-font-weight" },
        { "path": "tf.style", "key": "style", "aliases": [], "parent": "tf", "label": "Style", "group": "typography", "control": "select", "default": "normal", "options": ["normal", "italic", "oblique"], "css_variable": "--builder-font-style" },
        { "path": "tf.line_height", "key": "line-height", "aliases": ["lh"], "parent": "tf", "label": "Line height", "group": "typography", "control": "text", "default": "none", "css_variable": "--builder-line-height" },
        { "path": "tf.variant", "key": "variant", "aliases": ["v"], "parent": "tf", "label": "Variant", "group": "typography", "control": "select", "default": "normal", "options": ["normal", "small-caps"], "css_variable": "--builder-font-variant" },
        { "path": "time", "key": "time", "aliases": ["t"], "label": "Time", "group": "behavior", "control": "text", "default": "500ms", "css_variable": "--builder-time" },
        { "path": "position.position", "key": "position", "aliases": ["p"], "parent": "position", "label": "Position", "group": "behavior", "control": "select", "default": "relative", "options": ["relative", "absolute", "sticky"], "css_variable": "--builder-position" },
        { "path": "position.x", "key": "x", "aliases": [], "parent": "position", "label": "X", "group": "behavior", "control": "text", "default": "0px", "css_variable": "--builder-position-x" },
        { "path": "position.y", "key": "y", "aliases": [], "parent": "position", "label": "Y", "group": "behavior", "control": "text", "default": "0px", "css_variable": "--builder-position-y" },
        { "path": "position.z", "key": "z", "aliases": [], "parent": "position", "label": "Z-index", "group": "behavior", "control": "text", "default": "1", "css_variable": "--builder-position-z" },
        { "path": "display", "key": "display", "aliases": ["d"], "label": "Display", "group": "behavior", "control": "select", "default": "flex", "options_source": "displays", "css_variable": "--builder-display" },
        { "path": "cursor", "key": "cursor", "aliases": ["cur"], "label": "Cursor", "group": "behavior", "control": "select", "default": "pointer", "options_source": "cursors", "css_variable": "--builder-cursor" },
        { "path": "cursor_disabled", "key": "cursor_disabled", "aliases": ["curd"], "label": "Cursor disabled", "group": "behavior", "control": "select", "default": "not-allowed", "options_source": "cursors", "css_variable": "--builder-cursor-disabled" },
        { "path": "reset", "key": "reset", "aliases": ["r"], "label": "Aplicar reset inicial (all: initial;)", "group": "behavior", "control": "boolean", "default": true, "full": true }
    ],
    "presets": [
        { "id": "default", "label": "Por defecto", "values": {} },
        {
            "id": "light",
            "label": "Claro",
            "values": {
                "bg": "#f8fafc",
                "bg_hover": "#e2e8f0",
                "bg_active": "#cbd5e1",
                "bg_disabled": "#e5e7eb",
                "color": "#0f172a",
                "color_hover": "#0f172a",
                "color_active": "#0f172a",
                "color_disabled": "#64748b",
                "border_radius": "6px",
                "border": "1px solid #cbd5e1",
                "border_hover": "1px solid #94a3b8",
                "border_active": "1px solid #64748b",
                "border_disabled": "1px solid #cbd5e1"
            }
        },
        {
            "id": "dark",
            "label": "Oscuro",
            "values": {
                "bg": "#334155",
                "bg_hover": "#1e293b",
                "bg_active": "#0f172a",
                "bg_disabled": "#e5e7eb",
                "color": "#ffffff",
                "color_hover": "#ffffff",
                "color_active": "#ffffff",
                "color_disabled": "#64748b",
                "border_radius": "6px",
                "border": "1px solid #334155",
                "border_hover": "1px solid #1e293b",
                "border_active": "1px solid #0f172a",
                "border_disabled": "1px solid #cbd5e1"
            }
        },
        { "id": "left", "label": "Flecha izquierda", "values": { "label": "Anterior", "icon": "left" } },
        { "id": "rounded", "label": "Esquinas redondeadas", "values": { "border_radius": "24px" } },
        { "id": "outline", "label": "Con contorno", "values": { "bg": "transparent", "color": "#000000", "border": "2px solid #000000" } },
        { "id": "custom", "label": "Personalizado", "custom": true }
    ],
    "preview": {
        "default_background": "light",
        "default_state": "normal",
        "backgrounds": [{ "id": "light", "label": "Claro" }, { "id": "dark", "label": "Oscuro" }],
        "states": [{ "id": "normal", "label": "Normal" }, { "id": "active", "label": "Active" }, { "id": "disabled", "label": "Disabled" }]
    }
}