{#
    This component loads a stylesheet file and should typically be placed
    inside the document's <head>.

    By default, the stylesheet file will be loaded lazily. If instead you want
    the resource to block rendering until loaded, set "lazy" to false.

    Mandatory variables:
        @var string file

    Optional variables:
        @var bool lazy

    Note:
        You can either group all variables in an object named "stylesheet" or
        all directly in the context. Grouping under an object has precedence.
#}

{% block stylesheet_component %}
    {% set stylesheet = stylesheet|default(_context) %}

    {% if stylesheet.lazy|default %}
        {# Lazy load, see https://web.dev/defer-non-critical-css/ #}
        <link rel="preload" as="style" href="{{ stylesheet.file }}" onload="this.onload=null;this.rel='stylesheet'">
        <noscript><link rel="stylesheet" href="{{ stylesheet.file }}"></noscript>
    {% else %}
        <link rel="stylesheet" href="{{ stylesheet.file }}">
    {% endif %}
{% endblock %}
