<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">

<t t-name="website.ThemeShadowOption">
    <div t-ref="root" />
    <BuilderContext action="'customizeWebsiteVariable'">
        <BuilderRow label.translate="Normal" initialExpandAnim="shadowSizeToShow === 'shadow'" tooltip.translate="Horizontal and Vertical Offset">
            <BuilderNumberInput actionParam="'box-shadow-offset-x'" unit="'px'" saveUnit="'rem'" prefixIcon="'oi oi-arrows-h'"/>
            <BuilderNumberInput actionParam="'box-shadow-offset-y'" unit="'px'" saveUnit="'rem'" prefixIcon="'oi oi-arrows-v'"/>
            <t t-set-slot="collapse">
                <BuilderRow label.translate="Color" level="1">
                    <BuilderColorPicker actionParam="'box-shadow-color'" enabledTabs="['solid', 'custom']"/>
                </BuilderRow>
                <BuilderRow label.translate="Blur" level="1">
                    <BuilderNumberInput actionParam="'box-shadow-blur-radius'" unit="'px'" saveUnit="'rem'"/>
                </BuilderRow>
                <BuilderRow label.translate="Spread" level="1">
                    <BuilderNumberInput actionParam="'box-shadow-spread-radius'" unit="'px'" saveUnit="'rem'"/>
                </BuilderRow>
            </t>
        </BuilderRow>
        <BuilderRow label.translate="Small" initialExpandAnim="shadowSizeToShow === 'shadow-sm'" tooltip.translate="Horizontal and Vertical Offset">
            <BuilderNumberInput actionParam="'box-shadow-sm-offset-x'" unit="'px'" saveUnit="'rem'" prefixIcon="'oi oi-arrows-h'"/>
            <BuilderNumberInput actionParam="'box-shadow-sm-offset-y'" unit="'px'" saveUnit="'rem'" prefixIcon="'oi oi-arrows-v'"/>
            <t t-set-slot="collapse">
                <BuilderRow label.translate="Color" level="1">
                    <BuilderColorPicker actionParam="'box-shadow-sm-color'" enabledTabs="['solid', 'custom']"/>
                </BuilderRow>
                <BuilderRow label.translate="Blur" level="1">
                    <BuilderNumberInput actionParam="'box-shadow-sm-blur-radius'" unit="'px'" saveUnit="'rem'"/>
                </BuilderRow>
                <BuilderRow label.translate="Spread" level="1">
                    <BuilderNumberInput actionParam="'box-shadow-sm-spread-radius'" unit="'px'" saveUnit="'rem'"/>
                </BuilderRow>
            </t>
        </BuilderRow>
        <BuilderRow label.translate="Large" initialExpandAnim="shadowSizeToShow === 'shadow-lg'" tooltip.translate="Horizontal and Vertical Offset">
            <BuilderNumberInput actionParam="'box-shadow-lg-offset-x'" unit="'px'" saveUnit="'rem'" prefixIcon="'oi oi-arrows-h'"/>
            <BuilderNumberInput actionParam="'box-shadow-lg-offset-y'" unit="'px'" saveUnit="'rem'" prefixIcon="'oi oi-arrows-v'"/>
            <t t-set-slot="collapse">
                <BuilderRow label.translate="Color" level="1">
                    <BuilderColorPicker actionParam="'box-shadow-lg-color'" enabledTabs="['solid', 'custom']"/>
                </BuilderRow>
                <BuilderRow label.translate="Blur" level="1">
                    <BuilderNumberInput actionParam="'box-shadow-lg-blur-radius'" unit="'px'" saveUnit="'rem'"/>
                </BuilderRow>
                <BuilderRow label.translate="Spread" level="1">
                    <BuilderNumberInput actionParam="'box-shadow-lg-spread-radius'" unit="'px'" saveUnit="'rem'"/>
                </BuilderRow>
            </t>
        </BuilderRow>
    </BuilderContext>
</t>

</templates>
