<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd">
    <system>
        <section id="weltpixel_custom_header" translate="label" type="text" sortOrder="130" showInDefault="1" showInWebsite="1" showInStore="1">
            <label>Custom Header</label>
            <tab>weltpixel</tab>
            <resource>WeltPixel_CustomHeader::CustomHeaderSettings</resource>
            <group id="general_module_information" translate="label" type="text" sortOrder="0" showInDefault="1" showInWebsite="1" showInStore="1">
                <label>Custom Header</label>
                <attribute type="expanded">1</attribute>
                <fieldset_css>weltpixel-module-information-header active</fieldset_css>
                <field id="separator_product_dimensions" translate="button_label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
                    <frontend_model>WeltPixel\Backend\Block\Adminhtml\System\Config\ModuleInformation</frontend_model>
                    <button_label>WeltPixel_CustomHeader</button_label>
                </field>
            </group>
            <group id="notification" translate="label" sortOrder="5" showInDefault="1" showInWebsite="1" showInStore="1">
                <label>Important / Recommended:</label>
                <fieldset_css>weltpixel-recommended-header active</fieldset_css>
                <field id="notification_msg" translate="label" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
                    <frontend_model>WeltPixel\Backend\Block\Adminhtml\System\Config\Notification</frontend_model>
                </field>
            </group>
            <group id="general" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
                <label>Custom  Header General Settings</label>
                <field id="header_style" translate="label" type="select" sortOrder="1" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Header Style</label>
                    <comment><![CDATA[ Select Header version.<br/>
                    Check all versions on <a href="https://pearl.weltpixel.com" target="_blank" >pearl.weltpixel.com</a> ]]>
                    </comment>
                    <source_model>WeltPixel\CustomHeader\Model\Config\Source\Headerstyles</source_model>
                </field>
            </group>
            <group id="global_promo" translate="label" type="text" sortOrder="15" showInDefault="1" showInWebsite="1" showInStore="1">
                <label>Global Promo Message</label>
                <field id="enable" translate="label comment" type="select" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Enable Global Promo Message</label>
                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
                    <comment>The content of the [weltpixel_global_promo_message] static block is displayed.
                        You can edit the block in Content -> Blocks.</comment>
                </field>
                <field id="hide_on_mobile" translate="label comment" type="select" sortOrder="15" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Hide Global Promo Message on mobile</label>
                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
                    <depends>
                        <field id="enable">1</field>
                    </depends>
                </field>
                <field id="text_color" translate="label" type="text" sortOrder="20" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Text Color</label>
                    <comment>Set text color for [weltpixel_global_promo_message] static block. Example: #ce2222</comment>
                    <validate>color {required:false, hash:true}</validate>
                    <depends>
                        <field id="enable">1</field>
                    </depends>
                </field>
                <field id="background_color" translate="label" type="text" sortOrder="30" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Background Color</label>
                    <comment>Set background color for [weltpixel_global_promo_message] static block. Example: #FFE8E8</comment>
                    <validate>color {required:false, hash:true}</validate>
                    <depends>
                        <field id="enable">1</field>
                    </depends>
                </field>
                <field id="glb_message_position" translate="label" type="select" sortOrder="40" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Global Promo Position</label>
                    <source_model>WeltPixel\CustomHeader\Model\Config\Source\GlobalMessagePosition</source_model>
                    <depends>
                        <field id="enable">1</field>
                    </depends>
                </field>
                <field id="global_promo_message_display_options" translate="label" type="select" sortOrder="40" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Display Global Promo Message</label>
                    <source_model>WeltPixel\CustomHeader\Model\Config\Source\GlobalPromoMessageDisplayOptions</source_model>
                    <depends>
                        <field id="enable">1</field>
                    </depends>
                    <comment>
                        <![CDATA[If set to 'Always', the Global Promo Message will reload upon page refresh or change even if the user has closed it. This option also boosts Global Promo Message load speed. </br>
                         If set to 'Cookie-based', when a user closes the Global Promo Message, it will not display again until the user's cookies expire.]]>
                    </comment>
                </field>

                <field id="custom_block_global_promo_message" translate="label" type="select" sortOrder="50" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Pick Custom CMS Block</label>
                    <source_model>WeltPixel\CustomHeader\Model\Config\Source\CustomBlockList</source_model>
                    <comment>
                        Choose CMS Block that you want to be displayed on Global Promo Message
                    </comment>
                    <depends>
                        <field id="enable">1</field>
                    </depends>
                </field>
            </group>
            <group id="top_header" translate="label" type="text" sortOrder="20" showInDefault="1" showInWebsite="1" showInStore="1">
                <label>Top Header</label>
                <field id="width" translate="label" type="text" sortOrder="20" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Width</label>
                    <comment>Set width of Top section of Header. Example: 1400px</comment>
                </field>
                <field id="link_color" translate="label" type="text" sortOrder="50" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Link Color</label>
                    <comment>Set link color in Header Navigation, only applies for level 0 categories.Example: #000000</comment>
                    <validate>color {required:false, hash:true}</validate>
                </field>
                <field id="hover_link_color" translate="label" type="text" sortOrder="70" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Hover Link Color</label>
                    <comment>Set link color on hover, for Header Level 0 Navigation and all subcategories from dropdown menu . Example: #CCCCCC</comment>
                    <validate>color {required:false, hash:true}</validate>
                </field>
                <field id="active_link_color" translate="label" type="text" sortOrder="80" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Active Link Color</label>
                    <comment>Set color for Active links on Top Header. Example: #F3F3F3</comment>
                    <validate>color {required:false, hash:true}</validate>
                </field>
                <field id="submenu_link_color" translate="label" type="text" sortOrder="90" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Submenu Link Color</label>
                    <comment>Set color for Submenu links from Top Header. Example: #212121</comment>
                    <validate>color {required:false, hash:true}</validate>
                </field>
                <field id="submenu_hover_link_color" translate="label" type="text" sortOrder="100" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Submenu Hover Link Color</label>
                    <comment>Set hover colors on Submenu links from Top er. Example: #000000</comment>
                    <validate>color {required:false, hash:true}</validate>
                </field>
                <field id="text_color" translate="label" type="text" sortOrder="120" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Text Color</label>
                    <comment>Set color for Text in Top Header. Example: #FFFFFF</comment>
                    <validate>color {required:false, hash:true}</validate>
                </field>
                <field id="background_color" translate="label" type="text" sortOrder="130" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Background Color</label>
                    <comment>Set Background color for Top Header. Example: #000000</comment>
                    <validate>color {required:false, hash:true}</validate>
                </field>
                <field id="border_bottom_color" translate="label" type="text" sortOrder="140" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Border Bottom Color</label>
                    <comment>Set border bottom color for entire Top Header section. Example: #FFFFFF</comment>
                    <validate>color {required:false, hash:true}</validate>
                </field>
            </group>
            <group id="middle_header" translate="label" type="text" sortOrder="30" showInDefault="1" showInWebsite="1" showInStore="1">
                <label>Middle Header</label>
                <field id="width" translate="label" type="text" sortOrder="100" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Width</label>
                    <comment>Set width of Middle section from Header. Example: 1400px</comment>
                </field>
                <field id="background" translate="label" type="text" sortOrder="110" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Background</label>
                    <comment>Set background color for entire Middle section from Header. Example: #FFFFFF</comment>
                    <validate>color {required:false, hash:true}</validate>
                </field>
            </group>
            <group id="bottom_header" translate="label" type="text" sortOrder="40" showInDefault="1" showInWebsite="1" showInStore="1">
                <label>Header Navigation</label>
                <field id="width" translate="label" type="text" sortOrder="200" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Width</label>
                    <comment>Set width of Header Navigation (Menu section). Example: 1400px</comment>
                </field>
                <field id="background" translate="label" type="text" sortOrder="210" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Background</label>
                    <comment>Set background color for Header Navigation. Example: #FFFFFF</comment>
                    <validate>color {required:false, hash:true}</validate>
                </field>
                <field id="link_color" translate="label" type="text" sortOrder="220" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Link Color</label>
                    <comment>Set link color from Header Navigation. Example: #000000</comment>
                    <validate>color {required:false, hash:true}</validate>
                </field>
                <field id="hover_link_color" translate="label" type="text" sortOrder="230" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Hover Link Color</label>
                    <comment>Set link color on hover, from Header Navigation. Example: #CCCCCC</comment>
                    <validate>color {required:false, hash:true}</validate>
                </field>
                <field id="shadow" translate="label" type="text" sortOrder="240" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Navigation Shadow</label>
                    <comment>Set shadow for Header Navigation. Example: 0px 10px 30px 0px rgba(0,0,0,0.05)</comment>
                </field>
            </group>
            <group id="sticky_header" translate="label" type="text" sortOrder="50" showInDefault="1" showInWebsite="1" showInStore="1">
                <label>Sticky Header Options</label>
                <field id="enable" translate="label" type="select" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Enable Sticky Header</label>
                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
                    <comment><![CDATA[
					<script>requirejs(['jquery'],function($) {
					    var stickyHeaderEnable = $('#weltpixel_custom_header_sticky_header_enable');
                        $(document).ready(function() {
                            hideAdvancedColors(stickyHeaderEnable.val());
                            stickyHeaderEnable.change(function() {
                                var curValue = $(this).val();
                                hideAdvancedColors(curValue);
                            });
                        });
                        function hideAdvancedColors(curValue) {
                            if (curValue == 0) {
                                var advancedColors = $('#weltpixel_custom_header_sticky_header_advanced_colors');
                                advancedColors.find('option:last').prop('selected', true);
                                advancedColors.closest('tr').nextAll('tr').hide();
                            }
                        }
					});</script>]]></comment>
                </field>
                <field id="custom_logo_size_on_sticky" translate="label" type="select" sortOrder="12" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Custom Logo Size when Sticky</label>
                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
                    <depends>
                        <field id="enable">1</field>
                    </depends>
                </field>
                <field id="sticky_logo_width" translate="label comment" type="text" sortOrder="13" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Logo Width</label>
                    <comment>Set width for Logo when is Sticky. Example: 77px</comment>
                    <depends>
                        <field id="enable">1</field>
                        <field id="custom_logo_size_on_sticky">1</field>
                    </depends>
                </field>
                <field id="sticky_logo_height" translate="label comment" type="text" sortOrder="14" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Logo Height</label>
                    <comment>Set height for Logo when is Sticky. Example: 30px</comment>
                    <depends>
                        <field id="enable">1</field>
                        <field id="custom_logo_size_on_sticky">1</field>
                    </depends>
                </field>
                <field id="sticky_logo_top_position" translate="label comment" type="text" sortOrder="16" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Top Position</label>
                    <comment>Set Top Position (in Percentage) for Logo when is Sticky. Example: 48</comment>
                    <validate>number</validate>
                    <depends>
                        <field id="enable">1</field>
                        <field id="custom_logo_size_on_sticky">1</field>
                    </depends>
                </field>
                <field id="enable_mobile" translate="label comment" type="select" sortOrder="20" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Enable Sticky Header also on mobile</label>
                    <comment>Set Yes to enable Sticky Header also on mobile view. If set to No, Sticky Header is enabled only on desktop view.</comment>
                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
                    <depends>
                        <field id="enable">1</field>
                    </depends>
                </field>
                <field id="enable_sticky_scroll_up" translate="label comment" type="select" sortOrder="30" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Enable Sticky Header when scroll up.</label>
                    <comment>Enable sticky header only when you scroll the page up.</comment>
                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
                    <depends>
                        <field id="enable">1</field>
                    </depends>
                </field>
                <field id="advanced_colors" translate="label comment" type="select" sortOrder="40" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Use Advanced Color Control</label>
                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
                    <comment>If "Yes" you will be able to control the background and elements color on sticky header.
                        If "No" Sticky Header will use white background color and existing header color options.
                    </comment>
                    <depends>
                        <field id="enable">1</field>
                    </depends>
                </field>
                <field id="sticky_background_color" translate="label" type="text" sortOrder="50" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Sticky Header Background Color</label>
                    <comment>Select background color for Header, when is sticky.</comment>
                    <validate>color {required:false, hash:true}</validate>
                    <depends>
                        <field id="advanced_colors">1</field>
                    </depends>
                </field>
                <field id="sticky_elements_color" translate="label" type="text" sortOrder="60" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Sticky Header Link Color</label>
                    <comment>Set link color in Sticky Header Navigation, only applies for level 0 categories.Example: #000000</comment>
                    <validate>color {required:false, hash:true}</validate>
                    <depends>
                        <field id="advanced_colors">1</field>
                    </depends>
                </field>
                <field id="sticky_elements_hover_color" translate="label" type="text" sortOrder="70" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Sticky Header Link Color on Hover</label>
                    <comment>Set link color on hover, for Sticky Header Level 0 Navigation and all subcategories from dropdown menu . Example: #CCCCCC</comment>
                    <validate>color {required:false, hash:true}</validate>
                    <depends>
                        <field id="advanced_colors">1</field>
                    </depends>
                </field>
            </group>
            <group id="search_options" translate="label" type="text" sortOrder="60" showInDefault="1" showInWebsite="1" showInStore="1">
                <label>Search Options</label>
                <field id="version" translate="label comment" type="select" sortOrder="100" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Search Version</label>
                    <source_model>WeltPixel\CustomHeader\Model\Config\Source\SearchVersions</source_model>
                    <comment>Select Search version.</comment>
                </field>
                <field id="width" translate="label" type="text" sortOrder="200" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Field Width</label>
                    <comment>Set width for Search field. Example: 250px</comment>
                    <depends>
                        <field id="version">0</field>
                    </depends>
                </field>
                <field id="height" translate="label" type="text" sortOrder="200" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Field Height</label>
                    <comment>Set height for Search field. Example: 30px</comment>
                    <depends>
                        <field id="version">0</field>
                    </depends>
                </field>
                <field id="search_icon_line_height" translate="label" type="text" sortOrder="205" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Search Icon Line Height</label>
                    <comment>Set line height for Search icon. Example: 36px</comment>
                    <depends>
                        <field id="version">0</field>
                    </depends>
                </field>
                <field id="border_width" translate="label" type="text" sortOrder="210" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Field Border Width</label>
                    <comment>Set borders for Search field. Example: 0 0 1px 0</comment>
                    <frontend_model>WeltPixel\CustomHeader\Table\Block\System\Config\Field\BorderWidth</frontend_model>
                    <backend_model>Magento\Config\Model\Config\Backend\Serialized\ArraySerialized</backend_model>
                    <depends>
                        <field id="version">0</field>
                    </depends>
                </field>
                <field id="border_style" translate="label" type="text" sortOrder="220" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Field Border Style</label>
                    <comment>Set border style for Search. Example: solid</comment>
                    <tooltip>The border-style property sets the style of Search's four borders. One of following
                        values accepted: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset,
                        initial, inherit
                    </tooltip>
                    <source_model>WeltPixel\CustomHeader\Model\Config\Source\SearchBorderStyle</source_model>
                    <depends>
                        <field id="version">0</field>
                    </depends>
                </field>
                <field id="border_color" translate="label" type="text" sortOrder="230" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Field Border Color</label>
                    <comment>Set border color for Search field. Example: #5C5C5C</comment>
                    <validate>color {required:false, hash:true}</validate>
                    <depends>
                        <field id="version">0</field>
                    </depends>
                </field>
                <field id="background" translate="label" type="text" sortOrder="240" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Field Background color</label>
                    <comment>Set background color for Search field. Example: #FFFFFF</comment>
                    <validate>color {required:false, hash:true}</validate>
                    <depends>
                        <field id="version">0</field>
                    </depends>
                </field>
                <field id="color" translate="label" type="text" sortOrder="240" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Font color</label>
                    <comment>Set text font color from Search field. Example: #5C5C5C</comment>
                    <validate>color {required:false, hash:true}</validate>
                    <depends>
                        <field id="version">0</field>
                    </depends>
                </field>
                <field id="placeholder_color" translate="label" type="text" sortOrder="299" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Placeholder color</label>
                    <comment>Set placeholder font color from Search field. Example: #E6E6E6</comment>
                    <validate>color {required:false, hash:true}</validate>
                </field>
                <field id="font_size" translate="label" type="text" sortOrder="250" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Font size</label>
                    <comment>Set font size for Search field text. Example: 12px</comment>
                    <depends>
                        <field id="version">0</field>
                    </depends>
                </field>
                <field id="background_v2" translate="label" type="text" sortOrder="240" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Background Color</label>
                    <comment>Set background color for Search V2. Example: #000000</comment>
                    <validate>color {required:false, hash:true} validate-no-empty</validate>
                    <depends>
                        <field id="version">1</field>
                    </depends>
                </field>
                <field id="background_opacity" translate="label" type="text" sortOrder="250" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Background Opacity</label>
                    <comment>Set background opacity for Search V2. Value range:0.00 - 1.00. Example: 0.95</comment>
                    <validate>validate-number validate-greater-than-zero validate-no-empty validate-number-range number-range-0.00-1.00</validate>
                    <depends>
                        <field id="version">1</field>
                    </depends>
                </field>
                <field id="background_input" translate="label" type="text" sortOrder="260" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Input Background Color</label>
                    <comment>Set background color for input. Example: #575757</comment>
                    <validate>color {required:false, hash:true} validate-no-empty</validate>
                    <depends>
                        <field id="version">1</field>
                    </depends>
                </field>
                <field id="main_elements_color" translate="label" type="text" sortOrder="270" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Main Search Elements Color</label>
                    <comment>Set color for main elements: search input text color, border color, close button color, magnifier color. Example: #FFFFFF</comment>
                    <validate>color {required:false, hash:true} validate-no-empty</validate>
                    <depends>
                        <field id="version">1</field>
                    </depends>
                </field>
                <field id="display_magnifier" translate="label" type="select" sortOrder="280" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Display Magnifier Icon</label>
                    <comment>Display magnifier icon on the right side of the input.</comment>
                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
                    <depends>
                        <field id="version">1</field>
                    </depends>
                </field>
                <field id="magnifier_background_color" translate="label" type="text" sortOrder="290" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Magnifier Background Color</label>
                    <comment>Set background color for magnifier box. Example: #000000</comment>
                    <validate>color {required:false, hash:true} validate-no-empty</validate>
                    <depends>
                        <field id="display_magnifier">1</field>
                        <field id="version">1</field>
                    </depends>
                </field>
                <field id="input_borders" translate="label" type="select" sortOrder="295" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Input Borders</label>
                    <comment>Select border position for search input.</comment>
                    <source_model>WeltPixel\CustomHeader\Model\Config\Source\BorderPosition</source_model>
                    <depends>
                        <field id="weltpixel_custom_header/general/ajax_catalog">1</field>
                        <field id="version">1</field>
                    </depends>
                </field>
                <field id="border_widthv2" translate="label" type="text" sortOrder="296" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Border Width</label>
                    <comment>See border width for search input. Example: 3</comment>
                    <validate>validate-number validate-greater-than-zero validate-no-empty</validate>
                    <depends>
                        <field id="version">1</field>
                    </depends>
                </field>
                <field id="input_font_size" translate="label" type="text" sortOrder="297" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Search Input Font Size</label>
                    <comment>Set font size search input. Example: 18</comment>
                    <validate>validate-number validate-greater-than-zero validate-no-empty</validate>
                    <depends>
                        <field id="version">1</field>
                    </depends>
                </field>
                <field id="placeholder_text" translate="label" type="text" sortOrder="300" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Placeholder Text</label>
                    <comment>Set placeholder text. Example: Type at least 3 characters to search entire store</comment>
                    <depends>
                        <field id="version">1</field>
                    </depends>
                </field>
                <field id="customHtml" translate="label" type="textarea" sortOrder="310" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Custom CSS/HTML</label>
                    <comment>Insert custom HTML/CSS</comment>
                    <depends>
                        <field id="version">1</field>
                    </depends>
                </field>
            </group>
            <group id="icons" translate="label" type="text" sortOrder="70" showInDefault="1" showInWebsite="1" showInStore="1">
                <label>Header Icons</label>
                <field id="icon_size" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Icon Size</label>
                    <comment>Set size of icons from Header. Example: 16px</comment>
                </field>
                <field id="icon_color" translate="label" type="text" sortOrder="20" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Icon Color</label>
                    <comment>Set color of icons from Header. Example: #000000</comment>
                    <validate>color {required:false, hash:true}</validate>
                </field>
                <field id="icon_color_hover" translate="label" type="text" sortOrder="30" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Icon Hover Color</label>
                    <comment>Set hover color of icons from Header. Example: #CCCCCC</comment>
                    <validate>color {required:false, hash:true}</validate>
                </field>
            </group>
            <group id="mobile_header_logo" translate="label" type="text" sortOrder="80" showInDefault="1" showInWebsite="1" showInStore="1">
                <label>Mobile Logo</label>
                <field id="enable" translate="label" type="select" sortOrder="1" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Enable</label>
                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
                    <comment>Enable/disable mobile logo usage. To upload the mobile logo, go to Content -> Design Configuration > [your store] > WeltPixel Header - Mobile logo</comment>
                </field>
            </group>
        </section>
    </system>
</config>
