{
  "elements": [
    "buttonOne",
    "buttonTwo",
    "separatorIcon",
    "separatorText"
  ],
  "styles": [
    {
      "attr": "module.advanced.alignment",
      "selector": "{{selector}} .dina_dual_button-container",
      "property": "justify-content"
    },
    {
      "attr": "module.advanced.space",
      "selector": "{{selector}} .dina_dual_button-container",
      "property": "gap"
    },
    {
      "attr": "separatorIcon.advanced.size",
      "selector": "{{selector}} .dina_dual_button-separator i.dina_icon",
      "hoverSelector": "{{selector}} .dina_dual_button-separator:hover i.dina_icon",
      "property": "font-size"
    },
    {
      "attr": "separatorIcon.advanced.color",
      "selector": "{{selector}} .dina_dual_button-separator i.dina_icon",
      "hoverSelector": "{{selector}} .dina_dual_button-separator:hover i.dina_icon",
      "property": "color"
    },
    {
      "attr": "separatorIcon.advanced.background",
      "selector": "{{selector}} .dina_dual_button-separator i.dina_icon",
      "hoverSelector": "{{selector}} .dina_dual_button-separator:hover i.dina_icon",
      "property": "background"
    },
    {
      "attr": "separatorText.advanced.background",
      "selector": "{{selector}} .dina_dual_button-separator-text",
      "hoverSelector": "{{selector}} .dina_dual_button-separator:hover .dina_dual_button-separator-text",
      "property": "background-color"
    },
    {
      "attr": "buttonOne.advanced.iconPlacement",
      "selector": "{{selector}} .dina_button_one-icon",
      "property": "margin-left",
      "declaration": "opacity: 0; margin-left: -1.2rem;",
      "when": {
        "buttonOne.advanced.useIcon": "on",
        "buttonOne.advanced.iconPlacement": "right",
        "buttonOne.advanced.iconOnHover": "on"
      }
    },
    {
      "attr": "buttonOne.advanced.iconPlacement",
      "selector": "{{selector}} .dina_button_one:hover .dina_button_one-icon",
      "property": "margin-left",
      "declaration": "opacity: 1; margin-left: .3rem;",
      "when": {
        "buttonOne.advanced.useIcon": "on",
        "buttonOne.advanced.iconPlacement": "right",
        "buttonOne.advanced.iconOnHover": "on"
      }
    },
    {
      "attr": "buttonOne.advanced.iconPlacement",
      "selector": "{{selector}} .dina_button_one-icon",
      "property": "margin-left",
      "declaration": "margin-left: .3rem;",
      "when": {
        "buttonOne.advanced.useIcon": "on",
        "buttonOne.advanced.iconPlacement": "right",
        "buttonOne.advanced.iconOnHover": "off"
      }
    },
    {
      "attr": "buttonOne.advanced.iconPlacement",
      "selector": "{{selector}} .dina_button_one-icon",
      "property": "margin-left",
      "declaration": "opacity: 0; margin-left: 0rem;",
      "when": {
        "buttonOne.advanced.useIcon": "on",
        "buttonOne.advanced.iconPlacement": "left",
        "buttonOne.advanced.iconOnHover": "on"
      }
    },
    {
      "attr": "buttonOne.advanced.iconPlacement",
      "selector": "{{selector}} .dina_button_one:hover .dina_button_one-icon",
      "property": "margin-left",
      "declaration": "opacity: 1; margin-left: -1.2rem;",
      "when": {
        "buttonOne.advanced.useIcon": "on",
        "buttonOne.advanced.iconPlacement": "left",
        "buttonOne.advanced.iconOnHover": "on"
      }
    },
    {
      "attr": "buttonOne.advanced.iconPlacement",
      "selector": "{{selector}} .dina_button_one-icon",
      "property": "margin-left",
      "declaration": "margin-left: -1.2rem;",
      "when": {
        "buttonOne.advanced.useIcon": "on",
        "buttonOne.advanced.iconPlacement": "left",
        "buttonOne.advanced.iconOnHover": "off"
      }
    },
    {
      "attr": "buttonOne.advanced.hoverBorderColor",
      "selector": "{{selector}} .dina_button_one.dina-border-hover-effect::before",
      "property": "border-color",
      "when": {
        "buttonOne.advanced.borderEffect": [
          "dina-ripple-in",
          "dina-ripple-out",
          "dina-outline-in",
          "dina-outline-out"
        ]
      }
    },
    {
      "attr": "buttonOne.advanced.hoverBorderWidth",
      "selector": "{{selector}} .dina_button_one.dina-border-hover-effect::before",
      "property": "border-width",
      "when": {
        "buttonOne.advanced.borderEffect": [
          "dina-ripple-in",
          "dina-ripple-out",
          "dina-outline-in",
          "dina-outline-out"
        ]
      }
    },
    {
      "attr": "buttonOne.advanced.hoverLineColor",
      "selector": "{{selector}} .dina_button_one.dina-border-hover-effect::before",
      "property": "background",
      "when": {
        "!buttonOne.advanced.borderEffect": [
          "",
          "dina-ripple-in",
          "dina-ripple-out",
          "dina-outline-in",
          "dina-outline-out"
        ]
      }
    },
    {
      "attr": "buttonOne.advanced.hoverLineHeight",
      "selector": "{{selector}} .dina_button_one.dina-border-hover-effect::before",
      "property": "height",
      "when": {
        "!buttonOne.advanced.borderEffect": [
          "",
          "dina-ripple-in",
          "dina-ripple-out",
          "dina-outline-in",
          "dina-outline-out"
        ]
      }
    },
    {
      "attr": "buttonOne.advanced.hoverLineHeight",
      "selector": "{{selector}} .dina_button_one.dina-border-hover-effect::before",
      "property": "transform",
      "template": "translateY(-{{value}})",
      "when": {
        "!buttonOne.advanced.borderEffect": [
          "",
          "dina-ripple-in",
          "dina-ripple-out",
          "dina-outline-in",
          "dina-outline-out"
        ]
      }
    },
    {
      "attr": "buttonOne.advanced.hoverLineHeight",
      "selector": "{{selector}} .dina_button_one.dina-border-hover-effect:hover::before",
      "property": "transform",
      "declaration": "transform: translateY(0)",
      "when": {
        "!buttonOne.advanced.borderEffect": [
          "",
          "dina-ripple-in",
          "dina-ripple-out",
          "dina-outline-in",
          "dina-outline-out"
        ]
      }
    },
    {
      "attr": "buttonOne.advanced.hoverBgColor",
      "selector": "{{selector}} .dina_button_one.dina-bg-hover-effect::before",
      "property": "background",
      "when": {
        "!buttonOne.advanced.bgEffect": ""
      }
    },
    {
      "attr": "buttonTwo.advanced.iconPlacement",
      "selector": "{{selector}} .dina_button_two-icon",
      "property": "margin-left",
      "declaration": "opacity: 0; margin-left: -1.2rem;",
      "when": {
        "buttonTwo.advanced.useIcon": "on",
        "buttonTwo.advanced.iconPlacement": "right",
        "buttonTwo.advanced.iconOnHover": "on"
      }
    },
    {
      "attr": "buttonTwo.advanced.iconPlacement",
      "selector": "{{selector}} .dina_button_two:hover .dina_button_two-icon",
      "property": "margin-left",
      "declaration": "opacity: 1; margin-left: .3rem;",
      "when": {
        "buttonTwo.advanced.useIcon": "on",
        "buttonTwo.advanced.iconPlacement": "right",
        "buttonTwo.advanced.iconOnHover": "on"
      }
    },
    {
      "attr": "buttonTwo.advanced.iconPlacement",
      "selector": "{{selector}} .dina_button_two-icon",
      "property": "margin-left",
      "declaration": "margin-left: .3rem;",
      "when": {
        "buttonTwo.advanced.useIcon": "on",
        "buttonTwo.advanced.iconPlacement": "right",
        "buttonTwo.advanced.iconOnHover": "off"
      }
    },
    {
      "attr": "buttonTwo.advanced.iconPlacement",
      "selector": "{{selector}} .dina_button_two-icon",
      "property": "margin-left",
      "declaration": "opacity: 0; margin-left: 0rem;",
      "when": {
        "buttonTwo.advanced.useIcon": "on",
        "buttonTwo.advanced.iconPlacement": "left",
        "buttonTwo.advanced.iconOnHover": "on"
      }
    },
    {
      "attr": "buttonTwo.advanced.iconPlacement",
      "selector": "{{selector}} .dina_button_two:hover .dina_button_two-icon",
      "property": "margin-left",
      "declaration": "opacity: 1; margin-left: -1.2rem;",
      "when": {
        "buttonTwo.advanced.useIcon": "on",
        "buttonTwo.advanced.iconPlacement": "left",
        "buttonTwo.advanced.iconOnHover": "on"
      }
    },
    {
      "attr": "buttonTwo.advanced.iconPlacement",
      "selector": "{{selector}} .dina_button_two-icon",
      "property": "margin-left",
      "declaration": "margin-left: -1.2rem;",
      "when": {
        "buttonTwo.advanced.useIcon": "on",
        "buttonTwo.advanced.iconPlacement": "left",
        "buttonTwo.advanced.iconOnHover": "off"
      }
    },
    {
      "attr": "buttonTwo.advanced.hoverBorderColor",
      "selector": "{{selector}} .dina_button_two.dina-border-hover-effect::before",
      "property": "border-color",
      "when": {
        "buttonTwo.advanced.borderEffect": [
          "dina-ripple-in",
          "dina-ripple-out",
          "dina-outline-in",
          "dina-outline-out"
        ]
      }
    },
    {
      "attr": "buttonTwo.advanced.hoverBorderWidth",
      "selector": "{{selector}} .dina_button_two.dina-border-hover-effect::before",
      "property": "border-width",
      "when": {
        "buttonTwo.advanced.borderEffect": [
          "dina-ripple-in",
          "dina-ripple-out",
          "dina-outline-in",
          "dina-outline-out"
        ]
      }
    },
    {
      "attr": "buttonTwo.advanced.hoverLineColor",
      "selector": "{{selector}} .dina_button_two.dina-border-hover-effect::before",
      "property": "background",
      "when": {
        "!buttonTwo.advanced.borderEffect": [
          "",
          "dina-ripple-in",
          "dina-ripple-out",
          "dina-outline-in",
          "dina-outline-out"
        ]
      }
    },
    {
      "attr": "buttonTwo.advanced.hoverLineHeight",
      "selector": "{{selector}} .dina_button_two.dina-border-hover-effect::before",
      "property": "height",
      "when": {
        "!buttonTwo.advanced.borderEffect": [
          "",
          "dina-ripple-in",
          "dina-ripple-out",
          "dina-outline-in",
          "dina-outline-out"
        ]
      }
    },
    {
      "attr": "buttonTwo.advanced.hoverLineHeight",
      "selector": "{{selector}} .dina_button_two.dina-border-hover-effect::before",
      "property": "transform",
      "template": "translateY(-{{value}})",
      "when": {
        "!buttonTwo.advanced.borderEffect": [
          "",
          "dina-ripple-in",
          "dina-ripple-out",
          "dina-outline-in",
          "dina-outline-out"
        ]
      }
    },
    {
      "attr": "buttonTwo.advanced.hoverLineHeight",
      "selector": "{{selector}} .dina_button_two.dina-border-hover-effect:hover::before",
      "property": "transform",
      "declaration": "transform: translateY(0)",
      "when": {
        "!buttonTwo.advanced.borderEffect": [
          "",
          "dina-ripple-in",
          "dina-ripple-out",
          "dina-outline-in",
          "dina-outline-out"
        ]
      }
    },
    {
      "attr": "buttonTwo.advanced.hoverBgColor",
      "selector": "{{selector}} .dina_button_two.dina-bg-hover-effect::before",
      "property": "background",
      "when": {
        "!buttonTwo.advanced.bgEffect": ""
      }
    },
    {
      "attr": "buttonOne.decoration.border",
      "selector": "{{selector}} .dina_button_one",
      "property": "overflow",
      "overflowForRadius": true
    },
    {
      "attr": "buttonTwo.decoration.border",
      "selector": "{{selector}} .dina_button_two",
      "property": "overflow",
      "overflowForRadius": true
    },
    {
      "attr": "separatorIcon.decoration.border",
      "selector": "{{selector}} .dina_dual_button-separator i.dina_icon",
      "property": "overflow",
      "overflowForRadius": true
    },
    {
      "attr": "separatorText.decoration.border",
      "selector": "{{selector}} .dina_dual_button-separator-text",
      "property": "overflow",
      "overflowForRadius": true
    }
  ]
}