(function($){
    "use strict";
    const { __, _x, sprintf } = wp.i18n;

    $.pixeGetItemPreviewArea = function(title, icon, extraClass = ''){
        var html  = '<div class="pixe-item-preview-area ' + extraClass + '" >'; 
        if( icon ){
            html += '<div class="pixe-icon" >' + icon + '</div>';
        }
        if( title ){
            html += '<div class="pixe-title" >' + title + '</div>';
        }
        html += '</div>';
        return html;
    }

    // post content
    $.pixeRegisterElementRenderer('post-content', function(item, type){
        if( type == 'item' ){
            var container = item.children('.pixe-item-content');
            container.empty();
            container.append($.pixeGetItemPreviewArea('Post Content', '<svg width="28" height="28" viewBox="0 0 28 28" fill="none" ><path d="M6.479 21.5207H16.7707V19.1457H6.479V21.5207ZM6.479 15.1873H21.5207V12.8123H6.479V15.1873ZM6.479 8.854H21.5207V6.479H6.479V8.854ZM3.40377 27.4582C2.60393 27.4582 1.92692 27.1811 1.37275 26.6269C0.818587 26.0728 0.541504 25.3957 0.541504 24.5959V3.40377C0.541504 2.60393 0.818587 1.92692 1.37275 1.37275C1.92692 0.818587 2.60393 0.541504 3.40377 0.541504H24.5959C25.3957 0.541504 26.0728 0.818587 26.6269 1.37275C27.1811 1.92692 27.4582 2.60393 27.4582 3.40377V24.5959C27.4582 25.3957 27.1811 26.0728 26.6269 26.6269C26.0728 27.1811 25.3957 27.4582 24.5959 27.4582H3.40377ZM3.40377 25.0832H24.5959C24.7178 25.0832 24.8294 25.0324 24.9308 24.9308C25.0324 24.8294 25.0832 24.7178 25.0832 24.5959V3.40377C25.0832 3.28186 25.0324 3.17023 24.9308 3.0689C24.8294 2.9673 24.7178 2.9165 24.5959 2.9165H3.40377C3.28186 2.9165 3.17023 2.9673 3.0689 3.0689C2.9673 3.17023 2.9165 3.28186 2.9165 3.40377V24.5959C2.9165 24.7178 2.9673 24.8294 3.0689 24.9308C3.17023 25.0324 3.28186 25.0832 3.40377 25.0832Z" fill="#B8B8B8"/></svg>'));
        }
     });

    // title
    $.pixeRegisterElementRenderer('title', function(item, type){
        switch(type){
            case 'background':
                break;
            default:
                var container = item.children('.pixe-item-content');
                container.off().empty();
                container.append($.pixeInlineContent.get({
                    slug: 'title',
                    type: 'title',
                    item: item
                }));
                break;
        }

        pixeSetTextBoxStyle(item);
    });

    // text box
    $.pixeRegisterElementRenderer('text-box', function(item, type){

        switch(type){
            case 'background':
                break;
            default:
                var container = item.children('.pixe-item-content');
                container.off().empty();
                container.append($.pixeInlineContent.get({
                    slug: 'content', 
                    type: 'content',
                    item: item
                }));
                break;
        }

        pixeSetTextBoxStyle(item);

    });
    function pixeSetTextBoxStyle(item){
        var settings = item.data('settings');
        var id = '.pixe-item[data-id="' + settings._id + '"]';
        var css = '', tabletCss = '', mobileCss = '';

        var background = settings['background']? settings['background']: {};
        
        // style
        function getCss(device = ''){
            var ret = '';

            ret += $.pixeSetCss(id, {
                'background': background[device + 'color'],
                'border': background[device + 'border'],
                'shadow': background[device + 'shadow'],
                'custom': $.pixeBgColorFilterCss(background, device)
            });

            // hover color
            ret += $.pixeSetCss($.pixeGetHoverSelector(id + ':hover', item), {
                'background': background[device + 'color-hover'],
                'border': background[device + 'border-hover'],
                'shadow': background[device + 'shadow-hover'],
            });

            return ret;
        }

        css += getCss('');
        tabletCss += getCss('tablet-');
        mobileCss += getCss('mobile-');

        // item css
        $.pixeAddCss(item, 'item',  css);
        $.pixeAddCss(item, 'item',  tabletCss, 'tablet');
        $.pixeAddCss(item, 'item',  mobileCss, 'mobile');

        $.pixeItem.renderCss(item);
    }

    // table of contents
    $.pixeRegisterElementRenderer('table-of-contents', pixeTOCRenderer);
    function pixeTOCRenderer(item, type, subtype){
        var container = item.children('.pixe-item-content');
        var renderHtml = false;

        switch(type){
            case 'item':
                renderHtml = true;

                container.off();
                container.on('click', '.pixe-tab-settings', function(){
                    var inlineSettings;
                    var inlineTarget = $(this).parent();
                    if( inlineTarget.hasClass('pixe-head') ){
                        inlineSettings = pixeGetTOCSettings(item);
                    }else if( inlineTarget.hasClass('pixe-content') ){
                        inlineSettings = pixeGetTOCContentSettings(item);
                    }

                    new $.pixeStyleSettings({
                        target: inlineTarget,
                        content: inlineSettings
                    });
                });
                break;
            
            case 'title-layout':
            case 'title-icon':
                renderHtml = true;
                break;

            case 'content-layout': 
                if( ['style', 'hierarchy', 'collapse', 'tags', 'included-class', 'excluded-class'].indexOf(subtype) >= 0 ){
                    renderHtml = true;
                }
                break;
        }

        // render
        if( renderHtml ){
            var settings = item.data('settings');
            var titleIcon = settings['title-icon']? settings['title-icon']: {};
            $.pixeAddIconDependency(item, [titleIcon.icon]);

            $.pixeItem.renderAjax(item, container, {
                onUpdate: function(){
                    container.pixeTableOfContents();
                    container.find('.pixe-table-of-contents .pixe-head').append('<div class="pixe-tab-settings" ><div class="pixe-svg-preset pixe-svg-tab-settings"></div></div>');
                    container.find('.pixe-table-of-contents .pixe-content').append('<div class="pixe-tab-settings" ><div class="pixe-svg-preset pixe-svg-tab-settings"></div></div>');
                }
            });
        }
        pixeSetTOCStyle(item);
    }
    function pixeGetTOCContentSettings(item){
        var settings = item.data('settings');
        var content = $('<div class="pixe-ssettings" ></div>');
        var html = '';
        html += $.pixeGetAdminIcon('option-list', { class: 'pixe-action', data: 'data-action="content"' });
        html += $.pixeGetAdminIcon('option-spaces', { class: 'pixe-action', data: 'data-action="spaces"' });
        html += $.pixeGetAdminIcon('option-color', { class: 'pixe-action', data: 'data-action="bg"' });
        html += $.pixeGetAdminIcon('option-align-left', { class: 'pixe-action', data: 'data-action="align"' });
        html += '<div class="pixe-divider" ></div>';
        html += $.pixeGetAdminIcon('option-typo', { class: 'pixe-action', data: 'data-action="typo"' });
        html += '<div class="pixe-action" data-action="color" ><span class="pixe-color-display" ></span></div>';
        html += '<div class="pixe-divider" ></div>';
        html += $.pixeGetAdminIcon('settings', {class: 'pixe-settings pixe-item-action'});
        html += $.pixeGetAdminIcon('remove', {class: 'pixe-remove pixe-item-action'});
        content.append(html);

        var cd = settings.color? settings.color.color: undefined;
        $.pixeSetColorDisplay(content, {color: cd});

        // bind
        $.pixeStyleSettingsAction(item, content);
        content.on('click', '.pixe-action', function(){
            var settings = item.data('settings');
            var button = $(this);
            var action = $(this).attr('data-action');
            var itemHistory = new $.pixeEditHistory(item);

            if( action == 'align' ){ 
                var inlineSlug = 'content-align';
                $.pixeInlinePopup({
                    target: button,
                    options: 'alignment',
                    values: { alignment: settings[inlineSlug] },
                    onChange: function(slug, value){
                        $.pixeSetData(settings, inlineSlug, value);
                        itemHistory.onChange(inlineSlug);
                        pixeSetTOCStyle(item);
                    }
                });
            }else{
                var ssType, ssSlug, ssTitle;
                switch( action ){
                    case 'typo':
                        ssSlug = 'content-typo';
                        ssType = 'typography';
                        break;
                    case 'content':
                        ssSlug = 'content-layout';
                        ssType = 'toc-content';
                        break;
                    case 'spaces':
                        ssSlug = 'content-spaces';
                        ssType = 'spacing';
                        break;
                    case 'color': 
                        ssSlug = 'content-color';
                        ssType = 'toc-content-color';
                        break;
                    case 'bg':
                        ssSlug = 'content-bg';
                        ssType = 'text-box-bg-style';
                        break;
                }

                new $.pixeStyleSelector({
                    obj: settings,
                    slug: ssSlug,
                    target: button, 
                    targetArea: item.find('.pixe-table-of-contents .pixe-content'),
                    type: ssType,
                    title: ssTitle,
                    onChange: function(value, type){
                        itemHistory.onChange(ssSlug);
                        pixeTOCRenderer(item, ssSlug, type);

                        if( ssSlug == 'color' ){
                            cd = settings.color? settings.color.color: undefined;
                            $.pixeSetColorDisplay(content, {color: cd});
                        }
                    }
                });
            }      
        });

        return content;
    }
    function pixeGetTOCSettings(item){

        // create element
        var settings = item.data('settings');
        var content = $('<div class="pixe-ssettings" ></div>');
        var html = '';
        html += $.pixeGetAdminIcon('option-list', { class: 'pixe-action', data: 'data-action="layout"' });
        html += $.pixeGetAdminIcon('option-icon', { class: 'pixe-action', data: 'data-action="icon"' });
        html += $.pixeGetAdminIcon('option-spaces', { class: 'pixe-action', data: 'data-action="spaces"' });
        html += $.pixeGetAdminIcon('option-color', { class: 'pixe-action', data: 'data-action="bg"' });
        html += $.pixeGetAdminIcon('option-align-left', { class: 'pixe-action', data: 'data-action="align"' });
        html += '<div class="pixe-divider" ></div>';
        html += $.pixeGetAdminIcon('option-typo', { class: 'pixe-action', data: 'data-action="typo"' });
        html += '<div class="pixe-action" data-action="color" ><span class="pixe-color-display" ></span></div>';
        html += '<div class="pixe-divider" ></div>';
        html += $.pixeGetAdminIcon('settings', {class: 'pixe-settings pixe-item-action'});
        html += $.pixeGetAdminIcon('remove', {class: 'pixe-remove pixe-item-action'});
        content.append(html);

        var cd = settings.color? settings.color.color: undefined;
        $.pixeSetColorDisplay(content, {color: cd});

        // bind
        $.pixeStyleSettingsAction(item, content);
        content.on('click', '.pixe-action', function(){
            var settings = item.data('settings');
            var button = $(this);
            var action = $(this).attr('data-action');
            var itemHistory = new $.pixeEditHistory(item);

            if( action == 'align' ){ 
                var inlineSlug = 'title-align';
                $.pixeInlinePopup({
                    target: button,
                    options: 'alignment',
                    values: { alignment: settings[inlineSlug] },
                    onChange: function(slug, value){
                        $.pixeSetData(settings, inlineSlug, value);
                        itemHistory.onChange(inlineSlug);
                        pixeSetTOCStyle(item);
                    }
                });
            }else{
                var ssType, ssSlug, ssTitle;
                switch( action ){
                    case 'typo':
                        ssSlug = 'title-typo';
                        ssType = 'typography';
                        break;
                    case 'layout':
                        ssSlug = 'title-layout';
                        ssType = 'toc-layout';
                        break;
                    case 'icon':
                        ssSlug = 'title-icon';
                        ssType = 'link-icon';
                        break;
                    case 'spaces':
                        ssSlug = 'title-spaces';
                        ssType = 'spacing';
                        break;
                    case 'color': 
                        ssTitle = 'Text Color Settings';
                        ssSlug = 'title-color';
                        ssType = 'button-text-color';
                        break;
                    case 'bg':
                        ssSlug = 'title-bg';
                        ssType = 'button-background-nm';
                        break;
                }

                new $.pixeStyleSelector({
                    obj: settings,
                    slug: ssSlug,
                    target: button, 
                    targetArea: item.find('.pixe-table-of-contents .pixe-head'),
                    type: ssType,
                    title: ssTitle,
                    onChange: function(value, type){
                        itemHistory.onChange(ssSlug);
                        pixeTOCRenderer(item, ssSlug, type);

                        if( ssSlug == 'color' ){
                            cd = settings.color? settings.color.color: undefined;
                            $.pixeSetColorDisplay(content, {color: cd});
                        }
                    }
                });
            }      
        });

        return content;
    }
    function pixeSetTOCStyle(item){
        var settings = item.data('settings');
        var id = '[data-id="' + settings._id + '"]';
        var css = '', tabletCss = '', mobileCss = '';
        
        var titleIcon = settings['title-icon']? settings['title-icon']: {};
        var titleBg = settings['title-bg']? settings['title-bg']: {};
        var titleColor = settings['title-color']? settings['title-color']: {};
        var titleSpaces = settings['title-spaces']? settings['title-spaces']: {};
        var contentLayout = settings['content-layout']? settings['content-layout']: {};
        var contentSpaces = settings['content-spaces']? settings['content-spaces']: {};
        var contentColor = settings['content-color']? settings['content-color']: {};
        var contentBg = settings['content-bg']? settings['content-bg']: {};

        function getCss(device = ''){
            var ret = '';

            // head style
            ret += $.pixeSetCss(id + ' .pixe-head', { 
                'justify-content': settings[device + 'title-align'],
                'gap': titleIcon[device + 'gap'],
                'padding': titleSpaces[device + 'padding'],
                'margin': titleSpaces[device + 'margin'],
                'background': titleBg[device + 'color'],
                'border': titleBg[device + 'border'],
                'shadow': titleBg[device + 'shadow'],
                'custom': $.pixeGetTextColorCss(titleColor, device) + $.pixeTypoStyle.getPresetCss(settings['title-typo'], device),
            });
            ret += $.pixeSetCss(id + ' .pixe-head:hover', { 
                'background': titleBg[device + 'color-hover'],
                'border': titleBg[device + 'border-hover'],
                'shadow': titleBg[device + 'shadow-hover'],
                'custom': $.pixeGetTextColorCss(titleColor, device, '-hover')
            });
            ret += $.pixeSetCss(id + ' .pixe-table-of-contents.pixe-active .pixe-head', { 
                'background': titleBg[device + 'color-active'],
                'border': titleBg[device + 'border-active'],
                'shadow': titleBg[device + 'shadow-active'],
                'custom': $.pixeGetTextColorCss(titleColor, device, '-active')
            });
            ret += $.pixeSetCss(id + ' .pixe-head .pixe-icon', {
                'font-size': titleIcon[device + 'width'],
                'color': titleIcon[device + 'color'],
                'fill': titleIcon[device + 'color'],
                'order': titleIcon[device + 'position'] == 'left'? '-1': '',
                'transform': { y: titleIcon[device + 'v-offset'] }
            });
            ret += $.pixeSetCss(id + '.pixe-head .pixe-icon.pixe-type-image, ' + id + ' .pixe-head .pixe-icon.pixe-type-svg', {
                'width': titleIcon[device + 'width'],
            });

            // content style
            ret += $.pixeSetCss(id + ' .pixe-content', {
                'text-align': settings['content-align'],
                'padding': contentSpaces[device + 'padding'],
                'margin': contentSpaces[device + 'margin'],
                'background': contentBg[device + 'color'],
                'border': contentBg[device + 'border'],
                'shadow': contentBg[device + 'shadow'],
                'color': contentColor[device + 'text'],
                'custom': $.pixeTypoStyle.getPresetCss(settings['content-typo'], device)
            });
            ret += $.pixeSetCss(id + ' .pixe-content a', {
                'custom': $.pixeGetTextColorCss(contentColor, device)
            });
            ret += $.pixeSetCss(id + ' .pixe-content a:hover', {
                'custom': $.pixeGetTextColorCss(contentColor, device, '-hover')
            });
            ret += $.pixeSetCss(id + ' ul, ' + id + ' ol ol' , {
                'margin-left': contentLayout['hierarchy-indent']
            });
            ret += $.pixeSetCss(id + ' li' , {
                'margin-bottom': contentLayout['line-spacing']
            });
            ret += $.pixeSetCss(id + ' li ul, ' + id + ' li ol' , {
                'margin-top': contentLayout['line-spacing']
            });
            
            return ret;
        }

        css += getCss('');
        tabletCss += getCss('tablet-');
        mobileCss += getCss('mobile-');

        // typo preset
        $.pixeTypoStyle.setPresetData(item.find('.pixe-table-of-contents .pixe-head'), settings['title-typo']);
        $.pixeTypoStyle.setPresetData(item.find('.pixe-table-of-contents .pixe-content'), settings['content-typo']);
        $.pixeAddTypoDependency(item, [settings['title-typo'], settings['content-typo']]);

        // item css
        $.pixeAddCss(item, 'item',  css);
        $.pixeAddCss(item, 'item',  tabletCss, 'tablet');
        $.pixeAddCss(item, 'item',  mobileCss, 'mobile');

        $.pixeItem.renderCss(item);
    }

    // widget
    $.pixeRegisterElementRenderer('widget', function(item, type){
        var container = item.children('.pixe-item-content');
        
        if( type == 'item' ){
            container.empty().off();
            container.append($.pixeGetItemPreviewArea('Widget', '<svg width="28" height="28" viewBox="0 0 28 28" fill="none" ><path d="M6.479 21.5207H16.7707V19.1457H6.479V21.5207ZM6.479 15.1873H21.5207V12.8123H6.479V15.1873ZM6.479 8.854H21.5207V6.479H6.479V8.854ZM3.40377 27.4582C2.60393 27.4582 1.92692 27.1811 1.37275 26.6269C0.818587 26.0728 0.541504 25.3957 0.541504 24.5959V3.40377C0.541504 2.60393 0.818587 1.92692 1.37275 1.37275C1.92692 0.818587 2.60393 0.541504 3.40377 0.541504H24.5959C25.3957 0.541504 26.0728 0.818587 26.6269 1.37275C27.1811 1.92692 27.4582 2.60393 27.4582 3.40377V24.5959C27.4582 25.3957 27.1811 26.0728 26.6269 26.6269C26.0728 27.1811 25.3957 27.4582 24.5959 27.4582H3.40377ZM3.40377 25.0832H24.5959C24.7178 25.0832 24.8294 25.0324 24.9308 24.9308C25.0324 24.8294 25.0832 24.7178 25.0832 24.5959V3.40377C25.0832 3.28186 25.0324 3.17023 24.9308 3.0689C24.8294 2.9673 24.7178 2.9165 24.5959 2.9165H3.40377C3.28186 2.9165 3.17023 2.9673 3.0689 3.0689C2.9673 3.17023 2.9165 3.28186 2.9165 3.40377V24.5959C2.9165 24.7178 2.9673 24.8294 3.0689 24.9308C3.17023 25.0324 3.28186 25.0832 3.40377 25.0832Z" fill="#B8B8B8"/></svg>'));
            container.on('click', function(){
                new $.pixeStyleSettings({
                    target: $(this),
                    content: pixeWidgetSettings(item)
                });
            });
        }
    });
    function pixeWidgetSettings(item){
        var settings = item.data('settings');

        // create element
        var content = $('<div class="pixe-ssettings" ></div>');
        var html = '';
        html += $.pixeCombobox({
            slug: 'widget',
            width: 140,
            placeholder: 'Select Widget',
            value: settings['widget']
        });
        html += $.pixeGetAdminIcon('option-spaces', { class: 'pixe-action', data: 'data-action="spaces"' });
        html += '<div class="pixe-divider" ></div>';
        html += $.pixeGetAdminIcon('settings', {class: 'pixe-settings pixe-item-action'});
        html += $.pixeGetAdminIcon('remove', {class: 'pixe-remove pixe-item-action'});
        content.append(html);

        // combobox
        $.pixeComboboxCallback('widget', content);
        content.pixeCombobox();
        content.on('change', '.pixe-combobox', function(){
            var slug = $(this).attr('data-slug');
            var value = $(this).data('value');

            var settings = item.data('settings');
            var itemHistory = new $.pixeEditHistory(item);
            $.pixeSetData(settings, slug, value);
            itemHistory.onChange(slug);
        });

        // bind
        $.pixeStyleSettingsAction(item, content);
        content.on('click', '.pixe-action', function(){
            var button = $(this);
            var action = $(this).attr('data-action');

            if( action == 'spaces' ){
                $.pixeSpacingPopup(item, {
                    type: 'tbpdpx',
                    button: button,
                    onChange: function(type){
                        $.pixeItem.renderStyle(item, type);
                    }
                });
            }
        });

        return content;
    }

    // icon
    $.pixeRegisterElementRenderer('icon', pixeIconRenderer);
    function pixeIconRenderer(item, type){
        var container = item.children('.pixe-item-content');
        var settings = item.data('settings');
        var iconData = settings.icon? settings.icon: {};
        var icon = iconData.icon? iconData.icon: '';
        
        function setIcon(){
            container.empty();

            var iconHtml = $.pixeGetIcon(icon);
            container.append(iconHtml);

            $.pixeAddIconDependency(item, [icon]);
        }

        switch(type){
            case 'item':
                item.addClass('pixe-type-button');
                
                setIcon();
                container.off().on('click', function(){
                    new $.pixeStyleSettings({
                        target: $(this),
                        content: pixeGetIconSettings(item)
                    });
                });
                break;

            case 'icon':
                setIcon();
                break;
        }

        // update style
        pixeSetIconStyle(item);
    }
    function pixeGetIconSettings(item){
        
        // create element
        var content = $('<div class="pixe-ssettings" ></div>');
        var html = '';
        html += $.pixeGetAdminIcon('option-icon', { class: 'pixe-action', data: 'data-action="icon"' });
        html += $.pixeGetAdminIcon('option-link', { class: 'pixe-action', data: 'data-action="link"' });
        html += $.pixeGetAdminIcon('option-align-left', { class: 'pixe-action', data: 'data-action="align"' });
        html += $.pixeGetAdminIcon('option-spaces', { class: 'pixe-action', data: 'data-action="spaces"' });
        html += $.pixeGetAdminIcon('option-color', { class: 'pixe-action', data: 'data-action="background"' });
        html += '<div class="pixe-divider" ></div>';
        html += $.pixeGetAdminIcon('settings', {class: 'pixe-settings pixe-item-action'});
        html += $.pixeGetAdminIcon('remove', {class: 'pixe-remove pixe-item-action'});
        content.append(html);

        // bind
        $.pixeStyleSettingsAction(item, content);
        content.on('click', '.pixe-action', function(){
            var settings = item.data('settings');
            var button = $(this);
            var action = $(this).attr('data-action');
            var itemHistory = new $.pixeEditHistory(item);

            if( action == 'align' ){ 
                var inlineSlug = 'alignment';
                $.pixeInlinePopup({
                    target: button,
                    options: 'alignment',
                    values: { alignment: settings[inlineSlug] },
                    onChange: function(slug, value){
                        $.pixeSetData(settings, inlineSlug, value);
                        itemHistory.onChange(inlineSlug);
                        pixeSetIconStyle(item);
                    }
                });

            }else{

                var ssType, ssSlug;
                switch( action ){
                    case 'icon':
                        ssSlug = 'icon';
                        ssType = 'icon-item-settings';
                        break;
                    case 'link':
                        ssSlug = 'link';
                        ssType = 'button-link';
                        break;
                    case 'background':
                        ssSlug = 'background';
                        ssType = 'button-link-background';
                        break;
                    case 'spaces':
                        ssSlug = 'spaces';
                        ssType = 'icon-item-spaces';
                        break;
                }

                new $.pixeStyleSelector({
                    obj: settings,
                    slug: ssSlug,
                    target: button, 
                    targetArea: item.children('.pixe-item-content'),
                    type: ssType,
                    onChange: function(value, type){
                        itemHistory.onChange(ssSlug);

                        if( ssSlug == 'icon' ){
                            pixeIconRenderer(item, ssSlug, type);
                        }else{
                            pixeSetIconStyle(item);
                        }
                    }
                });
            }      
        });

        return content;
    }
    function pixeSetIconStyle(item){
        var settings = item.data('settings');
        var id = '[data-id="' + settings._id + '"]';
        var css = '', tabletCss = '', mobileCss = '';

        var iconData = settings['icon']? settings['icon']: {};
        var background = settings['background']? settings['background']: {};
        var spaces = settings['spaces']? settings['spaces']: {};

        // style
        function getCss(device = ''){
            var ret = '';
            
            ret += $.pixeSetCss('.pixe-item' + id, {
                'justify-content': settings[device + 'alignment']
            });
            ret += $.pixeSetCss(id + ' .pixe-icon', {
                'display': device? '': 'block',
                'font-size': iconData[device + 'width'], 
                'padding': spaces[device + 'padding'],
                'background': background[device + 'color'],
                'border': background[device + 'border'],
                'shadow': background[device + 'shadow'],
                'color': iconData[device + 'color'],
                'custom': $.pixeBgColorFilterCss(background, device)
            });
            ret += $.pixeSetCss(id + ' .pixe-icon.pixe-type-image, ' + id + ' .pixe-icon.pixe-type-svg', {
                'width': iconData[device + 'width'],
            });
            ret += $.pixeSetCss($.pixeGetHoverSelector(id + ' .pixe-icon:hover', item), {
                'background': background[device + 'color-hover'],
                'border': background[device + 'border-hover'],
                'shadow': background[device + 'shadow-hover'],
                'color': iconData[device + 'color-hover']
            });
            
            return ret;
        }

        css += getCss('');
        tabletCss += getCss('tablet-');
        mobileCss += getCss('mobile-');

        // item css
        $.pixeAddCss(item, 'item',  css);
        $.pixeAddCss(item, 'item',  tabletCss, 'tablet');
        $.pixeAddCss(item, 'item',  mobileCss, 'mobile');

        // lightbox dependency
        var link = settings['link']? settings['link']: {};
        $.pixeAddLightboxDependency(item, link['link-to']);
        $.pixeAddPopupDependency(item, link['link-to'], link['popup']);

        $.pixeItem.renderCss(item);
    } 

    // spacer
    $.pixeRegisterElementRenderer('spacer', function(item, type){
        var container = item.children('.pixe-item-content');

        if( type == 'item' ){
            container.off().empty();

            var html  = '<div class="pixe-spacer-handler" >';
                html += '<input type="text" />';
                html += '<div class="pixe-resize" >';
                html += '<div class="pixe-action pixe-plus" ><svg width="10" height="6" viewBox="0 0 10 6" ><path d="M7.98892 5.66672L5.00075 2.67855L2.0126 5.66672C1.68716 5.99214 1.15953 5.99214 0.834087 5.66672C0.508653 5.34122 0.508653 4.81364 0.834087 4.48814L4.4115 0.910762C4.56775 0.754487 4.77975 0.666687 5.00075 0.666687C5.22175 0.666687 5.43375 0.754487 5.59 0.910762L9.16742 4.48814C9.49284 4.81364 9.49284 5.34122 9.16742 5.66672C8.842 5.99214 8.31434 5.99214 7.98892 5.66672Z" fill="#797979"/></svg></div>';
                html += '<div class="pixe-action pixe-minus" ><svg width="10" height="6" viewBox="0 0 10 6" ><path d="M2.01422 0.333344L5.00241 3.32151L7.99058 0.333344C8.316 0.00794441 8.84358 0.00794441 9.16908 0.333344C9.20975 0.374094 9.24533 0.417928 9.27583 0.464095C9.48941 0.787595 9.45383 1.22718 9.16908 1.51193L5.59166 5.08934C5.43533 5.24559 5.22341 5.33334 5.00241 5.33334C4.78133 5.33334 4.56941 5.24559 4.41316 5.08934L0.835704 1.51193C0.510271 1.18643 0.510271 0.658844 0.835704 0.333344C0.876387 0.292703 0.920229 0.257111 0.966437 0.226603C1.2899 0.0130362 1.72946 0.0486278 2.01422 0.333344Z" fill="#797979"/></svg></div>';
                html += '</div>';
                html += '<div class="pixe-action pixe-plus-5" >+5 px</div>';
                html += '<div class="pixe-action pixe-minus-5" >-5 px</div>';
                html += '</div>';
            var handler = $(html);
            pixeBindSpacerHandler(item, handler);

            container.append(handler);
        }

        pixeSpacerStyle(item)
    });
    function pixeBindSpacerHandler(item, handler){

        var isMove = false;

        // get height from the diff
        function setHeight(diff, onChange = true){
            if( !$.pixeInlineContent.editTarget || !$.pixeInlineContent.editTarget.is(item) ){ 
                $.pixeInlineContent.editTarget = item;
                $.pixeInlineContent.editHistory = new $.pixeEditHistory(item); 
            }

            var height = handler.outerHeight();

            if( diff < -10 ){ 
                diff = -10; 
            }else if( diff > 10 ){
                diff = 10;
            }
            
            height += diff;
            if( height < 5 ){
                height = '5px';
            }else if( height > 1000 ){
                height = '1000px';
            }else{
                height = height + 'px';
            }

            setHeightVal(height, onChange);
        }
        function setHeightVal(height, onChange = true){
            var slug = ($.pixeEditor.viewport == 'desktop')? 'height': $.pixeEditor.viewport + '-height';
            var settings = item.data('settings');
            var spaces = settings.spaces? settings.spaces: {};
            spaces[slug] = height;
            
            $.pixeSetData(settings, 'spaces', spaces);
            pixeSpacerStyle(item);

            if( onChange ){
                $.pixeInlineContent.editHistory.onChange('spaces');
            }
        }

        // click event
        handler.on('click keydown change', function(e){
            if( e.type == 'click' ){
                var target = $(e.target).closest('.pixe-action');

                if( target.length ){
                    if( target.hasClass('pixe-plus') ){
                        setHeight(1);
                    }else if( target.hasClass('pixe-minus') ){
                        setHeight(-1);
                    }else if( target.hasClass('pixe-plus-5') ){
                        setHeight(5);
                    }else if( target.hasClass('pixe-minus-5') ){
                        setHeight(-5);
                    }
                }else{
                    if( !isMove ){
                        new $.pixeStyleSettings({
                            target: $(this),
                            content: pixeSpacerSettings(item)
                        });
                    }
                }
            }else if( e.type == 'keydown' ){
                var target = $(e.target);
                if( target.is('input[type="text"]') ){
                    if( e.keyCode == 38 ){
                        if( e.shiftKey ){
                            setHeight(10);
                        }else{
                            setHeight(1);
                        }
                    }else if( e.keyCode == 40 ){
                        if( e.shiftKey ){
                            setHeight(-10);
                        }else{
                            setHeight(-1);
                        }
                    }else{
                        return;
                    }
                }
            }else if( e.type == 'change' ){
                var target = $(e.target);
                setHeightVal(target.val());
            }
        });

        // drag resize
        handler.on('mousedown', function(e){
            if( e.buttons != 1 || $(e.target).is('.pixe-action, input') || $(e.target).parent('.pixe-action').length ) return;

            var lastPos = e.pageY;
            isMove = false;
            item.addClass('pixe-focus');
            $(document.body).addClass('pixe-no-user-select');

            // bind move event
            function resizeHeight(e){
                e.preventDefault();

                // if move
                var diff = e.pageY - lastPos;
                if( diff != 0 ){
                    isMove = true;
                    lastPos = e.pageY;
                    setHeight(diff, true);
                }

                // unbind event after finish
                if( e.buttons != 1 ){
                    item.removeClass('pixe-focus');
                    $(document.body).removeClass('pixe-disable-user-select');
                    $(document.body).off('mousemove mouseup', resizeHeight);
                }
            }
            $(document.body).on('mousemove mouseup', resizeHeight);
        });
    }
    function pixeSpacerSettings(item){
        var content = $('<div class="pixe-ssettings" ></div>');
        var html = '';
        html += $.pixeGetAdminIcon('option-spaces', { class: 'pixe-action', data: 'data-action="spaces"' });
        html += '<div class="pixe-divider" ></div>';
        html += $.pixeGetAdminIcon('settings', {class: 'pixe-settings pixe-item-action'});
        html += $.pixeGetAdminIcon('remove', {class: 'pixe-remove pixe-item-action'});
        content.append(html);

        // bind
        $.pixeStyleSettingsAction(item, content);
        content.on('click', '.pixe-action', function(){
            var settings = item.data('settings');
            var button = $(this);
            var itemHistory = new $.pixeEditHistory(item);

            var ssType = 'spacer-settings';
            var ssSlug = 'spaces';

            new $.pixeStyleSelector({
                obj: settings,
                slug: ssSlug,
                target: button, 
                targetArea: item.children('.pixe-item-content'),
                type: ssType,
                onChange: function(value, type){
                    itemHistory.onChange(ssSlug);
                    pixeSpacerStyle(item);
                }
            });
        });

        return content;
    }
    function pixeSpacerStyle(item){
        var settings = item.data('settings');
        var spaces = settings.spaces? settings.spaces: {};
        var id = '[data-id="' + settings._id + '"]';
        var css = '', tabletCss = '', mobileCss = '';

        function getCss(device){
            var ret = '';

            ret += $.pixeSetCss(id, {
                'height': spaces[device + 'height']
            });

            return ret;
        }

        css += getCss('');
        tabletCss += getCss('tablet-');
        mobileCss += getCss('mobile-');

        // item css
        $.pixeAddCss(item, 'item',  css);
        $.pixeAddCss(item, 'item',  tabletCss, 'tablet');
        $.pixeAddCss(item, 'item',  mobileCss, 'mobile');
        
        $.pixeItem.renderCss(item);

        // handler input
        var slug = ($.pixeEditor.viewport == 'desktop')? 'height': $.pixeEditor.viewport + '-height';
        if( spaces[slug] ){
            item.find('.pixe-spacer-handler input[type="text"]').val(spaces[slug]);
        }
        
    }

    // progress bar
    $.pixeRegisterElementRenderer('progress-bar', pixeProgressBarRenderer);
    function pixeProgressBarRenderer(item, type, subtype){
        var container = item.children('.pixe-item-content');

        function getHtml(){
            var settings = item.data('settings');
            var progress = settings.progress? settings.progress: {};
            var type = progress.type? progress.type: 'outer';
            var percent = progress.percent? parseFloat(progress.percent): '75';

            var title  = '<div class="pixe-title" >';
                if( progress.text ){
                    title += '<span class="pixe-head" >' + progress.text + '</span>';
                }
                if( !progress['display-percent'] ){
                    title += '<span class="pixe-tail" >' + percent + '%</span>';
                }
                title += '</div>';

            var html  = '<div class="pixe-progress-bar pixe-type-' + type + ' pixe-active" >';
                html += title;
                html += '<div class="pixe-track" >';
                html += '<div class="pixe-percent" >';
                html += '</div>';
                html += '</div>';
                html += '</div>';
            var progress = $(html);
            container.empty().append(progress);
        }

        switch(type){
            case 'item':
                getHtml();
                
                container.off().on('click', function(){
                    new $.pixeStyleSettings({
                        target: $(this),
                        content: pixeGetProgressBarSettings(item)
                    });
                });
                break;
            
            case 'progress':
                if( ['text', 'type', 'percent', 'display-percent'].indexOf(subtype) >= 0 ){
                    getHtml();
                }
                break;
        }

        pixeSetProgressBarStyle(item);
    }
    function pixeGetProgressBarSettings(item){

        // create element
        var content = $('<div class="pixe-ssettings" ></div>');
        var html = '';
        html += $.pixeGetAdminIcon('option-divider', { class: 'pixe-action', data: 'data-action="bar"' });
        html += $.pixeGetAdminIcon('option-color', { class: 'pixe-action', data: 'data-action="background"' });
        html += '<div class="pixe-divider" ></div>';
        html += $.pixeGetAdminIcon('option-typo', { class: 'pixe-action', data: 'data-action="typo"' });
        html += '<div class="pixe-action" data-action="color" ><span class="pixe-color-display" ></span></div>';
        html += '<div class="pixe-divider" ></div>';
        html += $.pixeGetAdminIcon('settings', {class: 'pixe-settings pixe-item-action'});
        html += $.pixeGetAdminIcon('remove', {class: 'pixe-remove pixe-item-action'});
        content.append(html);

        // bind
        $.pixeStyleSettingsAction(item, content);
        content.on('click', '.pixe-action', function(){
            var settings = item.data('settings');
            var button = $(this);
            var action = $(this).attr('data-action');
            var itemHistory = new $.pixeEditHistory(item);

            if( action == 'typo' ){
                new $.pixeStyleSelector({
                    obj: settings,
                    slug: 'typo',
                    target: button, 
                    targetArea: item.children('.pixe-item-content'),
                    type: 'typography',
                    title: 'Typo Settings',
                    typoGroup: {
                        'title': 'Title',
                        'percent': 'Percentage',
                    },
                    onChange: function(value, type){
                        itemHistory.onChange('typo');
                        pixeSetProgressBarStyle(item, 'typo')
                    }
                });

            }else{
                var ssType, ssSlug;
                
                switch(action){
                    case 'bar':
                        ssSlug = 'progress';
                        ssType = 'progress-bar-settings';
                        break;
                    case 'background':
                        ssSlug = 'background';
                        ssType = 'progress-bar-color';
                        break;
                    case 'color':
                        ssSlug = 'color';
                        ssType = 'progress-bar-text-color';
                        break;
                }

                new $.pixeStyleSelector({
                    obj: settings,
                    slug: ssSlug,
                    target: button, 
                    targetArea: item.children('.pixe-item-content'),
                    type: ssType,
                    onChange: function(value, type){
                        itemHistory.onChange(ssSlug);
                        pixeProgressBarRenderer(item, ssSlug, type);
                    }
                });
            }      
        });

        return content

    }
    function pixeSetProgressBarStyle(item){
        var container = item.children('.pixe-item-content');
        var settings = item.data('settings');
        var id = '[data-id="' + settings._id + '"]';
        var css = '', tabletCss = '', mobileCss = '';
        
        var progress = settings.progress? settings.progress: {};
        var background = settings.background? settings.background: {};
        var color = settings.color? settings.color: {};
        var typo = settings.typo? settings.typo: {};

        function getCss(device){
            var ret = '';

            // outer
            if( !progress.type ){
                ret += $.pixeSetCss(id + ' .pixe-progress-bar .pixe-title', {
                    'margin-bottom': progress[device + 'gap']
                });
                ret += $.pixeSetCss(id + ' .pixe-progress-bar .pixe-track', {
                    'height': progress[device + 'height'],
                    'background': background[device + 'bar-bg']
                });
                ret += $.pixeSetCss(id + ' .pixe-progress-bar .pixe-percent', {
                    'background': background[device + 'bar']
                });

            // inner
            }else{
                ret += $.pixeSetCss(id + ' .pixe-progress-bar .pixe-title', {
                    'padding': progress[device + 'padding']
                });
                ret += $.pixeSetCss(id + ' .pixe-progress-bar .pixe-track', {
                    'background': background[device + 'bar-bg']
                });
                ret += $.pixeSetCss(id + ' .pixe-progress-bar .pixe-percent', {
                    'background': background[device + 'bar']
                });
            }

            if( !device ){
                ret += $.pixeSetCss(id + ' .pixe-progress-bar.pixe-active .pixe-percent,' + id + ' .pixe-progress-bar.pixe-type-inner .pixe-title', {
                    'width': progress['percent']? (progress['percent'] + '%'): ''
                });
                ret += $.pixeSetCss(id + ' .pixe-progress-bar .pixe-title .pixe-head', {
                    'color': color['title']
                });
                ret += $.pixeSetCss(id + ' .pixe-progress-bar .pixe-title .pixe-tail', {
                    'color': color['percent']
                });
            }

            ret += $.pixeSetCss(id + ' .pixe-title .pixe-head', {
                'custom': $.pixeTypoStyle.getPresetCss(typo.title, device)
            });
            ret += $.pixeSetCss(id + ' .pixe-title .pixe-tail', {
                'custom': $.pixeTypoStyle.getPresetCss(typo.percent, device)
            });
            
            return ret;
        }

        css += getCss('');
        tabletCss += getCss('tablet-');
        mobileCss += getCss('mobile-');

        // typo preset
        $.pixeTypoStyle.setPresetData(container.find('.pixe-head'), typo.title);
        $.pixeTypoStyle.setPresetData(container.find('.pixe-tail'), typo.percent);
        $.pixeAddTypoDependency(item, [typo.title, typo.percent]);

        // item css
        $.pixeAddCss(item, 'item',  css);
        $.pixeAddCss(item, 'item',  tabletCss, 'tablet');
        $.pixeAddCss(item, 'item',  mobileCss, 'mobile');

        $.pixeItem.renderCss(item);
    }

    // divider
    $.pixeRegisterElementRenderer('divider', function(item, type){
        switch(type){
            case 'item':
                item.off('click', pixeBindDivider).on('click', pixeBindDivider);
                break;
        }

        pixeSetDividerStyle(item);
    });
    function pixeBindDivider(){
        var item = $(this);
        
        new $.pixeStyleSettings({
            target: item,
            content: pixeGetDividerSettings(item)
        });
    }
    function pixeGetDividerSettings(item){

        // create element
        var content = $('<div class="pixe-ssettings" ></div>');
        var html = '';
        html += $.pixeGetAdminIcon('option-divider', { class: 'pixe-action', data: 'data-action="divider"' });
        html += $.pixeGetAdminIcon('option-extra-text', { class: 'pixe-action', data: 'data-action="text"' });
        html += '<div class="pixe-divider" ></div>';
        html += $.pixeGetAdminIcon('settings', {class: 'pixe-settings pixe-item-action'});
        html += $.pixeGetAdminIcon('remove', {class: 'pixe-remove pixe-item-action'});
        content.append(html);

        // bind
        $.pixeStyleSettingsAction(item, content);
        content.on('click', '.pixe-action', function(){
            var settings = item.data('settings');
            var button = $(this);
            var action = $(this).attr('data-action');
            var itemHistory = new $.pixeEditHistory(item);

            var ssType, ssSlug;
            switch(action){
                case 'divider':
                    ssSlug = 'divider';
                    ssType = 'divider-settings';
                    break;
                case 'text':
                    ssSlug = 'text';
                    ssType = 'divider-text';
                    break;
            }
            
            new $.pixeStyleSelector({
                obj: settings,
                slug: ssSlug,
                target: button, 
                targetArea: item.children('.pixe-item-content'),
                type: ssType,
                onChange: function(value, type){
                    itemHistory.onChange(ssSlug);
                    pixeSetDividerStyle(item, ssSlug, type);
                }
            }); 
        });

        return content
    }
    function pixeSetDividerStyle(item){
        var container = item.children('.pixe-item-content');
        var settings = item.data('settings');
        var id = '[data-id="' + settings._id + '"]';
        var css = '', tabletCss = '', mobileCss = '';

        var divider = settings.divider? settings.divider: {};
        var text = settings.text? settings.text: {};

        // text
        if( text.type == 'text' && text.text ){
            var html  = '<div class="pixe-divider-wrap" >';
            if( text.alignment != 'left' ){
                html += '<div class="pixe-divider" ></div>';
            }
            html += '<div class="pixe-text" >' + text.text + '</div>';
            if( text.alignment != 'right' ){
                html += '<div class="pixe-divider" ></div>';
            }
            html += '</div>';
            container.empty().append(html);

            // typo preset
            $.pixeTypoStyle.setPresetData(container.find('.pixe-text'), text.typo);

        // icon
        }else if( text.type == 'icon' && text.icon ){
            var html  = '<div class="pixe-divider-wrap" >';
            if( text.alignment != 'left' ){
                html += '<div class="pixe-divider" ></div>';
            }
            html += $.pixeGetIcon(text.icon);
            if( text.alignment != 'right' ){
                html += '<div class="pixe-divider" ></div>';
            }
            html += '</div>';
            container.empty().append(html);
            
            $.pixeAddIconDependency(item, [text.icon]);

        // general case
        }else{
            container.empty().append('<div class="pixe-divider-wrap pixe-divider" ></div>');
        }

        function getCss(device){
            var ret = '';

            var atts = {};
            var attsHover = {};
            var wrapAtts = {
                'width': divider[device + 'width']
            };

            if( !divider.style || divider.style == 'solid' ){
                atts['border-radius'] = divider[device + 'radius'];
            }

            if( !device ){
                wrapAtts['max-width'] = '100%';
                wrapAtts['align-margin'] = divider[device + 'alignment']? divider[device + 'alignment']: 'center';
                
                // text style
                if( (text.type == 'text' && text.text) || (text.type == 'icon' && text.icon) ){
                    wrapAtts['display'] = 'flex';
                    wrapAtts['gap'] = text['gap']? text['gap']: '10px';
                    wrapAtts['align-items'] = 'center';
                    atts['flex-grow'] = 1;
                }

                // divider type
                if( !divider['style'] || ['solid', 'dashed', 'dotted', 'double'].indexOf(divider['style']) >= 0 ){
                    atts['border'] = {
                        width: {bottom: (divider['height']? divider['height']: '1px')},
                        style: (divider['style']? divider['style']: 'solid'),
                        color: divider['color']
                    };
                }else{
                    atts['height'] = divider['height'] || '10px';
                    atts['background-repeat'] = 'repeat';
                    atts['background-position'] = 'center';
                    atts['background-size'] = divider['pattern-width']? divider['pattern-width'] + ' 100%': 'auto 100%';
                    atts['custom'] = $.pixeDividerCss(divider['style'], divider['color']);

                    if( divider['color-hover'] ){
                        attsHover['custom'] = $.pixeDividerCss(divider['style'], divider['color-hover']);
                    }
                }

                // divider hover
                attsHover['border-color'] = divider['color-hover'];

            // mobile
            }else{
                wrapAtts['align-margin'] = divider[device + 'alignment']? divider[device + 'alignment']: '';

                if( !divider['style'] || ['solid', 'dashed', 'dotted', 'double'].indexOf(divider['style']) >= 0 ){
                    atts['border-bottom-width'] = divider[device + 'height']? divider[device + 'height']: '';
                }else{
                    atts['height'] = divider[device + 'height'];
                }
            }

            // typo style
            if( text.type == 'text' && text.text ){
                ret += $.pixeSetCss(id + ' .pixe-text', {
                    'color': text[device + 'color'],
                    'custom': $.pixeTypoStyle.getPresetCss(text.typo, device)
                });
                ret += $.pixeSetCss($.pixeGetHoverSelector(id + ':hover .pixe-text', item), {
                    'color': text[device + 'color-hover']
                });

            // icon style
            }else if( text.type == 'icon' && text.icon ){
                ret += $.pixeSetCss(id + ' .pixe-icon', {
                    'color': text[device + 'color'],
                    'font-size': text[device + 'icon-size'],
                    'width': text[device + 'icon-size']
                });
                ret += $.pixeSetCss(id + ' .pixe-divider:hover .pixe-icon', {
                    'color': text[device + 'color-hover']
                });
            }

            // style
            ret += $.pixeSetCss(id + ' .pixe-divider-wrap', wrapAtts);
            ret += $.pixeSetCss(id + ' .pixe-divider', atts);
            ret += $.pixeSetCss($.pixeGetHoverSelector(id + ':hover .pixe-divider', item), attsHover);
            
            return ret;
        }

        css += getCss('');
        tabletCss += getCss('tablet-');
        mobileCss += getCss('mobile-');

        $.pixeAddTypoDependency(item, [text.typo]);

        // item css
        $.pixeAddCss(item, 'item',  css);
        $.pixeAddCss(item, 'item',  tabletCss, 'tablet');
        $.pixeAddCss(item, 'item',  mobileCss, 'mobile');

        $.pixeItem.renderCss(item);
    }

    // html code
    $.pixeRegisterElementRenderer('html-code', pixeGetHtmlCodeRenderer);
    $.pixeRegisterElementRenderer('shortcode', pixeGetHtmlCodeRenderer);
    function pixeGetHtmlCodeRenderer(item, type){
        
        switch(type){
            case 'item': 
            case 'content':
                var settings = item.data('settings');
                var container = item.children('.pixe-item-content');
                container.off().empty();
                
                if( settings._element == 'html-code'){
                    if( settings.content ){
                        container.append(settings.content);
                    }else{
                        container.append('<div style="text-align: center;" >HTML CODE</div>');
                    }
                }else if( settings._element == 'shortcode' ){
                    if( settings.content ){
                        container.append('<div class="pixe-shortcode-raw" >' + settings.content + '</div>');
                    }else{
                        container.append('<div class="pixe-shortcode-raw" >SHORTCODE</div>');
                    }
                }
                

                container.on('click', function(){
                    new $.pixeStyleSettings({
                        target: $(this),
                        content: pixeGetHtmlCodeSettings(item)
                    });
                });
                break;
        }
        
    }
    function pixeGetHtmlCodeSettings(item){

        // create element
        var content = $('<div class="pixe-ssettings" ></div>');
        var html = '';
        html += $.pixeGetAdminIcon('option-code', { class: 'pixe-action', data: 'data-action="code"' });
        html += '<div class="pixe-divider" ></div>';
        html += $.pixeGetAdminIcon('settings', {class: 'pixe-settings pixe-item-action'});
        html += $.pixeGetAdminIcon('remove', {class: 'pixe-remove pixe-item-action'});
        content.append(html);

        // bind
        $.pixeStyleSettingsAction(item, content);
        content.on('click', '.pixe-action', function(){
            var itemHistory = new $.pixeEditHistory(item);
            var settings = item.data('settings');

            var popup = new $.pixeInlinePopup({
                target: $(this),
                values: {content: settings.content},
                options: {
                    'content': {
                        'type': 'textarea',
                        'hide-reset': true
                    }
                },
                style: 'pixe-inline-popup-textarea'
            });

            if( popup && popup.content ){
                popup.content.on('input', 'textarea', function(){
                    var slug = $(this).attr('data-slug');
                    var value = $.pixeGetInputVal($(this));

                    $.pixeSetData(settings, slug, value);
                    itemHistory.onChange(slug);
                    pixeGetHtmlCodeRenderer(item, slug);
                });
            }
            
        });

        return content
    }

    // code display
    $.pixeRegisterElementRenderer('code-display', function(item, type){
        switch(type){
            case 'item': 
                var container = item.children('.pixe-item-content');
                container.off().empty();

                var inlineItem = $.pixeInlineContent.get({
                    slug: 'text', 
                    type: 'plain-text',
                    item: item,
                    defaultTag: 'pre',
                    textContent: 'Code Display'
                });
                inlineItem.appendTo(container);

                container.on('click', function(){
                    new $.pixeStyleSettings({
                        target: $(this),
                        content: pixeGetCodeDisplaySettings(item)
                    });
                });
                break;
        }

        pixeGetCodeDisplayStyle(item);
    });
    function pixeGetCodeDisplaySettings(item){
        var content = $('<div class="pixe-ssettings" ></div>');
        var html = '';
        html += $.pixeGetAdminIcon('option-align-left', { class: 'pixe-action', data: 'data-action="align"' });
        html += $.pixeGetAdminIcon('option-spaces', { class: 'pixe-action', data: 'data-action="spaces"' });
        html += $.pixeGetAdminIcon('option-color', { class: 'pixe-action', data: 'data-action="background"' });
        html += '<div class="pixe-divider" ></div>';
        html += $.pixeGetAdminIcon('option-typo', { class: 'pixe-action', data: 'data-action="typo"' });
        html += '<div class="pixe-action" data-action="color" ><span class="pixe-color-display" ></span></div>';
        html += '<div class="pixe-divider" ></div>';
        html += $.pixeGetAdminIcon('settings', {class: 'pixe-settings pixe-item-action'});
        html += $.pixeGetAdminIcon('remove', {class: 'pixe-remove pixe-item-action'});
        content.append(html);

        var settings = item.data('settings');
        $.pixeSetColorDisplay(content, settings['color']);

        // bind
        $.pixeStyleSettingsAction(item, content);
        content.on('click', '.pixe-action', function(){
            var settings = item.data('settings');
            var button = $(this);
            var action = $(this).attr('data-action');
            var itemHistory = new $.pixeEditHistory(item);

            if( action == 'align' ){ 
                var inlineSlug = 'alignment';
                $.pixeInlinePopup({
                    target: button,
                    options: 'alignment',
                    values: { alignment: settings[inlineSlug] },
                    onChange: function(slug, value){
                        $.pixeSetData(settings, inlineSlug, value);
                        itemHistory.onChange(inlineSlug);
                        pixeGetCodeDisplayStyle(item);
                    }
                });

            }else{

                var ssType, ssSlug;
                switch( action ){
                    case 'background':
                        ssSlug = 'background';
                        ssType = 'text-box-bg-style';
                        break;
                    case 'spaces':
                        ssSlug = 'spaces';
                        ssType = 'padding';
                        break;
                    case 'typo':
                        ssSlug = 'typo';
                        ssType = 'typography';
                        break;
                    case 'color':
                        ssSlug = 'color';
                        ssType = 'text-box-style';
                        break;
                }

                new $.pixeStyleSelector({
                    obj: settings,
                    slug: ssSlug,
                    target: button, 
                    targetArea: item.children('.pixe-item-content'),
                    type: ssType,
                    onChange: function(value, type){
                        itemHistory.onChange(ssSlug);

                        if( ssSlug != 'link' ){
                            pixeGetCodeDisplayStyle(item);

                            if( ssSlug == 'color' ){
                                $.pixeSetColorDisplay(content, settings['color']);
                            }
                        }
                    }
                });
            }      
        });
        
        return content;
    }
    function pixeGetCodeDisplayStyle(item){
        var settings = item.data('settings');
        var id = '[data-id="' + settings._id + '"]';
        var css = '', tabletCss = '', mobileCss = '';

        var spaces = settings.spaces? settings.spaces: {};
        var background = settings.background? settings.background: {};
        var color = settings.color? settings.color: {};
        function getCss(device){
            var ret = '';

            ret += $.pixeSetCss(id + ' .pixe-inline', {
                'text-align': settings.alignment,
                'padding': spaces.padding,
                'margin': spaces.margin,
                'background': background.color,
                'border': background.border,
                'shadow': background.shadow,
                'custom': $.pixeGetTextColorCss(color, device) + $.pixeTypoStyle.getPresetCss(settings.typo, device)
            });

            return ret;
        }

        css += getCss('');
        tabletCss += getCss('tablet-');
        mobileCss += getCss('mobile-');

        // typo preset
        $.pixeTypoStyle.setPresetData(item.find('.pixe-inline'), settings.typo);
        $.pixeAddTypoDependency(item, [settings.typo]);

        // item css
        $.pixeAddCss(item, 'item',  css);
        $.pixeAddCss(item, 'item',  tabletCss, 'tablet');
        $.pixeAddCss(item, 'item',  mobileCss, 'mobile');

        $.pixeItem.renderCss(item);
    }

    // hamburger button
    $.pixeRegisterElementRenderer('hamburger-button', function(item, type){

        switch(type){
            case 'item':
                item.addClass('pixe-type-button');

                var html = '<a class="pixe-hamburger-button" >';
                html += '</a>';

                var container = item.children('.pixe-item-content');
                container.off().empty();
                container.append(html);

                // bind
                container.on('click', function(){
                    new $.pixeStyleSettings({
                        target: $(this),
                        content: pixeGetHamburgerButtonSettings(item)
                    });
                });
                break;
        }

        pixeSetHamburgerButtonStyle(item);
    });
    function pixeGetHamburgerButtonSettings(item){
        var settings = item.data('settings');

        // create element
        var content = $('<div class="pixe-ssettings" ></div>');
        var html = '';
        html += $.pixeGetAdminIcon('option-menu', { class: 'pixe-action', data: 'data-action="button"' });
        html += $.pixeGetAdminIcon('option-link', { class: 'pixe-action', data: 'data-action="link"' });
        html += $.pixeGetAdminIcon('option-color', { class: 'pixe-action', data: 'data-action="background"' });
        html += '<div class="pixe-divider" ></div>';
        html += $.pixeGetAdminIcon('settings', {class: 'pixe-settings pixe-item-action'});
        html += $.pixeGetAdminIcon('remove', {class: 'pixe-remove pixe-item-action'});
        content.append(html);

        $.pixeSetColorDisplay(content, settings['color']);

        // bind
        $.pixeStyleSettingsAction(item, content);
        content.on('click', '.pixe-action', function(){
            var settings = item.data('settings');
            var button = $(this);
            var action = $(this).attr('data-action');
            var itemHistory = new $.pixeEditHistory(item);

            var ssType, ssSlug;
            switch( action ){
                case 'button':
                    ssSlug = 'button';
                    ssType = 'hamburger-button-settings';
                    break;
                case 'link':
                    ssSlug = 'link';
                    ssType = 'button-link';
                    break;
                case 'background':
                    ssSlug = 'bg';
                    ssType = 'hamburger-button-background';
                    break;
            }

            new $.pixeStyleSelector({
                obj: settings,
                slug: ssSlug,
                target: button, 
                targetArea: item.children('.pixe-item-content'),
                type: ssType,
                onChange: function(value, type){
                    itemHistory.onChange(ssSlug);
                    pixeSetHamburgerButtonStyle(item);
                }
            });
        });

        return content;
    }
    function pixeSetHamburgerButtonStyle(item){
        var container = item.children('.pixe-item-content');
        var settings = item.data('settings');
        var id = '.pixe-item[data-id="' + settings._id + '"]';
        var css = '', tabletCss = '', mobileCss = '';

        var button = settings.button? settings.button: {};
        var bg = settings.bg? settings.bg: {};

        var buttonHtml = container.children('.pixe-hamburger-button');
        var lineCount  = button['line-count']? parseInt(button['line-count']): 3;
        if( lineCount < 1 || lineCount > 6 ) lineCount = 3;

        // button settings
        buttonHtml.empty();
        for( var i = 0; i < lineCount; i++ ){
            buttonHtml.append('<span></span>');
        }

        // style
        function getCss(device = ''){
            var ret = '';

            ret += $.pixeSetCss(id, {
                'justify-content': !device? button['alignment']: ''
            });
            ret += $.pixeSetCss(id + ' .pixe-hamburger-button', {
                'gap': !device? button['line-spacing']: '',
                'width': !device? button['button-width']: '',
                'padding': !device? button['outer-spacing']: '',
                'border': bg[device + 'border']
            });
            ret += $.pixeSetCss(id + ' .pixe-hamburger-button:hover', {
                'border': bg[device + 'border-hover']
            });
            ret += $.pixeSetCss(id + ' .pixe-hamburger-button span', {
                'height': !device ? button['line-height']: '',
                'border-radius': !device? button['line-radius']: '',
                'background-color': bg[device + 'color']
            });
            ret += $.pixeSetCss(id + ' .pixe-hamburger-button:hover span', {
                'background-color': bg[device + 'color-hover']
            });

            return ret;
        }

        css += getCss('');
        tabletCss += getCss('tablet-');
        mobileCss += getCss('mobile-');

        // item css
        $.pixeAddCss(item, 'item',  css);
        $.pixeAddCss(item, 'item',  tabletCss, 'tablet');
        $.pixeAddCss(item, 'item',  mobileCss, 'mobile');

        // lightbox dependency
        var link = settings['link']? settings['link']: {};
        $.pixeAddLightboxDependency(item, link['link-to']);
        $.pixeAddPopupDependency(item, link['link-to'], link['popup']);

        $.pixeItem.renderCss(item);

    }

    // paypal
    $.pixeRegisterElementRenderer('paypal-button', pixeRenderPaypalButton);
    function pixeRenderPaypalButton(item, type, subtype){

        switch(type){
            case 'item':
                item.addClass('pixe-type-button');

                var container = item.children('.pixe-item-content');
                container.off().empty();
            
                var button = $('<button class="pixe-button pixe-paypal-button" ></button>');
                button.appendTo(container);

                var inlineItem = $.pixeInlineContent.get({
                    slug: 'text', 
                    type: 'plain-text',
                    item: item,
                    defaultTag: 'span',
                    textContent: 'Paypal'
                });
                inlineItem.appendTo(button);
                pixeSetButtonIcon(item);

                container.on('click', function(){
                    new $.pixeStyleSettings({
                        target: $(this),
                        content: pixeGetButtonSettings(item)
                    });
                });
                break;

            case 'icon':
                pixeSetButtonIcon(item);
                break;
        }

        // update style
        pixeSetButtonStyle(item);
    }

    // button
    $.pixeRegisterElementRenderer('link', pixeButtonRenderer);
    $.pixeRegisterElementRenderer('button', pixeButtonRenderer);
    function pixeButtonRenderer(item, type){
        var settings = item.data('settings');
        
        switch(type){
            case 'item':
                item.addClass('pixe-type-button');

                var container = item.children('.pixe-item-content');
                container.off().empty();

                if( settings._element == 'link' ){
                    var button = $('<a class="pixe-text-link"></a>');
                    button.appendTo(container);
                }else{
                    var button = $('<a class="pixe-button"></a>');
                    button.appendTo(container);
                }
                
                var inlineItem = $.pixeInlineContent.get({
                    slug: 'text', 
                    type: 'plain-text',
                    item: item,
                    defaultTag: 'span',
                    textContent: 'Read More'
                });
                inlineItem.appendTo(button);

                container.on('click', function(){
                    new $.pixeStyleSettings({
                        target: $(this),
                        content: pixeGetButtonSettings(item)
                    });
                });
                pixeSetButtonIcon(item);
                break;

            case 'icon':
                pixeSetButtonIcon(item);
                break;
        }

        // update style
        pixeSetButtonStyle(item);
    }
    function pixeGetButtonSettings(item){
        var settings = item.data('settings');

        // create element
        var content = $('<div class="pixe-ssettings" ></div>');
        var html = '';
        if( settings._element == 'paypal-button' ){
            html += $.pixeGetAdminIcon('option-paypal', {class: 'pixe-action', data: 'data-action="paypal"'});
            html += $.pixeGetAdminIcon('option-icon', { class: 'pixe-action', data: 'data-action="icon"' });
            html += $.pixeGetAdminIcon('option-link', { class: 'pixe-action', data: 'data-action="paypal-link"' });
            html += $.pixeGetAdminIcon('option-align-left', { class: 'pixe-action', data: 'data-action="align"' });
            html += $.pixeGetAdminIcon('option-spaces', { class: 'pixe-action', data: 'data-action="spaces"' });
            html += $.pixeGetAdminIcon('option-color', { class: 'pixe-action', data: 'data-action="background"' });
        }else if( settings._element == 'link' ){
            html += $.pixeGetAdminIcon('option-icon', { class: 'pixe-action', data: 'data-action="icon"' });
            html += $.pixeGetAdminIcon('option-link', { class: 'pixe-action', data: 'data-action="link"' });
            html += $.pixeGetAdminIcon('option-align-left', { class: 'pixe-action', data: 'data-action="align"' });
        }else{
            var buttonPresetInput = $.pixeGetInput('button-preset', settings['button-preset'], {
                type: 'button-preset-combobox',
                width: 150,
                updatePreset: true
            }, content);
            buttonPresetInput.find('.pixe-button-preset-combobox').data('item', item);
            html += $.pixeGetAdminIcon('option-icon', { class: 'pixe-action', data: 'data-action="icon"' });
            html += $.pixeGetAdminIcon('option-link', { class: 'pixe-action', data: 'data-action="link"' });
            html += $.pixeGetAdminIcon('option-align-left', { class: 'pixe-action', data: 'data-action="align"' });
            html += $.pixeGetAdminIcon('option-spaces', { class: 'pixe-action', data: 'data-action="spaces"' });
            html += $.pixeGetAdminIcon('option-color', { class: 'pixe-action', data: 'data-action="background"' });
        }
        html += '<div class="pixe-divider" ></div>';
        html += $.pixeGetAdminIcon('option-typo', { class: 'pixe-action', data: 'data-action="typo"' });
        html += '<div class="pixe-action" data-action="color" ><span class="pixe-color-display" ></span></div>';
        html += '<div class="pixe-divider" ></div>';
        html += $.pixeGetAdminIcon('settings', {class: 'pixe-settings pixe-item-action'});
        html += $.pixeGetAdminIcon('remove', {class: 'pixe-remove pixe-item-action'});
        content.append(html);

        $.pixeSetColorDisplay(content, settings['color']);

        // bind
        $.pixeStyleSettingsAction(item, content);
        $.pixeButtonPreset.bindInput(content, item, {
            onUpdate: function(){
                var settings = item.data('settings');
                pixeSetButtonIcon(item);
                pixeSetButtonStyle(item);
                $.pixeSetColorDisplay(content, settings['color']);
            }
        });
        content.on('click', '.pixe-action', function(){
            var settings = item.data('settings');
            var button = $(this);
            var action = $(this).attr('data-action');
            var itemHistory = new $.pixeEditHistory(item);

            if( action == 'align' ){ 
                var inlineSlug = 'alignment';
                $.pixeInlinePopup({
                    target: button,
                    title: 'Button Alignment',
                    options: 'alignment',
                    values: { alignment: settings[inlineSlug] },
                    onChange: function(slug, value){
                        $.pixeSetData(settings, inlineSlug, value);
                        itemHistory.onChange(inlineSlug);
                        pixeSetButtonStyle(item);
                    }
                });

            }else{

                var ssType, ssSlug;
                switch( action ){
                    case 'paypal':
                        ssSlug = 'paypal';
                        ssType = 'paypal-button-settings';
                        break;
                    case 'icon':
                        ssSlug = 'icon';
                        ssType = 'link-icon-button';
                        break;
                    case 'paypal-link':
                        ssSlug = 'link';
                        ssType = 'paypal-button-link';
                        break;
                    case 'link':
                        ssSlug = 'link';
                        ssType = 'button-link';
                        break;
                    case 'background':
                        ssSlug = 'background';
                        ssType = 'button-link-background';
                        break;
                    case 'spaces':
                        ssSlug = 'spaces';
                        ssType = 'button-link-spacing';
                        break;
                    case 'typo':
                        ssSlug = 'typo';
                        ssType = 'typography';
                        break;
                    case 'color':
                        ssSlug = 'color';
                        ssType = 'link-color';
                        break;
                }

                new $.pixeStyleSelector({
                    obj: settings,
                    slug: ssSlug,
                    target: button, 
                    targetArea: item.children('.pixe-item-content'),
                    type: ssType,
                    onChange: function(value, type){
                        itemHistory.onChange(ssSlug);
                        pixeSetButtonStyle(item);

                        if( ssSlug == 'color' ){
                            $.pixeSetColorDisplay(content, settings['color']);
                        }else if( ssSlug == 'icon' ){
                            pixeSetButtonIcon(item);
                        }
                    }
                });
            }      
        });

        return content;
    }
    function pixeSetButtonIcon(item){
        var container = item.children('.pixe-item-content');
        var button = container.find('.pixe-button');
        if( !button.length ){
            button = container.find('a');
        }

        var settings = item.data('settings');
        var iconData = settings['icon']? settings['icon']: {};
        if( !iconData.icon ){
            var preset = $.pixeButtonPreset.get(settings['button-preset']);
            if( preset ){
                iconData = preset.icon || {};
            }
        }
        
        $.pixeSetButtonIcon(item, button, iconData);
    }
    function pixeSetButtonStyle(item){
        var container = item.children('.pixe-item-content');
        var settings = item.data('settings');
        var id = '.pixe-item[data-id="' + settings._id + '"]';
        var css = '', tabletCss = '', mobileCss = '';
        
        var icon = settings['icon']? settings['icon']: {};
        var typo = settings['typo']? settings['typo']: {};
        var button = container.find('.pixe-button');
        if( button.length ){
            if( settings['button-preset'] ){
                button.attr('data-button-preset', settings['button-preset']);
            }else{
                button.removeAttr('data-button-preset');
            }
        }

        // style
        function getCss(device = ''){
            var ret = '';
            
            ret += $.pixeSetCss(id, {
                'justify-content': settings[device + 'alignment']
            });

            var iconHoverSelector;

            // for link
            if( settings._element == 'link' ){

                ret += $.pixeSetCss(id + ' a', {
                    'gap': icon[device + 'gap'],
                    'custom': $.pixeGetTextColorCss(settings.color, device) + $.pixeTypoStyle.getPresetCss(settings.typo, device),
                });
                ret += $.pixeSetCss($.pixeGetHoverSelector(id + ' a:hover', item), {
                    'custom': $.pixeGetTextColorCss(settings.color, device, '-hover')
                });

                iconHoverSelector = $.pixeGetHoverSelector(id + ' .pixe-text-link:hover .pixe-icon', item);

            // for button
            }else{  

                ret += $.pixeGetButtonCss({
                    selector: id + ' .pixe-button',
                    hoverSelector: $.pixeGetHoverSelector(id + ' .pixe-button:hover', item),
                    icon: settings['icon'],
                    space: settings['spaces'],
                    color: settings['color'],
                    background: settings['background'],
                    typo: typo
                }, device);

                iconHoverSelector = $.pixeGetHoverSelector(id + ' .pixe-button:hover .pixe-icon', item);
            }

            // icon style
            ret += $.pixeSetIconCss({
                selector: id + ' .pixe-icon',
                hoverSelector: iconHoverSelector,
                icon: settings['icon']
            }, device);
            

            return ret;
        }

        css += getCss('');
        tabletCss += getCss('tablet-');
        mobileCss += getCss('mobile-');

        // typo preset
        $.pixeTypoStyle.setPresetData(container.find('a'), typo);
        $.pixeAddTypoDependency(item, [typo]);
        $.pixeAddButtonDependency(item, [settings['button-preset']]);

        // item css
        $.pixeAddCss(item, 'item',  css);
        $.pixeAddCss(item, 'item',  tabletCss, 'tablet');
        $.pixeAddCss(item, 'item',  mobileCss, 'mobile');

        // lightbox dependency
        var link = settings['link']? settings['link']: {};
        $.pixeAddLightboxDependency(item, link['link-to']);
        $.pixeAddPopupDependency(item, link['link-to'], link['popup']);

        $.pixeItem.renderCss(item);

    }

    // input atts
    $.pixeGetFormInputCss2 = function(settings, device = ''){
        var input = settings.input? settings.input: {};
        var inputHover = settings.inputHover? settings.inputHover: '';
        var inputActive = settings.inputActive? settings.inputActive: '';
        var typo = settings.typo;
        var custom = settings.custom? settings.custom: '';
        var ret = '';

        if( settings.selector ){
            var background = input[device + 'background']? input[device + 'background']: {};
            ret += $.pixeSetCss(settings.selector, {
                width: input[device + 'input-width'],
                height: input[device + 'input-height'],
                padding: input[device + 'input-padding'],
                'background-color': background['color'],
                border: background['border'],
                shadow: background['shadow'],
                color: input[device + 'input'],
                custom: custom + $.pixeTypoStyle.getPresetCss(typo, device)
            });
        }
        if( settings.hoverSelector ){
            if( inputHover ){
                var backgroundHover = inputHover['background']? inputHover['background']: {};
                ret += $.pixeSetCss(settings.hoverSelector, {
                    color: inputHover['input'],
                    'background-color': backgroundHover['color'],
                    border: backgroundHover['border'],
                    shadow: backgroundHover['shadow'],
                });
            }else{
                var backgroundHover = input[device + 'background-hover']? input[device + 'background-hover']: {};
                ret += $.pixeSetCss(settings.hoverSelector, {
                    color: input[device + 'input-hover'],
                    'background-color': backgroundHover['color'],
                    border: backgroundHover['border'],
                    shadow: backgroundHover['shadow'],
                });
            }
        }
        if( settings.activeSelector ){
            if( inputActive ){
                var backgroundActive = inputActive['background']? inputActive['background']: {};
                ret += $.pixeSetCss(settings.activeSelector, {
                    color: inputActive['input'],
                    'background-color': backgroundActive['color'],
                    border: backgroundActive['border'],
                    shadow: backgroundActive['shadow'],
                });
            }else{
                var backgroundActive = input[device + 'background-active']? input[device + 'background-active']: {};
                ret += $.pixeSetCss(settings.activeSelector, {
                    color: input[device + 'input-active'],
                    'background-color': backgroundActive['color'],
                    border: backgroundActive['border'],
                    shadow: backgroundActive['shadow'],
                });
            }
            
        }
        if( settings.placeholderSelector ){
            ret += $.pixeSetCss(settings.placeholderSelector, { 
                '--pixe--color--placeholder': $.pixeGetColorCss(input[device + 'placeholder'])
            });
        }

        return ret;
    }

    // notice box css
    $.pixeGetNoticeBoxCss = function(settings, device = ''){
        if( !settings.id || !settings.notice ) return '';

        var id = settings.id;
        var notice = settings.notice;
        var typo = notice.typo? notice.typo: {};
        var spaces = notice.spaces? notice.spaces: {};
        var bg = notice.bg? notice.bg: {};
        var icon = notice.icon? notice.icon: {};

        var ret = '';

        ret += $.pixeSetCss(id + ' .pixe-notice-box', {
            color: notice[device + 'color'],
            padding: spaces[device + 'padding'],
            margin: spaces[device + 'margin'],
            background: bg[device + 'color'],
            border: bg[device + 'border'],
            shadow: bg[device + 'shadow'],
            gap: icon[device + 'gap'],
            'custom': $.pixeTypoStyle.getPresetCss(typo, device)
        });
        ret += $.pixeSetCss(id + ' .pixe-notice-box .pixe-icon', {
            width: icon[device + 'width'],
            fill: icon[device + 'color'],
        });

        return ret;
    }

    // filter button
    $.pixeGetFilterButtonCss = function(item, filter, device){
        var settings = item.data('settings');
        var id = '[data-id="' + settings._id + '"]';
        var ret = '';

        if( filter && filter['enable'] == 'no' ){
            $.pixeAddDependency(item, 'filter-bar', false);
            return '';
        }

        var filterSettings = settings['filter']? settings['filter']: {};
        var filterTypo = settings['filter-typo']? settings['filter-typo']: {};
        var filterSpace = settings['filter-spacing']? settings['filter-spacing']: {};
        var filterTextColor = settings['filter-text-color']? settings['filter-text-color']: {};
        var filterColor = settings['filter-color']? settings['filter-color']: {};
        var filterBar = settings['filter-bar'];

        // filter
        ret += $.pixeSetCss(id + ' .pixe-filter', {
            'justify-content': filterSettings[device + 'alignment'],
            'custom': $.pixeTypoStyle.getPresetCss(filterTypo, device),
            'gap': filterSpace[device + 'gap'],
            'margin-bottom': filterSpace[device + 'margin-bottom']
        });

        // text
        ret += $.pixeSetCss(id + ' .pixe-filter [data-filter]', {
            'color': filterTextColor[device + 'color'],
            'padding': filterSpace[device + 'padding'],
            'background': filterColor[device + 'background-color'],
            'border': filterColor[device + 'border'],
        });
        ret += $.pixeSetCss(id + ' .pixe-filter [data-filter]:hover', {
            'color': filterTextColor[device + 'color-hover'],
            'background': filterColor[device + 'background-color-hover'],
            'border': filterColor[device + 'border-hover'],
        });
        ret += $.pixeSetCss(id + ' .pixe-filter [data-filter].pixe-active', {
            'color': filterTextColor[device + 'color-active'],
            'background': filterColor[device + 'background-color-active'],
            'border': filterColor[device + 'border-active'],
        });

        // filter bar
        if( filterBar && filterBar['enable'] != 'no' ){
            ret += $.pixeSetCss(id + ' .pixe-filter-bar', {
                'justify-content': filterBar[device + 'alignment'],
                'margin-top': filterBar[device + 'margin-top']
            });

            if( !filterBar['style'] ){
                ret += $.pixeSetCss(id + ' .pixe-filter-bar span', {
                    'width': filterBar[device + 'width'],
                    'height': filterBar[device + 'height'],
                    'border-radius': filterBar[device + 'border-radius'],
                    'background-color': filterColor[device + 'bar-color'],
                });
            }else if( filterBar['style'] == 'circle' ){
                var defaultWidth = device? '': '5px';
                ret += $.pixeSetCss(id + ' .pixe-filter-bar span', {
                    'width': filterBar[device + 'width']? filterBar[device + 'width']: defaultWidth,
                    'height': filterBar[device + 'width']? filterBar[device + 'width']: defaultWidth,
                    'border-radius': device? '': '50%',
                    'background-color': filterColor[device + 'bar-color'],
                });
            }
        }
        
        // typo atts
        if( !device ){
            $.pixeTypoStyle.setPresetData(filter, filterTypo);
            if( !filterBar || filterBar['enable'] != 'no' ){
                $.pixeAddDependency(item, 'filter-bar');
                filter.attr('data-filter-bar', (filterBar && filterBar.style? filterBar.style: ''));
            }else{
                $.pixeAddDependency(item, 'filter-bar', false);
                filter.removeAttr('data-filter-bar');
            }

            $.pixeFilterBar(filter);
        }
        
        return ret;
    }

    // counter
    $.pixeRegisterElementRenderer('counter', pixeGetCounterRenderer);
    function pixeGetCounterRenderer(item, type, subtype){
        var container = item.children('.pixe-item-content');

        function setCounterHtml(){
            var settings = item.data('settings');
            
            container = item.children('.pixe-item-content');
            container.empty();

            if( settings.counter ){
                var counter = settings.counter;
                var number = $('<span class="pixe-number" ></span>');

                if( counter['prefix'] ){
                    container.append('<span class="pixe-prefix" >' + counter['prefix'] + '</span>');
                }
                if( counter['start-number'] || counter['end-number'] ){
                    container.append(number);
                    
                    counter['start-number'] = counter['start-number']? counter['start-number']: 0;
                    number.append(counter['start-number']);
                    number.attr('data-start', counter['start-number']);
                    number.attr('data-end', counter['end-number']); 
                    number.attr('data-ts', counter['thousand-separator']);
                    number.attr('data-ds', counter['decimal-separator']);
                }
                if( counter['suffix'] ){
                    container.append('<span class="pixe-suffix" >' + counter['suffix'] + '</span>');
                }
            }

            if( !container.children().length ){
                container.append('<span class="pixe-number" >100</span>');
            }

            if( $.pixeCounter ){
                container.pixeCounter();
            }
        }

        switch(type){
            case 'item':
                setCounterHtml();

                if( typeof(pixePP) !== 'undefined' && pixePP.active ){
                    container.off().on('click', function(){
                        new $.pixeStyleSettings({
                            target: $(this),
                            content: pixeGetCounterSettings(item)
                        });
                    });
                }
                break;

            case 'counter':
                if( subtype && ['start-number', 'end-number', 'thousand-separator', 'decimal-separator', 'prefix', 'suffix'].indexOf(subtype) >= 0 ){
                    setCounterHtml();
                }
                break;
        }

        pixeGetCounterStyle(item);
    }
    function pixeGetCounterSettings(item){

        // create element
        var content = $('<div class="pixe-ssettings" ></div>');
        var html = '';
        html += $.pixeGetAdminIcon('option-counter', { class: 'pixe-action', data: 'data-action="counter"' });
        html += $.pixeGetAdminIcon('option-typo', { class: 'pixe-action', data: 'data-action="typo"' });
        html += '<div class="pixe-divider" ></div>';
        html += $.pixeGetAdminIcon('settings', {class: 'pixe-settings pixe-item-action'});
        html += $.pixeGetAdminIcon('remove', {class: 'pixe-remove pixe-item-action'});
        content.append(html);

        // bind
        $.pixeStyleSettingsAction(item, content);
        content.on('click', '.pixe-action', function(){
            var settings = item.data('settings');
            var button = $(this);
            var action = $(this).attr('data-action');
            var itemHistory = new $.pixeEditHistory(item);

            if( action == 'typo' ){
                new $.pixeStyleSelector({
                    obj: settings,
                    slug: 'typo',
                    target: button, 
                    targetArea: item.children('.pixe-item-content'),
                    type: 'typography',
                    title: 'Typo Settings',
                    typoGroup: {
                        'number': 'Number',
                        'prefix': 'Prefix',
                        'suffix': 'Suffix',
                    },
                    onChange: function(value, type){
                        itemHistory.onChange('typo');
                        pixeGetCounterStyle(item, 'typo')
                    }
                });

            }else if( action == 'counter' ){
                var ssType, ssSlug;
                ssSlug = 'counter';
                ssType = 'counter-settings';

                new $.pixeStyleSelector({
                    obj: settings,
                    slug: ssSlug,
                    target: button, 
                    targetArea: item.children('.pixe-item-content'),
                    type: ssType,
                    onChange: function(value, type){
                        itemHistory.onChange(ssSlug);
                        pixeGetCounterRenderer(item, ssSlug, type);
                    }
                });
            }      
        });

        return content
    }
    function pixeGetCounterStyle(item){
        var container = item.children('.pixe-item-content');
        var settings = item.data('settings');
        var id = '[data-id="' + settings._id + '"]';
        var css = '', tabletCss = '', mobileCss = '';

        var counter = settings.counter? settings.counter: {};
        var typo = settings.typo? settings.typo: {};
        function getCss(device){
            var ret = '';
            
            ret += $.pixeSetCss(id , {
                'text-align': counter[device + 'alignment'],
            });
            ret += $.pixeSetCss(id + ' .pixe-number', {
                'custom': $.pixeGetTextColorCss(counter[device + 'number-color']) + $.pixeTypoStyle.getPresetCss(typo.number, device),
            });
            ret += $.pixeSetCss(id + ' .pixe-prefix', {
                'margin-right': counter[device + 'gap'],
                'custom': $.pixeGetTextColorCss(counter[device + 'prefix-color']) + $.pixeTypoStyle.getPresetCss(typo.prefix, device)
            });
            ret += $.pixeSetCss(id + ' .pixe-suffix', {
                'margin-left': counter[device + 'gap'],
                'custom': $.pixeGetTextColorCss(counter[device + 'suffix-color']) + $.pixeTypoStyle.getPresetCss(typo.suffix, device)
            });

            return ret;
        }

        css += getCss('');
        tabletCss += getCss('tablet-');
        mobileCss += getCss('mobile-');

        // typo preset
        $.pixeTypoStyle.setPresetData(container.find('.pixe-number'), typo.number);
        $.pixeTypoStyle.setPresetData(container.find('.pixe-prefix'), typo.prefix);
        $.pixeTypoStyle.setPresetData(container.find('.pixe-suffix'), typo.suffix);
        $.pixeAddTypoDependency(item, [typo.number, typo.prefix, typo.suffix]);

        // item css
        $.pixeAddCss(item, 'item',  css);
        $.pixeAddCss(item, 'item',  tabletCss, 'tablet');
        $.pixeAddCss(item, 'item',  mobileCss, 'mobile');

        $.pixeItem.renderCss(item);
    }

})(jQuery);	
