behavior onHover
    on mouseenter from me
        set productToShow to @data-product of .name in me
        then set @src of #{productToShow} to @data-src of #{productToShow}
        then add .visible to #{productToShow}
    end
    on mouseleave from me
        set productToShow to @data-product of .name in me
        then remove .visible from #{productToShow}
    end
end

behavior openProductDrawer
    on click from me
        add .invisible to #waves
        then add .invisible to #products-container
        then add .product-drawer-visible to #product-drawer
        then add .invisible to header
        then set productDiv to .name in me
        then set $productToShow to @data-product of productDiv
        then add .selected to .{$productToShow}
        then add .visible-forever to #{$productToShow}
        then wait 0.6s
        then add .visible to #mini-logo
end

behavior closeProductDrawer
    on click from me
        remove .invisible from #waves
        then remove .product-drawer-visible from #product-drawer
        then remove .visible-forever from #{$productToShow}
        then remove .visible from #mini-logo
        then wait 0.3s
        then remove .invisible from header
        then remove .invisible from #products-container
        then remove .selected from .{$productToShow}
end