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

    // inline popup
    $.pixeInlinePopup = function(settings){
        settings = $.extend({
            popupPosition: 'bottom-center',
            target: undefined,
            targetArea: undefined,
            targetAreaPos: undefined,
            options: {},
            values: {},
            hideReset: false,
            onClose: function(){},
            onChange: undefined,
            style: '' // class
        }, settings);

        // close the popup if already opened
        if( settings.target ){
            if( settings.target.hasClass('pixe-target-close') ){
                settings.target.removeClass('pixe-target-close');
                return;
            }

            settings.target.addClass('pixe-active');
        }
        
        // get predefiend options
        if( typeof(settings.options) == 'string' ){
            settings.style += ' pixe-inline-' + settings.options + '-popup';
            settings.options = $.pixeInlinePopupOptions[settings.options];
        }

        // create popup content
        var t = this;
        t.content = $('<div class="pixe-inline-popup-content"></div>');
        if( settings.width ){ t.content.css('width', settings.width); }
        for( var slug in settings.options ){
            var option = settings.options[slug];
            var value = settings.values[slug];
            if( settings.hideReset ){
                option['hide-reset'] = true;
            }
            if( settings.title ){
                option['title'] = settings.title;
            }
            $.pixeGetInput(slug, value, option, t.content);
        }
        
        // create popup box
        t.popup = new $.pixePopup({
            content: t.content,
            target: settings.target,
            targetArea: settings.targetArea,
            targetAreaPos: settings.targetAreaPos,
            targetPointer: true,
            position: settings.popupPosition,
            style: 'pixe-inline-popup ' + settings.style,
            closeOnMediaSelection: false,
            onClose: function(){
                settings.target.removeClass('pixe-active');
                settings.onClose();
            }
        });
        t.content.pixeDraggable({
            handlerClass: '.pixe-inline-popup-content',
            frameSelector: '.pixe-popup'
        });

        // onchange event
        if( settings.onChange && t.content ){
            t.content.on('change', '[data-slug]', function(){
                var slug = $(this).attr('data-slug');
                var value = $(this).data('value');
                settings.onChange(slug, value);
            });
        }

    }
    $.pixeInlinePopupOptions = {
        'tag': {
            'tag': {
                'title': 'Tag',
                'type': 'combobox',
                'width': '1-1',
                'options': 'headingTag'
            },
        },
        'inline-tag': {
            'tag': {
                'title': 'Tag',
                'type': 'combobox',
                'width': '1-1',
                'options': {
                    'h1': 'h1',
                    'h2': 'h2',
                    'h3': 'h3',
                    'h4': 'h4',
                    'h5': 'h5',
                    'h6': 'h6',
                    'div': 'div',
                }
            },
        },
        'alignment': {
            'alignment': {
                'title': 'Alignment',
                'type': 'radioicon',
                'options': 'alignment',
                'width': '1-1',
            },
        },
        'text-alignment': {
            'alignment': {
                'title': 'Text Alignment',
                'type': 'radioicon',
                'options': 'alignment',
                'width': '1-1',
            },
        }
    };

    // style settings
    $.pixeStyleSettings = function(settings){
        settings = $.extend({
            class: 'pixe-main-popup',
            content: undefined,
            target: undefined, // target button
            targetArea: undefined,
            targetAreaPos: undefined,
            popupPosition: 'bottom-center',
            allowMobile: false
        }, settings);

        // do nothing for preview
        if( $(document.body).hasClass('pixe-preview') ){
            return;
        }

        // empty content
        if( !settings.content ){
            return;
        }

        // do nothing on mobile devices
        if( !settings.allowMobile && $.pixeEditor.viewport != 'desktop' ){
            return;
        }

        // close the popup if already opened
        if( settings.target ){
            if( settings.target.hasClass('pixe-target-close') ){
                settings.target.removeClass('pixe-target-close');
                return;
            }

            settings.target.addClass('pixe-active');

            // focus on the item
            settings.target.closest('.pixe-item').addClass('pixe-focus');
        }
        
        // init popup
        new $.pixePopup({
            content: settings.content,
            target: settings.target,
            targetArea: settings.targetArea,
            targetAreaPos: settings.targetAreaPos,
            targetPointer: true,
            position: settings.popupPosition,
            style: 'pixe-style-settings-popup ' + settings.class,
            closeOnMediaSelection: false,
            onClose: function(){
                settings.target.removeClass('pixe-active');
                if( settings.item ){
                    settings.item.removeClass('pixe-focus');
                }else{
                    settings.target.closest('.pixe-item').removeClass('pixe-focus');
                }
                if( settings.onClose ){ settings.onClose(); }
            }
        });
    }

    // create new style selector popup object
    $.pixeStyleSelector = function(settings){
        settings = $.extend({
            class: '',
            obj: {},
            slug : '',
            type: 'color',
            target: undefined, // target button
            targetArea: undefined,
            targetAreaPos: undefined,
            display: 'popup', // html & popup
            popupPosition: 'bottom-center',
            device: 'desktop', // initital device if supported
            onChange: function(){},
            onClose: function(){},
        }, settings);

        // init the device
        if( $.pixeBuilder ){
            settings.device = $.pixeBuilder.viewport;
        }else if( $.pixeEditor ){
            settings.device = $.pixeEditor.viewport;
        }

        // initiate
        var t = this;
        t.settings = settings;
        if( settings.slug === false ){
            t.style = settings.obj? settings.obj: {};
        }else{
            if( Array.isArray(settings.obj[settings.slug]) && ['gallery'].indexOf(settings.type) === -1 ){
                delete settings.obj[settings.slug];
            }
            t.style = settings.obj[settings.slug]? settings.obj[settings.slug]: {}; 
        }

        // for popup
        if( settings.display == 'popup' ){

            // close the popup if already opened
            if( settings.target && settings.target.hasClass('pixe-target-close') ){
                settings.target.removeClass('pixe-target-close');
                settings.onClose();
                return;
            }

            settings.target.closest('.pixe-item').addClass('pixe-focus');

            // init popup
            t.initPopup();
        }
    }

    $.pixeStyleSelector.prototype = {
    
        initPopup: function(){
            
            var t = this;
            var type = t.settings.type;
            t.popupContent = $('<div class="pixe-sselector pixe-box-sizing " ></div>');
            t.popupContent.addClass('pixe-type-' + type);
            t.getContent(t.popupContent, type);

            t.popupContent.on('pixerefresh', function(){
                t.popupContent.empty();
                t.getContent(t.popupContent, type);
            });

            t.popup = new $.pixePopup({
                content: t.popupContent,
                target: t.settings.target,
                targetArea: t.settings.targetArea,
                targetAreaPos: t.settings.targetAreaPos,
                targetPointer: true,
                position: t.settings.popupPosition,
                ignoreParentPos: t.settings.ignoreParentPos,
                style: 'pixe-style-selector-popup ' + t.settings.class,
                closeOnMediaSelection: false,
                onClose: t.settings.onClose
            });

            // popup draggable
            t.popupContent.pixeDraggable({
                handlerClass: '.pixe-sselector',
                frameSelector: '.pixe-popup'
            });

        },

        getContent: function(container, type){
            var t = this;
            
            switch(type){
                case 'gallery':
                    t.galleryImages(container);
                    break;
                
                case 'image-overlay-typography':
                    t.settings.title = 'Overlay Typo Settings';
                    t.settings.typoGroup = {
                        'title': 'Title',
                        'caption': 'Caption',
                        'description': 'Description'
                    };
                    t.getContent(container, 'typography');
                    break;

                case 'typography':
                    if( t.settings.display == 'popup' ){
                        if( t.settings.title ){
                            container.append(t.header(t.settings.title));
                        }else{
                            container.append(t.header('Typography'));
                        }
                    }

                    if( t.settings.typoGroup ){
                        t.typoGroup(container);
                    }else{
                        t.typoSelector(container, t.settings.subslug);
                    }
                    break;

                case 'bg-media':
                    container.append(t.header('Background Media'));
                    
                    var content = $('<div class="pixe-sselector-content" ></div>');
                    content.appendTo(container);
                    t.bgMediaOption(content);
                    break;

                default:
                    if( !type || !$.pixeStyleSelectorOption[type] ) return;
                    var settings;
                    if( typeof($.pixeStyleSelectorOption[type]) == 'function'){
                        settings = $.pixeStyleSelectorOption[type]();
                    }else{
                        settings = $.pixeStyleSelectorOption[type];
                    } 

                    // multiple tab
                    if( settings.type == 'tab' ){
                        if( t.settings.display == 'popup' ){
                            if( t.settings.title ){
                                container.append(t.header(t.settings.title));
                            }else if( settings.title ){
                                container.append(t.header(settings.title, settings['tip-text']));
                            }
                        }

                        t.tabOption(container, settings.options);

                    // single tab
                    }else{  
                        // title
                        if( t.settings.display == 'popup' ){
                            if( t.settings.title ){
                                container.append(t.header(t.settings.title));
                            }else if( settings.title ){
                                container.append(t.header(settings.title, settings['tip-text']));
                            }
                        }
                        

                        // option
                        t.tabOptionState(container, settings);
                    }
                    
                    break;
            }
        },

        header: function(title, tipText){
            var t = this;
            var head = $('<div class="pixe-sselector-head" ></div>');
            head.append('<div class="pixe-text" >' + title + '</div>');
            head.append('<div class="pixe-close">' + $.pixeGetAdminIcon('cancel') + '</div>');
            
            if( tipText ){
                var tip = $('<div class="pixe-svg-preset pixe-svg-info" ></div>');
                    tip.attr('data-tip-text', tipText);
                head.find('.pixe-text').append(tip);
            }

            head.on('click', '.pixe-close', function(){
                t.popup.close();
            });

            return head;
        },

        bgMediaOption: function(content, hasState = true){
            var t = this;
            content.empty();

            // state
            var pointer = 'normal';
            var device = t.settings.device;

            if( hasState ){
                var state = $('<div class="pixe-sselector-state" ></div>');
                if( hasState == 'device' ){
                    state.addClass('pixe-state-device');
                    state.append($.pixeDeviceSelector(device));
                }else{
                    state.append($.pixePointerState());
                    state.append($.pixeDeviceSelector(device, 'pixe-minimize'));
                }
                state.appendTo(content);
            }

            // container
            var container = $('<div class="pixe-sselector-inner" ></div>');
            container.appendTo(content);

            // state content
            function getStateContent(){
                container.empty().off();
                t.tabBackgroundMediaContent(container, device, pointer);
            }

            // events
            getStateContent();

            if( hasState ){
                state.on('click', '[data-state]', function(){
                    if( $(this).hasClass('pixe-active') ) return;
                    $(this).addClass('pixe-active').siblings().removeClass('pixe-active');

                    pointer = $(this).attr('data-state');
                    getStateContent();
                });
                if( $.pixeBuilder && !t.settings.ignoreViewport ){
                    state.on('click', '[data-device]', function(){
                        $.pixeBuilder.changeViewport($(this).attr('data-device'));
                    });
                    state.on('viewport-update', '.pixe-device-selector', function(){
                        var activeViewport = $(this).find('[data-device="' + $.pixeBuilder.viewport + '"]');
                        activeViewport.addClass('pixe-active').siblings().removeClass('pixe-active');
    
                        device = $.pixeBuilder.viewport;
                        getStateContent();
                    });
                }else{
                    state.on('click', '[data-device]', function(){
                        device = $(this).attr('data-device');
                        $(this).addClass('pixe-active').siblings().removeClass('pixe-active');
                        getStateContent();
                    });
                }
            }
        },

        galleryFilter: function(container, filterData){
            var t = this;
            var filter = $('<div class="pixe-gallery-filter pixe-toggle-pm" ></div>');
            filter.appendTo(container);
            filter.addClass('pixe-active');
            
            var filterTitle = (filterData && filterData.title)? filterData.title: '';
            if( filterTitle ){ filter.data('title', filterTitle); }

            var title = $('<div class="pixe-gallery-filter-title pixe-toggle-icon pixe-inline-text-edit" ></div>');
            title.append('<div class="pixe-text" >' + (filterTitle? filterTitle: 'Filter Name') + '</div>')
            title.append('<div class="pixe-edit pixe-svg-preset pixe-svg-edit pixe-svg-hover" ></div>');
            title.append('<div class="pixe-remove pixe-svg-preset pixe-svg-trash pixe-svg-hover" ></div>');
            title.append('<div class="pixe-save pixe-svg-preset pixe-svg-check pixe-svg-hover" ></div>');
            title.appendTo(filter);

            var content = $('<div class="pixe-gallery-filter-content" ></div>');
            content.appendTo(filter);

            var imageArea = $('<div class="pixe-gallery-filter-images pixe-grid" ></div>');
            imageArea.appendTo(content);

            var upload = $.pixeGetInput('', '', {
                'type': 'upload',
                'width': '1-1',
                'multiple': true
            }, content);

            var stockImage = $.pixeGetInput('', '', {
                'type': 'button',
                'icon': 'image-browse',
                'button-text': 'Browse Stock Images',
                'button-class': 'pixe-ss-button pixe-full pixe-grey',
                'width': '1-1',
            }, content);

            // add image to container
            function addImage(data){
                var imageItem = $('<div class="pixe-grid-item" ></div>');
                imageItem.data('value', data);
                imageItem.css('background-image', 'url("' + data.url + '")');
                imageItem.append('<div class="pixe-edit pixe-svg-preset pixe-svg-edit"></div>');
                imageItem.append('<div class="pixe-remove pixe-svg-preset pixe-svg-x"></div>');
                imageArea.append(imageItem).addClass('pixe-init');
            }
            function toggleContent(animate = false){
                if( filter.hasClass('pixe-active') ){
                    if( animate ){
                        content.css('display', 'flex').slideUp(150);
                    }else{
                        content.css('display', 'none');
                    }
                    filter.removeClass('pixe-active');
                }else{
                    if( animate ){
                        content.slideDown(150).css('display', 'flex');
                    }else{
                        content.css('display', 'flex');
                    }
                    filter.addClass('pixe-active');
                }
            }

            // init images
            if( filterData && filterData.images ){
                for(var i in filterData.images){
                    addImage(filterData.images[i]);
                }
            }

            // event
            title.on('click', function(e){
                var target = $(e.target);

                // edit title
                if( target.hasClass('pixe-edit') || target.hasClass('pixe-save') ){
                    // do nothing

                // remove
                }else if( target.hasClass('pixe-remove') ){
                    t.actionType = 'Remove Filter';
                    t.actionTarget = undefined;
                    if( filter.siblings().length ){
                        var gallery = filter.parent();
                        filter.slideUp(150, function(){ 
                            $(this).remove(); 
                            gallery.trigger('change');
                        });
                        
                    }else{
                        filter.removeData('title').trigger('change');
                        filter.find('.pixe-text').html('Filter name');
                        if( !filter.hasClass('pixe-active') ){ toggleContent(false); }
                    }

                // toggle content
                }else{
                    toggleContent(true);
                }
            });
            title.pixeInlineTextEdit({
                onValidate: function(name){
                    if( name.length == 0 ){
                        $.pixeConfirmationBox({
                            title: 'Invalid Name',
                            message: 'Please fill the filter name.',
                            cancelText: ''
                        });
                        return false;
                    }
                    return true;
                },
                onSave: function(item, name){
                    t.actionType = 'edit-filter';
                    t.actionTarget = undefined;
                    filter.data('title', name).trigger('change');
                }
            });
            filter.on('togglecontent', function(){
                toggleContent();
            });

            // add new images
            upload.on('change', '.pixe-upload-area', function(){
                var newImages = $(this).data('value');
                if( newImages ){
                    for(var i in newImages){
                        addImage(newImages[i]);
                    }
                }
                t.actionType = 'add-image';
                t.actionTarget = undefined;
            });

            // move images
            imageArea.pixeSortable({
                selector: '.pixe-grid-item',
                noSelector: '.pixe-edit, .pixe-remove',
                onChange: function(){
                    t.actionType = 'reorder-image';
                    t.actionTarget = undefined;
                    imageArea.trigger('change');
                }
            });

            // stock image
            stockImage.on('click', '.pixe-ss-button', function(){
                $.pixeCallback['browse-stock-image']($(this), undefined, t.settings.callbackItem);
            });

            return filter;
        },
        galleryImages: function(content){
            var t = this;
            var optionArea = $('<div class="pixe-sselector-options" ></div>');
            optionArea.appendTo(content);

            // gallery container
            var gallery = $('<div class="pixe-sselector-gallery" ></div>');
            gallery.appendTo(optionArea);
            
            // filter & images
            var container = $('<div class="pixe-sselector-gallery-container pixe-scrollbar" ></div>');
            container.appendTo(gallery);

            if( !Array.isArray(t.style) ){
                t.style = [];
            }
            if( t.style.length ){
                for(var i in t.style){
                    t.galleryFilter(container, t.style[i]);
                }
            }else{
                t.galleryFilter(container);
            }

            function getData(){
                var data = [];
                
                container.children('.pixe-gallery-filter').each(function(){
                    var filter = {};
                    var images = [];
                    var filterImages = $(this).find('.pixe-gallery-filter-images');
                    
                    filterImages.children().each(function(){
                        if( $(this).data('value') ){
                            images.push($(this).data('value'));
                        }
                    });

                    if( $(this).data('title') ){
                        filter.title = $(this).data('title');
                    }
                    if( images.length ){
                        filter.images = images;
                    }

                    if( Object.keys(filter).length ){
                        data.push(filter);
                    }
                });

                return data;
            }
            function setState(data){
                if( data && data.length ){
                    if( data.length > 1 || data[0].title ){
                        gallery.addClass('pixe-init');
                        gallery.addClass('pixe-has-filter');
                    }else if( data[0].images && data[0].images.length ){
                        gallery.addClass('pixe-init');
                        gallery.removeClass('pixe-has-filter');
                    }
                }else{
                    gallery.removeClass('pixe-init');
                    gallery.removeClass('pixe-has-filter');
                }
            }
            function updateData(){
                var data = getData();
                setState(data);

                // update to parent object
                if( data.length == 0 ){
                    delete t.settings.obj[t.settings.slug];
                }else{
                    t.settings.obj[t.settings.slug] = data;
                }
                
                // trigger event
                t.settings.onChange(data, t.actionType, t.actionTarget);
            }
            
            setState(t.style);

            if( t.settings['gallery-filter'] ){
                
                // add filter button
                var newFilter = $('<div class="pixe-galler-filter-new" ><div class="pixe-svg-preset pixe-svg-add"></div>Add new filter</div>');
                newFilter.appendTo(gallery);

                // filter event
                newFilter.on('click', function(){
                    var confirmBox = $.pixeConfirmationName({
                        title: 'Add a new filter',
                        placeholder: 'Filter Name...'
                    });

                    confirmBox.on('click', '.pixe-submit', function(){
                        var filterName = confirmBox.find('input[type="text"]').val();

                        // invalid name
                        if( !filterName ){
                            $.pixeConfirmationBox({
                                title: 'Invalid Name',
                                message: 'Please fill a filter name.',
                                cancelText: ''
                            });
                            return;
                        }

                        // add title to first filter
                        var currentFilter = t.galleryFilter(container, {title: filterName});
                        currentFilter.siblings('.pixe-active').trigger('togglecontent');
                        t.actionType = 'add-filter';
                        t.actionTarget = undefined;
                        updateData();

                        // close
                        confirmBox.fadeOut(150, function(){
                            $(this).remove();
                        });
                    });
                });

            }

            // data event
            gallery.on('change', function(){
                updateData();
            });

            // edit image event
            gallery.on('click', '.pixe-grid-item .pixe-edit', function(){
                var image = $(this).closest('.pixe-grid-item');
                var imageData = image.data('value');
                
                image.addClass('pixe-active');
                new $.pixeStyleSelector({
                    obj: { '': imageData },
                    slug: '',
                    type: 'image-settings',
                    target: $(this),
                    onChange: function(value, type){
                        t.actionType = 'image-' + type;
                        t.actionTarget = {
                            filter: image.closest('.pixe-gallery-filter').index(),
                            index: image.index()
                        };
                        updateData();
                    },
                    onClose: function(){
                        image.removeClass('pixe-active');
                    }
                });
            });
            gallery.on('click', '.pixe-grid-item .pixe-remove', function(){
                var image = $(this).closest('.pixe-grid-item');
                image.remove();
                
                t.actionType = 'remove-image';
                t.actionTarget = undefined;
                updateData();

                var imageArea = image.closest('.pixe-gallery-filter-images');
                if( !imageArea.children().length ){
                    imageArea.removeClass('pixe-init');
                }
            });
        },

        typoGroup: function(container){
            var t = this;

            // content
            if( t.settings.typoGroup ){
                var activeGroup = '';
                var head = $('<div class="pixe-sselector-head pixe-style-tab" ></div>'); 
                for( var slug in t.settings.typoGroup ){
                    var title = t.settings.typoGroup[slug];
                    if( activeGroup ){
                        head.append('<span data-tab="' + slug + '" >' + title + '</span>');
                    }else{
                        activeGroup = slug;
                        head.append('<span data-tab="' + slug + '" class="pixe-active" >' + title + '</span>');
                    }
                    
                }
                head.appendTo(container);

                var content = $('<div class="pixe-sselector-content" ></div>');
                content.appendTo(container);
                t.typoSelector(content, activeGroup);

                head.on('click', '[data-tab]', function(){
                    if( $(this).hasClass('pixe-active') ) return;
                    $(this).addClass('pixe-active').siblings().removeClass('pixe-active');

                    content.empty();
                    activeGroup = $(this).attr('data-tab');
                    t.typoSelector(content, activeGroup);
                });
            }
        },
        
        typoSelector: function(container, group){
            var t = this;
            var data;
            if( group ){
                data = t.style[group];
                if( !data ){ data = {}; }
            }else{
                data = t.style;
            }

            // preset
            if( !t.settings.hidePreset ){
                var preset = $('<div class="pixe-sselector-typo-preset" ></div>');
                preset.appendTo(container);
                $.pixeGetInput('preset', data['preset'], {
                    'title': pixei18n.preset.typo,
                    'width': '1-1',
                    'type': 'typo-preset-combobox'
                }, preset);
            }
            
            // preset content
            var settings = $.pixeStyleSelectorOption['typo'];
            var content = $('<div class="pixe-sselector-typo-content" ></div>');
            content.appendTo(container);
            t.tabOptionState(content, settings);

            // bottom text for builder area
            if( $.pixeTypoSettings ){
                var presetManager = $('<div class="pixe-open-typo-preset" >Open Typography Preset Manager</div>');
                presetManager.appendTo(container);
                presetManager.on('click', function(){
                    $.pixeTypoSettings.init();
                });
            }

            // init value
            $.pixeTypoStyle.setTypoInput(data, content);

            if( !t.settings.hidePreset ){
                preset.find('.pixe-combobox').data('typo', data);
                
                // change preset
                preset.on('change', '.pixe-combobox', function(e){
                    var presetSlug = $(this).data('value');
                    
                    // update data
                    if( group ){
                        if( presetSlug ){ 
                            data['preset'] = presetSlug; 
                        }else{
                            delete data['preset'];
                        }
                        t.updateVal(group, data);
                    }else{
                        t.updateVal('preset', presetSlug, true, false);
                    }

                    // update typo data for saving preset
                    $(this).data('typo', data);
                });

                preset.on('cleartypo', '.pixe-combobox', function(e){
                    if( data.preset ){
                        data = { preset: data.preset };
                    }

                    if( group ){
                        t.updateVal(group, data);
                    }else{
                        t.style = data;
                        t.updateVal('preset', data.preset, true, false);
                    }
                    
                    $.pixeTypoStyle.setTypoInput(data, content);
                });
            }

            // value change
            content.on('click', '[data-device]', function(){
                $.pixeTypoStyle.setTypoInput(data, content);
            });
            content.on('change', '[data-slug]', function(){
                var slug = $(this).attr('data-slug');
                var value = $.pixeGetInputVal($(this));
                
                if( group ){
                    if( value ){
                        data[slug] = value;
                    }else{
                        delete data[slug];
                    }
                    t.updateVal(group, data);
                }else{
                    t.updateVal(slug, value, true, false);
                }

                // update typo data for saving preset
                if( preset && preset.length ){
                    preset.find('.pixe-combobox').data('typo', data);
                }
            });
            
        },

        tabBackgroundMediaContent: function(container, device, pointer){
            var t = this;
            var key  = (device)? device: 'desktop';
                key += (!pointer || pointer == 'normal')? '': '-' + pointer;

            // init value
            var background = t.style[key];
            if( !background ){ background = {}; }

            // inner tab
            var tabs = {
                image: 'Image',
                video: 'Video',
                map: 'Map'
            };
            if( device != 'desktop' && pointer == 'normal' ){
                tabs['none'] = 'None';
            }

            var activeTab = (background.type)? background.type: 'image';
            var head = $('<div class="pixe-sselector-content-tab" ></div>');
            head.appendTo(container);
            for( var slug in tabs ){
                head.append('<span data-tab="' + slug + '" >' + tabs[slug] + '</span>');
            }
            head.find('[data-tab="' + activeTab + '"]').addClass('pixe-active');

            var tabContent = $('<div class="pixe-sselector-media-content" ></div>');
            tabContent.appendTo(container);

            function getMediaTab(isChange = true){
                tabContent.empty().off();

                // get tab content
                if( activeTab != 'none' ){
                    t.tabMediaContent(activeTab, tabContent, key, background);
                }else{

                    // remove others key if change to none
                    if( isChange ){
                        for( var i in background ){
                            delete background[i];
                        }
                    }
                }
                
                // update type
                if( activeTab == 'image' ){
                    delete background.type;
                }else{
                    background.type = activeTab;
                }
                t.updateVal(key, background, isChange);
            }

            getMediaTab(false);
            head.on('click', '[data-tab]', function(){
                if( $(this).hasClass('pixe-active') ) return '';
                $(this).addClass('pixe-active').siblings().removeClass('pixe-active');
                
                activeTab = $(this).attr('data-tab');
                getMediaTab();
            });
        },

        // tab media content
        tabMediaContent: function(tab, container, key, background){
            var t = this;

            var settings;
            switch(tab){
                case 'image':
                    settings = $.pixeStyleSelectorOption['container-bg-image'];
                    break;
                case 'video':
                    settings = $.pixeStyleSelectorOption['container-bg-video'];
                    break;
                case 'map':
                    settings = $.pixeStyleSelectorOption['container-bg-map'];
                    break;
            }
            settings.group = key;
            t.tabOptionCustom(container, settings);

            // bind
            container.on('change', '[data-slug]', function(e){
                var slug = $(this).attr('data-slug');
                var value = $.pixeGetInputVal($(this));

                // update input
                if( value ){
                    background[slug] = value;
                }else{
                    delete background[slug];
                }

                t.updateVal(key, background, true, true, slug);

                // apply conditional
                container.find('[data-condition]').each(function(){
                    $(this).pixeInputCondition(t.style, '', '', settings.group);
                });
            });
            
            // button callback
            container.on('click', '.pixe-button-callback', function(){
                var button = $(this);
                var callback = button.attr('data-button-callback');
                if( callback && $.pixeCallback[callback] ){
                    $.pixeCallback[callback](button, t.style, t.settings.callbackItem);
                }
            });

        },

        tabOption: function(container, tabs){
            var t = this;

            var activeTab = t.settings.initialTab;
            if( !activeTab ){
                activeTab = typeof(tabs[0]) == 'object'? tabs[0].slug: tabs[0];
            }

            // tab head
            var settings;
            var head = $('<div class="pixe-sselector-head pixe-style-tab" ></div>'); 
            for( var i in tabs ){
                var slug = tabs[i];
                
                if( slug == 'close' ){
                    head.append($.pixeGetAdminIcon('cancel', { class: 'pixe-close' }));
                }else{

                    var title;
                    if( typeof(slug) == 'object' ){
                        slug = tabs[i].slug;
                        title = tabs[i].label;
                    }else{
                        if( typeof($.pixeStyleSelectorOption[slug]) == 'function'){
                            settings = $.pixeStyleSelectorOption[slug]();
                        }else{
                            settings = $.pixeStyleSelectorOption[slug];
                        }
                        title = settings['tab-title']? settings['tab-title']: settings.title;
                    }
                    head.append('<span data-tab="' + slug + '" ' + (slug == activeTab? 'class="pixe-active"': '') + ' >' + title + '</span>');
                }
                
            }
            head.appendTo(container);

            // tab content
            var content = $('<div class="pixe-sselector-content" ></div>');
            content.appendTo(container);
            if( typeof($.pixeStyleSelectorOption[activeTab]) == 'function'){
                settings = $.pixeStyleSelectorOption[activeTab]();
            }else{
                settings = $.pixeStyleSelectorOption[activeTab];
            }
            t.tabOptionState(content, settings);

            // bind events
            head.on('click', '[data-tab]', function(){
                if( $(this).hasClass('pixe-active') ) return '';
                $(this).addClass('pixe-active').siblings().removeClass('pixe-active');
                
                content.empty();
                activeTab = $(this).attr('data-tab');
                if( typeof($.pixeStyleSelectorOption[activeTab]) == 'function'){
                    settings = $.pixeStyleSelectorOption[activeTab]();
                }else{
                    settings = $.pixeStyleSelectorOption[activeTab];
                }
                t.tabOptionState(content, settings);
            });
            head.on('click', '.pixe-close', function(){
                t.popup.close();
            });
        },

        tabOptionState: function(content, settings){
            var t = this;

            // no state and device
            if( !settings['pointer-state'] && !settings['device-selector'] ){
                t.tabOptionCustom(content, settings);
            
            // with state or device
            }else{
                var currentDevice = t.settings.device;
                var currentPointer = 'normal';
                if( settings['save-state'] && t.style['state'] ){
                    currentPointer = t.style['state']
                }
                if( currentPointer == 'fluid' ){
                    currentDevice = 'desktop';
                }

                var state = $('<div class="pixe-sselector-state" ></div>');
                if( settings['pointer-state'] ){
                    state.append($.pixePointerState(settings['pointer-state'], currentPointer));

                    if( settings['device-selector'] ){
                        state.append($.pixeDeviceSelector(currentDevice, 'pixe-minimize'));
                    }
                }else{
                    state.addClass('pixe-state-device');
                    state.append($.pixeDeviceSelector(currentDevice));
                }
                state.appendTo(content);
                state.attr('data-state', currentPointer);

                // container
                var container = $('<div class="pixe-sselector-inner" ></div>');
                container.appendTo(content);
                t.tabOptionCustom(container, settings, currentDevice, currentPointer);

                // events
                state.on('click', '[data-state]', function(){
                    if( $(this).hasClass('pixe-active') ) return;
                    $(this).addClass('pixe-active').siblings().removeClass('pixe-active');

                    currentPointer = $(this).attr('data-state');
                    state.attr('data-state', currentPointer);

                    // save state as value
                    if( settings['save-state'] ){
                        var stateVal = currentPointer == 'normal'? '': currentPointer;
                        t.updateVal('state', stateVal);
                    }

                    // only for fluid state, reset device
                    if( currentPointer == 'fluid' ){
                        state.find('[data-device="desktop"]').trigger('click');
                    }else{
                        container.empty();
                        t.tabOptionCustom(container, settings, currentDevice, currentPointer);
                    }
                });
                if( $.pixeBuilder && !t.settings.ignoreViewport ){
                    state.on('click', '[data-device]', function(){
                        $.pixeBuilder.changeViewport($(this).attr('data-device'));
                    });
                    state.on('viewport-update', '.pixe-device-selector', function(){
                        var activeViewport = $(this).find('[data-device="' + $.pixeBuilder.viewport + '"]');
                        activeViewport.addClass('pixe-active').siblings().removeClass('pixe-active');
    
                        container.empty();
                        currentDevice = $.pixeBuilder.viewport;
                        t.tabOptionCustom(container, settings, currentDevice, currentPointer);
                    });
                }else{
                    state.on('click', '[data-device]', function(){
                        container.empty();
                        currentDevice = $(this).attr('data-device');
                        $(this).addClass('pixe-active').siblings().removeClass('pixe-active');
                        t.tabOptionCustom(container, settings, currentDevice, currentPointer);
                    });
                }
                
            }
        },

        tabOptionCustom: function(content, settings, device = '', pointer = ''){
            var t = this;
            var data;
            var groupSlug;
            if( settings.group ){
                groupSlug = $.pixeGetStateSlug(settings.group, device, pointer);
                data = t.style[groupSlug];
                if( !data ){ data = {}; }
            }else{
                data = t.style;
            }

            // options
            var container = $('<div class="pixe-sselector-options pixe-scrollbar" ></div>');
            container.appendTo(content);
            for( var slug in settings.options ){
                var options = settings.options[slug];
                
                // group option
                if( options.type == 'div' || options.type == 'toggle' ){

                    // check whether to show input
                    if( $.pixeShowInput(device, pointer, options) === false ){ continue; }
                    
                    var innerContainer = $('<div></div>');

                    // normal div option
                    if( options.type == 'div' ){
                        innerContainer.appendTo(container);

                        if( options.title ){
                            var areaTitle = options.title;
                            if( options.reset ){
                                areaTitle += $.pixeResetValue();
                            }
                            innerContainer.append('<label>' + areaTitle + '</label>');
                        }
                        if( options.class ){
                            innerContainer.addClass(options.class);
                        }
                        if( options.condition ){
                            innerContainer.attr('data-condition', '');
                            innerContainer.data('condition', options.condition);
                        }

                    // toggle option
                    }else if( options.type == 'toggle' ){
                        var toggle = $('<div class="pixe-sselector-toggle-area pixe-toggle-ud" ></div>');
                        var toggleTitle = $('<div class="pixe-sselector-toggle-title pixe-toggle-icon" ></div>');
                        var toggleContent = $('<div class="pixe-sselector-toggle-content" ></div>');
                        if( options.title ){ toggleTitle.append(options.title); }
                        
                        toggle.append(toggleTitle);
                        toggle.append(toggleContent);
                        toggleContent.append(innerContainer);

                        innerContainer.addClass('pixe-sselector-area');
                        container.addClass('pixe-type-toggle');
                        container.append(toggle);
                    }

                    // inner content
                    for( var innerSlug in options.options ){
                        var innerOptions = options.options[innerSlug];

                        // check whether to show input
                        if( $.pixeShowInput(device, pointer, innerOptions) === false ){ continue; }

                        if( !settings.group ){
                            innerSlug = $.pixeGetStateSlug(innerSlug, device, pointer);
                        }

                        $.pixeGetInput(innerSlug, data[innerSlug], innerOptions, innerContainer);
                    }

                    // bind reset button
                    if( options.type == 'div' && options.reset ){
                        innerContainer.pixeResetValue();
                    }

                // single option
                }else{  

                    // check whether to show input
                    if( $.pixeShowInput(device, pointer, options) === false ){ continue; }
                    
                    if( !settings.group ){
                        slug = $.pixeGetStateSlug(slug, device, pointer);
                    }
                    $.pixeGetInput(slug, data[slug], options, container);
                }
            }

            // init conditional
            container.find('[data-condition]').each(function(){
                $(this).pixeInputCondition(t.style, device, pointer, settings.group);
            });

            // event
            if( settings['onchange-event'] !== false ){
                container.on('input change pickerchange', '[data-slug]', function(e){
                    if( $(e.target).hasClass('pixe-picker-wrap') && e.type != 'pickerchange' ){ return; }
                    if( $(e.target).is('input[type="checkbox"], input[type="radio"]') && e.type == 'input' ){ return; }

                    var slug = $(this).attr('data-slug');
                    var value = $.pixeGetInputVal($(this));
                    var callback; 
                    
                    // callback data
                    if( settings['data-callback'] && $.pixeCallback[settings['data-callback']] ){
                        callback = $.pixeCallback[settings['data-callback']];
                    }

                    // update value
                    if( settings.group ){
                        $.pixeSetData(data, slug, value);
                        t.updateVal(groupSlug, data, undefined, undefined, undefined, callback);
                    }else{
                        t.updateVal(slug, value, undefined, undefined, undefined, callback);
                    }

                    // apply conditional
                    container.find('[data-condition]').each(function(){
                        $(this).pixeInputCondition(t.style, device, pointer, settings.group);
                    });
                });

                container.on('click', '.pixe-button-callback', function(){
                    var button = $(this);
                    var callback = button.attr('data-button-callback');
                    if( callback && $.pixeCallback[callback] ){
                        $.pixeCallback[callback](button, t.style, t.settings.callbackItem);
                    }
                });
            }

            // toggle content
            container.on('click', '.pixe-sselector-toggle-title', function(){
                var area = $(this).closest('.pixe-sselector-toggle-area');
                var content = $(this).siblings('.pixe-sselector-toggle-content');
                if( area.hasClass('pixe-active') ){
                    content.slideUp(150);
                    area.removeClass('pixe-active');
                }else{
                    content.slideDown(150);
                    area.addClass('pixe-active');
                    area.siblings('.pixe-active').removeClass('pixe-active').children('.pixe-sselector-toggle-content').slideUp(150);
                }
            });

            if( typeof(settings.bottom) == 'function' ){
                settings.bottom(t, container);
            }
        },

        colorpicker: function(slug = 'color', value, withGradient = true, withPreset = true){
            var t = this;
            var colorWrap = $('<div class="pixe-colorpicker" ></div>');

            // type
            if( withGradient ){
                var colorType = $('<div class="pixe-type" ></div>');
                colorType.append('<div data-type="solid" >Solid</div>');
                colorType.append('<div data-type="gradient" >Gradient</div>');
                colorType.append('<div data-type="radial" >Radial</div>');
                colorWrap.append(colorType);
            }
            
            // colorpicker
            var pickerWrap = $('<div class="pixe-picker-wrap" ></div>');
            pickerWrap.attr('data-slug', slug);
            pickerWrap.data('value', value);
            pickerWrap.appendTo(colorWrap);

            // footer
            var pickerFooter = $('<div class="pixe-colorpicker-footer" ></div>');
            pickerFooter.appendTo(colorWrap);
            t.getPickerFooter(pickerFooter, pickerWrap, withPreset);

            function initColor(){
                var type = 'solid';
                var colorValue = $.pixeGetColorValue(pickerWrap.data('value'));
    
                // get value type
                if( withGradient ){
                    if( typeof(colorValue) == 'object' ){
                        if( colorValue.type ){
                            type = colorValue.type;
                        }else{
                            type = 'solid';
                        }
                    }
                    colorType.find('[data-type="' + type + '"]').addClass('pixe-active').siblings().removeClass('pixe-active');
                }
                t.changeColorType(pickerWrap, pickerFooter, type, false);
            }

            // on change tab
            initColor();
            pickerWrap.on('initvalue2', function(){
                initColor();
            });
            if( withGradient ){
                colorType.on('click', '[data-type]', function(){
                    if( $(this).hasClass('pixe-active') ) return;
                    $(this).addClass('pixe-active').siblings().removeClass('pixe-active');

                    var type = $(this).attr('data-type');
                    t.changeColorType(pickerWrap, pickerFooter, type, false);
                });
            }
            
            return colorWrap;
        },

        changeColorType: function(pickerWrap, pickerFooter, type, isChanged = true){
            var value = pickerWrap.data('value');
            var colorValue = $.pixeGetColorValue(value);
            pickerWrap.empty();

            switch(type){
                case 'solid':
                    var picker = $('<div class="pixe-picker" ></div>');
                    picker.data('value', colorValue);
                    pickerWrap.append(picker);
                    pickerWrap.pixePicker();
                    
                    // update value
                    if( isChanged ){
                        pickerWrap.data('value', picker.data('value')).trigger('pickerchange');
                    }
                    picker.on('colorchange', function(){
                        pickerWrap.data('value', picker.data('value')).trigger('pickerchange');
                    });
                    break;
                
                case 'gradient':
                case 'radial':    
                    var picker = $('<div class="pixe-gradient-picker" data-type="' + type + '" ></div>');
                    picker.data('value', colorValue);
                    pickerWrap.append(picker);
                    pickerWrap.pixeGradientPicker();
                    
                    // update value
                    if( isChanged ){
                        pickerWrap.data('value', picker.data('value')).trigger('pickerchange');
                    }
                    picker.on('gradientchange', function(e){
                        pickerWrap.data('value', picker.data('value')).trigger('pickerchange');
                    });
                    break;
            }

            // bind picker to footer
            pickerWrap.find('.pixe-picker').on('colorchange initvalue initstate', function(){
                var footerInput = pickerFooter.find('input');
                var footerInputType = footerInput.siblings('.pixe-combobox').data('value');
                if( footerInputType == 'rgb' ){
                    pickerFooter.find('input').val($(this).data('value'));
                }else{
                    pickerFooter.find('input').val($(this).data(footerInputType));
                }
            }).trigger('initstate');

        },

        getPickerFooter: function(container, pickerWrap, withPreset = true){
            var t = this;
            var variablePresetOnly = (withPreset == 'variable');
            
            // preset section
            if( withPreset ){
                var value = pickerWrap.data('value');
                
                var colorPresetTabs = { preset: 'Color Preset', variable: 'Color Variables' };;
                var colorPresetOptions = $.pixeComboboxOption.colorPreset();
                if( variablePresetOnly ){
                    colorPresetTabs = { variable: colorPresetTabs.variable };
                    colorPresetOptions = { variable: colorPresetOptions.variable };
                }

                var comboboxBottom = '<div class="pixe-combobox-tab-bottom pixe-no-user-select" >';
                if( !variablePresetOnly ){
                    comboboxBottom += $.pixeComboboxBottom('Color Presets', 'color', undefined, 'preset');
                }
                comboboxBottom += $.pixeComboboxBottom('Variable Manager', undefined, undefined, 'variable');
                comboboxBottom += '</div>';

                var colorPreset = $('<div class="pixe-colorpicker-footer-preset" ></div>');
                colorPreset.appendTo(container);
                colorPreset.append($.pixeCombobox({
                    class: 'pixe-color-preset-combobox',
                    value: (typeof(value) == 'object' && value.type == 'preset' && value.name)? value.name:
                        ((typeof(value) == 'object' && value.type == 'variable' && value.name)? value.name: ''),
                    top: $.pixeComboboxTab(colorPresetTabs),
                    bottom: comboboxBottom,
                    options: colorPresetOptions,
                    placeholder: 'Custom Color',
                    popupClass: 'pixe-color-combobox-popup'
                }));
                colorPreset.append('<div class="pixe-color-preset-clear" ><svg width="16" height="13" viewBox="0 0 16 13" fill="none" ><path d="M0.970141 0.129414C0.710141 -0.0787895 0.332641 -0.0305473 0.127641 0.233515C-0.0773595 0.497578 -0.0298595 0.880976 0.230141 1.08918L15.0301 12.8704C15.2901 13.0786 15.6676 13.0304 15.8726 12.7663C16.0776 12.5023 16.0301 12.1189 15.7701 11.9107L12.2326 9.09484L14.4951 6.79699C15.9076 5.36242 15.9076 3.03918 14.4951 1.60461C13.2451 0.335078 11.2751 0.170039 9.83764 1.21359L9.79764 1.24152C9.43764 1.50305 9.35514 2.01086 9.61264 2.37394C9.87014 2.73703 10.3701 2.82336 10.7276 2.56184L10.7676 2.53391C11.5701 1.95246 12.6676 2.04387 13.3626 2.75227C14.1501 3.55207 14.1501 4.84699 13.3626 5.6468L10.9626 8.0843L10.1651 7.44953C10.7726 6.08352 10.5026 4.44582 9.42514 3.35148C8.12014 2.02355 6.06264 1.92453 4.64264 3.05441L0.970141 0.129414ZM5.97514 4.1132C6.72764 3.73488 7.66764 3.86184 8.29514 4.50168C8.79514 5.00949 8.98264 5.72805 8.83764 6.39328L5.97514 4.1132ZM10.1651 10.5726L5.52264 6.85539C5.47014 7.86594 5.82764 8.88918 6.57764 9.64836C7.55014 10.6361 8.93764 10.9433 10.1676 10.57L10.1651 10.5726ZM2.91514 4.77082L1.50514 6.20285C0.0926406 7.63742 0.0926406 9.96066 1.50514 11.3952C2.75514 12.6648 4.72514 12.8298 6.16264 11.7863L6.20264 11.7583C6.56264 11.4968 6.64514 10.989 6.38764 10.6259C6.13014 10.2628 5.63014 10.1765 5.27264 10.438L5.23264 10.4659C4.43014 11.0474 3.33264 10.956 2.63764 10.2476C1.85014 9.44523 1.85014 8.15031 2.63764 7.35051L4.18264 5.78137L2.91764 4.76828L2.91514 4.77082Z" fill="#7E8497"/></svg></div>');
                
                // if previous value is preset - clear preset and apply current color
                function clearPreset(){
                    var currentValue = pickerWrap.data('value');
                    var preset = $.pixeColorStyle.getActivePreset();
                    if( typeof(currentValue) == 'object' && currentValue.type == 'preset' ){
                        if( preset && preset.value && preset.value[currentValue.name] ){
                            pickerWrap.data('value', preset.value[currentValue.name]).trigger('pickerchange');
                        }else{
                            pickerWrap.removeData().trigger('pickerchange');
                        }
                    }else if( typeof(currentValue) == 'object' && currentValue.type == 'variable' ){
                        pickerWrap.removeData().trigger('pickerchange');
                    }
                }

                // button click
                colorPreset.on('click', '.pixe-color-preset-clear', function(){
                    clearPreset();
                    colorPreset.find('.pixe-combobox').pixeInputUpdate('', false);
                });

                // change preset
                colorPreset.pixeCombobox({
                    contentFilter: t.getColorComboboxFilter
                });
                colorPreset.on('change', '.pixe-combobox', function(){
                    var value = $(this).data('value');
                    if( value ){
                        if( typeof(value) == 'string' && value.indexOf('--') == 0 ){
                            pickerWrap.data('value', { type: 'variable', name: value }).trigger('pickerchange').trigger('initvalue2');
                        }else{
                            pickerWrap.data('value', { type: 'preset', name: value }).trigger('pickerchange').trigger('initvalue2');
                        }
                    }else{
                        clearPreset();
                    }
                });

                // picker data changed, check if not trigger by preset, clear preset combobox
                pickerWrap.on('pickerchange', function(){
                    var value2 = $(this).data('value');
                    if( typeof(value2) != 'object' || (value2.type != 'preset' && value2.type != 'variable') ){
                        colorPreset.find('.pixe-combobox').pixeInputUpdate('', false);
                    }
                });
            }

            // color input section
            var colorInput = $('<div class="pixe-colorpicker-footer-input" ></div>');
            colorInput.appendTo(container);

            // type
            var colorCode = $('<div class="pixe-head" ></div>');
            colorCode.append($.pixeCombobox({
                class: 'pixe-borderless pixe-no-arrow',
                popupClass: 'pixe-small pixe-combobox-popup-hex',
                options: $.pixeComboboxOption.object({hex: 'HEX', rgb: 'RGB', hsl: 'HSL'})
            }));
            colorCode.append('<input type="text" />');
            colorCode.appendTo(colorInput);
            colorCode.pixeCombobox();

            // add to preset
            if( withPreset && !variablePresetOnly ){
                colorInput.append($.pixeGetAdminIcon('plus', {class: 'pixe-color-preset-add'}));
                colorInput.on('click', '.pixe-color-preset-add', function(){
                    $.pixeColorStyle.createNewColor(pickerWrap.data('value'), colorPreset.find('.pixe-combobox'));
                });
            }

            // clear
            colorInput.append('<div class="pixe-clear-color" >Clear</div>');
            
            // bind color input
            colorInput.on('change', '.pixe-combobox', function(){
                var picker = pickerWrap.find('.pixe-picker');
                var input = $(this).siblings('input');
                var inputType = $(this).data('value');

                if( inputType == 'rgb' ){
                    input.val(picker.data('value'));
                }else{
                    input.val(picker.data(inputType));
                }
            });
            colorInput.on('change', 'input', function(){
                var value = $(this).val();
                var picker = pickerWrap.find('.pixe-picker');
                var inputType = $(this).siblings('.pixe-combobox').data('value');
                
                // auto add # before hex input
                if( value.length > 0 && value.indexOf('#') == -1 && inputType == 'hex' ){
                    value = '#' + value;
                    $(this).val(value);
                }

                picker.data('value', value).trigger('setvalue');
            });
            colorInput.on('click', '.pixe-clear-color', function(){
                colorInput.find('input[type="text"]').val('');
                pickerWrap.removeData().trigger('pickerchange');
            }); 
        },

        getColorComboboxFilter: function(content, combobox, popup){
            var t = this;

            content.addClass('pixe-color-preset-custom');

            // select option
            content.on('click', '.pixe-option', function(e){
                var option = $(this);
                var slug = option.data('value');

                combobox.children('.pixe-text').html(option.html());
                combobox.data('value', slug);
                combobox.trigger('change');
                popup.close();
            });
            
            // bottom settings
            content.on('click', '.pixe-combobox-bottom-option', function(){
                var type = $(this).attr('data-tab');
                
                // open color settings
                if( type == 'preset' ){
                    if( $.pixeBuilder ){
                        $.pixeColorSettings.init();
                    }else{
                        $.pixeEditor.setParentStatus({
                            event: 'colors',
                            action: 'edit'
                        });
                    }
                
                // open variable settings
                }else if( type == 'variable' ){
                    if( $.pixeVariableSettings ){
                        $.pixeVariableSettings.init();
                    }else{
                        $.pixeEditor.setParentStatus({
                            event: 'variables',
                            action: 'edit'
                        });
                    }
                }
            });
        },

        updateVal: function(slug, value, isChanged = true, syncStyleData = true, overrideSlug = '', dataCallback){
            var t = this;

            // retrive the value again incase there're changes especially on builder where single option is separated
            if( syncStyleData ){
                if( t.settings.slug === false ){
                    t.style = t.settings.obj;
                }else{
                    t.style = t.settings.obj[t.settings.slug]; 
                }
                if( !t.style || typeof(t.style) != 'object' ){ t.style = {}; }
            }

            // set or delete value
            if( value ){
                if( typeof(value) == 'object' && Object.keys(value).length == 0 ){
                    delete t.style[slug];
                }else if( Array.isArray(value) && value.length == 0 ){
                    delete t.style[slug];
                }else{
                    t.style[slug] = value;
                }
            }else if( t.style[slug] ){
                delete t.style[slug];
            }

            // update data from callback function
            if( typeof(dataCallback) == 'function' ){
                dataCallback(t.style, slug, t);
            }

            // update to parent object
            if( t.settings.slug !== false ){
                if( Object.keys(t.style).length == 0 ){
                    delete t.settings.obj[t.settings.slug];
                }else{
                    t.settings.obj[t.settings.slug] = t.style;
                }
            }
            
            // trigger event
            if( isChanged ){
                if( overrideSlug ){
                    t.settings.onChange(t.style, overrideSlug);
                }else{
                    t.settings.onChange(t.style, slug);
                }
            }
        },

    };

    $.fn.pixeGradientPicker = function(){
        $(this).find('.pixe-gradient-picker').each(function(){
            new $.pixeGradientPicker($(this));
        });
    }
    $.pixeGradientPicker = function(container){
        if( container.hasClass('pixe-init') ) return;
        container.addClass('pixe-init');

        var t = this;
        t.movingMarker = false;
        t.activeMarker = false;

        container.addClass('pixe-box-sizing');
        t.container = container;
        t.type = (container.attr('data-type'))? container.attr('data-type'): 'gradient';
        t.gradient = container.data('value');

        t.gradientArea = $('<div class="pixe-picker-gradient" ></div>').appendTo(container);
        t.gradientBackground = $('<div class="pixe-picker-gradient-background" >').appendTo(t.gradientArea);
        t.gradientNew = $('<div class="pixe-picker-gradient-new" ><svg width="8" height="8" viewBox="0 0 8 8" fill="none" ><path d="M3.58478 7.33333C3.58478 7.56346 3.77136 7.75 4.00144 7.75C4.23157 7.75 4.41811 7.56346 4.41811 7.33333V4.41663H7.33478C7.5649 4.41663 7.75145 4.23008 7.75145 3.99996C7.75145 3.76983 7.5649 3.58329 7.33478 3.58329H4.41811V0.666667C4.41811 0.43655 4.23157 0.25 4.00144 0.25C3.77136 0.25 3.58478 0.43655 3.58478 0.666667V3.58329H0.668131C0.438015 3.58329 0.251465 3.76983 0.251465 3.99996C0.251465 4.23008 0.438015 4.41663 0.668131 4.41663H3.58478V7.33333Z" fill="#434343"/></svg></div>').appendTo(t.gradientArea);
        t.picker = $('<div class="pixe-picker" ></div>').appendTo(container);
        container.pixePicker();

        t.init();
    }
    $.pixeGradientPicker.prototype = {

        init: function(){
            var t = this;

            // init value
            if( !t.gradient ){
                t.gradient = {
                    0: 'rgba(0, 0, 0, 1)',
                    100: 'rgba(255, 0, 0, 1)',
                    type: t.type
                };
            }else if( typeof(t.gradient) == 'string' ){
                t.gradient = {
                    0: t.gradient,
                    100: 'rgba(255, 0, 0, 1)',
                    type: t.type
                }
            }else{
                t.gradient.type = t.type;
            }
            t.container.data('value', t.gradient);

            // angle
            if( t.type == 'gradient' ){
                var angle = $('<div class="pixe-picker-gradient-angle" ></div>');
                angle.append('<div class="pixe-title" >Angle</div>')
                angle.append($.pixeRangeInput({
                    min: 0,
                    max: 360,
                    width: 60,
                    value: t.gradient.angle
                }));
                angle.pixeRangeInput();
                angle.appendTo(t.container);
                angle.on('input change slidechange', 'input', function(){
                    t.getVal();
                });
            }

            // initialize marker
            for( var percent in t.gradient ){
                if( isNaN(percent) ) continue;

                var marker = $('<div class="pixe-picker-gradient-marker" ></div>');
                marker.css('background', t.gradient[percent]);
                marker.attr('data-color', t.gradient[percent]);
                marker.css({ left: percent + '%' });
                marker.attr('data-position', percent);
                marker.appendTo(t.gradientArea);

                if( !t.activeMarker ){
                    t.setActiveMarker(marker);
                }
            }
            t.setBackground();
            t.bindMarker();
            
            // on marker color change
            t.picker.on('colorchange', function(e){
                if( !t.activeMarker ) return;

                var color = $(this).data('value');
                t.activeMarker.css({ background: color });
                t.activeMarker.attr('data-color', color);
                t.getVal();
                t.setBackground();
            });
        },

        setBackground: function(marker){
            var t = this;
            var css = 'linear-gradient(90deg';
            for( var percent in t.gradient ){
                if( isNaN(percent) ) continue;
                css += ', ' + t.gradient[percent] + ' ' + percent + '%';
            }
            css += ')';

            t.gradientBackground.css({'background': css});
        },

        getVal: function(){
            var t = this;
            t.gradient = {};
            
            // marker
            t.gradientArea.children('.pixe-picker-gradient-marker').each(function(){
                t.gradient[$(this).attr('data-position')] = $(this).attr('data-color');
            });
            
            // angle & type
            t.container.find('.pixe-picker-gradient-angle input').each(function(){
                if( $(this).val() ){
                    t.gradient.angle = $(this).val();
                }
            });
            t.gradient.type = t.type;
            t.container.data('value', t.gradient);
            t.container.trigger('gradientchange');
        },

        setActiveMarker: function(marker){
            var t = this;
            
            t.activeMarker = marker;
            t.activeMarker.addClass('pixe-active').siblings().removeClass('pixe-active');
            t.picker.data('value', marker.attr('data-color'));
            t.picker.trigger('initvalue');
        },

        bindMarker: function(){
            var t = this;

            function moveGradientMarker(e){
                e.preventDefault();
                t.isMarkerMove = true;

                var xPos = 0;
                var cArea = t.gradientArea.offset();

                if( e.pageX < cArea.left ){
                    xPos = 0;
                }else if( e.pageX > cArea.left + t.gradientArea.outerWidth() ){
                    xPos = 100;
                }else{
                    xPos = parseInt((e.pageX - cArea.left) * 100 / t.gradientArea.outerWidth());
                }

                t.movingMarker.css({ left: xPos + '%' });
                t.movingMarker.attr('data-position', xPos);
                t.getVal();
                t.setBackground();
            }

            // move or create new marker 
            t.gradientArea.on('mousedown', function(e){
                if( e.buttons !== 1 ) return;

                var target = $(e.target);
                t.displayRemoveMarker = false;
                t.isMarkerMove = false;

                // move marker
                if( target.closest('.pixe-picker-gradient-marker').length ){
                    if( target.closest('.pixe-picker-gradient-marker').is(t.activeMarker) ){
                        t.displayRemoveMarker = true;
                    }

                    t.movingMarker = target;
                    t.setActiveMarker(target);
                    $(document.body).on('mousemove', moveGradientMarker);
                    $(document.body).on('mouseup', function(e){
                        t.movingMarker = false;
                        $(document.body).off(e);
                        $(document.body).off('mousemove', moveGradientMarker);
                    });

                // new marker
                }else{
                    var marker = $('<div class="pixe-picker-gradient-marker" ></div>');
                    marker.css('background', 'rgba(255, 0, 0, 1)');
                    marker.attr('data-color', 'rgba(255, 0, 0, 1)');
                    marker.appendTo(t.gradientArea);

                    // set initial position
                    t.movingMarker = marker;
                    t.setActiveMarker(marker);
                    moveGradientMarker(e);
                    t.movingMarker = false;
                }
            });
            t.gradientArea.on('mouseup', function(e){
                if( t.displayRemoveMarker && !t.isMarkerMove ){
                    t.showRemoveMarker();
                }
            });

            // new marker visual
            t.gradientArea.on('mousemove', function(e){
                if( t.targetMarker ) return;

                if( $(e.target).closest('.pixe-picker-gradient-marker').length ){
                    t.gradientNew.removeClass('pixe-active');
                }else{
                    t.gradientNew.addClass('pixe-active');
                    t.gradientNew.css({ left: e.offsetX });
                }
            });
            t.gradientArea.on('mouseout', function(e){
                t.gradientNew.removeClass('pixe-active');
            });

        },

        showRemoveMarker: function(){
            var t = this;
            var removeMarker = $('<div class="pixe-remove-marker" ><svg width="16" height="16" viewBox="0 0 16 16" fill="none" ><path d="M6.66667 6.66663C7.03487 6.66663 7.33333 6.96511 7.33333 7.33331V10.6666C7.33333 11.0348 7.03487 11.3333 6.66667 11.3333C6.29848 11.3333 6 11.0348 6 10.6666V7.33331C6 6.96511 6.29848 6.66663 6.66667 6.66663Z" fill="white"/><path d="M9.33317 6.66663C9.70137 6.66663 9.99984 6.96511 9.99984 7.33331V10.6666C9.99984 11.0348 9.70137 11.3333 9.33317 11.3333C8.96497 11.3333 8.6665 11.0348 8.6665 10.6666V7.33331C8.6665 6.96511 8.96497 6.66663 9.33317 6.66663Z" fill="white"/><path fill-rule="evenodd" clip-rule="evenodd" d="M6.00016 0.666626C5.26378 0.666626 4.66683 1.26358 4.66683 1.99996V3.33329H2.00016C1.63198 3.33329 1.3335 3.63177 1.3335 3.99996C1.3335 4.36815 1.63198 4.66663 2.00016 4.66663H2.74526L3.25967 13.4116C3.30113 14.1164 3.88474 14.6666 4.5907 14.6666H11.4096C12.1156 14.6666 12.6992 14.1164 12.7406 13.4116L13.2551 4.66663H14.0002C14.3684 4.66663 14.6668 4.36815 14.6668 3.99996C14.6668 3.63177 14.3684 3.33329 14.0002 3.33329H11.3335V1.99996C11.3335 1.26358 10.7366 0.666626 10.0002 0.666626H6.00016ZM4.0809 4.66663L4.5907 13.3333H11.4096L11.9194 4.66663H4.0809ZM6.00016 1.99996H10.0002V3.33329H6.00016V1.99996Z" fill="white"/></svg></div>');
            var removeMarkerPopup = new $.pixePopup({
                content: removeMarker,
                target: t.activeMarker,
                position: 'top-center'
            });

            removeMarker.on('click', function(){
                t.activeMarker.remove();
                removeMarkerPopup.close();

                t.getVal();
                t.setBackground();
            });
        }

    }

    $.fn.pixePicker = function(){
        $(this).find('.pixe-picker').each(function(){
            new $.pixePicker($(this));
        });
    }
    $.pixePicker = function(container){
        if( container.hasClass('pixe-init') ) return;
        container.addClass('pixe-init');

        var t = this;

        container.addClass('pixe-box-sizing');
        t.container = container;
        t.colorArea = $('<div class="pixe-picker-color" ></div>').appendTo(container);
        t.colorMarker = $('<div class="pixe-picker-color-marker" ></div>').appendTo(t.colorArea);
        t.hueArea = $('<div class="pixe-picker-hue" ></div>').appendTo(container);
        t.hueMarker = $('<div class="pixe-picker-hue-marker" ></div>').appendTo(t.hueArea);
        t.hueInput = $('<input class="pixe-picker-range" type="range" min="0" max="360" step="1" />').appendTo(t.hueArea);
        t.alphaArea = $('<div class="pixe-picker-alpha" ><span class="pixe-picker-alpha-background" ></span></div>').appendTo(container);
        t.alphaMarker = $('<div class="pixe-picker-alpha-marker" ></div>').appendTo(t.alphaArea);
        t.alphaInput = $('<input class="pixe-picker-range" type="range" min="0" max="100" step="1" />').appendTo(t.alphaArea);

        t.init();
    }
    $.pixePicker.prototype = {

        init: function(){
            var t = this;
            
            // initiate color
            t.getInputColor();
            
            // bind marker
            t.bindMarker();

            // on manual input change
            t.container.on('initvalue setvalue', function(e){
                if( e.type == 'initvalue' ){
                    t.getInputColor();
                }else if( e.type == 'setvalue' ){
                    t.getInputColor(true);
                }
            });

        },

        // set color from input field
        getInputColor: function(isChanged = false){
            var t = this;
            
            var rgba = $.pixeStrToRGBA(t.container.data('value'));
            var rgbStr = $.pixeRGBAToStr(rgba, false);
            var rgbaStr = $.pixeRGBAToStr(rgba);
            var hsva = $.pixeRGBAToHSVA(rgba);
            
            t.x = hsva.s;
            t.y = 100 - hsva.v;
            t.hue = hsva.h;
            t.alpha = hsva.a * 100;

            // set input
            t.hueInput.val(t.hue);
            t.alphaInput.val(t.alpha);

            // set color * marker
            t.colorArea.css('color', 'hsl(' + t.hue + ', 100%, 50%)');
            t.colorMarker.css('color', rgbStr);
            t.colorMarker.css({ left: t.x + '%', top: t.y + '%' });
            t.hueMarker.css('color', 'hsl(' + t.hue + ', 100%, 50%)');
            t.hueMarker.css('left', (t.hue * 100 / 360) + '%');
            t.alphaArea.css('color', rgbStr);
            t.alphaMarker.css('color', rgbaStr);
            t.alphaMarker.css('left', t.alpha + '%');

            // initialize data value
            if( t.container.data('value') ){
                t.container.data('hsl', $.pixeHSLToStr($.pixeHSVAtoHSLA(hsva)));
                t.container.data('hex', $.pixeRGBAToHex(rgba));
                t.container.data('value', rgbaStr);
            }else{
                t.container.removeData('value');
            }

            if( isChanged ){
                t.container.trigger('colorchange');
            }
        },

        // set input color
        setColor: function(){ 
            var t = this;
            var hsva = {
                h: t.hue,
                s: t.x,
                v: 100 - t.y,
                a: t.alpha / 100 
            };

            var rgba = $.pixeHSVAtoRGBA(hsva);
            var rgbStr = $.pixeRGBAToStr(rgba, false);
            var rgbaStr = $.pixeRGBAToStr(rgba);

            t.colorMarker.css('color', rgbStr);
            t.alphaArea.css('color', rgbStr);
            t.alphaMarker.css('color', rgbaStr);
            t.container.data('hsl', $.pixeHSLToStr($.pixeHSVAtoHSLA(hsva)));
            t.container.data('hex', $.pixeRGBAToHex(rgba));
            t.container.data('value', rgbaStr).trigger('colorchange');
        },

        // bind marker change
        bindMarker(){
            var t = this;

            // set color marker position
            function moveColorMarker(e){
                e.preventDefault();

                var cArea = t.colorArea.offset();

                if( e.pageX < cArea.left ){
                    t.x = 0;
                }else if( e.pageX > cArea.left + t.colorArea.outerWidth() ){
                    t.x = 100;
                }else{
                    t.x = (e.pageX - cArea.left) * 100 / t.colorArea.outerWidth();
                }
                if( e.pageY < cArea.top ){
                    t.y = 0;
                }else if( e.pageY > cArea.top + t.colorArea.outerHeight() ){
                    t.y = 100;
                }else{
                    t.y = (e.pageY - cArea.top) * 100 / t.colorArea.outerHeight();
                }
                t.colorMarker.css({ left: t.x + '%', top: t.y + '%' });

                // set color
                t.setColor();
            }

            // color area
            t.colorArea.on('mousedown', function(e){
                moveColorMarker(e);
                $(document.body).on('mousemove', moveColorMarker);
                $(document.body).on('mouseup', function(e){
                    $(document.body).off(e);
                    $(document.body).off('mousemove', moveColorMarker);
                });
            });
            
            // hue input
            t.hueInput.on('input', function(e){
                t.hue = $(this).val();
                t.hueMarker.css('left', (t.hue * 100 / 360) + '%');
                t.hueMarker.css('color', 'hsl(' + t.hue + ', 100%, 50%)');
                t.colorArea.css('color', 'hsl(' + t.hue + ', 100%, 50%)');
                t.setColor();
            });
            
            // alpha input
            t.alphaInput.on('input', function(){
                t.alpha = $(this).val();
                t.alphaMarker.css('left', t.alpha + '%');
                t.setColor();
            });

        }

    }

    $.pixeStyleSelectorInput = {
        shadow: {
            'type': {
                'type': 'radioicon',
                'style': 'text',
                'options': {
                    '': 'Custom Value',
                    'v': 'Variables',
                }
            },
            'style': {
                'title': 'Shadow Style',
                'type': 'combobox',
                'options': 'shadowStyle',
                'width': '1-1',
                'condition': {'type': ''}
            },
            'area1': {
                'title': 'Shadow Size',
                'type': 'div',
                'reset': true,
                'class': 'pixe-sselector-options-group pixe-style-shadow',
                'condition': {'type': ''},
                'options': {
                    'x': {
                        'title': 'X-Axis',
                        'type': 'range-input',
                        'min': -100,
                        'max': 100,
                        'suffix': 'px',
                        'hide-reset': true
                    },
                    'y': {
                        'title': 'Y-Axis',
                        'type': 'range-input',
                        'min': -100,
                        'max': 100,
                        'suffix': 'px',
                        'hide-reset': true
                    },
                    'blur': {
                        'title': 'Blur',
                        'type': 'range-input',
                        'min': 0,
                        'max': 100,
                        'suffix': 'px',
                        'hide-reset': true
                    },
                    'spread': {
                        'title': 'Spread',
                        'type': 'range-input',
                        'min': -100,
                        'max': 100,
                        'suffix': 'px',
                        'hide-reset': true
                    },
                },
            },
            'color': {
                'title': 'Shadow Color',
                'type': 'colorpicker',
                'gradient': false,
                'condition': {'type': ''}
            },
            'variable': {
                'title': 'Variables',
                'type': 'shadow',
                'width': '1-1',
                'condition': {'type': 'v'}
            }
        }
    }

    $.pixeStyleSelectorOption = {

        // typo
        'typo': {
            'device-selector': true,
            'onchange-event': false,
            'options': {
                'font-family': {
                    'title': 'Font Family',
                    'width': '1-2',
                    'type': 'font-family'
                },
                'font-style': {
                    'title': 'Font Style',
                    'width': '1-2',
                    'type': 'combobox',
                    'options': 'fontStyle'
                },
                'font-size': {
                    'title': 'Font Size',
                    'width': '1-2',
                    'type': 'range-input',
                    'range': 'font-size',
                    'variable-type': 'font-size'
                },
                'font-weight': {
                    'title': 'Font Weight',
                    'width': '1-2',
                    'type': 'font-weight'
                },
                'letter-spacing': {
                    'title': 'Letter Spacing',
                    'width': '1-2',
                    'type': 'range-input',
                    'min': -50,
                    'max': 150,
                    'decimal': 1,
                    'suffix': 'px',
                    'variable-type': 'letter-spacing'
                },
                'line-height': {
                    'title': 'Line Height',
                    'width': '1-2',
                    'type': 'range-input',
                    'min': 10,
                    'max': 50,
                    'decimal': 1,
                    'variable-type': 'line-height'
                },
                'text-transform': {
                    'title': 'Text Transform',
                    'width': '1-2',
                    'type': 'combobox',
                    'options': 'textTransform'
                },
                'text-decoration': {
                    'title': 'Text Decoration',
                    'width': '1-2',
                    'type': 'combobox',
                    'options': 'textDecoration'
                },
            }
        },

        // color
        'color': {
            'title': 'Select Color',
            'options': {
                'color': {
                    'type': 'colorpicker'
                }
            }
        },
        'plain-color': {
            'title': 'Select Color',
            'options': {
                'color': {
                    'type': 'colorpicker',
                    'gradient': false
                }
            }
        },
        'edit-color': { 
            'title': 'Edit Color',
            'options': {
                'color': {
                    'type': 'colorpicker',
                    'preset': false
                }
            }
        },
        'edit-color-variable': { 
            'title': 'Edit Color',
            'options': {
                'color': {
                    'type': 'colorpicker',
                    'preset': 'variable',
                }
            }
        },
        'bar-color': {
            'title': 'Bar Color',
            'options': {
                'bar': {
                    'type': 'colorpicker'
                }
            }
        },
        'bar-color-ng': {
            'title': 'Bar Color',
            'options': {
                'bar': {
                    'type': 'colorpicker',
                    'gradient': false
                }
            }
        },
        'bar-bg': {
            'title': 'Bar BG',
            'options': {
                'bar-bg': {
                    'type': 'colorpicker'
                }
            }
        },
        'bar-bg-ng': {
            'title': 'Bar BG',
            'options': {
                'bar-bg': {
                    'type': 'colorpicker',
                    'gradient': false
                }
            }
        },
        'color-ds': {
            'title': 'Select Color',
            'pointer-state': true,
            'device-selector': true,
            'options': {
                'color': {
                    'type': 'colorpicker',
                    'gradient': false
                }
            }
        },
        'color-da': {
            'title': 'Select Color',
            'pointer-state': 'active',
            'device-selector': true,
            'options': {
                'color': {
                    'type': 'colorpicker',
                    'gradient': false
                }
            }
        },
        'title-color-d': {
            'title': 'Title',
            'device-selector': true,
            'options': {
                'title': {
                    'type': 'colorpicker',
                    'gradient': false
                }
            }
        },
        'text-color-ds': {
            'title': 'Text',
            'pointer-state': true,
            'device-selector': true,
            'options': {
                'text': {
                    'type': 'colorpicker',
                    'gradient': false
                }
            }
        },
        'text-color-d': {
            'title': 'Text',
            'device-selector': true,
            'options': {
                'text': {
                    'type': 'colorpicker',
                    'gradient': false
                }
            }
        },
        'text-color-da': {
            'title': 'Text',
            'pointer-state': 'active',
            'device-selector': true,
            'options': {
                'text': {
                    'type': 'colorpicker',
                    'gradient': false
                }
            }
        },
        'icon-color-ds': {
            'title': 'Icon',
            'pointer-state': true,
            'device-selector': true,
            'options': {
                'icon': {
                    'type': 'colorpicker',
                    'gradient': false
                }
            }
        },

        // container bg
        'container-bg-image': {
            'onchange-event': false,
            'options': {
                'source': {
                    'title': 'Image Source',
                    'type': 'combobox',
                    'options': {
                        '': 'Custom',
                        'featured-image': 'Featured Image',
                        'custom-field': 'Custom Fields',
                        'term-meta': 'Taxonomy Meta'
                    },
                    'with-default': false,
                    'width': '1-2'
                },
                'source-slug': {
                    'title': 'Field Slug',
                    'type': 'text',
                    'width': '1-2',
                    'condition': { 'source': ['custom-field', 'term-meta'] }
                },
                'display': {
                    'title': 'Display Type',
                    'type': 'combobox',
                    'options': {
                        'img': 'Image Tag',
                        'css': 'Css Background Image'
                    },
                    'width': '1-2'
                },
                'image': {
                    'type': 'upload', 
                    'width': '1-1',
                    'condition': { 'source': '' }
                },
                'ai': {
                    'type': 'button',
                    'icon': 'image-ai',
                    'button-text': 'AI Image Generator',
                    'button-class': 'pixe-ss-button pixe-full',
                    'button-callback': 'ai-image-option',
                    'width': '1-1',
                },
                'browse': {
                    'type': 'button',
                    'icon': 'image-browse',
                    'button-text': 'Browse Stock Images',
                    'button-class': 'pixe-ss-button pixe-full pixe-grey',
                    'button-callback': 'browse-stock-image',
                    'width': '1-1',
                },
                'thumbnail-size': {
                    'title': 'Thumbnail Sizes',
                    'type': 'combobox',
                    'options': 'thumbnailSizes',
                    'width': '1-1',
                    'condition': { 'display': 'img' }
                },
                'position': {
                    'title': 'Position',
                    'type': 'combobox',
                    'width': '1-1',
                    'options': 'backgroundPosition',
                    'reset-siblings': 2
                },
                'pos-x': {
                    'title': 'Offset - X Axis',
                    'type': 'range-input',
                    'range': 'transform-offset',
                    'width': '1-2',
                    'condition': { 'position': '!' }
                },
                'pos-y': {
                    'title': 'Offset - Y Axis',
                    'type': 'range-input',
                    'range': 'transform-offset',
                    'width': '1-2',
                    'condition': { 'position': '!' }
                }, 
                'attachment': {
                    'title': 'Attachment',
                    'type': 'combobox',
                    'options': 'backgroundAttachment',
                    'width': '1-1'
                },
                'parallax-speed': {
                    'title': 'Parallax Level',
                    'type': 'range-input',
                    'min': -100,
                    'max': 100,
                    'suffix-text': '%',
                    'width': '1-1',
                    'condition': { 'attachment': 'parallax' }
                },
                'repeat': {
                    'title': 'Repeat',
                    'type': 'combobox',
                    'width': '1-2',
                    'options': 'backgroundRepeat',
                    'condition': { 'display': ['', 'css'] }
                },
                'opacity': {
                    'title': 'Opacity',
                    'type': 'range-input',
                    'min': 0,
                    'max': 100,
                    'default': 100,
                    'width': '1-2',
                    'suffix-text': '%'
                },
                'object-fit': {
                    'title': 'Display Size',
                    'type': 'combobox',
                    'width': '1-1',
                    'options': 'objectFit',
                    'condition': { 'display': 'img' }
                },
                'size': {
                    'title': 'Display Size',
                    'type': 'combobox',
                    'width': '1-1',
                    'options': 'backgroundSize',
                    'reset-siblings': 1,
                    'condition': { 'display': ['', 'css'] }
                },
                'scale': {
                    'title': 'Scale',
                    'type': 'range-input',
                    'range': 'background-width',
                    'width': 90,
                    'condition': { 'display': ['', 'css'], 'size': 'custom' }
                },
                'divider': {
                    'type': 'divider'
                },
                'blend': {
                    'title': 'Blend Mode',
                    'type': 'combobox',
                    'options': 'imageBlend',
                    'width': '1-1'
                },
                'filter': {
                    'title': 'Filter',
                    'type': 'combobox',
                    'options': 'imageFilter',
                    'width': '1-1'
                },
                'filter-px': {
                    'title': 'Filter Value (px)',
                    'type': 'range-input',
                    'min': 0,
                    'max': 50,
                    'width': '1-1',
                    'condition': { 'filter': 'blur' }
                },
                'filter-percent': {
                    'title': 'Filter Value (%)',
                    'type': 'range-input',
                    'min': 0,
                    'max': 100,
                    'width': '1-1',
                    'condition': { 'filter': ['brightness', 'contrast', 'grayscale', 'invert', 'opacity', 'saturate', 'sepia'] }
                },
                'filter-deg': {
                    'title': 'Filter Value (deg)',
                    'type': 'range-input',
                    'min': 0,
                    'max': 360,
                    'width': '1-1',
                    'condition': { 'filter': 'hue-rotate' }
                },
            }
        },
        'container-bg-video': {
            'onchange-event': false,
            'options': {
                'video-type': {
                    'title': 'Video Type',
                    'type': 'combobox',
                    'options': {
                        '': 'Video (Youtube / Vimeo / File URL)',
                        'self-hosted': 'Video (Self Hosted)'
                    },
                    'with-default': false,
                    'width': '1-1'  
                },
                'url': {
                    'title': 'Youtube / Vimeo / File URL',
                    'type': 'text',
                    'width': '1-1',
                    'placeholder': 'https://',
                    'condition': {'video-type': ''}
                },
                'video':{
                    'title': 'Upload Video (MP4)',
                    'type': 'upload',
                    'condition': {'video-type': 'self-hosted'},
                    'width': '1-1'
                },
                'pos-x': {
                    'title': 'Offset - X Axis',
                    'type': 'range-input',
                    'range': 'transform-offset',
                    'width': '1-2'
                },
                'pos-y': {
                    'title': 'Offset - Y Axis',
                    'type': 'range-input',
                    'range': 'transform-offset',
                    'width': '1-2'
                }, 
                'start-time': {
                    'title': 'Start Time (secs)',
                    'type': 'range-input',
                    'min': 0,
                    'max': 600,
                    'width': '1-2'
                },
                'end-time': {
                    'title': 'End Time (secs)',
                    'type': 'range-input',
                    'min': 0,
                    'max': 600,
                    'width': '1-2'
                },
                'loop': {
                    'title': 'Loop',
                    'type': 'checkbox',
                    'default': 'no',
                    'width': '1-2'
                },
            }
        },
        'container-bg-map': {
            'onchange-event': false,
            'options': {
                'map-mode': {
                    'title': 'Map Mode',
                    'type': 'combobox',
                    'options': {
                        '': 'Place',
                        'view': 'View',
                        'directions': 'Directions',
                        'streetview': 'Streetview',
                        'search': 'Search',
                    },
                    'with-default': false,
                    'width': '1-1'
                },
                'center': {
                    'title': 'Center',
                    'type': 'text',
                    'width': '1-1',
                    'placeholder': 'Latitude,Longtitude',
                    'condition': { 'map-mode': ['view', 'streetview'] }
                },
                'origin': {
                    'title': 'Origin',
                    'type': 'text',
                    'width': '1-1',
                    'placeholder': 'Location name or use Plus Code',
                    'condition': { 'map-mode': 'directions' }
                },
                'destination': {
                    'title': 'Destination',
                    'type': 'text',
                    'width': '1-1',
                    'placeholder': 'Location name or use Plus Code',
                    'condition': { 'map-mode': ['', 'directions', 'search'] }
                },
                'map-type': {
                    'title': 'Map Type',
                    'type': 'combobox',
                    'options': {
                        '': 'Roadmap',
                        'satellite': 'Satellite',
                    },
                    'with-default': false,
                    'width': '1-1',
                    'condition': { 'map-mode': ['', 'view', 'directions', 'search'] }
                },
                'heading': {
                    'title': 'Heading (Deg)',
                    'type': 'range-input',
                    'min': '-180',
                    'max': '360',
                    'input-width': '100%',
                    'width': '1-2',
                    'placeholder': '-180 to 360',
                    'condition': { 'map-mode': 'streetview' }
                },
                'pitch': {
                    'title': 'Pitch (Deg)',
                    'type': 'range-input',
                    'min': '-90',
                    'max': '90',
                    'width': '1-2',
                    'input-width': '100%',
                    'placeholder': '-90 to 90',
                    'condition': { 'map-mode': 'streetview' }
                },
                'fov': {
                    'title': 'FOV (Deg)',
                    'type': 'range-input',
                    'min': '10',
                    'max': '100',
                    'width': '1-2',
                    'input-width': '100%',
                    'placeholder': '10 to 100',
                    'condition': { 'map-mode': 'streetview' }
                },
                'zoom': {
                    'title': 'Zoom',
                    'type': 'range-input',
                    'min': 0,
                    'max': 21,
                    'placeholder': '0-21',
                    'width': '1-1',
                    'condition': { 'map-mode': ['', 'view','directions', 'search'] }
                }
            }
        },

        // gallery
        'image': {
            'options': {
                'image': {
                    'type': 'upload',
                    'width': '1-1'
                },
                'ai': {
                    'type': 'button',
                    'icon': 'image-ai',
                    'button-text': 'AI Image Generator',
                    'button-class': 'pixe-ss-button pixe-full',
                    'button-callback': 'ai-image-option',
                    'width': '1-1',
                },
                'browse': {
                    'type': 'button',
                    'icon': 'image-browse',
                    'button-text': 'Browse Stock Images',
                    'button-class': 'pixe-ss-button pixe-full pixe-grey',
                    'button-callback': 'browse-stock-image',
                    'width': '1-1',
                }
            }
        },
        'image-style': {
            'title': 'Media Style',
            'type': 'tab',
            'options': ['image-overlay-color', 'bg-border', 'bg-shadow', 'image-filter']
        },
        'featured-img-style': {
            'title': 'Featured Image Style',
            'type': 'tab',
            'options': ['bg-border', 'bg-shadow', 'image-filter']
        },
        'image-overlay-color': {
            'title': 'Overlay',
            'device-selector': true,
            'pointer-state': true,
            'options': {
                'overlay-color': {
                    'type': 'colorpicker'
                },
            }
        },
        'image-layout': {
            'title': 'Image Settings',
            'device-selector': true,
            'options': {
                'alignment': {
                    'title': 'Alignment',
                    'type': 'radioicon',
                    'options': 'alignment',
                    'width': '1-1',
                },
                'image-size': {
                    'title': 'Image Size',
                    'type': 'combobox',
                    'options': 'thumbnailSizes',
                    'width': '1-2',
                    'device-selector': false
                },
                'image-ratio': {
                    'title': 'Image Ratio',
                    'type': 'combobox',
                    'options': 'imageRatio',
                    'width': '1-2'
                },
                'custom-ratio': {
                    'title': 'Custom Ratio',
                    'type': 'text-ratio',
                    'width': '1-2',
                    'condition': {'image-ratio': 'custom'}
                },
                'position': {
                    'title': 'Position',
                    'type': 'combobox',
                    'width': '1-1',
                    'options': 'backgroundPosition',
                    'reset-siblings': 2,
                    'condition': {'image-ratio': '!' }
                },
                'pos-x': {
                    'title': 'Offset - X Axis',
                    'type': 'range-input',
                    'range': 'transform-offset',
                    'width': '1-2',
                    'condition': {'image-ratio': '!', 'position': '!'}
                },
                'pos-y': {
                    'title': 'Offset - Y Axis',
                    'type': 'range-input',
                    'range': 'transform-offset',
                    'width': '1-2',
                    'condition': {'image-ratio': '!', 'position': '!'}
                }, 
            }
        },
        'single-image-layout': {
            'title': 'Image Settings',
            'device-selector': true,
            'options': {
                'alignment': {
                    'title': 'Alignment',
                    'type': 'radioicon',
                    'options': 'alignment',
                    'width': '1-1',
                },
                'image-size': {
                    'title': 'Image Size',
                    'type': 'combobox',
                    'options': 'thumbnailSizes',
                    'width': '1-2',
                    'device-selector': false
                },
                'max-width': {
                    'title': 'Max Width',
                    'type': 'range-input',
                    'range': 'image-width',
                    'width': '1-2'
                },
                'image-ratio': {
                    'title': 'Image Ratio',
                    'type': 'combobox',
                    'options': 'imageRatio',
                    'width': '1-2'
                },
                'custom-ratio': {
                    'title': 'Custom Ratio',
                    'type': 'text-ratio',
                    'width': '1-2',
                    'condition': {'image-ratio': 'custom'}
                },
                'position': {
                    'title': 'Position',
                    'type': 'combobox',
                    'width': '1-1',
                    'options': 'backgroundPosition',
                    'reset-siblings': 2,
                    'condition': {'image-ratio': '!'}
                },
                'pos-x': {
                    'title': 'Offset - X Axis',
                    'type': 'range-input',
                    'range': 'transform-offset',
                    'width': '1-2',
                    'hide-reset': true,
                    'condition': {'image-ratio': '!', 'position': '!'}
                },
                'pos-y': {
                    'title': 'Offset - Y Axis',
                    'type': 'range-input',
                    'range': 'transform-offset',
                    'width': '1-2',
                    'hide-reset': true,
                    'condition': {'image-ratio': '!', 'position': '!'}
                }, 
            }
        },
        'image-filter': {
            'title': 'Filter',
            'device-selector': true,
            'pointer-state': true,
            'group': 'filter',
            'options': {
                'filter': {
                    'title': 'Filter',
                    'type': 'combobox',
                    'options': 'imageFilter',
                    'width': '1-1'
                },
                'filter-px': {
                    'title': 'Filter Value (px)',
                    'type': 'range-input',
                    'min': 0,
                    'max': 50,
                    'width': '1-1',
                    'condition': { 'filter': 'blur' }
                },
                'filter-percent': {
                    'title': 'Filter Value (%)',
                    'type': 'range-input',
                    'min': 0,
                    'max': 100,
                    'width': '1-1',
                    'condition': { 'filter': ['brightness', 'contrast', 'grayscale', 'invert', 'opacity', 'saturate', 'sepia'] }
                },
                'filter-deg': {
                    'title': 'Filter Value (deg)',
                    'type': 'range-input',
                    'min': 0,
                    'max': 360,
                    'width': '1-1',
                    'condition': { 'filter': 'hue-rotate' }
                },
            }
        },
        'gallery-layout': {
            'title': 'Gallery Settings',
            'device-selector': true,
            'options': {
                'alignment': {
                    'title': 'Alignment',
                    'type': 'combobox',
                    'width': '1-2',
                    'with-default': false,
                    'options': {
                        '': 'Grid (Cropped)',
                        'grid-raw': 'Grid (Uncropped)',
                        'masonry': 'Masonry',
                        'justified': 'Justified'
                    },
                    'device-selector': false,
                },
                'image-size': {
                    'title': 'Image Size',
                    'type': 'combobox',
                    'options': 'thumbnailSizes',
                    'width': '1-2',
                    'device-selector': false
                },
                'column': {
                    'title': 'Column',
                    'type': 'combobox',
                    'options': {
                        '1': '1',
                        '2': '2',
                        '3': '3',
                        '4': '4',
                        '5': '5',
                        '6': '6',
                        '7': '7',
                        '8': '8',
                        '9': '9',
                        '10': '10',
                        '11': '11',
                        '12': '12',
                    },
                    'width': '1-2',
                    'condition': {'alignment': ['', 'grid-raw', 'masonry', 'ignore-device']}
                },
                'image-height': {
                    'title': 'Image Height',
                    'type': 'range-input',
                    'range': 'image-height-px',
                    'condition': {'alignment': ['justified', 'ignore-device']},
                    'width': '1-2'
                },
                'space': {
                    'title': 'Space',
                    'type': 'range-input',
                    'range': 'gap',
                    'width': '1-2'
                },
                'image-ratio': {
                    'title': 'Image Ratio',
                    'type': 'combobox',
                    'options': 'imageRatio',
                    'width': '1-2',
                    'condition': {'alignment': ['', 'ignore-device']}
                },
                'custom-ratio': {
                    'title': 'Custom Ratio',
                    'type': 'text-ratio',
                    'width': '1-2',
                    'condition': {'alignment': ['', 'ignore-device'], 'image-ratio': 'custom'}
                },
                'align-y': {
                    'title': 'Vertical Alignment',
                    'type': 'radioicon',
                    'options': 'v-alignment',
                    'width': '1-2',
                    'condition': {'alignment': 'grid-raw'}
                },
                'area2': {
                    'type': 'div',
                    'class': 'pixe-sselector-options-area',
                    'device-selector': false,
                    'options': {
                        'random': {
                            'title': 'Random Order',
                            'type': 'checkbox',
                            'width': '1-2',
                            'default': 'no'
                        }
                    }
                }
            }
        },
        'gallery-featured-layout': {
            'title': 'Gallery Settings',
            'device-selector': true,
            'options': {
                'area1': {
                    'type': 'div',
                    'class': 'pixe-sselector-options-area',
                    'device-selector': false,
                    'options': {
                        'image-size': {
                            'title': 'Featured Img Size',
                            'type': 'combobox',
                            'options': 'thumbnailSizes',
                            'width': '1-2',
                            'device-selector': false
                        },
                        'image-ratio': {
                            'title': 'Featured Img Ratio',
                            'type': 'combobox',
                            'options': 'imageRatio',
                            'width': '1-2'
                        },
                        'custom-ratio': {
                            'title': 'Custom Ratio',
                            'type': 'text-ratio',
                            'width': '1-2',
                            'condition': {'image-ratio': 'custom'}
                        },
                    }
                },
                'area2': {
                    'type': 'div',
                    'class': 'pixe-sselector-options-area',
                    'options': {
                        'thumbnail-column': {
                            'title': 'Thumbnail Column',
                            'type': 'combobox',
                            'options': {
                                '4': '4',
                                '5': '5',
                                '6': '6',
                            },
                            'width': '1-2'
                        },
                        'thumbnail-space': {
                            'title': 'Thumbnail Space',
                            'type': 'range-input',
                            'range': 'gap',
                            'width': '1-2'
                        },
                        'thumbnail-image-size': {
                            'title': 'Thumbnail Size',
                            'type': 'combobox',
                            'options': 'thumbnailSizes',
                            'width': '1-2',
                            'device-selector': false
                        },
                        'thumbnail-image-ratio': {
                            'title': 'Thumbnail Ratio',
                            'type': 'combobox',
                            'options': 'imageRatio',
                            'width': '1-2',
                            'device-selector': false
                        },
                        'thumbnail-custom-ratio': {
                            'title': 'Custom Ratio',
                            'type': 'text-ratio',
                            'width': '1-2',
                            'condition': {'thumbnail-image-ratio': 'custom'},
                            'device-selector': false
                        },
                    }
                },
                'area3': {
                    'type': 'div',
                    'class': 'pixe-sselector-options-area',
                    'device-selector': false,
                    'options': {
                        'autoplay': {
                            'title': 'Autoplay',
                            'type': 'checkbox',
                            'width': '1-2',
                            'default': 'yes'
                        },
                        'delay': {
                            'title': 'Delay (ms)',
                            'type': 'text',
                            'width': '1-2',
                            'condition': {'autoplay': ''}
                        },
                        'random': {
                            'title': 'Random Order',
                            'type': 'checkbox',
                            'width': '1-2',
                            'default': 'no'
                        },
                    }
                }
            }
        },
        'gallery-carousel-layout': {
            'title': 'Gallery Settings',
            'device-selector': true,
            'options': {
                'alignment': {
                    'title': 'Alignment',
                    'type': 'combobox',
                    'width': '1-2',
                    'with-default': false,
                    'options': {
                        '': 'Grid',
                        'justified': 'Justified'
                    },
                    'device-selector': false,
                },
                'image-size': {
                    'title': 'Image Size',
                    'type': 'combobox',
                    'options': 'thumbnailSizes',
                    'width': '1-2',
                    'device-selector': false
                },
                'column': {
                    'title': 'Column',
                    'type': 'combobox',
                    'options': {
                        '1': '1',
                        '2': '2',
                        '3': '3',
                        '4': '4',
                        '5': '5',
                        '6': '6',
                    },
                    'width': '1-2',
                    'condition': {'alignment': ['', 'ignore-device']}
                },
                'image-height': {
                    'title': 'Image Height',
                    'type': 'range-input',
                    'range': 'image-height-px',
                    'condition': {'alignment': ['justified', 'ignore-device']},
                    'width': '1-2'
                },
                'space': {
                    'title': 'Space',
                    'type': 'range-input',
                    'range': 'gap',
                    'width': '1-2'
                },
                'image-ratio': {
                    'title': 'Image Ratio',
                    'type': 'combobox',
                    'options': 'imageRatio',
                    'width': '1-2',
                    'condition': {'alignment': ['', 'ignore-device']}
                },
                'custom-ratio': {
                    'title': 'Custom Ratio',
                    'type': 'text-ratio',
                    'width': '1-2',
                    'condition': {'alignment': ['', 'ignore-device'], 'image-ratio': 'custom'}
                },
                'random': {
                    'title': 'Random Order',
                    'type': 'checkbox',
                    'width': '1-2',
                    'default': 'no',
                    'device-selector': false
                },
                'area2': {
                    'type': 'div',
                    'class': 'pixe-sselector-options-area',
                    'device-selector': false,
                    'options': {
                        'autoplay': {
                            'title': 'Autoplay',
                            'type': 'combobox',
                            'options': {
                                '': 'Slide by Slide',
                                'cont': 'Continuous Scroll',
                                'none': 'None',
                            },
                            'width': '1-1',
                            'with-default': false
                        },
                        'delay': {
                            'title': 'Delay (ms)',
                            'type': 'text',
                            'width': '1-2',
                            'condition': {'autoplay': ''}
                        },
                        'speed': {
                            'title': 'Scroll Speed (px/s)',
                            'type': 'range-input',
                            'min': '0',
                            'max': '300',
                            'width': '1-2',
                            'condition': {'autoplay': 'cont'}
                        },
                        'direction': {
                            'title': 'Scroll Direction',
                            'type': 'combobox',
                            'options': {
                                '': 'left',
                                'right': 'right'
                            },
                            'width': '1-2',
                            'with-default': false,
                            'condition': {'autoplay': 'cont'}
                        },
                    }
                }
            }
        },  

        // pagination
        'pagination': {
            'title': 'Pagination',
            'device-selector': true,
            'options': {
                'enable-pagination': {
                    'title': 'Enable Pagination',
                    'type': 'checkbox',
                    'width': '1-2',
                    'default': 'no',
                    'device-selector': false
                },
                'item-per-page': {
                    'title': 'Item Per Page',
                    'type': 'range-input',
                    'min': 1,
                    'max': 30,
                    'width': '1-2',
                    'device-selector': false,
                    'condition': {'enable-pagination': 'yes'}
                },
                'pagination-style': {
                    'title': 'Pagination Style',
                    'type': 'pagination-preset-combobox',
                    'width': '1-1',
                    'device-selector': false,
                    'condition': {'enable-pagination': 'yes'}
                },
                'pagination-alignment': {
                    'title': 'Alignment',
                    'type': 'radioicon',
                    'options': 'alignment',
                    'width': '1-2',
                    'condition': {'enable-pagination': ['yes', 'ignore-device']}
                },
                'pagination-top-margin': {
                    'title': 'Top Margin',
                    'type': 'range-input',
                    'range': 'margin',
                    'width': '1-2',
                    'condition': {'enable-pagination': ['yes', 'ignore-device']}
                },
            }
        },

        // slider bullet and nav
        'slider-controls': {
            'title': 'Bullet & Navigation Settings',
            'type': 'tab',
            'options': ['slider-bullet', 'slider-navigation']
        },
        'slider-bullet': {
            'title': 'Bullet',
            'device-selector': true,
            'options': {
                'enable-bullet': {
                    'title': 'Enable Bullet',
                    'type': 'checkbox',
                    'width': '1-1',
                    'default': 'no',
                    'device-selector': false
                },
                'bullet-hide-on': {
                    'title': 'Display In',
                    'type': 'hide-on-devices',
                    'condition': {'enable-bullet': 'yes'},
                    'width': '1-1',
                    'device-selector': false
                },
                'bullet-style': {
                    'title': 'Bullet Style',
                    'type': 'bullet-preset-combobox',
                    'width': '1-1',
                    'device-selector': false,
                    'condition': {'enable-bullet': ['yes', 'ignore-device']}
                },
                'bullet-position': {
                    'title': 'Bullet Position',
                    'type': 'combobox',
                    'options': {
                        '': 'Inner',
                        'outer': 'Outer'
                    },
                    'width': '1-1',
                    'with-default': false,
                    'device-selector': false,
                    'condition': {'enable-bullet': ['yes', 'ignore-device']}
                },
                'bullet-alignment': {
                    'title': 'Bullet Alignment',
                    'type': 'radioicon',
                    'options': 'alignment',
                    'width': '1-2',
                    'condition': {'enable-bullet': ['yes', 'ignore-device']}
                },
                'bullet-bottom-margin': {
                    'title': 'Bottom Margin',
                    'type': 'range-input',
                    'range': 'margin',
                    'width': '1-2',
                    'condition': {'enable-bullet': ['yes', 'ignore-device'], 'bullet-position': ''}
                },
                'bullet-top-margin': {
                    'title': 'Top Margin',
                    'type': 'range-input',
                    'range': 'margin',
                    'width': '1-2',
                    'condition': {'enable-bullet': ['yes', 'ignore-device'], 'bullet-position': 'outer'}
                },
                'bullet-left-margin': {
                    'title': 'Left Margin',
                    'type': 'range-input',
                    'range': 'margin',
                    'width': '1-2',
                    'condition': {'enable-bullet': ['yes', 'ignore-device']}
                },
                'bullet-right-margin': {
                    'title': 'Right Margin',
                    'type': 'range-input',
                    'range': 'margin',
                    'width': '1-2',
                    'condition': {'enable-bullet': ['yes', 'ignore-device']}
                },
            }
        },
        'slider-navigation': {
            'title': 'Navigation',
            'device-selector': true,
            'options': {
                'enable-navigation': {
                    'title': 'Enable Navigation',
                    'type': 'checkbox',
                    'width': '1-1',
                    'default': 'no',
                    'device-selector': false
                },
                'navigation-hide-on': {
                    'title': 'Navigation Display In',
                    'type': 'hide-on-devices',
                    'condition': {'enable-navigation': 'yes'},
                    'width': '1-1',
                    'device-selector': false
                },
                'navigation-style': {
                    'title': 'Navigation Style',
                    'type': 'navigation-preset-combobox',
                    'width': '1-1',
                    'device-selector': false,
                    'condition': {'enable-navigation': ['yes', 'ignore-device']}
                },
                'navigation-position': {
                    'title': 'Navigation Position',
                    'type': 'combobox',
                    'options': {
                        '': 'Inner Navigation',
                        'outer': 'Outer Navigation',
                        'top': 'Top Navigation',
                        'bottom': 'Bottom Navigation',
                    },
                    'width': '1-1',
                    'with-default': false,
                    'device-selector': false,
                    'condition': {'enable-navigation': ['yes', 'ignore-device']}
                },
                'navigation-alignment': {
                    'title': 'Nav Alignment',
                    'type': 'radioicon',
                    'options': 'alignment',
                    'width': '1-2',
                    'condition': {'enable-navigation': ['yes', 'ignore-device'], 'navigation-position': ['top', 'bottom', 'ignore-device']}
                },
                'navigation-spaces': {
                    'title': 'Nav Spaces',
                    'type': 'range-input',
                    'range': 'margin-positive',
                    'width': '1-2',
                    'condition': {'enable-navigation': ['yes', 'ignore-device'], 'navigation-position': ['bottom', 'ignore-device']}
                },
                'navigation-offset-x': {
                    'title': 'Offset - X Axis',
                    'type': 'range-input',
                    'range': 'transform-offset',
                    'width': '1-2',
                    'condition': {'enable-navigation': ['yes', 'ignore-device'], 'navigation-position': ['top', 'bottom', 'ignore-device']}
                },
                'navigation-offset-y': {
                    'title': 'Offset - Y Axis',
                    'type': 'range-input',
                    'range': 'transform-offset',
                    'width': '1-2',
                    'condition': {'enable-navigation': ['yes', 'ignore-device'], 'navigation-position': ['top', 'bottom', 'ignore-device']}
                },
                'navigation-max-width': {
                    'title': 'Nav Max Width',
                    'type': 'range-input',
                    'range': 'width2',
                    'width': '1-2'
                },
                'navigation-valignment': {
                    'title': 'Nav Vertical Alignment',
                    'type': 'radioicon',
                    'options': 'v-alignment',
                    'width': '1-1',
                    'condition': {'enable-navigation': ['yes', 'ignore-device'], 'navigation-position': ['', 'outer', 'inner', 'ignore-device']}
                },
                'navigation-side-margin': {
                    'title': 'Nav Side Margin',
                    'type': 'range-input',
                    'range': 'margin',
                    'width': '1-2',
                    'condition': {'enable-navigation': ['yes', 'ignore-device'], 'navigation-position': ['', 'outer', 'inner', 'ignore-device']}
                },
                'navigation-vertical-offset': {
                    'title': 'Nav Vertical Offset',
                    'type': 'range-input',
                    'range': 'margin',
                    'width': '1-2',
                    'condition': {'enable-navigation': ['yes', 'ignore-device'], 'navigation-position': ['', 'outer', 'inner', 'ignore-device']}
                },
                'enable-touch-navigation': {
                    'title': 'Enable Touch Navigation',
                    'type': 'checkbox',
                    'width': '1-1',
                    'default': 'no',
                    'device-selector': false
                },
                'touch-navigation-hide-on': {
                    'title': 'Touch Navigation Display In',
                    'type': 'hide-on-devices',
                    'condition': {'enable-touch-navigation': 'yes'},
                    'width': '1-1',
                    'device-selector': false
                },
                'touch-navigation-style': {
                    'title': 'Touch Navigation Style',
                    'type': 'touch-navigation-preset-combobox',
                    'width': '1-1',
                    'device-selector': false,
                    'condition': {'enable-touch-navigation': 'yes'},
                },
            }
        },

        // image overlay
        'image-overlay': {
            'type': 'tab',
            'title': 'Content Overlay Settings',
            'options': ['image-overlay-content', 'image-overlay-layout', 'image-overlay-style', 'image-overlay-icon']
        },
        'image-overlay-content': {
            'title': 'Content',
            'device-selector': true,
            'options': {
                'enable-title': {
                    'title': 'Enable Title',
                    'type': 'checkbox',
                    'default': 'no',
                    'width': '1-1'
                },
                'enable-caption': {
                    'title': 'Enable Caption',
                    'type': 'checkbox',
                    'default': 'no',
                    'width': '1-1'
                },
                'enable-description': {
                    'title': 'Enable Description',
                    'type': 'checkbox',
                    'default': 'no',
                    'width': '1-1'
                },
                'enable-icon': {
                    'title': 'Enable Link Icon',
                    'type': 'checkbox',
                    'default': 'no',
                    'width': '1-1'
                },
                'icon-position': {
                    'title': 'Icon Position',
                    'type': 'combobox',
                    'width': '1-1',
                    'options': {
                        '': 'Above Title/Caption',
                        'bottom': 'Below Title/Caption'
                    },
                    'with-default': false,
                    'condition': {'enable-icon': 'yes'}
                },
                'divider': {
                    'type': 'divider',
                    'device-selector': false
                },
                'animation': {
                    'title': 'Animation Effect',
                    'type': 'combobox',
                    'options': 'textAnimationEffects',
                    'width': '1-2',
                    'device-selector': false
                },
                'animation-duration': {
                    'title': 'Duration (ms)',
                    'type': 'range-input',
                    'min': 0,
                    'max': 3000,
                    'width': '1-2',
                    'device-selector': false
                },
                'animation-delay': {
                    'title': 'Delay (ms)',
                    'type': 'range-input',
                    'min': 0,
                    'max': 3000,
                    'width': '1-2',
                    'device-selector': false
                },
                'sequenced-animation': {
                    'title': 'Sequenced Anim',
                    'type': 'checkbox',
                    'default': 'no',
                    'width': '1-2',
                    'device-selector': false
                },
            }
        },
        'image-overlay-layout': {
            'title': 'Layout',
            'device-selector': true,
            'options': {
                'align-x': {
                    'title': 'Horizontal Alignment',
                    'type': 'radioicon',
                    'options': 'alignment',
                    'width': '1-1'
                },
                'align-y': {
                    'title': 'Vertical Alignment',
                    'type': 'radioicon',
                    'options': 'v-alignment',
                    'width': '1-1'
                },
                'padding': {
                    'title': 'Padding',
                    'type': 'padding'
                }
            }
        },
        'image-overlay-style': {
            'title': 'Style',
            'device-selector': true,
            'pointer-state': true,
            'options': {
                'area1': {
                    'title': 'Title',
                    'type': 'div',
                    'class': 'pixe-sselector-options-group pixe-style-plain',
                    'options': {
                        'title-color': {
                            'title': 'Color',
                            'type': 'colordisplay',
                            'width': '1-2'
                        },
                        'title-bottom-margin': {
                            'title': 'Bottom Margin',
                            'type': 'range-input',
                            'range': 'margin',
                            'width': '1-2'
                        },
                    }
                },
                'divider1': {
                    'type': 'divider'
                },
                'area2': {
                    'title': 'Caption',
                    'type': 'div',
                    'class': 'pixe-sselector-options-group pixe-style-plain',
                    'options': {
                        'caption-color': {
                            'title': 'Color',
                            'type': 'colordisplay',
                            'width': '1-2'
                        },
                        'caption-bottom-margin': {
                            'title': 'Bottom Margin',
                            'type': 'range-input',
                            'range': 'margin',
                            'width': '1-2'
                        },
                    }
                },
                'divider2': {
                    'type': 'divider'
                },
                'area3': {
                    'title': 'Description',
                    'type': 'div',
                    'class': 'pixe-sselector-options-group pixe-style-plain',
                    'options': {
                        'description-color': {
                            'title': 'Color',
                            'type': 'colordisplay',
                            'width': '1-2'
                        },
                        'description-bottom-margin': {
                            'title': 'Bottom Margin',
                            'type': 'range-input',
                            'range': 'margin',
                            'width': '1-2'
                        },
                    }
                },
                'divider3': {
                    'type': 'divider'
                },
                'area4': {
                    'title': 'Icon',
                    'type': 'div',
                    'class': 'pixe-sselector-options-group pixe-style-plain',
                    'options': {
                        'icon-color': {
                            'title': 'Color',
                            'type': 'colordisplay',
                            'color-type': 'plain-color',
                            'width': '1-2'
                        },
                        'icon-bottom-margin': {
                            'title': 'Bottom Margin',
                            'type': 'range-input',
                            'range': 'margin',
                            'width': '1-2'
                        },
                        'icon-width': {
                            'title': 'Icon Width',
                            'type': 'range-input',
                            'range': 'font-size',
                            'width': '1-2'
                        },
                    }
                },
            }
        },
        'image-overlay-icon': {
            'title': 'Icon',
            'options': {
                'image-icon': {
                    'title': 'Icon For Images',
                    'type': 'icon'
                },
                'video-icon': {
                    'title': 'Icon For Videos',
                    'type': 'icon'
                },
                'link-icon': {
                    'title': 'Icon For URL, Page, Post',
                    'type': 'icon'
                },
            }
        },

        // image settings
        'image-settings': {
            'type': 'tab',
            'options': ['image-link', 'image-pos', 'close']
        },
        'image-pos': {
            'title': 'Image Position',
            'options': {
                'position': {
                    'title': 'Position',
                    'type': 'combobox',
                    'width': '1-1',
                    'options': 'backgroundPosition',
                    'reset-siblings': 2
                },
                'pos-x': {
                    'title': 'Offset - X Axis',
                    'type': 'range-input',
                    'range': 'transform-offset',
                    'width': '1-2',
                    'hide-reset': true,
                    'condition': { 'position': '!' }
                },
                'pos-y': {
                    'title': 'Offset - Y Axis',
                    'type': 'range-input',
                    'range': 'transform-offset',
                    'width': '1-2',
                    'hide-reset': true,
                    'condition': { 'position': '!' }
                }, 
            }
        },

        // background
        'bg-style-filter': {
            'title': 'Background Style',
            'type': 'tab',
            'options': ['bg-color-filter', 'bg-border', 'bg-shadow', 'bg-mask']
        },
        'bg-style': {
            'title': 'Background Style',
            'type': 'tab',
            'options': ['bg-color', 'bg-border', 'bg-shadow', 'bg-mask']
        },
        'bg-color': { 
            'title': 'Color',
            'pointer-state': true,
            'device-selector': true,
            'options': {
                'color': {
                    'type': 'colorpicker'
                }
            }
        },
        'bg-color-filter': { 
            'title': 'Color',
            'pointer-state': true,
            'device-selector': true,
            'options': {
                'color': {
                    'type': 'colorpicker'
                },
                'filter': {
                    'title': 'Filter Effect',
                    'type': 'combobox',
                    'options': {
                        'blur': 'Blur',
                        'liquid-glass': 'Liquid Glass',
                        'none': 'None',
                    },
                    'width': '1-1',
                    'pointer-state': false
                },
                'blur': {
                    'title': 'Blur (px)',
                    'type': 'range-input',
                    'min': 0,
                    'max': 50,
                    'width': '1-1',
                    'input-width': '100%',
                    'condition': { 'filter': 'blur' },
                    'pointer-state': false
                },
            }
        },
        'bg-border': { 
            'title': 'Border',
            'group': 'border',
            'pointer-state': true,
            'device-selector': true,
            'options': {
                'style': {
                    'title': 'Border Style',
                    'type': 'combobox',
                    'options': 'borderStyle',
                    'width': '1-1'
                },
                'width': {
                    'title': 'Border Width',
                    'type': 'border-width'
                },
                'radius': {
                    'title': 'Border Radius',
                    'type': 'border-radius'
                },
                'color': {
                    'title': 'Border Color',
                    'type': 'colorpicker',
                    'gradient': false
                }
            }
        },
        'bg-shadow': { 
            'title': 'Shadow',
            'group': 'shadow',
            'pointer-state': true,
            'device-selector': true,
            'options': $.pixeStyleSelectorInput.shadow
        },
        'bg-mask': { 
            'title': 'Mask',
            'group': 'mask',
            'pointer-state': true,
            'device-selector': true,
            'options': {
                'shape': {
                    'title': 'Shape',
                    'type': 'combobox',
                    'options': 'backgroundMask',
                    'width': '1-1'
                },
                'image': {
                    'type': 'upload', 
                    'width': '1-1',
                    'condition': { 'shape': 'custom' }
                },
                'position': {
                    'title': 'Position',
                    'type': 'combobox',
                    'width': '1-1',
                    'options': 'backgroundPosition',
                    'reset-siblings': 2
                },
                'pos-x': {
                    'title': 'Offset - X Axis',
                    'type': 'range-input',
                    'range': 'transform-offset',
                    'width': '1-2',
                    'condition': { 'position': 'custom' }
                },
                'pos-y': {
                    'title': 'Offset - Y Axis',
                    'type': 'range-input',
                    'range': 'transform-offset',
                    'width': '1-2',
                    'condition': { 'position': 'custom' }
                }, 
                'size': {
                    'title': 'Size',
                    'type': 'combobox',
                    'width': '1-1',
                    'options': 'backgroundSize',
                    'reset-siblings': 1
                },
                'scale': {
                    'title': 'Scale',
                    'type': 'range-input',
                    'range': 'background-width',
                    'width': 90,
                    'condition': { 'size': 'custom' }
                },
                'repeat': {
                    'title': 'Repeat',
                    'type': 'combobox',
                    'width': '1-1',
                    'options': 'backgroundRepeat'
                },
            }
        },

        // background image css
        'css-bg-image': {
            'title': 'Background Image',
            'tab-title': 'Image',
            'options': {
                'image': {
                    'type': 'upload', 
                    'width': '1-1'
                },
                'position': {
                    'title': 'Position',
                    'type': 'combobox',
                    'width': '1-1',
                    'options': 'backgroundPosition',
                    'reset-siblings': 2
                },
                'pos-x': {
                    'title': 'Offset - X Axis',
                    'type': 'range-input',
                    'range': 'transform-offset',
                    'width': '1-2',
                    'condition': { 'position': '!' }
                },
                'pos-y': {
                    'title': 'Offset - Y Axis',
                    'type': 'range-input',
                    'range': 'transform-offset',
                    'width': '1-2',
                    'condition': { 'position': '!' }
                },
                'repeat': {
                    'title': 'Repeat',
                    'type': 'combobox',
                    'width': '1-2',
                    'options': 'backgroundRepeat'
                },
                'size': {
                    'title': 'Size',
                    'type': 'combobox',
                    'width': '1-1',
                    'options': 'backgroundSize',
                    'reset-siblings': 1
                },
                'scale': {
                    'title': 'Scale',
                    'type': 'range-input',
                    'range': 'background-width',
                    'width': 90,
                    'condition': { 'size': 'custom' }
                },
            }
        },
        'css-bg-image-device': {
            'title': 'Background Image',
            'tab-title': 'Image',
            'device-selector': true,
            'options': {
                'image': {
                    'type': 'upload', 
                    'width': '1-1'
                },
                'position': {
                    'title': 'Position',
                    'type': 'combobox',
                    'width': '1-1',
                    'options': 'backgroundPosition',
                    'reset-siblings': 2
                },
                'pos-x': {
                    'title': 'Offset - X Axis',
                    'type': 'range-input',
                    'range': 'transform-offset',
                    'width': '1-2',
                    'condition': { 'position': '!' }
                },
                'pos-y': {
                    'title': 'Offset - Y Axis',
                    'type': 'range-input',
                    'range': 'transform-offset',
                    'width': '1-2',
                    'condition': { 'position': '!' }
                },
                'repeat': {
                    'title': 'Repeat',
                    'type': 'combobox',
                    'width': '1-2',
                    'options': 'backgroundRepeat'
                },
                'size': {
                    'title': 'Size',
                    'type': 'combobox',
                    'width': '1-1',
                    'options': 'backgroundSize',
                    'reset-siblings': 1
                },
                'scale': {
                    'title': 'Scale',
                    'type': 'range-input',
                    'range': 'background-width',
                    'width': 90,
                    'condition': { 'size': 'custom' }
                },
            }
        },
        'css-bg-image-device-opacity': {
            'title': 'Background Image',
            'tab-title': 'Image',
            'device-selector': true,
            'options': {
                'image': {
                    'type': 'upload', 
                    'width': '1-1'
                },
                'position': {
                    'title': 'Position',
                    'type': 'combobox',
                    'width': '1-1',
                    'options': 'backgroundPosition',
                    'reset-siblings': 2
                },
                'pos-x': {
                    'title': 'Offset - X Axis',
                    'type': 'range-input',
                    'range': 'transform-offset',
                    'width': '1-2',
                    'condition': { 'position': '!' }
                },
                'pos-y': {
                    'title': 'Offset - Y Axis',
                    'type': 'range-input',
                    'range': 'transform-offset',
                    'width': '1-2',
                    'condition': { 'position': '!' }
                },
                'repeat': {
                    'title': 'Repeat',
                    'type': 'combobox',
                    'width': '1-2',
                    'options': 'backgroundRepeat'
                },
                'opacity': {
                    'title': 'Opacity',
                    'type': 'range-input',
                    'min': 0,
                    'max': 100,
                    'default': 100,
                    'width': '1-2',
                    'suffix-text': '%'
                },
                'size': {
                    'title': 'Size',
                    'type': 'combobox',
                    'width': '1-1',
                    'options': 'backgroundSize',
                    'reset-siblings': 1
                },
                'scale': {
                    'title': 'Scale',
                    'type': 'range-input',
                    'range': 'background-width',
                    'width': 90,
                    'condition': { 'size': 'custom' }
                },
            }
        },
        'css-bg-image-hover': {
            'title': 'Background Image',
            'device-selector': true,
            'pointer-state': true,
            'options': {
                'image': {
                    'type': 'upload', 
                    'width': '1-1'
                },
                'position': {
                    'title': 'Position',
                    'type': 'combobox',
                    'width': '1-1',
                    'options': 'backgroundPosition',
                    'reset-siblings': 2
                },
                'pos-x': {
                    'title': 'Offset - X Axis',
                    'type': 'range-input',
                    'range': 'transform-offset',
                    'width': '1-2',
                    'condition': { 'position': '!' }
                },
                'pos-y': {
                    'title': 'Offset - Y Axis',
                    'type': 'range-input',
                    'range': 'transform-offset',
                    'width': '1-2',
                    'condition': { 'position': '!' }
                },
                'repeat': {
                    'title': 'Repeat',
                    'type': 'combobox',
                    'width': '1-2',
                    'options': 'backgroundRepeat'
                },
                'size': {
                    'title': 'Size',
                    'type': 'combobox',
                    'width': '1-1',
                    'options': 'backgroundSize',
                    'reset-siblings': 1
                },
                'scale': {
                    'title': 'Scale',
                    'type': 'range-input',
                    'range': 'background-width',
                    'width': 90,
                    'hide-reset': true,
                    'condition': { 'size': 'custom' }
                },
            }
        },
        'css-bg-image-active': {
            'title': 'Background Image',
            'device-selector': true,
            'pointer-state': 'active',
            'options': {
                'image': {
                    'type': 'upload', 
                    'width': '1-1'
                },
                'position': {
                    'title': 'Position',
                    'type': 'combobox',
                    'width': '1-1',
                    'options': 'backgroundPosition',
                    'reset-siblings': 2
                },
                'pos-x': {
                    'title': 'Offset - X Axis',
                    'type': 'range-input',
                    'range': 'transform-offset',
                    'width': '1-2',
                    'condition': { 'position': '!' }
                },
                'pos-y': {
                    'title': 'Offset - Y Axis',
                    'type': 'range-input',
                    'range': 'transform-offset',
                    'width': '1-2',
                    'condition': { 'position': '!' }
                },
                'repeat': {
                    'title': 'Repeat',
                    'type': 'combobox',
                    'width': '1-2',
                    'options': 'backgroundRepeat'
                },
                'size': {
                    'title': 'Size',
                    'type': 'combobox',
                    'width': '1-1',
                    'options': 'backgroundSize',
                    'reset-siblings': 1
                },
                'scale': {
                    'title': 'Scale',
                    'type': 'range-input',
                    'range': 'background-width',
                    'width': 90,
                    'condition': { 'size': 'custom' }
                },
            }
        },

        // filter settings
        'filter-settings': {
            'title': 'Filter Settings',
            'device-selector': true,
            'options': {
                'all': {
                    'title': 'Enable "All" Filter',
                    'type': 'checkbox',
                    'width': '1-1',
                    'default': 'yes',
                    'device-selector': false
                },
                'alignment': {
                    'title': 'Alignment',
                    'type': 'radioicon',
                    'options': 'alignment',
                    'width': '1-1'
                },
            }
        },
        'filter-bar-settings': {
            'title': 'Filter Bar Settings',
            'device-selector': true,
            'options': {
                'enable': {
                    'title': 'Enable Filter Bar',
                    'type': 'checkbox',
                    'width': '1-1',
                    'default': 'yes',
                    'device-selector': false
                },
                'style': {
                    'title': 'Bar Style',
                    'type': 'combobox',
                    'options': {
                        '': 'Bar',
                        'circle': 'Circle'
                    },
                    'width': '1-1',
                    'with-default': false,
                    'device-selector': false,
                    'condition': { 'enable': ['', 'ignore-device'] }
                },
                'alignment': {
                    'title': 'Alignment',
                    'type': 'radioicon',
                    'options': 'alignment',
                    'width': '1-1',
                    'condition': { 'enable': ['', 'ignore-device'], 'style': ['', 'circle', 'ignore-device'] }
                },
                'width': {
                    'title': 'Bar Width',
                    'type': 'range-input',
                    'range': 'bar-width',
                    'width': '1-2',
                    'condition': { 'enable': ['', 'ignore-device'], 'style': ['', 'circle', 'ignore-device'] }
                },
                'height': {
                    'title': 'Bar Height',
                    'type': 'range-input',
                    'range': 'bar-height',
                    'width': '1-2',
                    'condition': { 'enable': ['', 'ignore-device'], 'style': ['', 'ignore-device'] }
                },
                'margin-top': {
                    'title': 'Bar Top Margin',
                    'type': 'range-input',
                    'range': 'margin',
                    'width': '1-2',
                    'condition': { 'enable': ['', 'ignore-device'], 'style': ['', 'circle', 'ignore-device'] }
                },
                'border-width': {
                    'title': 'Border Width',
                    'type': 'border-width',
                    'condition': { 'enable': ['', 'ignore-device'], 'style': ['border', 'ignore-device'] }
                },
                'border-radius': {
                    'title': 'Border Radius',
                    'type': 'border-radius',
                    'condition': { 'enable': ['', 'ignore-device'], 'style': ['', 'ignore-device'] }
                }
            }
        },
        'filter-bar-style': {
            'title': 'Filter Style',
            'type': 'tab',
            'options': ['filter-bar-color', 'button-border', 'filter-background']
        },
        'filter-bar-color': { 
            'title': 'Filter Bar',
            'options': {
                'bar-color': {
                    'type': 'colorpicker',
                    'gradient': false
                }
            }
        },
        'filter-background': { 
            'title': 'Background',
            'pointer-state': 'active',
            'device-selector': true,
            'options': {
                'background-color': {
                    'type': 'colorpicker'
                }
            }
        },

        // detail background
        'detail-background': {
            'title': 'Background Settings',
            'options': {
                'padding': {
                    'title': 'Padding',
                    'type': 'padding'
                },
                'margin': {
                    'title': 'Margin',
                    'type': 'margin'
                },
                'border-style': {
                    'title': 'Border Style',
                    'type': 'combobox',
                    'options': 'borderStyle',
                    'width': '1-1'
                },
                'border-width': {
                    'title': 'Border Width',
                    'type': 'border-width'
                },
                'border-radius': {
                    'title': 'Border Radius',
                    'type': 'border-radius'
                },
                'color': {
                    'title': 'Background Color',
                    'type': 'colordisplay',
                    'width': '1-2',
                    'gradient': false
                },
                'border-color': {
                    'title': 'Border Color',
                    'type': 'colordisplay',
                    'width': '1-2',
                    'gradient': false
                }
            }
        },

        // separator
        'separator': {
            'type': 'tab',
            'title': 'Separator Settings',
            'options': ['separator-style', 'separator-color']
        },
        'separator-style': {
            'title': 'Style',
            'device-selector': true,
            'options': {
                'type': {
                    'title': 'Separator',
                    'type': 'combobox',
                    'options': 'separatorType',
                    'width': '1-1'
                },
                'width': {
                    'title': 'Width',
                    'type': 'range-input',
                    'range': 'border',
                    'width': '1-2',
                    'condition': {'type': 'divider'}
                },
                'height': {
                    'title': 'Height',
                    'type': 'range-input',
                    'range': 'border',
                    'width': '1-2',
                    'condition': {'type': 'divider'}
                },
                'rotate': {
                    'title': 'Rotate',
                    'type': 'range-input',
                    'min': -360,
                    'max': 360,
                    'width': '1-2',
                    'condition': {'type': 'divider'}
                },
                'size': {
                    'title': 'Size',
                    'type': 'range-input',
                    'range': 'border',
                    'width': '1-2',
                    'condition': {'type': 'dot'}
                },
                'alignment': {
                    'title': 'V-Alignment',
                    'type': 'radioicon',
                    'options': 'v-alignment',
                    'width': '1-2',
                    'condition': {'type': 'dot'}
                }
            }
        },
        'separator-color': {
            'title': 'Color',
            'device-selector': true,
            'options': {
                'color': {
                    'type': 'colorpicker',
                    'gradient': false
                }
            }
        },

        // link settings
        'date-link': {
            'title': 'Link Settings',
            'options': {
                'link-to': {
                    'title': 'Link To Archive',
                    'type': 'combobox',
                    'options': {
                        '': 'None',
                        'day': 'Day',
                        'month': 'Month',
                        'year': 'Year'
                    },
                    'width': '1-1',
                    'with-default': false
                },
            }
        },
        'link-color': {
            'title': 'Text Color Settings',
            'type': 'tab',
            'options': ['link-text-color', 'link-text-shadow', 'link-text-stroke']
        },
        'link-text-color': { 
            'title': 'Color',
            'pointer-state': true,
            'device-selector': true,
            'options': {
                'color': {
                    'type': 'colorpicker',
                    'gradient': false
                }
            }
        },
        'link-text-shadow': { 
            'title': 'Shadow',
            'group': 'shadow',
            'pointer-state': true,
            'device-selector': true,
            'options': {
                'area1': {
                    'title': 'Shadow Size',
                    'type': 'div',
                    'reset': true,
                    'class': 'pixe-sselector-options-group pixe-style-text-shadow',
                    'options': {
                        'x': {
                            'title': 'X-Axis',
                            'type': 'range-input',
                            'min': -100,
                            'max': 100,
                            'suffix': 'px',
                            'hide-reset': true
                        },
                        'y': {
                            'title': 'Y-Axis',
                            'type': 'range-input',
                            'min': -100,
                            'max': 100,
                            'suffix': 'px',
                            'hide-reset': true
                        },
                        'blur': {
                            'title': 'Blur',
                            'type': 'range-input',
                            'min': 0,
                            'max': 100,
                            'suffix': 'px',
                            'hide-reset': true
                        },
                    }
                },
                'color': {
                    'title': 'Shadow Color',
                    'type': 'colorpicker',
                    'gradient': false
                }
            }
        },
        'link-text-stroke': { 
            'title': 'Stroke',
            'group': 'stroke',
            'pointer-state': true,
            'device-selector': true,
            'options': {
                'size': {
                    'title': 'Size',
                    'type': 'range-input',
                    'min': 0,
                    'max': 20,
                    'width': '1-1',
                    'suffix': 'px'
                },
                'color': {
                    'title': 'Stroke Color',
                    'type': 'colorpicker',
                    'gradient': false
                }
            }
        },

        // inline icon
        'inline-icon': {
            'title': 'Image / Icon',
            'device-selector': true,
            'pointer-state': true,
            'options': {
                'icon': {
                    'title': 'Type',
                    'type': 'icon',
                    'device-selector': false,
                    'pointer-state': false
                },
                'position': {
                    'title': 'Position',
                    'type': 'combobox',
                    'options': {
                        'left': 'Left',
                        'left-block': 'Left Block',
                        'left-stretch': 'Left Stretch',
                        'right': 'Right',
                        'right-block': 'Right Block',
                        'right-stretch': 'Right Stretch'
                    },
                    'width': '1-1',
                    'device-selector': false,
                    'pointer-state': false
                },
                'width': {
                    'title': 'Width',
                    'type': 'range-input',
                    'range': 'font-size',
                    'width': '1-2',
                    'pointer-state': false
                },
                'gap': {
                    'title': 'Space',
                    'type': 'range-input',
                    'range': 'gap',
                    'width': '1-2',
                    'pointer-state': false
                },
                'v-align': {
                    'title': 'Vertical Align',
                    'type': 'radioicon',
                    'options': 'v-alignment',
                    'width': '1-2',
                    'device-selector': false,
                    'pointer-state': false
                },
                'v-offset': {
                    'title': 'Vertical Offset',
                    'type': 'range-input',
                    'range': 'gap-minus',
                    'width': '1-2',
                    'pointer-state': false
                },
                'color': {
                    'title': 'Icon & Svg Color',
                    'type': 'colordisplay',
                    'color-type': 'plain-color',
                    'width': '1-2'
                },
                'icon-hide-on': {
                    'title': 'Display In',
                    'type': 'hide-on-devices',
                    'width': '1-1',
                    'device-selector': false,
                    'pointer-state': false
                },
            }
        },

        // link icon
        'link-icon': {
            'title': 'Image / Icon',
            'options': {
                'icon': {
                    'title': 'Type',
                    'type': 'icon'
                },
                'position': {
                    'title': 'Position',
                    'type': 'combobox',
                    'options': {
                        'left': 'Left',
                        'right': 'Right'
                    },
                    'width': '1-2'
                },
                'width': {
                    'title': 'Width',
                    'type': 'range-input',
                    'range': 'font-size',
                    'width': '1-2'
                },
                'gap': {
                    'title': 'Space',
                    'type': 'range-input',
                    'range': 'gap',
                    'width': '1-2'
                },
                'v-offset': {
                    'title': 'Vertical Offset',
                    'type': 'range-input',
                    'range': 'gap-minus',
                    'width': '1-2'
                },
                'color': {
                    'title': 'Icon & Svg Color',
                    'type': 'colordisplay',
                    'color-type': 'plain-color',
                    'width': '1-2'
                }
            }
        },
        'link-icon-hover-block': {
            'title': 'Image / Icon',
            'device-selector': true,
            'pointer-state': true,
            'options': {
                'icon': {
                    'title': 'Type',
                    'type': 'icon',
                    'with-none': false,
                    'device-selector': false,
                    'pointer-state': false
                },
                'position': {
                    'title': 'Position',
                    'type': 'combobox',
                    'options': {
                        'left': 'Left',
                        'left-block': 'Left Block',
                        'left-stretch': 'Left Stretch',
                        'right': 'Right',
                        'right-block': 'Right Block',
                        'right-stretch': 'Right Stretch'
                    },
                    'width': '1-1',
                    'device-selector': false,
                    'pointer-state': false
                },
                'width': {
                    'title': 'Size / Width',
                    'type': 'range-input',
                    'range': 'font-size',
                    'width': '1-2',
                    'pointer-state': false
                },
                'gap': {
                    'title': 'Space',
                    'type': 'range-input',
                    'range': 'gap',
                    'width': '1-2',
                    'pointer-state': false
                },
                'v-align': {
                    'title': 'Vertical Align',
                    'type': 'radioicon',
                    'options': 'v-alignment',
                    'width': '1-2',
                    'device-selector': false,
                    'pointer-state': false
                },
                'v-offset': {
                    'title': 'Vertical Offset',
                    'type': 'range-input',
                    'range': 'gap-minus',
                    'width': '1-2',
                    'pointer-state': false
                },
                'color': {
                    'title': 'Icon & Svg Color',
                    'type': 'colordisplay',
                    'color-type': 'plain-color',
                    'width': '1-2'
                },
                'icon-hide-on': {
                    'title': 'Display In',
                    'type': 'hide-on-devices',
                    'width': '1-1',
                    'device-selector': false,
                    'pointer-state': false
                },
            }
        },

        // no none - hover
        'link-icon-button': {
            'title': 'Image / Icon',
            'pointer-state': true,
            'options': {
                'icon': {
                    'title': 'Type',
                    'type': 'icon',
                    'pointer-state': false
                },
                'position': {
                    'title': 'Position',
                    'type': 'combobox',
                    'options': {
                        'left': 'Left',
                        'right': 'Right'
                    },
                    'width': '1-1',
                    'pointer-state': false
                },
                'width': {
                    'title': 'Size / Width',
                    'type': 'range-input',
                    'range': 'font-size',
                    'width': '1-2',
                    'pointer-state': false
                },
                'gap': {
                    'title': 'Space',
                    'type': 'range-input',
                    'range': 'gap',
                    'width': '1-2',
                    'pointer-state': false
                },
                'v-offset': {
                    'title': 'Vertical Offset',
                    'type': 'range-input',
                    'range': 'gap-minus',
                    'width': '1-2',
                    'pointer-state': false
                },
                'spacing': {
                    'title': 'Icon BG Spacing',
                    'type': 'ssdisplay',
                    'ss-type': 'spacing-nd',
                    'ss-icon': 'pixe-svg-spaces',
                    'width': '1-2',
                    'pointer-state': false
                },
                'bg': {
                    'title': 'Icon BG Style',
                    'type': 'ssdisplay',
                    'ss-type': 'inline-bg-style',
                    'ss-icon': 'pixe-svg-color',
                    'width': '1-2'
                },
                'color': {
                    'title': 'Icon & Svg Color',
                    'type': 'colordisplay',
                    'color-type': 'plain-color',
                    'width': '1-2'
                },
            }
        },

        // separate icon & style
        'link-icon-button-ns': {
            'title': 'Image / Icon',
            'options': {
                'icon': {
                    'title': 'Type',
                    'type': 'icon',
                    'with-none': false
                },
                'position': {
                    'title': 'Position',
                    'type': 'combobox',
                    'options': {
                        'left': 'Left',
                        'right': 'Right'
                    },
                    'width': '1-1'
                },
            }
        },
        'link-icon-button-s': {
            'title': 'Image / Icon Style',
            'options': {
                'width': {
                    'title': 'Size / Width',
                    'type': 'range-input',
                    'range': 'font-size',
                    'width': '1-2'
                },
                'gap': {
                    'title': 'Space',
                    'type': 'range-input',
                    'range': 'gap',
                    'width': '1-2'
                },
                'v-offset': {
                    'title': 'Vertical Offset',
                    'type': 'range-input',
                    'range': 'gap-minus',
                    'width': '1-2'
                },
                'padding': {
                    'title': 'Padding',
                    'type': 'padding'
                },
                'margin': {
                    'title': 'Margin',
                    'type': 'margin'
                },
                'bg': {
                    'title': 'Icon BG Style',
                    'type': 'ssdisplay',
                    'ss-type': 'inline-bg-style',
                    'ss-icon': 'pixe-svg-color',
                    'width': '1-2'
                },
                'color': {
                    'title': 'Icon & Svg Color',
                    'type': 'colordisplay',
                    'color-type': 'plain-color',
                    'width': '1-2'
                },
            }
        },

        // button link
        'button-link-background': {
            'title': 'Background Style',
            'type': 'tab',
            'options': ['bg-color-filter', 'bg-border', 'bg-shadow']
        },
        'button-link-spacing': {
            'title': 'Space & Width Settings',
            'device-selector': true,
            'options': {
                'width-type': {
                    'title': 'Button Width Type',
                    'type': 'combobox',
                    'options': {
                        'min-width': 'Min Width',
                        'full': 'Full Width',
                        'auto': 'Auto'
                    },
                    'width': '1-1'
                },
                'width': {
                    'title': 'Min Width',
                    'type': 'range-input',
                    'range': 'button-width',
                    'width': '1-1',
                    'condition': { 'width-type': 'min-width' }
                },
                'padding': {
                    'title': 'Padding',
                    'type': 'padding'
                },
                'alignment': {
                    'title': 'Text Alignment',
                    'type': 'radioicon',
                    'options': 'alignment',
                    'width': '1-1',
                    'condition': { 'width-type': ['min-width', 'full'] }
                },
            }
        },

        // button
        'button-background': {
            'type': 'tab',
            'title': 'Background Style',
            'options': ['button-color', 'button-border', 'button-shadow', 'button-mask']
        },
        'button-background-nm': { 
            'type': 'tab',
            'title': 'Background Style',
            'options': ['button-color', 'button-border', 'button-shadow']
        },

        // no-mask
        'button-text': {
            'type': 'tab',
            'title': 'Text Color Settings',
            'options': [{
                label: 'Color',
                slug: 'button-text-color'
            }, 'button-text-shadow', 'button-text-stroke']
        },
        'button-color': { 
            'title': 'Color',
            'pointer-state': 'active',
            'device-selector': true,
            'options': {
                'color': {
                    'type': 'colorpicker',
                }
            }
        },
        'button-text-color': { 
            'title': 'Text Color',
            'pointer-state': 'active',
            'device-selector': true,
            'options': {
                'color': {
                    'type': 'colorpicker',
                    'gradient': false
                }
            }
        },
        'button-border': { 
            'title': 'Border',
            'group': 'border',
            'pointer-state': 'active',
            'device-selector': true,
            'options': {
                'style': {
                    'title': 'Border Style',
                    'type': 'combobox',
                    'options': 'borderStyle',
                    'width': '1-1'
                },
                'width': {
                    'title': 'Border Width',
                    'type': 'border-width'
                },
                'radius': {
                    'title': 'Border Radius',
                    'type': 'border-radius'
                },
                'color': {
                    'title': 'Border Color',
                    'type': 'colorpicker',
                    'gradient': false
                }
            }
        },
        'button-shadow': { 
            'title': 'Shadow',
            'group': 'shadow',
            'pointer-state': 'active',
            'device-selector': true,
            'options': $.pixeStyleSelectorInput.shadow
        },
        'button-mask': { 
            'title': 'Mask',
            'group': 'mask',
            'pointer-state': 'active',
            'device-selector': true,
            'options': {
                'shape': {
                    'title': 'Shape',
                    'type': 'combobox',
                    'options': 'backgroundMask',
                    'width': '1-1'
                },
                'image': {
                    'type': 'upload', 
                    'width': '1-1',
                    'condition': { 'shape': 'custom' }
                },
                'position': {
                    'title': 'Position',
                    'type': 'combobox',
                    'width': '1-1',
                    'options': 'backgroundPosition',
                    'reset-siblings': 2
                },
                'pos-x': {
                    'title': 'Offset - X Axis',
                    'type': 'range-input',
                    'range': 'background',
                    'width': '1-2',
                    'condition': { 'position': 'custom' }
                },
                'pos-y': {
                    'title': 'Offset - Y Axis',
                    'type': 'range-input',
                    'range': 'background',
                    'width': '1-2',
                    'condition': { 'position': 'custom' }
                }, 
                'size': {
                    'title': 'Size',
                    'type': 'combobox',
                    'width': '1-1',
                    'options': 'backgroundSize',
                    'reset-siblings': 1
                },
                'scale': {
                    'title': 'Scale',
                    'type': 'range-input',
                    'range': 'background-width',
                    'width': 90,
                    'condition': { 'size': 'custom' }
                },
                'repeat': {
                    'title': 'Repeat',
                    'type': 'combobox',
                    'width': '1-1',
                    'options': 'backgroundRepeat'
                },
            }
        },
        'button-text-shadow': { 
            'title': 'Shadow',
            'group': 'shadow',
            'pointer-state': 'active',
            'device-selector': true,
            'options': {
                'area1': {
                    'title': 'Shadow Size',
                    'type': 'div',
                    'reset': true,
                    'class': 'pixe-sselector-options-group pixe-style-text-shadow',
                    'options': {
                        'x': {
                            'title': 'X-Axis',
                            'type': 'range-input',
                            'min': -100,
                            'max': 100,
                            'suffix': 'px',
                            'hide-reset': true
                        },
                        'y': {
                            'title': 'Y-Axis',
                            'type': 'range-input',
                            'min': -100,
                            'max': 100,
                            'suffix': 'px',
                            'hide-reset': true
                        },
                        'blur': {
                            'title': 'Blur',
                            'type': 'range-input',
                            'min': 0,
                            'max': 100,
                            'suffix': 'px',
                            'hide-reset': true
                        },
                    }
                },
                'color': {
                    'title': 'Shadow Color',
                    'type': 'colorpicker',
                    'gradient': false
                }
            }
        },
        'button-text-stroke': { 
            'title': 'Stroke',
            'group': 'stroke',
            'pointer-state': 'active',
            'device-selector': true,
            'options': {
                'size': {
                    'title': 'Size',
                    'type': 'range-input',
                    'min': 0,
                    'max': 20,
                    'width': '1-1',
                    'suffix': 'px'
                },
                'color': {
                    'title': 'Stroke Color',
                    'type': 'colorpicker',
                    'gradient': false
                }
            }
        },
        'button-icon': {
            'title': 'Image / Icon',
            'pointer-state': 'active',
            'device-selector': true,
            'options': {
                'icon': {
                    'type': 'icon',
                    'pointer-state': false,
                    'device-selector': false
                },
                'width': {
                    'title': 'Width',
                    'type': 'range-input',
                    'range': 'font-size',
                    'width': '1-2',
                    'pointer-state': false,
                    'device-selector': false
                },
                'space': {
                    'title': 'Space',
                    'type': 'range-input',
                    'range': 'gap',
                    'width': '1-2',
                    'pointer-state': false,
                    'device-selector': false
                },
                'v-offset': {
                    'title': 'Vertical Offset',
                    'type': 'range-input',
                    'range': 'gap-minus',
                    'width': '1-2',
                    'pointer-state': false,
                    'device-selector': false
                },
                'position': {
                    'title': 'Position',
                    'type': 'combobox',
                    'width': '1-2',
                    'with-default': false,
                    'options': {
                        '': 'Left',
                        'right': 'Right'
                    },
                    'pointer-state': false,
                    'device-selector': false
                },
                'color': {
                    'title': 'Icon & Svg Color',
                    'type': 'colordisplay',
                    'width': '1-2',
                    'color-type': 'plain-color'
                }
            }
        },
        
        // text color
        'text-box-style': {
            'title': 'Text Color',
            'type': 'tab',
            'options': ['text-box-color', 'text-box-shadow', 'text-box-stroke']
        },
        'text-box-color': { 
            'title': 'Color',
            'device-selector': true,
            'options': {
                'color': {
                    'type': 'colorpicker',
                    'gradient': false
                }
            }
        },
        'text-box-shadow': { 
            'title': 'Shadow',
            'group': 'shadow',
            'device-selector': true,
            'options': {
                'area1': {
                    'title': 'Shadow Size',
                    'type': 'div',
                    'class': 'pixe-sselector-options-group pixe-style-text-shadow',
                    'reset': true,
                    'options': {
                        'x': {
                            'title': 'X-Axis',
                            'type': 'range-input',
                            'min': -100,
                            'max': 100,
                            'suffix': 'px',
                            'hide-reset': true
                        },
                        'y': {
                            'title': 'Y-Axis',
                            'type': 'range-input',
                            'min': -100,
                            'max': 100,
                            'suffix': 'px',
                            'hide-reset': true
                        },
                        'blur': {
                            'title': 'Blur',
                            'type': 'range-input',
                            'min': 0,
                            'max': 100,
                            'suffix': 'px',
                            'hide-reset': true
                        },
                    }
                },
                'color': {
                    'title': 'Shadow Color',
                    'type': 'colorpicker',
                    'gradient': false
                }
            }
        },
        'text-box-stroke': { 
            'title': 'Stroke',
            'group': 'stroke',
            'device-selector': true,
            'options': {
                'size': {
                    'title': 'Size',
                    'type': 'range-input',
                    'min': 0,
                    'max': 20,
                    'width': '1-1',
                    'suffix': 'px'
                },
                'color': {
                    'title': 'Stroke Color',
                    'type': 'colorpicker',
                    'gradient': false
                }
            }
        },

        // text box background
        'text-box-bg-style': {
            'title': 'Background Style',
            'type': 'tab',
            'options': ['text-box-bg-color', 'text-box-bg-border', 'text-box-bg-shadow']
        },
        'text-box-bg-color': { 
            'title': 'Color',
            'device-selector': true,
            'options': {
                'color': {
                    'type': 'colorpicker'
                }
            }
        },
        'text-box-bg-color-filter': { 
            'title': 'Color',
            'device-selector': true,
            'options': {
                'color': {
                    'type': 'colorpicker'
                },
                'filter': {
                    'title': 'Filter Effect',
                    'type': 'combobox',
                    'options': {
                        'blur': 'Blur',
                        'liquid-glass': 'Liquid Glass',
                        'none': 'None',
                    },
                    'width': '1-1'
                },
                'blur': {
                    'title': 'Blur (px)',
                    'type': 'range-input',
                    'min': 0,
                    'max': 50,
                    'width': '1-1',
                    'input-width': '100%',
                    'condition': { 'filter': 'blur' }
                },
            }
        },
        'text-box-bg-border': { 
            'title': 'Border',
            'group': 'border',
            'device-selector': true,
            'options': {
                'style': {
                    'title': 'Border Style',
                    'type': 'combobox',
                    'options': 'borderStyle',
                    'width': '1-1'
                },
                'width': {
                    'title': 'Border Width',
                    'type': 'border-width'
                },
                'radius': {
                    'title': 'Border Radius',
                    'type': 'border-radius'
                },
                'color': {
                    'title': 'Border Color',
                    'type': 'colorpicker',
                    'gradient': false
                }
            }
        },
        'text-box-bg-shadow': {
            'title': 'Shadow',
            'group': 'shadow',
            'device-selector': true,
            'options': $.pixeStyleSelectorInput.shadow
        },

        // table bg
        'table-bg-style': {
            'title': 'Background Style',
            'type': 'tab',
            'options': ['table-bg-border', 'inline-bg-shadow']
        },
        'table-bg-border': { 
            'title': 'Border',
            'group': 'border',
            'options': {
                'style': {
                    'title': 'Border Style',
                    'type': 'combobox',
                    'options': 'borderStyle',
                    'width': '1-1'
                },
                'width': {
                    'title': 'Border Width',
                    'type': 'border-width'
                },
                'color': {
                    'title': 'Border Color',
                    'type': 'colorpicker',
                    'gradient': false
                }
            }
        },

        // inline bg
        'inline-bg-style-filter': {
            'title': 'Background Style',
            'type': 'tab',
            'options': ['inline-text-color-filter', 'inline-bg-border', 'inline-bg-shadow']
        },
        'inline-bg-style-filter2': {
            'title': 'Background Style',
            'type': 'tab',
            'options': ['inline-text-color-filter2', 'inline-bg-border', 'inline-bg-shadow']
        },
        'inline-bg-style': {
            'title': 'Background Style',
            'type': 'tab',
            'options': ['inline-text-color', 'inline-bg-border', 'inline-bg-shadow']
        },
        'inline-bg-border': { 
            'title': 'Border',
            'group': 'border',
            'options': {
                'style': {
                    'title': 'Border Style',
                    'type': 'combobox',
                    'options': 'borderStyle',
                    'width': '1-1'
                },
                'width': {
                    'title': 'Border Width',
                    'type': 'border-width'
                },
                'radius': {
                    'title': 'Border Radius',
                    'type': 'border-radius'
                },
                'color': {
                    'title': 'Border Color',
                    'type': 'colorpicker',
                    'gradient': false
                }
            }
        },
        'inline-bg-shadow': { 
            'title': 'Shadow',
            'group': 'shadow',
            'options': $.pixeStyleSelectorInput.shadow
        },

        // inline text
        'inline-color': {
            'title': 'Text Color Settings',
            'type': 'tab',
            'options': ['inline-text-color', 'inline-text-shadow', 'inline-text-stroke', 'inline-text-mask']
        },
        'inline-color-nm': {
            'title': 'Text Color Settings',
            'type': 'tab',
            'options': ['inline-text-color', 'inline-text-shadow', 'inline-text-stroke']
        },
        'inline-text-color': { 
            'title': 'Color',
            'options': {
                'color': {
                    'type': 'colorpicker'
                }
            }
        },
        'inline-text-color-filter': { 
            'title': 'Color',
            'options': {
                'color': {
                    'type': 'colorpicker'
                },
                'filter': {
                    'title': 'Filter Effect',
                    'type': 'combobox',
                    'options': {
                        'blur': 'Blur',
                        'liquid-glass': 'Liquid Glass',
                        'none': 'None',
                    },
                    'width': '1-1'
                },
                'blur': {
                    'title': 'Blur (px)',
                    'type': 'range-input',
                    'min': 0,
                    'max': 50,
                    'width': '1-1',
                    'input-width': '100%',
                    'condition': { 'filter': 'blur' }
                },
            }
        },
        'inline-text-color-filter2': { 
            'title': 'Color',
            'options': {
                'color': {
                    'type': 'colorpicker'
                },
                'filter': {
                    'title': 'Filter Effect',
                    'type': 'combobox',
                    'options': {
                        'blur': 'Blur',
                        'none': 'None',
                    },
                    'width': '1-1'
                },
                'blur': {
                    'title': 'Blur (px)',
                    'type': 'range-input',
                    'min': 0,
                    'max': 50,
                    'width': '1-1',
                    'input-width': '100%',
                    'condition': { 'filter': 'blur' }
                },
            }
        },
        'inline-percent-color': { 
            'title': 'Percentage',
            'options': {
                'percent': {
                    'type': 'colorpicker',
                    'gradient': false
                }
            }
        },
        'inline-title-color': { 
            'title': 'Title',
            'options': {
                'title': {
                    'type': 'colorpicker',
                    'gradient': false
                }
            }
        },
        'inline-caption-color': { 
            'title': 'Caption',
            'options': {
                'caption': {
                    'type': 'colorpicker',
                    'gradient': false
                }
            }
        },
        'inline-text-shadow': { 
            'title': 'Shadow',
            'group': 'shadow',
            'options': {
                'area1': {
                    'title': 'Shadow Size',
                    'type': 'div',
                    'class': 'pixe-sselector-options-group pixe-style-text-shadow',
                    'reset': true,
                    'options': {
                        'x': {
                            'title': 'X-Axis',
                            'type': 'range-input',
                            'min': -100,
                            'max': 100,
                            'suffix': 'px',
                            'hide-reset': true
                        },
                        'y': {
                            'title': 'Y-Axis',
                            'type': 'range-input',
                            'min': -100,
                            'max': 100,
                            'suffix': 'px',
                            'hide-reset': true
                        },
                        'blur': {
                            'title': 'Blur',
                            'type': 'range-input',
                            'min': 0,
                            'max': 100,
                            'suffix': 'px',
                            'hide-reset': true
                        },
                    }
                },
                'color': {
                    'title': 'Shadow Color',
                    'type': 'colorpicker',
                    'gradient': false
                }
            }
        },
        'inline-text-stroke': { 
            'title': 'Stroke',
            'group': 'stroke',
            'options': {
                'size': {
                    'title': 'Size',
                    'type': 'range-input',
                    'min': 0,
                    'max': 20,
                    'width': '1-1',
                    'suffix': 'px'
                },
                'color': {
                    'title': 'Stroke Color',
                    'type': 'colorpicker',
                    'gradient': false
                }
            }
        },
        'inline-text-mask': { 
            'title': 'Mask',
            'group': 'mask',
            'options': {
                'image': {
                    'type': 'upload',
                    'width': '1-1'
                },
                'position': {
                    'title': 'Position',
                    'type': 'combobox',
                    'width': '1-1',
                    'options': 'backgroundPosition',
                    'reset-siblings': 2
                },
                'pos-x': {
                    'title': 'Offset - X Axis',
                    'type': 'range-input',
                    'range': 'background',
                    'width': '1-2',
                    'condition': { 'position': 'custom' }
                },
                'pos-y': {
                    'title': 'Offset - Y Axis',
                    'type': 'range-input',
                    'range': 'background',
                    'width': '1-2',
                    'condition': { 'position': 'custom' }
                },
                'size': {
                    'title': 'Size',
                    'type': 'combobox',
                    'width': '1-1',
                    'options': 'backgroundSize',
                    'reset-siblings': 1
                },
                'scale': {
                    'title': 'Scale',
                    'type': 'range-input',
                    'range': 'background-width',
                    'width': 90,
                    'condition': { 'size': 'custom' }
                },
                'repeat': {
                    'title': 'Repeat',
                    'type': 'combobox',
                    'width': '1-1',
                    'options': 'backgroundRepeat'
                },
            }
        },

        // link
        'image-link': {
            'title': 'Link Settings',
            'options': {
                'link-to': {
                    'title': 'Link To',
                    'type': 'combobox',
                    'width': '1-1',
                    'search': true,
                    'options': 'imageLink'
                },
                'custom-url': {
                    'title': 'URL',
                    'type': 'text',
                    'width': '1-1',
                    'condition': { 'link-to': ['custom', 'video-lb'] }
                },
                'custom-media': {
                    'type': 'upload',
                    'width': '1-1',
                    'condition': { 'link-to': ['image-custom-lb', 'video-custom-lb'] }
                },
                'post-id': {
                    'title': 'Select Post',
                    'type': 'combobox',
                    'width': '1-1',
                    'condition': { 'link-to': 'pixe-callback' },
                    'callback': 'post',
                },
                'post-type': {
                    'title': 'Select Post Type',
                    'type': 'combobox',
                    'options': 'postType',
                    'width': '1-1',
                    'condition': { 'link-to': ['archive-post', 'archive-tax'] }
                },
                'taxonomy': {
                    'title': 'Select Taxonomy',
                    'type': 'combobox',
                    'callback': 'taxonomy',
                    'with-default': false,
                    'width': '1-1',
                    'condition': { 'link-to': ['archive-tax'], 'post-type': 'pixe-callback' },
                },
                'category': {
                    'title': 'Select Category',
                    'type': 'combobox',
                    'callback': 'category',
                    'with-default': false,
                    'width': '1-1',
                    'condition': { 'link-to': ['archive-tax'], 'taxonomy': 'pixe-callback' },
                },
                'popup': {
                    'title': 'Select Popup',
                    'type': 'combobox',
                    'options': 'popupTemplate',
                    'width': '1-1',
                    'condition': { 'link-to': 'popup' }
                },
                'target': {
                    'title': 'Target',
                    'type': 'combobox',
                    'width': '1-2',
                    'options': 'linkTarget',
                    'condition': { 'link-to': 'pixe-callback' },
                    'callback': function(input, type){ return ( type == 'custom' || type == 'file' || pixeData.postTypes[type] ); }
                },
                'rel': {
                    'title': 'Rel',
                    'type': 'text',
                    'width': '1-2',
                    'condition': { 'link-to': 'pixe-callback' },
                    'callback': function(input, type){ return ( type == 'custom' || pixeData.postTypes[type] ); }
                },
                'parameter': $.pixeInputOptions['url-parameters'],
                'aria-label': $.pixeInputOptions['aria-label']
            }
        },
        'button-link': {
            'title': 'Link Settings',
            'options': {
                'link-to': {
                    'title': 'Link To',
                    'type': 'combobox',
                    'width': '1-1',
                    'with-default': false,
                    'search': true,
                    'options': 'buttonLink',
                },
                'custom-url': {
                    'title': 'URL',
                    'type': 'text',
                    'width': '1-1',
                    'condition': { 'link-to': ['', 'video-lb'] }
                },
                'custom-media': {
                    'type': 'upload',
                    'width': '1-1',
                    'condition': { 'link-to': ['image-custom-lb', 'video-custom-lb'] }
                },
                'post-id': {
                    'title': 'Select Post',
                    'type': 'combobox',
                    'width': '1-1',
                    'condition': { 'link-to': 'pixe-callback' },
                    'callback': 'post'
                },
                'post-type': {
                    'title': 'Select Post Type',
                    'type': 'combobox',
                    'options': 'postType',
                    'width': '1-1',
                    'condition': { 'link-to': ['archive-post', 'archive-tax'] }
                },
                'taxonomy': {
                    'title': 'Select Taxonomy',
                    'type': 'combobox',
                    'callback': 'taxonomy',
                    'with-default': false,
                    'width': '1-1',
                    'condition': { 'link-to': ['archive-tax'], 'post-type': 'pixe-callback' },
                },
                'category': {
                    'title': 'Select Category',
                    'type': 'combobox',
                    'callback': 'category',
                    'with-default': false,
                    'width': '1-1',
                    'condition': { 'link-to': ['archive-tax'], 'taxonomy': 'pixe-callback' },
                },
                'popup': {
                    'title': 'Select Popup',
                    'type': 'combobox',
                    'options': 'popupTemplate',
                    'width': '1-1',
                    'condition': { 'link-to': 'popup' }
                },
                'target': {
                    'title': 'Target',
                    'type': 'combobox',
                    'width': '1-2',
                    'options': 'linkTarget',
                    'condition': { 'link-to': 'pixe-callback' },
                    'callback': function(input, type){ return ( !type || pixeData.postTypes[type] ); }
                },
                'rel': {
                    'title': 'Rel',
                    'type': 'text',
                    'width': '1-2',
                    'condition': { 'link-to': 'pixe-callback' },
                    'callback': function(input, type){ return ( !type || pixeData.postTypes[type] ); }
                },
                'parameter': $.pixeInputOptions['url-parameters'],
                'aria-label': $.pixeInputOptions['aria-label'],
            }
        },
        'inline-link': {
            'title': 'Link Settings',
            'options': {
                'custom-url': {
                    'title': 'URL',
                    'type': 'text',
                    'width': '1-1',
                    'condition': { 'link-to': ['', 'video-lb'] }
                },
                'target': {
                    'title': 'Target',
                    'type': 'combobox',
                    'width': '1-2',
                    'options': 'linkTarget',
                    'condition': { 'link-to': [''] }
                },
                'rel': {
                    'title': 'Rel',
                    'type': 'text',
                    'width': '1-2',
                    'condition': { 'link-to': [''] }
                }
            }, 
            'bottom': function(ss, container){
                var remove = $('<div class="pixe-remove-link-area" data-width="1-1" ></div>');
                remove.append('<svg width="15" height="12" viewBox="0 0 15 12" fill="none" ><path d="M0.909507 0.119449C0.665757 -0.0727381 0.311851 -0.0282069 0.119663 0.215543C-0.0725245 0.459293 -0.0279933 0.813199 0.215757 1.00539L14.0908 11.8804C14.3345 12.0726 14.6884 12.028 14.8806 11.7843C15.0728 11.5405 15.0283 11.1866 14.7845 10.9944L11.4681 8.39523L13.5892 6.27414C14.9134 4.94992 14.9134 2.80539 13.5892 1.48117C12.4173 0.309293 10.5704 0.156949 9.22279 1.12023L9.18529 1.14601C8.84779 1.38742 8.77044 1.85617 9.01185 2.19132C9.25326 2.52648 9.72201 2.60617 10.0572 2.36476L10.0947 2.33898C10.847 1.80226 11.8759 1.88664 12.5275 2.54054C13.2658 3.27882 13.2658 4.47414 12.5275 5.21242L10.2775 7.46242L9.52982 6.87648C10.0994 5.61554 9.84623 4.10382 8.83607 3.09367C7.61263 1.86789 5.68373 1.77648 4.35248 2.81945L0.909507 0.119449ZM5.60169 3.79679C6.30716 3.44757 7.18841 3.56476 7.77669 4.15539C8.24544 4.62414 8.42123 5.28742 8.28529 5.90148L5.60169 3.79679ZM9.52982 9.75929L5.17748 6.32804C5.12826 7.26086 5.46341 8.20539 6.16654 8.90617C7.07826 9.81789 8.37904 10.1015 9.53216 9.75695L9.52982 9.75929ZM2.73294 4.40382L1.41107 5.7257C0.0868506 7.04992 0.0868506 9.19445 1.41107 10.5187C2.58294 11.6905 4.42982 11.8429 5.77748 10.8796L5.81498 10.8538C6.15248 10.6124 6.22982 10.1437 5.98841 9.80851C5.74701 9.47336 5.27826 9.39367 4.9431 9.63507L4.9056 9.66086C4.15326 10.1976 3.12435 10.1132 2.47279 9.45929C1.73451 8.71867 1.73451 7.52336 2.47279 6.78507L3.92123 5.33664L2.73529 4.40148L2.73294 4.40382Z" fill="#C0C0C0"/></svg>');
                remove.append('Remove Link');
                remove.appendTo(container);
                
                // bind
                remove.on('click', function(){
                    ss.style = {};
                    container.find('[data-slug]').pixeInputUpdate('', false).first().trigger('change');
                });
            }
        },
        'post-link': {
            'title': 'Link Settings',
            'options': {
                'link-to': {
                    'title': 'Link To',
                    'type': 'combobox',
                    'width': '1-1',
                    'with-default': false,
                    'search': true,
                    'options': 'postLink',
                },
                'custom-url': {
                    'title': 'URL',
                    'type': 'text',
                    'width': '1-1',
                    'condition': { 'link-to': ['custom', 'video-lb'] }
                },
                'custom-media': {
                    'type': 'upload',
                    'width': '1-1',
                    'condition': { 'link-to': ['image-custom-lb', 'video-custom-lb'] }
                },
                'popup': {
                    'title': 'Select Popup',
                    'type': 'combobox',
                    'options': 'popupTemplate',
                    'width': '1-1',
                    'condition': { 'link-to': 'popup' }
                },
                'target': {
                    'title': 'Target',
                    'type': 'combobox',
                    'width': '1-2',
                    'options': 'linkTarget',
                    'condition': { 'link-to': 'custom' }
                },
                'rel': {
                    'title': 'Rel',
                    'type': 'text',
                    'width': '1-2',
                    'condition': { 'link-to': 'custom' }
                },
            }
        },
        'gallery-link': {
            'title': 'Default Link',
            'options': {
                'link-to': {
                    'title': 'Default Link Option',
                    'type': 'combobox',
                    'width': '1-1',
                    'options': {
                        'none': 'None',
                        'file': 'Image File',
                        'image-lb': 'Image Lightbox'
                    },
                    'description-bottom': 'You also have additional link options, such as custom image, video, and URL settings directly on each image.'
                }
            }
        },

        'icon-style': {
            'title': 'Icon Style',
            'options': {
                'width': {
                    'title': 'Icon Width',
                    'type': 'range-input',
                    'range': 'font-size',
                    'width': '1-1'
                },
                'x': {
                    'title': 'Offset - X Axis',
                    'type': 'range-input',
                    'range': 'transform-small',
                    'width': '1-2',
                },
                'y': {
                    'title': 'Offset - Y Axis',
                    'type': 'range-input',
                    'range': 'transform-small',
                    'width': '1-2',
                },
                'color': {
                    'title': 'Icon Color',
                    'type': 'colordisplay',
                    'color-type': 'plain-color',
                    'width': '1-2'
                },
            }
        },

        // spacing
        'spacing': {
            'title': 'Spacing',
            'device-selector': true,
            'options': {
                'padding': {
                    'title': 'Padding',
                    'type': 'padding'
                },
                'margin': {
                    'title': 'Margin',
                    'type': 'margin'
                }
            }
        },
        'spacing-nd': {
            'title': 'Spacing',
            'options': {
                'padding': {
                    'title': 'Padding',
                    'type': 'padding'
                },
                'margin': {
                    'title': 'Margin',
                    'type': 'margin'
                }
            }
        },
        'margin': {
            'title': 'Spacing',
            'device-selector': true,
            'options': {
                'margin': {
                    'title': 'Margin',
                    'type': 'margin'
                }
            }
        },
        'spacing-tbpdpx': {
            'title': 'Spacing',
            'device-selector': true,
            'options': {
                'padding': {
                    'title': 'Padding',
                    'type': 'padding',
                    'tbType': 'padding-px'
                },
                'margin': {
                    'title': 'Margin',
                    'type': 'margin'
                }
            }
        },
        'padding': {
            'title': 'Spacing',
            'device-selector': true,
            'options': {
                'padding': {
                    'title': 'Padding',
                    'type': 'padding'
                }
            }
        },
        'filter-spacing': {
            'title': 'Filter Spacing',
            'device-selector': true,
            'options': {
                'padding': {
                    'title': 'Filter Item Padding',
                    'type': 'padding'
                },
                'gap': {
                    'title': 'Filter Gap',
                    'type': 'range-input',
                    'range': 'gap',
                    'width': '1-2'
                },
                'margin-bottom': {
                    'title': 'Filter Bottom Margin',
                    'type': 'range-input',
                    'range': 'margin-positive',
                    'width': '1-2'
                }
            }
        },

        // query
        'taxonomy-link': {
            'title': 'Link Settings',
            'options': {
                'link-to': {
                    'title': 'Link to Archive',
                    'type': 'combobox',
                    'options': {
                        '': 'Taxonomy Archive',
                        'none': 'None'
                    },
                    'with-default': false,
                    'width': '1-1'
                }
            }
        },
        'taxonomy-selector': {
            'title': 'Select Taxonomy',
            'options': {
                'post-type': {
                    'title': 'Post Type',
                    'type': 'combobox',
                    'options': 'postType',
                    'width': '1-1',
                    'default': 'post',
                    'hide-reset': true
                },
                'taxonomy': {
                    'title': 'Select Taxonomy',
                    'type': 'combobox',
                    'condition': { 'post-type': 'pixe-callback' },
                    'callback': 'taxonomy',
                    'width': '1-1',
                    'default': 'category',
                    'hide-reset': true
                },
                'limit': {
                    'title': 'Taxonomy Limit',
                    'type': 'range-input',
                    'min': 1,
                    'max': 10,
                    'width': '1-1'
                }
            }
        },

        // input
        'single-input-style2': {
            'title': 'Input Style',
            'device-selector': true,
            'pointer-state': 'active',
            'options': {
                'input-padding': {
                    'title': 'Padding',
                    'type': 'padding',
                    'pointer-state': false
                },
                'input-width': {
                    'title': 'Width',
                    'type': 'range-input',
                    'range': 'input-width',
                    'width': '1-2',
                    'pointer-state': false,
                },
                'input-height': {
                    'title': 'Height',
                    'type': 'range-input',
                    'range': 'input-height',
                    'width': '1-2',
                    'pointer-state': false,
                },
                'background': {
                    'title': 'Input Field Style',
                    'type': 'ssdisplay',
                    'ss-title': 'Input Field Style',
                    'ss-type': 'inline-bg-style',
                    'ss-icon': 'pixe-svg-color',
                    'width': '1-2'
                },
                'input': {
                    'title': 'Input Field Text',
                    'type': 'colordisplay',
                    'width': '1-2',
                    'gradient': false
                },
                'placeholder': {
                    'title': 'Placeholder Color',
                    'type': 'colordisplay',
                    'width': '1-2',
                    'gradient': false,
                    'device-selector': false,
                    'pointer-state': false
                },
            }
        },
        'input-button-style2-p': { // with preset
            'title': 'Button Style',
            'data-callback': 'input-button-style2-p',
            'device-selector': true,
            'pointer-state': true,
            'options': {
                'button-preset': {
                    'title': 'Button Preset',
                    'type': 'button-preset-combobox',
                    'width': '1-1',
                    'device-selector': false,
                    'pointer-state': false
                },
                'align': {
                    'title': 'Alignment',
                    'type': 'radioicon',
                    'options': 'alignment',
                    'width': '1-1',
                    'pointer-state': false
                },
                'width-type': {
                    'title': 'Button Width Type',
                    'type': 'combobox',
                    'options': {
                        'full': 'Full Width',
                        'min-width': 'Min Width',
                        'auto': 'Auto'
                    },
                    'width': '1-2',
                    'device-selector': false,
                    'pointer-state': false
                },
                'width': {
                    'title': 'Min Width',
                    'type': 'range-input',
                    'range': 'button-width',
                    'width': '1-2',
                    'condition': { 'width-type': 'min-width' },
                    'device-selector': false,
                    'pointer-state': false,
                },
                'height': {
                    'title': 'Button Height',
                    'type': 'range-input',
                    'range': 'input-height',
                    'width': '1-2',
                    'pointer-state': false
                },
                'alignment': {
                    'title': 'Text Alignment',
                    'type': 'radioicon',
                    'options': 'alignment',
                    'width': '1-2',
                    'condition': { 'width-type': ['min-width', 'full'] }
                },
                'padding': {
                    'title': 'Padding',
                    'type': 'padding',
                    'pointer-state': false
                },
                'background': {
                    'title': 'Button Style',
                    'type': 'ssdisplay',
                    'ss-title': 'Button Style',
                    'ss-type': 'inline-bg-style',
                    'ss-icon': 'pixe-svg-color',
                    'width': '1-2'
                },
                'text-color': {
                    'title': 'Button Text Color',
                    'type': 'colordisplay',
                    'color-type': 'plain-color',
                    'width': '1-2'
                },
            }
        },
        'input-button-style2': {
            'title': 'Button Style',
            'device-selector': true,
            'pointer-state': true,
            'options': {
                'align': {
                    'title': 'Alignment',
                    'type': 'radioicon',
                    'options': 'alignment',
                    'width': '1-1',
                    'pointer-state': false
                },
                'width-type': {
                    'title': 'Button Width Type',
                    'type': 'combobox',
                    'options': {
                        'full': 'Full Width',
                        'min-width': 'Min Width',
                        'auto': 'Auto'
                    },
                    'width': '1-2',
                    'device-selector': false,
                    'pointer-state': false
                },
                'width': {
                    'title': 'Min Width',
                    'type': 'range-input',
                    'range': 'button-width',
                    'width': '1-2',
                    'condition': { 'width-type': 'min-width' },
                    'device-selector': false,
                    'pointer-state': false,
                },
                'height': {
                    'title': 'Button Height',
                    'type': 'range-input',
                    'range': 'input-height',
                    'width': '1-2',
                    'pointer-state': false
                },
                'alignment': {
                    'title': 'Text Alignment',
                    'type': 'radioicon',
                    'options': 'alignment',
                    'width': '1-2',
                    'condition': { 'width-type': ['min-width', 'full'] }
                },
                'padding': {
                    'title': 'Padding',
                    'type': 'padding',
                    'pointer-state': false
                },
                'background': {
                    'title': 'Button Style',
                    'type': 'ssdisplay',
                    'ss-title': 'Button Style',
                    'ss-type': 'inline-bg-style',
                    'ss-icon': 'pixe-svg-color',
                    'width': '1-2'
                },
                'text-color': {
                    'title': 'Button Text Color',
                    'type': 'colordisplay',
                    'color-type': 'plain-color',
                    'width': '1-2'
                },
            }
        },
        'input-button-style2-nsna': { // no size no align
            'title': 'Button Style',
            'device-selector': true,
            'pointer-state': true,
            'options': {
                'height': {
                    'title': 'Button Height',
                    'type': 'range-input',
                    'range': 'input-height',
                    'width': '1-1',
                    'pointer-state': false
                },
                'padding': {
                    'title': 'Padding',
                    'type': 'padding',
                    'pointer-state': false
                },
                'background': {
                    'title': 'Button Style',
                    'type': 'ssdisplay',
                    'ss-title': 'Button Style',
                    'ss-type': 'inline-bg-style',
                    'ss-icon': 'pixe-svg-color',
                    'width': '1-2'
                },
                'text-color': {
                    'title': 'Button Text Color',
                    'type': 'colordisplay',
                    'color-type': 'plain-color',
                    'width': '1-2'
                },
            }
        },
        'input-button-style2-nsnanh': { // no size no align no height
            'title': 'Button Style',
            'device-selector': true,
            'pointer-state': true,
            'options': {
                'padding': {
                    'title': 'Padding',
                    'type': 'padding',
                    'pointer-state': false
                },
                'background': {
                    'title': 'Button Style',
                    'type': 'ssdisplay',
                    'ss-title': 'Button Style',
                    'ss-type': 'inline-bg-style',
                    'ss-icon': 'pixe-svg-color',
                    'width': '1-2'
                },
                'text-color': {
                    'title': 'Button Text Color',
                    'type': 'colordisplay',
                    'color-type': 'plain-color',
                    'width': '1-2'
                },
            }
        },

        // shape
        'shape-style': {
            'title': 'Shape Style',
            'device-selector': true,
            'options': {
                'stroke-width': {
                    'title': 'Stroke Size',
                    'type': 'range-input',
                    'min': 1,
                    'max': 20,
                    'suffix-text': 'px',
                    'width': '1-2'
                },
                'stroke-color': {
                    'title': 'Stroke Color',
                    'type': 'colordisplay',
                    'color-type': 'plain-color',
                    'width': '1-2'
                },
                'scale-x': {
                    'title': 'Scale - X',
                    'type': 'range-input',
                    'min': 5,
                    'max': 30,
                    'decimal': 1,
                    'width': '1-2',
                },
                'scale-y': {
                    'title': 'Scale - Y',
                    'type': 'range-input',
                    'min': 5,
                    'max': 30,
                    'decimal': 1,
                    'width': '1-2',
                },
                'x': {
                    'title': 'Offset - X Axis',
                    'type': 'range-input',
                    'range': 'transform-small',
                    'width': '1-2',
                },
                'y': {
                    'title': 'Offset - Y Axis',
                    'type': 'range-input',
                    'range': 'transform-small',
                    'width': '1-2',
                },
                'skew-x': {
                    'title': 'Skew - X Axis',
                    'type': 'range-input',
                    'min': -360,
                    'max': 360,
                    'width': '1-2',
                },
                'skew-y': {
                    'title': 'Skew - Y Axis',
                    'type': 'range-input',
                    'min': -360,
                    'max': 360,
                    'width': '1-2',
                },
                'rotate': {
                    'title': 'Rotate',
                    'type': 'range-input',
                    'min': -360,
                    'max': 360,
                    'width': '1-2'
                },
                'z-index': {
                    'title': 'Z-index',
                    'type': 'range-input',
                    'min': 0,
                    'max': 100,
                    'width': '1-2'
                }
            }
        }
    };

    // transition
    $.pixeStyleSelectorOption['page-transition'] = {
        'title': 'Page Transition',
        'type': 'tab',
        'options': ['page-transition-preloader', 'page-transition-overlay']
    }
    $.pixeStyleSelectorOption['page-transition-overlay'] = {
        'title': 'Overlay',
        'data-callback': 'transition-data',
        'options': {
            'overlay-color': {
                'title': 'Overlay Color',
                'type': 'colordisplay',
                'width': '1-1'
            },
            'overlay-image': {
                'title': 'Overlay Image',
                'type': 'upload',
                'width': '1-1'
            },
            'in-effect': {
                'title': 'Entrance Effect',
                'type': 'combobox',
                'options': 'transEffectsOut',
                'width': '1-2'
            },
            'out-effect': {
                'title': 'Exit Effect',
                'type': 'combobox',
                'options': 'transEffectsIn',
                'width': '1-2'
            },
            'duration': {
                'title': 'Speed (ms)',
                'type': 'range-input',
                'min': 100,
                'max': 1000, 
                'width': '1-2'
            },
            'delay': {
                'title': 'Delay (ms)',
                'type': 'range-input',
                'min': 100,
                'max': 1000, 
                'width': '1-2'
            },
        }
    }
    $.pixeStyleSelectorOption['page-transition-preloader'] = {
        'title': 'Preloader',
        'data-callback': 'transition-data',
        'options': {
            'enable-preloader': {
                'title': 'Enable Preloader',
                'type': 'checkbox',
                'width': '1-1'
            },
            'type': {
                'title': 'Preloader Type',
                'type': 'combobox',
                'options': {
                    'none': 'None',
                    'css': 'Css Animation',
                    'image': 'Image',
                    'icon': 'Icon'
                },
                'width': '1-1',
                'with-default': false
            },
            'style': {
                'title': 'Style',
                'type': 'combobox',
                'class': 'pixe-preload-icon-combobox',
                'popup-class': 'pixe-preload-icon-popup',
                'options': 'preloadIcon',
                'width': '1-1',
                'condition': {'type': 'css'}
            },
            'image': {
                'type': 'upload',
                'width': '1-1',
                'condition': {'type': 'image'}
            },
            'icon': {
                'type': 'upload',
                'convert-svg': true,
                'width': '1-1',
                'condition': {'type': 'icon'}
            },
            'button': {
                'type': 'button',
                'icon': 'play',
                'button-text': pixei18n.button.preview,
                'button-class': 'pixe-type-white',
                'button-callback': 'preview-preload',
                'width': '1-1'
            },
            'color': {
                'title': 'Color',
                'type': 'colordisplay',
                'color-type': 'plain-color',
                'width': '1-2',
                'condition': {'type': 'css'}
            },
            'size': {
                'title': 'Size',
                'width': '1-2',
                'type': 'range-input',
                'range': 'font-size',
                'condition': {'type': 'css'}
            },
            'speed': {
                'title': 'Speed (ms)',
                'type': 'range-input',
                'min': 100,
                'max': 1000, 
                'width': '1-2',
                'condition': {'type': 'css'}
            },
            'icon-width': {
                'title': 'Width',
                'type': 'range-input',
                'range': 'font-size',
                'width': '1-2',
                'condition': {'type': ['image', 'icon']}
            },
            'icon-color': {
                'title': 'Icon & Svg Color',
                'type': 'colordisplay',
                'color-type': 'plain-color',
                'width': '1-2',
                'condition': {'type': 'icon'}
            },
            'icon-opacity': {
                'title': 'Fade Opacity',
                'type': 'range-input',
                'min': 0,
                'max': 100,
                'default': 100,
                'suffix-text': '%',
                'width': '1-2',
                'condition': {'type': ['image']}
            },
            'icon-effect': {
                'title': 'Animation Effect',
                'type': 'combobox',
                'width': '1-1',
                'options': 'animationEffects',
                'condition': {'type': ['image', 'icon']}
            },
            'icon-duration': {
                'title': 'Duration (ms)',
                'type': 'range-input',
                'min': 0,
                'max': 10000,
                'width': '1-2',
                'condition': {'type': ['image', 'icon']}
            },
            'icon-delay': {
                'title': 'Delay (ms)',
                'type': 'range-input',
                'min': 0,
                'max': 10000,
                'width': '1-2',
                'condition': {'type': ['image', 'icon']}
            },
        }
    }

    // collection settings
    $.pixeStyleSelectorOption['slide-time-settings'] = {
        'title': 'Slide Time Settings',
        'options': {
            'slide-duration': {
                'title': 'Slide Time (ms)',
                'type': 'range-input',
                'min': 3000,
                'max': 8000, 
                'width': '1-1',
                'description': 'Only for autoplay is enabled.'
            },
        }
    }
    $.pixeStyleSelectorOption['collection-slider-settings'] = {
        'title': 'Slider Settings',
        'type': 'tab',
        'options': ['collection-slider-height', 'collection-slider-animation', 'collection-slider-autoplay']
    }
    $.pixeStyleSelectorOption['collection-slider-height'] = {
        'title': 'Height',
        'device-selector': true,
        'options': {
            'layout': {
                'title': 'Slider Container Height',
                'type': 'combobox',
                'options': {
                    'auto': 'Auto',
                    'custom': 'Custom',
                    'full': 'Full Screen'
                },
                'width': '1-1'
            },
            'height': {
                'title': 'Specify Container Height',
                'type': 'range-input',
                'range': 'height',
                'condition': { 'layout': 'custom' },
                'width': '1-1'
            },
            'slide-layout': {
                'title': 'Inner Slide Height',
                'type': 'combobox',
                'options': {
                    'custom': 'Custom',
                    'full': 'Full Screen'
                },
                'width': '1-1'
            },
            'slide-height': {
                'title': 'Specify Slide Height',
                'type': 'range-input',
                'range': 'height',
                'condition': { 'slide-layout': 'custom' },
                'width': '1-1'
            },
            'overflow': {
                'title': 'Overflow',
                'type': 'combobox',
                'options': 'overflow',
                'width': '1-1'
            }
        }
    }
    $.pixeStyleSelectorOption['collection-slider-animation'] = {
        'title': 'Animation',
        'options': {
            'area1': {
                'title': 'Animation In',
                'type': 'div',
                'class': 'pixe-sselector-options-group',
                'options': {
                    'anim-in': {
                        'title': 'Animation Effect',
                        'type': 'combobox',
                        'options': 'slderEffectsIn',
                        'width': '1-1',
                        'device-selector': false
                    },
                    'anim-in-duration': {
                        'title': 'Duration (ms)',
                        'type': 'range-input',
                        'min': 0,
                        'max': 3000,
                        'width': '1-1',
                        'device-selector': false
                    },
                }
            },
            'divider': {
                'type': 'divider'
            },
            'area2': {
                'title': 'Animation Out',
                'type': 'div',
                'class': 'pixe-sselector-options-group',
                'options': {
                    'anim-out': {
                        'title': 'Animation Effect',
                        'type': 'combobox',
                        'options': 'sliderEffectsOut',
                        'width': '1-1',
                        'device-selector': false
                    },
                    'anim-out-duration': {
                        'title': 'Duration (ms)',
                        'type': 'range-input',
                        'min': 0,
                        'max': 3000,
                        'width': '1-1',
                        'device-selector': false
                    },
                }
            }
        }
    }
    $.pixeStyleSelectorOption['collection-slider-autoplay'] = {
        'title': 'Auto Play',
        'options': {
            'autoplay': {
                'title': 'Enable Auto Play',
                'type': 'checkbox',
                'default': 'yes',
                'width': '1-1'
            },
            'slide-duration': {
                'title': 'Slide Time (ms)',
                'type': 'range-input',
                'min': 3000,
                'max': 8000,
                'width': '1-1',
                'condition': { 'autoplay': '' }
            },
            'pause-on-hover': {
                'title': 'Pause On Hover',
                'type': 'checkbox',
                'default': 'no',
                'width': '1-1',
                'condition': { 'autoplay': '' }
            },
        }
    }
    $.pixeStyleSelectorOption['collection-carousel-settings'] = {
        'title': 'Carousel Autoplay',
        'options': {
            'area1': {
                'type': 'div',
                'class': 'pixe-sselector-options-area',
                'options': {
                    'autoplay': {
                        'title': 'Autoplay',
                        'type': 'combobox',
                        'options': {
                            '': 'Slide by Slide',
                            'cont': 'Continuous Scroll',
                            'no': 'None',
                        },
                        'width': '1-1',
                        'with-default': false
                    },
                    'slide-duration': {
                        'title': 'Slide Time (ms)',
                        'type': 'range-input',
                        'min': 3000,
                        'max': 8000,
                        'width': '1-2',
                        'condition': { 'autoplay': '' }
                    },
                    'slide-speed': {
                        'title': 'Slide Speed (ms)',
                        'type': 'range-input',
                        'min': 500,
                        'max': 2000,
                        'width': '1-2',
                        'condition': { 'autoplay': '!cont' }
                    },
                },
            },
            'start-item': {
                'title': 'Starting Item',
                'type': 'text',
                'width': '1-2',
                'condition': { 'autoplay': '!cont' }
            },
            'slide-amount': {
                'title': 'Items To Slide',
                'type': 'text',
                'width': '1-2',
                'condition': { 'autoplay': '!cont' }
            },
            'pause-on-hover': {
                'title': 'Pause On Hover',
                'type': 'checkbox',
                'default': 'no',
                'width': '1-2',
                'condition': { 'autoplay': '' }
            },
            'loop': {
                'title': 'Loop Slides',
                'type': 'checkbox',
                'default': 'no',
                'width': '1-2',
                'condition': { 'autoplay': '!cont' }
            },
            'fade-overflow': {
                'title': 'Fade Overflow Items',
                'type': 'checkbox',
                'width': '1-2',
                'default': 'no',
                'condition': { 'autoplay': '!cont' }
            },
            'fade-opacity': {
                'title': 'Fade Opacity',
                'type': 'range-input',
                'min': 0,
                'max': 100,
                'default': 100,
                'suffix-text': '%',
                'width': '1-2',
                'condition': { 'autoplay': '!cont', 'fade-overflow': 'yes'}
            },
            'cont-speed': {
                'title': 'Scroll Speed (px/s)',
                'type': 'range-input',
                'min': '0',
                'max': '300',
                'width': '1-2',
                'condition': { 'autoplay': 'cont' }
            },
            'cont-direction': {
                'title': 'Scroll Direction',
                'type': 'combobox',
                'options': {
                    '': 'left',
                    'right': 'right'
                },
                'width': '1-2',
                'with-default': false,
                'condition': { 'autoplay': 'cont' }
            },
        }
    }
    $.pixeStyleSelectorOption['collection-carousel-style'] = {
        'title': 'Carousel Settings',
        'device-selector': true,
        'options': {
            'column': {
                'title': 'Column Number',
                'type': 'combobox',
                'options': {
                    '1': '1',
                    '2': '2',
                    '3': '3',
                    '4': '4',
                    '5': '5',
                    '6': '6',
                },
                'width': '1-2',
                'condition': {'alignment': ['', 'ignore-device']}
            },
            'space': {
                'title': 'Column Space',
                'type': 'range-input',
                'range': 'gap',
                'width': '1-2'
            },
            'width': {
                'title': 'Max Width',
                'type': 'range-input',
                'range': 'width',
                'width': '1-2'
            },
            'overflow': {
                'title': 'Overflow',
                'type': 'combobox',
                'options': 'overflow',
                'width': '1-2',
                'device-selector': false
            }
        }
    }

})(jQuery);	
