{"version":"1.0","type":"rich","title":"Generated by SassMeister.com.","description":"This example demonstrates how Sass variables with `!default` flags and scope-based overrides can produce conflicting CSS rules for an `<input>` element. The code defines a red `$color` token in a \"sui-theme\" partial, then overrides it to blue in a \"vertical-theme\" section, while the `$input-token` remains red. The final compiled output shows two separate `input` rules—one with a red background and another with a blue background—plus a `:focus` state using the red token for a box-shadow. The rendering relies on Dart Sass 1.32.12 with expanded output style, using SCSS syntax and no autoprefixer.","provider_name":"VizHub AI Studio","provider_url":"https://next.vizhub.com","html":"<iframe src=\"https://next.vizhub.com/viz/gist-74b9a47482bcadfe6912635b6847a82d?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"1\"></iframe>","width":960,"height":500,"cache_age":3600}