{% macro thumb(label, value, size=56) %}
    <li>
        <div class="thumb" data-value="{{ value }}">
            <svg>
                <rect height="{{ size }}" width="{{ size }}" fill="url(#fill-{{ value }})"></rect>
            </svg>
        </div>
        <label class="dark">{{ label(value) }}</label>
    </li>
{% endmacro %}

{% macro thumb(label, value, size=56) %}
    <li>
        <div class="thumb" data-value="{{ value }}">
            <svg height="{{ size }}" width="{{ size }}">
                <rect height="{{ size }}" width="{{ size }}" fill="url(#fill-{{ value }})"></rect>
            </svg>
        </div>
        <label class="dark">{{ label(value) }}</label>
    </li>
{% endmacro %}

Make svg be same size as rect
Make svg be same size as rect

So that mouseleave will fire as soon as going past the rect.
