{
    "comp": {
        "dot-stepper": {
            "dot": {
                "size": {
                    "value": "12px"
                },
                "active": {
                    "background": {
                        "color": {
                            "value": "{ref.color.electricBlue.150}"
                        }
                    }
                },
                "inactive": {
                    "hovered": {
                        "background": {
                            "color": {
                                "value": "{ref.color.electricBlue.60}"
                            }
                        }
                    },
                    "clicked": {
                        "background": {
                            "color": {
                                "value": "{ref.color.electricBlue.100}"
                            }
                        }
                    },
                    "focused": {
                        "background": {
                            "color": {
                                "value": "{ref.color.electricBlue.60}"
                            }
                        }
                    },
                    "border": {
                        "width": {
                            "value": "2px"
                        },
                        "color": {
                            "value": "{ref.color.grey.40}"
                        }
                    }
                }
            },
            "spacing": {
                "value": "{ref.spacing.xxs}"
            }
        }
    }
}