<?xml version="1.0"?>
<data inherit_id="web_editor.snippet_options" primary="True">
    <!-- =================================================================== -->
    <!-- Modify generic snippet options                                      -->
    <!-- =================================================================== -->

    <xpath expr="//t[@t-set='no_animations']" position="attributes">
        <attribute name="t-value">True</attribute>
    </xpath>

    <!-- Extra shapes -->
    <xpath expr="//div[hasclass('o_we_image_shape')]//we-select-page[hasclass('o_we_basic_shapes')]" position="inside">
        <we-button data-set-img-shape="mass_mailing/basic/circle" data-select-label="Circle"/>
        <we-button data-set-img-shape="mass_mailing/basic/triangle" data-select-label="Triangle"/>
        <we-button data-set-img-shape="mass_mailing/basic/slanted" data-select-label="Slanted"/>
    </xpath>
    <xpath expr="//div[hasclass('o_we_image_shape')]//we-select-page[hasclass('o_we_basic_shapes')]" position="attributes">
        <attribute name="t-if">True</attribute>
    </xpath>

    <!-- Image styles -->
    <!-- TODO review to only modify what's really necessary and potentially -->
    <!-- make the changes in web_editor directly so that website can benefit -->
    <!-- from it. -->
    <xpath expr="//div[hasclass('o_we_image_options')]" position="replace">
        <div data-selector="span.fa, i.fa, img">
            <we-select string="Alignment" data-state-to-first-class="true">
                <we-button data-select-class="float-start" title="Align Left">Left</we-button>
                <we-button data-select-class="mx-auto" title="Align Center">Center</we-button>
                <we-button data-select-class="float-end" title="Align Right">Right</we-button>
            </we-select>

            <t t-call="mass_mailing.snippet_options_border_line_widgets">
                <t t-set="label">Border</t>
                <t t-set="with_bs_class" t-value="True"/>
            </t>

            <we-input string="Round Corners" data-select-style="0" data-css-property="border-radius" data-unit="px" data-extra-class="rounded" t-att-data-variable="radius_variable"/>

            <we-row string="Padding ⭤">
                <we-input data-select-style="" data-unit="px" data-css-property="padding-left"/>
                <we-input data-select-style="" data-unit="px" data-css-property="padding-right"/>
            </we-row>
            <we-row string="Padding ↕">
                <we-input data-select-style="" data-unit="px" data-css-property="padding-top"/>
                <we-input data-select-style="" data-unit="px" data-css-property="padding-bottom"/>
            </we-row>
        </div>
    </xpath>

    <!-- Transform is _very_ badly supported in mail clients -->
    <xpath expr="//we-button[@data-name='image_transform_opt']" position="replace"/>

    <xpath expr="//div[@data-js='ImageTools']" position="attributes">
        <attribute name="data-js">MassMailingImageTools</attribute>
    </xpath>

    <!-- =================================================================== -->
    <!-- Adding mass_mailing specific snippet options                        -->
    <!-- =================================================================== -->

    <xpath expr="." position="inside">

    <!-- Border | Columns -->
    <div data-js="Box" data-selector=".row &gt; div" data-exclude=".o_mail_wrapper_td, .s_col_no_bgcolor, .s_col_no_bgcolor.row &gt; div, .s_image_gallery .row &gt; div">
        <t t-call="mass_mailing.snippet_options_border_widgets"/>
    </div>
    <div data-js="layout_column" data-selector=".o_mail_snippet_general" data-target="&gt; *:has(&gt; .row:not(.s_nb_column_fixed)), &gt; .s_allow_columns">
        <we-select string="Columns" data-no-preview="true">
            <we-button data-select-count="0" data-name="zero_cols_opt">None</we-button>
            <we-button data-select-count="1">1</we-button>
            <we-button data-select-count="2">2</we-button>
            <we-button data-select-count="3">3</we-button>
            <we-button data-select-count="4">4</we-button>
            <we-button data-select-count="5">5</we-button>
            <we-button data-select-count="6">6</we-button>
        </we-select>
    </div>

    <!-- Move snippets around -->
    <div data-js="SnippetMove" data-selector=".o_mail_snippet_general">
        <we-button class="fa fa-fw fa-angle-up" data-move-snippet="prev" data-no-preview="true" data-name="move_up_opt"/>
        <we-button class="fa fa-fw fa-angle-down" data-move-snippet="next" data-no-preview="true" data-name="move_down_opt"/>
    </div>
    <div data-js="SnippetMove" data-selector=".row:not(.s_col_no_resize) &gt; div" data-exclude=".s_showcase .row &gt; div" data-name="move_horizontally_opt">
        <we-button class="fa fa-fw fa-angle-left" data-move-snippet="prev" data-no-preview="true" data-name="move_left_opt"/>
        <we-button class="fa fa-fw fa-angle-right" data-move-snippet="next" data-no-preview="true" data-name="move_right_opt"/>
    </div>

    <div id="so_width" data-selector=".s_mail_alert .s_alert, .s_mail_blockquote, .s_mail_text_highlight">
        <we-select string="Width">
            <we-button data-select-class="w-25">25%</we-button>
            <we-button data-select-class="w-50">50%</we-button>
            <we-button data-select-class="w-75">75%</we-button>
            <we-button data-select-class="w-100" data-name="so_width_100">100%</we-button>
        </we-select>
    </div>

    <div id="so_block_align" data-selector=".s_mail_alert .s_alert, .s_mail_blockquote, .s_mail_text_highlight">
        <we-button-group string="Alignment" data-dependencies="!so_width_100">
            <we-button class="fa fa-fw fa-align-left" title="Left" data-select-class="me-auto"/>
            <we-button class="fa fa-fw fa-align-center" title="Center" data-select-class="mx-auto"/>
            <we-button class="fa fa-fw fa-align-right" title="Right" data-select-class="ms-auto"/>
        </we-button-group>
    </div>
    <!-- TODO there is no data-js associated to this but a data-option-name, -->
    <!-- somehow it acts as data-js... it will be reviewed in master. -->
    <div data-option-name="minHeight" data-selector=".o_mail_snippet_general" data-exclude=".o_mail_snippet_general .row &gt; div *">
        <we-button-group string="Height">
            <we-button data-name="minheight_auto_opt" data-select-class="" title="Fit content">Auto</we-button>
            <we-button data-select-class="o_height_400" title="400px">50%</we-button>
            <we-button data-select-class="o_height_800" title="800px">100%</we-button>
        </we-button-group>
    </div>
    <div data-js="mass_mailing_sizing_x" data-selector="img, .mv, .col_mv, td, th" data-exclude=".o_mail_no_resize, .o_mail_no_options"/>

    <div data-js="table_row" data-selector="tr:has(&gt; .row), tr:has(&gt; .col_mv)" data-exclude=".o_mail_no_options" data-drop-near="tr:has(&gt; .row), tr:has(&gt; .col_mv)"/>

    <div data-js="table_column" data-selector=".col&gt;td, .col&gt;th" data-exclude=".o_mail_no_options" data-drop-near=".col&gt;td, .col&gt;th"/>

    <div data-js="table_column_mv" data-selector=".col_mv, td, th" data-exclude=".o_mail_no_options" data-drop-near=".col_mv, td, th"/>

    <t t-set="mailing_content_selector" t-translation="off">.note-editable &gt; div:not(.o_layout), .note-editable .oe_structure &gt; div, .oe_snippet_body</t>
    <div data-js="content" t-att-data-selector="mailing_content_selector" data-exclude=".o_mail_no_options" data-drop-near="[data-oe-field='body_html']:not(:has(.o_layout)) &gt; *, .oe_structure &gt; *" data-drop-in="[data-oe-field='body_html']:not(:has(.o_layout)), .oe_structure"/>

    <t t-set="so_snippet_addition_selector" t-translation="off">.o_mail_snippet_general</t>
    <div id="so_snippet_addition" t-att-data-selector="so_snippet_addition_selector" data-drop-in=":not(p).oe_structure:not(.oe_structure_solo), :not(.o_mega_menu):not(p)[data-oe-type=html], :not(p).oe_structure.oe_structure_solo:not(:has(&gt; section, &gt; div))"/>

    <t t-set="so_content_addition_selector" t-translation="off">.s_mail_blockquote, .s_mail_alert, .s_rating, .s_hr, .s_mail_text_highlight</t>
    <div id="so_content_addition" t-att-data-selector="so_content_addition_selector" t-attf-data-drop-near="p, h1, h2, h3, ul, ol, .row &gt; div &gt; img, #{so_content_addition_selector}" data-drop-in=".content, nav"/>

    <div data-js="sizing_y" data-selector=".o_mail_snippet_general, .o_mail_snippet_general .row &gt; div" data-exclude=".o_mail_no_resize, .o_mail_no_options"/>

    <div data-js="sizing_x" data-selector=".row &gt; div" data-drop-near=".row:not(.s_col_no_resize) &gt; div" data-exclude=".o_mail_no_resize, .o_mail_no_options"/>

    <div data-selector=".note-editable .oe_structure &gt; div:not(:has(&gt; .o_mail_snippet_general)),         .note-editable .oe_structure &gt; div.o_mail_snippet_general,         .note-editable .oe_structure &gt; div.o_mail_snippet_general .o_cc,         .note-editable .oe_structure &gt; div.o_mail_snippet_general .btn:not(.btn-link)" data-exclude=".o_mail_no_colorpicker, .o_mail_no_options, .s_mail_color_blocks_2, .s_mail_color_blocks_2 .row &gt; div">
        <we-colorpicker string="Background Color" data-select-style="true" data-no-transparency="true" data-css-property="background-color" data-color-prefix="bg-"/>
    </div>

    <div data-selector=".s_mail_color_blocks_2 .row &gt; div">
        <we-colorpicker string="Background Color" data-select-style="true" data-no-transparency="true" data-css-property="background-color" data-color-prefix="bg-"/>
    </div>
    <!-- Allow customised padding-x on snippets -->
    <div data-selector="[class*='col-lg-'], .s_discount2, .s_text_block, .s_media_list, .s_picture, .s_rating">
        <we-row string="Padding ⭤">
            <we-input data-select-style="" data-unit="px" data-css-property="padding-left"/>
            <we-input data-select-style="" data-unit="px" data-css-property="padding-right"/>
        </we-row>
    </div>

    <!-- Allow changing background images in Masonry and Cover -->
    <t t-call="mass_mailing.snippet_options_background_options">
        <t t-set="selector" t-value="'.s_masonry_block .row &gt; div, .s_cover .oe_img_bg'"/>
        <t t-set="with_images" t-value="True"/>
        <t t-set="with_videos" t-value="false"/>
        <t t-set="with_shapes" t-value="false"/>
    </t>

    <!-- COLOR | .s_three_columns | .s_comparisons | .s_event  -->
    <div data-js="Box" data-selector=".s_three_columns .row &gt; div, .s_comparisons .row &gt; div, .s_mail_block_event .row &gt; div" data-target=".card-body">
        <we-colorpicker string="Background Color" data-select-style="true" data-no-transparency="true" data-css-property="background-color" data-color-prefix="bg-"/>
    </div>
    <!-- BORDER | .s_three_columns | .s_comparisons | .s_event  -->
    <div data-js="Box" data-selector=".s_three_columns .row &gt; div, .s_comparisons .row &gt; div, .s_mail_block_event .row &gt; div" data-target=".card">
        <t t-call="mass_mailing.snippet_options_border_widgets">
            <t t-set="so_rounded_no_dependencies" t-value="True"/>
        </t>
    </div>
    <!-- COLOR, BORDER | .o_mail_block_discount2 -->
    <div data-js="Box" data-selector=".o_mail_block_discount2" data-target="table">
        <t t-call="mass_mailing.snippet_options_border_widgets">
        </t>
    </div>

    <!--  Vertical Alignment -->
    <div data-option-name="vAlignment" id="row_valign_snippet_option" data-selector=".s_text_image, .s_image_text, .s_three_columns, s_mail_block_event" data-target=".row">
        <we-button-group string="Vert. Alignment" title="Vertical Alignment">
            <we-button title="Align Top" data-select-class="align-items-start" data-img="/mass_mailing/static/src/img/snippets_options/align_top.svg"/>
            <we-button title="Align Middle" data-select-class="align-items-center" data-img="/mass_mailing/static/src/img/snippets_options/align_middle.svg"/>
            <we-button title="Align Bottom" data-select-class="align-items-end" data-img="/mass_mailing/static/src/img/snippets_options/align_bottom.svg"/>
            <we-button title="Stretch to Equal Height" data-select-class="align-items-stretch" data-img="/mass_mailing/static/src/img/snippets_options/align_stretch.svg"/>
        </we-button-group>
    </div>

    <!-- DESIGN OPTIONS -->
    <div data-js="DesignTab" data-selector="design-options" data-no-check="true">
        <!-- BODY WIDTH -->
        <we-button-group string="Body Width" data-apply-to=".o_mail_wrapper" data-no-preview="true">
            <we-button data-select-class="o_mail_small" data-img="/mass_mailing/static/src/img/snippets_options/content_width_small.svg" title="Small"/>
            <we-button data-select-class="o_mail_regular" data-img="/mass_mailing/static/src/img/snippets_options/content_width_normal.svg" title="Regular"/>
            <we-button data-select-class="" data-img="/mass_mailing/static/src/img/snippets_options/content_width_full.svg" title="Full"/>
        </we-button-group>
        <we-colorpicker string="Background Color" data-apply-to=".o_layout, &gt; div:not(.o_layout)" data-select-style="true" data-no-transparency="true" data-css-property="background-color" data-color-prefix="bg-"/>
        <!-- HEADING 1 -->
        <we-row string="Heading 1" class="o_design_tab_title">
            <we-input data-customize-css-property="" data-css-property="font-size" data-selector-text="h1" data-unit="px"/>
            <we-colorpicker data-customize-css-property="" data-css-property="color" data-selector-text="h1" data-no-transparency="true" data-color-prefix="text-"/>
        </we-row>
        <we-row string="" class="o_we_sublevel_1 o_short_title">
            <we-fontfamilypicker data-selector-text="h1"/>
            <span>​</span> <!-- Separate the select from the buttons (styling) -->
            <we-button title="Bold" class="fa fa-fw fa-bold" data-no-preview="true" data-toggle="true" data-customize-css-property="bolder" data-selector-text="h1" data-css-property="font-weight"/>
            <we-button title="Italic" class="fa fa-fw fa-italic" data-no-preview="true" data-toggle="true" data-customize-css-property="italic" data-selector-text="h1" data-css-property="font-style"/>
            <we-button title="Underline" class="fa fa-fw fa-underline" data-no-preview="true" data-toggle="true" data-customize-css-property="underline" data-selector-text="h1" data-css-property="text-decoration-line"/>
        </we-row>
        <!-- HEADING 2 -->
        <we-row string="Heading 2" class="o_design_tab_title">
            <we-input data-customize-css-property="" data-css-property="font-size" data-selector-text="h2" data-unit="px"/>
            <we-colorpicker data-customize-css-property="" data-css-property="color" data-selector-text="h2" data-no-transparency="true" data-color-prefix="text-"/>
        </we-row>
        <we-row string="" class="o_we_sublevel_1 o_short_title">
            <we-fontfamilypicker data-selector-text="h2"/>
            <span>​</span> <!-- Separate the select from the buttons (styling) -->
            <we-button title="Bold" class="fa fa-fw fa-bold" data-no-preview="true" data-toggle="true" data-customize-css-property="bolder" data-selector-text="h2" data-css-property="font-weight"/>
            <we-button title="Italic" class="fa fa-fw fa-italic" data-no-preview="true" data-toggle="true" data-customize-css-property="italic" data-selector-text="h2" data-css-property="font-style"/>
            <we-button title="Underline" class="fa fa-fw fa-underline" data-no-preview="true" data-toggle="true" data-customize-css-property="underline" data-selector-text="h2" data-css-property="text-decoration-line"/>
        </we-row>
        <!-- HEADING 3 -->
        <we-row string="Heading 3" class="o_design_tab_title">
            <we-input data-customize-css-property="" data-css-property="font-size" data-selector-text="h3" data-unit="px"/>
            <we-colorpicker data-customize-css-property="" data-css-property="color" data-selector-text="h3" data-no-transparency="true" data-color-prefix="text-"/>
        </we-row>
        <we-row string="" class="o_we_sublevel_1 o_short_title">
            <we-fontfamilypicker data-selector-text="h3"/>
            <span>​</span> <!-- Separate the select from the buttons (styling) -->
            <we-button title="Bold" class="fa fa-fw fa-bold" data-no-preview="true" data-toggle="true" data-customize-css-property="bolder" data-selector-text="h3" data-css-property="font-weight"/>
            <we-button title="Italic" class="fa fa-fw fa-italic" data-no-preview="true" data-toggle="true" data-customize-css-property="italic" data-selector-text="h3" data-css-property="font-style"/>
            <we-button title="Underline" class="fa fa-fw fa-underline" data-no-preview="true" data-toggle="true" data-customize-css-property="underline" data-selector-text="h3" data-css-property="text-decoration-line"/>
        </we-row>
        <!-- TEXT -->
        <we-row string="Text" class="o_design_tab_title">
            <we-input data-customize-css-property="" data-css-property="font-size" data-selector-text="p, p &gt; *, li, li &gt; *" data-unit="px"/>
            <we-colorpicker data-customize-css-property="" data-css-property="color" data-selector-text="p, p &gt; *, li, li &gt; *" data-no-transparency="true" data-color-prefix="text-"/>
        </we-row>
        <we-row string="" class="o_we_sublevel_1 o_short_title">
            <we-fontfamilypicker data-selector-text="p, p &gt; *, li, li &gt; *"/>
            <span>​</span> <!-- Separate the select from the buttons (styling) -->
            <we-button title="Bold" class="fa fa-fw fa-bold" data-no-preview="true" data-toggle="true" data-customize-css-property="bolder" data-selector-text="p, p &gt; *, li, li &gt; *" data-css-property="font-weight"/>
            <we-button title="Italic" class="fa fa-fw fa-italic" data-no-preview="true" data-toggle="true" data-customize-css-property="italic" data-selector-text="p, p &gt; *, li, li &gt; *" data-css-property="font-style"/>
            <we-button title="Underline" class="fa fa-fw fa-underline" data-no-preview="true" data-toggle="true" data-customize-css-property="underline" data-selector-text="p, p &gt; *, li, li &gt; *" data-css-property="text-decoration-line"/>
        </we-row>
        <!-- LINKS -->
        <we-row string="Links" class="o_design_tab_title">
            <we-colorpicker data-customize-css-property="" data-css-property="color" data-selector-text="a:not(.btn), a.btn.btn-link" data-no-transparency="true" data-color-prefix="text-"/>
            <we-button title="Underline" class="fa fa-fw fa-underline" data-no-preview="true" data-toggle="true" data-customize-css-property="underline" data-selector-text="a:not(.btn), a.btn.btn-link" data-css-property="text-decoration-line"/>
        </we-row>
        <!-- PRIMARY BUTTONS -->
        <we-row string="Primary Buttons" class="o_design_tab_title">
            <we-input data-customize-css-property="" data-css-property="font-size" data-selector-text="a.btn.btn-primary, a.btn.btn-outline-primary, a.btn.btn-fill-primary" data-unit="px"/>
            <we-colorpicker data-customize-css-property="" data-css-property="color" data-selector-text="a.btn.btn-primary, a.btn.btn-outline-primary, a.btn.btn-fill-primary" data-no-transparency="true" data-color-prefix="text-"/>
            <we-colorpicker data-customize-css-property="" data-css-property="background-color" data-selector-text="a.btn.btn-primary, a.btn.btn-outline-primary, a.btn.btn-fill-primary" data-no-transparency="true" data-color-prefix="bg-"/>
        </we-row>
        <we-select string="Size" class="o_we_sublevel_1" data-selector-text="a.btn.btn-primary, a.btn.btn-outline-primary, a.btn.btn-fill-primary">
            <we-button data-apply-button-size="btn-sm">Small</we-button>
            <we-button data-apply-button-size="btn-md">Medium</we-button>
            <we-button data-apply-button-size="btn-lg">Large</we-button>
        </we-select>
        <we-row string="Border" class="o_we_sublevel_1">
            <we-input data-customize-css-property="" data-css-property="border-width" data-selector-text="a.btn.btn-primary, a.btn.btn-outline-primary, a.btn.btn-fill-primary" data-unit="px"/>
            <we-select data-selector-text="a.btn.btn-primary, a.btn.btn-outline-primary, a.btn.btn-fill-primary" data-css-property="border-style">
                <we-button title="Solid" data-customize-css-property="solid">
                    <div class="o_we_fake_img_item o_we_border_preview" style="border-style: solid;"/>
                </we-button>
                <we-button title="Dashed" data-customize-css-property="dashed">
                    <div class="o_we_fake_img_item o_we_border_preview" style="border-style: dashed;"/>
                </we-button>
                <we-button title="Dotted" data-customize-css-property="dotted">
                    <div class="o_we_fake_img_item o_we_border_preview" style="border-style: dotted;"/>
                </we-button>
                <we-button title="Double" data-customize-css-property="double">
                    <div class="o_we_fake_img_item o_we_border_preview" style="border-style: double; border-left: none; border-right: none;"/>
                </we-button>
            </we-select>
            <we-colorpicker data-customize-css-property="" data-css-property="border-color" data-selector-text="a.btn.btn-primary, a.btn.btn-outline-primary, a.btn.btn-fill-primary" data-no-transparency="true" data-color-prefix="border-"/>
        </we-row>
        <!-- SECONDARY BUTTONS -->
        <we-row string="Secondary Buttons" class="o_design_tab_title">
            <we-input data-customize-css-property="" data-css-property="font-size" data-selector-text="a.btn.btn-secondary, a.btn.btn-outline-secondary, a.btn.btn-fill-secondary" data-unit="px"/>
            <we-colorpicker data-customize-css-property="" data-css-property="color" data-selector-text="a.btn.btn-secondary, a.btn.btn-outline-secondary, a.btn.btn-fill-secondary" data-no-transparency="true" data-color-prefix="text-"/>
            <we-colorpicker data-customize-css-property="" data-css-property="background-color" data-selector-text="a.btn.btn-secondary, a.btn.btn-outline-secondary, a.btn.btn-fill-secondary" data-no-transparency="true" data-color-prefix="bg-"/>
        </we-row>
        <we-select string="Size" class="o_we_sublevel_1" data-selector-text="a.btn.btn-secondary, a.btn.btn-outline-secondary, a.btn.btn-fill-secondary">
            <we-button data-apply-button-size="btn-sm">Small</we-button>
            <we-button data-apply-button-size="btn-md">Medium</we-button>
            <we-button data-apply-button-size="btn-lg">Large</we-button>
        </we-select>
        <we-row string="Border" class="o_we_sublevel_1">
            <we-input data-customize-css-property="" data-css-property="border-width" data-selector-text="a.btn.btn-secondary, a.btn.btn-outline-secondary, a.btn.btn-fill-secondary" data-unit="px"/>
            <we-select data-selector-text="a.btn.btn-secondary, a.btn.btn-outline-secondary, a.btn.btn-fill-secondary" data-css-property="border-style">
                <we-button title="Solid" data-customize-css-property="solid">
                    <div class="o_we_fake_img_item o_we_border_preview" style="border-style: solid;"/>
                </we-button>
                <we-button title="Dashed" data-customize-css-property="dashed">
                    <div class="o_we_fake_img_item o_we_border_preview" style="border-style: dashed;"/>
                </we-button>
                <we-button title="Dotted" data-customize-css-property="dotted">
                    <div class="o_we_fake_img_item o_we_border_preview" style="border-style: dotted;"/>
                </we-button>
                <we-button title="Double" data-customize-css-property="double">
                    <div class="o_we_fake_img_item o_we_border_preview" style="border-style: double; border-left: none; border-right: none;"/>
                </we-button>
            </we-select>
            <we-colorpicker data-customize-css-property="" data-css-property="border-color" data-selector-text="a.btn.btn-secondary, a.btn.btn-outline-secondary, a.btn.btn-fill-secondary" data-no-transparency="true" data-color-prefix="border-"/>
        </we-row>
        <!-- SEPARATORS -->
        <we-row string="Separators" class="o_design_tab_title">
            <we-input data-customize-css-property="" data-css-property="border-top-width" data-selector-text="hr" data-unit="px"/>
            <we-select data-selector-text="hr" data-css-property="border-top-style">
                <we-button title="Solid" data-customize-css-property="solid">
                    <div class="o_we_fake_img_item o_we_border_preview" style="border-style: solid;"/>
                </we-button>
                <we-button title="Dashed" data-customize-css-property="dashed">
                    <div class="o_we_fake_img_item o_we_border_preview" style="border-style: dashed;"/>
                </we-button>
                <we-button title="Dotted" data-customize-css-property="dotted">
                    <div class="o_we_fake_img_item o_we_border_preview" style="border-style: dotted;"/>
                </we-button>
                <we-button title="Double" data-customize-css-property="double">
                    <div class="o_we_fake_img_item o_we_border_preview" style="border-style: double; border-left: none; border-right: none;"/>
                </we-button>
            </we-select>
            <we-colorpicker data-customize-css-property="" data-css-property="border-top-color" data-selector-text="hr" data-no-transparency="true" data-color-prefix="border-"/>
        </we-row>
        <we-select string="Width" class="o_we_sublevel_1" data-selector-text="hr" data-css-property="width">
            <we-button data-customize-css-property="25%">25%</we-button>
            <we-button data-customize-css-property="50%">50%</we-button>
            <we-button data-customize-css-property="75%">75%</we-button>
            <we-button data-customize-css-property="100%">100%</we-button>
        </we-select>
    </div>

    </xpath>
<xpath expr="." position="attributes"><attribute name="t-name">mass_mailing.snippet_options</attribute></xpath></data>

