Here's an interesting method for styling an adjacent element based on whether an <input> is empty or not.

The traditional method for accomplishing this is to use JavaScript, which involves more complex code that is difficult to write and manage. It would require using a selector to find both elements, determining if the input is empty or not, and altering the styles or class names of the adjacent element.

The method below only requires Sfumato classes in your HTML:

In this case I'm hiding and showing a clickable icon that clears the search text if there is any. No JavaScript needed other than the click event 😃.