( function( $ ) {

    wp.customize('multi_underlined_heading_style', function (value) {
        value.bind( function( newval ) {
            var headingNumber = parseInt(newval);
            var headingClass = 't' + (headingNumber < 10 ? '0' + headingNumber : headingNumber);
            $('.widget-title').each(function() {
                $(this).attr('class', 'widget-title spec-heading ' + headingClass);
            })
		} );
    });

    const settings = [
        // header
        {name: 'multi_header_height_top', prop: '--header-top-height', defVal: '87', prefix: '', suffix: 'px', type: 'integer'},
        {name: 'multi_header_height_bottom', prop: '--header-bottom-height', defVal: '87', prefix: '', suffix: 'px', type: 'integer'},
        {name: 'multi_header_border_top_width', prop: '--header-border-top-width', defVal: '0', prefix: '', suffix: 'px', type: 'integer'},
        {name: 'multi_header_border_bottom_width', prop: '--header-border-bottom-width', defVal: '1', prefix: '', suffix: 'px', type: 'integer'},
        {name: 'multi_header_bg_color', prop: '--header-background-color', defVal: '#ffffff', prefix: '', suffix: ''},
        {name: 'multi_transparent_header_bg_color', prop: '--header-transparent-background-color', defVal: 'transparent', prefix: '', suffix: ''},
        {name: 'multi_header_border_color_top', prop: '--header-border-color-top', defVal: '#d6d6d6', prefix: '', suffix: ''},
        {name: 'multi_header_border_color_bottom', prop: '--header-border-color-bottom', defVal: '#d6d6d6', prefix: '', suffix: ''},
        {name: 'multi_header_separator_width', prop: '--header-separator-width', defVal: '0', prefix: '', suffix: 'px', type: 'integer'},
        {name: 'multi_header_separator_color', prop: '--header-separator-color', defVal: 'var(--border-color)', prefix: '', suffix: ''},
        {name: 'multi_sticky_header_logo_height', prop: '--max-logo-height-sticky', defVal: '32', prefix: '', suffix: 'px', type: 'integer'},
        {name: 'multi_sticky_header_height_top', prop: '--sticky-header-top-height', defVal: '70', prefix: '', suffix: 'px', type: 'integer'},
        {name: 'multi_sticky_header_height_bottom', prop: '--sticky-header-bottom-height', defVal: '70', prefix: '', suffix: 'px', type: 'integer'},
        {name: 'multi_header_line_thickness', prop: '--link-line-thickness', defVal: '0', prefix: '', suffix: 'px', type: 'integer'},
        {name: 'multi_header_line_v_offset', prop: '--link-line-v-offset', defVal: '0', prefix: '', suffix: 'px', type: 'integer'},
        {name: 'multi_header_menu_item_padding', prop: '--header-menu-item-padding', defVal: '0', prefix: '', suffix: 'px', type: 'integer'},
        {name: 'multi_header_menu_separator_width', prop: '--header-menu-separator-width', defVal: '0', prefix: '', suffix: 'px', type: 'integer'},
        {name: 'multi_header_menu_separator_height', prop: '--header-menu-separator-height', defVal: '0', prefix: '', suffix: 'px', type: 'integer'},
        {name: 'multi_header_menu_separator_color', prop: '--header-menu-separator-color', defVal: 'var(--border-color)', prefix: '', suffix: ''},
        {name: 'multi_logo_height_mobile', prop: '--max-logo-height-mobile', defVal: '0', prefix: '', suffix: 'px', type: 'integer'},
        {name: 'multi_header_height_mobile', prop: '--header-height-mobile', defVal: '87', prefix: '', suffix: 'px', type: 'integer'},
        {name: 'multi_header_button_color', prop: '--header-button-color', defVal: '#13bedf', prefix: '', suffix: ''},
        {name: 'multi_header_button_color_hover', prop: '--header-button-color-hover', defVal: '#353535', prefix: '', suffix: ''},
        {name: 'multi_header_button_color2', prop: '--header-button-color2', defVal: 'transparent', prefix: '', suffix: ''},
        {name: 'multi_header_button_color2_hover', prop: '--header-button-color2-hover', defVal: 'transparent', prefix: '', suffix: ''},
        {name: 'multi_header_button_text_color', prop: '--header-button-text-color', defVal: '#ffffff', prefix: '', suffix: ''},
        {name: 'multi_header_button_text_hover_color', prop: '--header-button-text-color-hover', defVal: '#ffffff', prefix: '', suffix: ''},
        {name: 'multi_header_button_border_color', prop: '--header-button-border-color', defVal: 'transparent', prefix: '', suffix: ''},
        {name: 'multi_header_button_border_color_hover', prop: '--header-button-border-color-hover', defVal: 'transparent', prefix: '', suffix: ''},
        {name: 'multi_header_button_border_top_width', prop: '--header-button-border-top-width', defVal: '0', prefix: '', suffix: 'px', type: 'integer'},
        {name: 'multi_header_button_border_right_width', prop: '--header-button-border-right-width', defVal: '0', prefix: '', suffix: 'px', type: 'integer'},
        {name: 'multi_header_button_border_bottom_width', prop: '--header-button-border-bottom-width', defVal: '0', prefix: '', suffix: 'px', type: 'integer'},
        {name: 'multi_header_button_border_left_width', prop: '--header-button-border-left-width', defVal: '0', prefix: '', suffix: 'px', type: 'integer'},
		{name: 'multi_header_menu_item_font_weight', prop: '--header-menu-font-weight', defVal: '400', prefix: '', suffix: '', type: 'integer'},
        // buttons
        {name: 'multi_button_border_radius', prop: '--button-border-radius', defVal: '99', prefix: '', suffix: 'px', type: 'integer'},
        {name: 'multi_button_color', prop: '--button-color', defVal: '#13bedf', prefix: '', suffix: ''},
        {name: 'multi_button_color_hover', prop: '--button-color-hover', defVal: '#404041', prefix: '', suffix: ''},
        {name: 'multi_button_color2', prop: '--button-color2', defVal: '#ff6000', prefix: '', suffix: ''},
        {name: 'multi_button_color2_hover', prop: '--button-color2-hover', defVal: '#f3865b', prefix: '', suffix: ''},
        {name: 'multi_button_border_top_width', prop: '--button-border-top-width', defVal: '0', prefix: '', suffix: 'px', type: 'integer'},
        {name: 'multi_button_border_right_width', prop: '--button-border-right-width', defVal: '0', prefix: '', suffix: 'px', type: 'integer'},
        {name: 'multi_button_border_bottom_width', prop: '--button-border-bottom-width', defVal: '0', prefix: '', suffix: 'px', type: 'integer'},
        {name: 'multi_button_border_left_width', prop: '--button-border-left-width', defVal: '0', prefix: '', suffix: 'px', type: 'integer'},
        {name: 'multi_button_gradient_direction', prop: '--button-gradient-direction', defVal: 'to bottom', prefix: '', suffix: ''},
        {name: 'multi_button_gradient_hover_direction', prop: '--button-gradient-direction-hover', defVal: 'to bottom', prefix: '', suffix: ''},
        {name: 'multi_button_border_color', prop: '--button-border-color', defVal: 'transparent', prefix: '', suffix: ''},
        {name: 'multi_button_border_hover_color', prop: '--button-border-hover-color', defVal: 'transparent', prefix: '', suffix: ''},
        {name: 'multi_button_text_color', prop: '--button-text-color', defVal: '#ffffff', prefix: '', suffix: ''},
        {name: 'multi_button_text_hover_color', prop: '--button-text-hover-color', defVal: '#ffffff', prefix: '', suffix: ''},
        {name: 'multi_button_text_transform', prop: '--button-text-transform', defVal: 'uppercase', prefix: '', suffix: ''},
        {name: 'multi_button_shadow_blur', prop: '--button-shadow-blur', defVal: '0', prefix: '', suffix: 'px', type: 'integer'},
        {name: 'multi_button_shadow_x_offset', prop: '--button-shadow-x-offset', defVal: '0', prefix: '', suffix: 'px', type: 'integer'},
        {name: 'multi_button_shadow_y_offset', prop: '--button-shadow-y-offset', defVal: '0', prefix: '', suffix: 'px', type: 'integer'},
        {name: 'multi_button_shadow_blur_hover', prop: '--button-shadow-blur-hover', defVal: '0', prefix: '', suffix: 'px', type: 'integer'},
        {name: 'multi_button_shadow_x_offset_hover', prop: '--button-shadow-x-offset-hover', defVal: '0', prefix: '', suffix: 'px', type: 'integer'},
        {name: 'multi_button_shadow_y_offset_hover', prop: '--button-shadow-y-offset-hover', defVal: '0', prefix: '', suffix: 'px', type: 'integer'},
        {name: 'multi_button_lift', prop: '--button-lift', defVal: '0', prefix: '-', suffix: 'px', type: 'integer'},
		{name: 'multi_button_inner_outline_width', prop: '--button-inner-outline-width', defVal: '0', prefix: '', suffix: 'px', type: 'integer'},
		{name: 'multi_button_inner_outline_color', prop: '--button-inner-outline-color', defVal: '#ffffff', prefix: '', suffix: ''},
		{name: 'multi_sec_button_color', prop: '--secondary-button-color', defVal: '#bcc6c9', prefix: '', suffix: ''},
        {name: 'multi_sec_button_color_hover', prop: '--secondary-button-color-hover', defVal: '#c3cccf', prefix: '', suffix: ''},
        {name: 'multi_sec_button_color2', prop: '--secondary-button-color2', defVal: '#bcc6c9', prefix: '', suffix: ''},
        {name: 'multi_sec_button_color2_hover', prop: '--secondary-button-color2-hover', defVal: '#c3cccf', prefix: '', suffix: ''},
		{name: 'multi_sec_button_text_color', prop: '--secondary-button-text-color', defVal: '#bcc6c9', prefix: '', suffix: ''},
        {name: 'multi_sec_button_text_color_hover', prop: '--secondary-button-text-hover-color', defVal: '#bcc6c9', prefix: '', suffix: ''},
        {name: 'multi_sec_button_border_color', prop: '--secondary-button-border-color', defVal: '#bcc6c9', prefix: '', suffix: ''},
        {name: 'multi_sec_button_border_color_hover', prop: '--secondary-button-border-hover-color', defVal: '#bcc6c9', prefix: '', suffix: ''},
		{name: 'multi_sec_button_border_top_width', prop: '--secondary-button-border-top-width', defVal: '2', prefix: '', suffix: 'px', type: 'integer'},
        {name: 'multi_sec_button_border_right_width', prop: '--secondary-button-border-right-width', defVal: '2', prefix: '', suffix: 'px', type: 'integer'},
        {name: 'multi_sec_button_border_bottom_width', prop: '--secondary-button-border-bottom-width', defVal: '2', prefix: '', suffix: 'px', type: 'integer'},
        {name: 'multi_sec_button_border_left_width', prop: '--secondary-button-border-left-width', defVal: '2', prefix: '', suffix: 'px', type: 'integer'},
        // footer
        {name: 'multi_footer_bg_image', prop: '--footer-background-image', defVal: '', prefix: 'url(', suffix: ')', type: 'url'},
        {name: 'multi_footer_bg_color', prop: '--footer-background-color', defVal: '#2c2c2c', prefix: '', suffix: ''},
        {name: 'multi_footer_text_color', prop: '--footer-text-color', defVal: '#8a8989', prefix: '', suffix: ''},
        {name: 'multi_footer_headings_color', prop: '--footer-headings-color', defVal: '#13bedf', prefix: '', suffix: ''},
        {name: 'multi_footer_link_color', prop: '--footer-link-color', defVal: '#8a8989', prefix: '', suffix: ''},
		{name: 'multi_footer_link_hover_color', prop: '--footer-link-hover-color', defVal: '#ffffff', prefix: '', suffix: ''},
		{name: 'multi_footer_widgets_padding_top', prop: '--footer-widgets-padding-top', defVal: '45', prefix: '', suffix: 'px'},
		{name: 'multi_footer_widgets_padding_bottom', prop: '--footer-widgets-padding-bottom', defVal: '45', prefix: '', suffix: 'px'},
        {name: 'multi_footer_bottom_link_color', prop: '--footer-bottom-link-color', defVal: 'var(--footer-link-color)', prefix: '', suffix: ''},
        {name: 'multi_footer_bottom_link_hover_color', prop: '--footer-bottom-link-hover-color', defVal: 'var(--footer-link-hover-color)', prefix: '', suffix: ''},
        {name: 'multi_footer_border_color', prop: '--footer-border-color', defVal: '#8a8989', prefix: '', suffix: ''},
        {name: 'multi_footer_bottom_bg_color', prop: '--footer-bottom-background-color', defVal: 'transparent', prefix: '', suffix: ''},
		{name: 'multi_footer_bottom_text_color', prop: '--footer-bottom-text-color', defVal: '#8a8989', prefix: '', suffix: ''},
		{name: 'multi_footer_bottom_padding_top', prop: '--footer-bottom-padding-top', defVal: '15', prefix: '', suffix: 'px'},
		{name: 'multi_footer_bottom_padding_bottom', prop: '--footer-bottom-padding-bottom', defVal: '15', prefix: '', suffix: 'px'},
		// go top link
		{name: 'multi_go_top_color', prop: '--gotop-color', defVal: 'var(--main-color)', prefix: '', suffix: ''},
		{name: 'multi_go_top_hover_color', prop: '--gotop-hover-color', defVal: 'var(--link-color-hover)', prefix: '', suffix: ''},
		{name: 'multi_go_top_background_color', prop: '--gotop-background-color', defVal: '', prefix: '', suffix: ''},
		{name: 'multi_go_top_background_hover_color', prop: '--gotop-background-hover-color', defVal: '', prefix: '', suffix: ''},
		{name: 'multi_go_top_border_color', prop: '--gotop-border-color', defVal: '', prefix: '', suffix: ''},
		{name: 'multi_go_top_border_hover_color', prop: '--gotop-border-hover-color', defVal: '', prefix: '', suffix: ''},
		{name: 'multi_go_top_horizontal_offset', prop: '--gotop-offset-x', defVal: '10', prefix: '', suffix: 'px', type: 'integer'},
		{name: 'multi_go_top_vertical_offset', prop: '--gotop-offset-y', defVal: '19', prefix: '', suffix: 'px', type: 'integer'},
		{name: 'multi_go_top_icon_size', prop: '--gotop-icon-size', defVal: '24', prefix: '', suffix: 'px', type: 'integer'},
		{name: 'multi_go_top_box_size', prop: '--gotop-box-size', defVal: '40', prefix: '', suffix: 'px', type: 'integer'},
		{name: 'multi_go_top_border_width', prop: '--gotop-border-width', defVal: '0', prefix: '', suffix: 'px', type: 'integer'},
		{name: 'multi_go_top_border_radius_nw', prop: '--gotop-border-radius-nw', defVal: '0', prefix: '', suffix: '%', type: 'integer'},
		{name: 'multi_go_top_border_radius_ne', prop: '--gotop-border-radius-ne', defVal: '0', prefix: '', suffix: '%', type: 'integer'},
		{name: 'multi_go_top_border_radius_se', prop: '--gotop-border-radius-se', defVal: '0', prefix: '', suffix: '%', type: 'integer'},
		{name: 'multi_go_top_border_radius_sw', prop: '--gotop-border-radius-sw', defVal: '0', prefix: '', suffix: '%', type: 'integer'},

        // colors
        {name: 'multi_main_color', prop: '--main-color', defVal: '#eb008a', prefix: '', suffix: ''},
        {name: 'multi_accent_color', prop: '--accent-color', defVal: '#13bedf', prefix: '', suffix: ''},
        {name: 'multi_content_bg_color', prop: '--content-background-color', defVal: '#ffffff', prefix: '', suffix: ''},
        {name: 'multi_border_color', prop: '--border-color', defVal: '#d6d6d6', prefix: '', suffix: ''},
        {name: 'multi_text_color', prop: '--text-color-base', defVal: '#797979', prefix: '', suffix: ''},
        {name: 'multi_quote_text_color', prop: '--text-color-quote', defVal: '#3f3f3f', prefix: '', suffix: ''},
        {name: 'multi_secondary_text_color', prop: '--text-color-secondary', defVal: '#747474', prefix: '', suffix: ''},
        {name: 'multi_content_main_headings_color', prop: '--text-color-headings', defVal: '#ff4800', prefix: '', suffix: ''},
        {name: 'multi_content_subheadings_color', prop: '--text-color-subheadings', defVal: '#ff4800', prefix: '', suffix: ''},
        {name: 'multi_content_special_headings_color', prop: '--text-color-special-headings', defVal: '#ff4800', prefix: '', suffix: ''},
        {name: 'multi_link_color', prop: '--link-color-base', defVal: '#2c2c2c', prefix: '', suffix: ''},
        {name: 'multi_link_hover_color', prop: '--link-color-hover', defVal: '#13bedf', prefix: '', suffix: ''},
        {name: 'multi_content_link_color', prop: '--content-link-color', defVal: '#008aff', prefix: '', suffix: ''},
        {name: 'multi_content_link_hover_color', prop: '--content-link-color-hover', defVal: '#008aff', prefix: '', suffix: ''},
        {name: 'multi_topbar_text_color', prop: '--top-color-text', defVal: '#7a7a7a', prefix: '', suffix: ''},
        {name: 'multi_topbar_bg_color', prop: '--top-color-background', defVal: '#efefef', prefix: '', suffix: ''},
        {name: 'multi_topbar_bg_color_sticky', prop: '--top-color-background-sticky', defVal: '#efefef', prefix: '', suffix: ''},
        {name: 'multi_topbar_link_color', prop: '--top-color-link', defVal: '#ffffff', prefix: '', suffix: ''},
        {name: 'multi_topbar_link_hover_color', prop: '--top-color-link-hover', defVal: '#ffffff', prefix: '', suffix: ''},

		{name: 'multi_header_menu_link_animation_time', prop: '--menu-animation-time', defVal: '300', prefix: '', suffix: 'ms', type: 'integer'},
		{name: 'multi_header_menu_link_color', prop: '--header-link-color', defVal: '#2c2c2c', prefix: '', suffix: ''},
        {name: 'multi_header_menu_link_hover_color', prop: '--header-link-hover-color', defVal: '#eb008a', prefix: '', suffix: ''},
        {name: 'multi_header_menu_link_border_color', prop: '--header-link-border-color', defVal: '#13bedf', prefix: '', suffix: ''},
        {name: 'multi_header_menu_link_bg_color', prop: '--header-link-background-color', defVal: 'transparent', prefix: '', suffix: ''},
        {name: 'multi_header_menu_link_hover_bg_color', prop: '--header-link-background-hover-color', defVal: 'transparent', prefix: '', suffix: ''},
        {name: 'multi_header_menu_pull_down_icon_color', prop: '--header-pull-down-color', defVal: '#13bedf', prefix: '', suffix: ''},
        {name: 'multi_header_menu_pull_down_icon_hover_color', prop: '--header-pull-down-hover-color', defVal: 'var(--header-pull-down-color)', prefix: '', suffix: ''},
        {name: 'multi_mobile_menu_pull_down_icon_color', prop: '--mobile-menu-pull-down-color', defVal: '#eb008a', prefix: '', suffix: ''},

        {name: 'multi_sticky_header_menu_link_color', prop: '--sticky-header-link-color', defVal: 'var(--header-link-color)', prefix: '', suffix: ''},
        {name: 'multi_sticky_header_menu_link_hover_color', prop: '--sticky-header-link-hover-color', defVal: 'var(--header-link-hover-color)', prefix: '', suffix: ''},
        {name: 'multi_sticky_header_menu_pull_down_icon_color', prop: '--sticky-header-pull-down-color', defVal: 'var(--header-pull-down-color)', prefix: '', suffix: ''},
        {name: 'multi_sticky_header_menu_pull_down_icon_hover_color', prop: '--sticky-header-pull-down-hover-color', defVal: 'var(--header-pull-down-hover-color)', prefix: '', suffix: ''},
        {name: 'multi_sticky_header_menu_link_border_color', prop: '--sticky-header-link-border-color', defVal: 'var(--header-link-border-color)', prefix: '', suffix: ''},
        {name: 'multi_sticky_header_menu_link_bg_color', prop: '--sticky-header-link-background-color', defVal: 'var(--header-link-background-color)', prefix: '', suffix: ''},
        {name: 'multi_sticky_header_menu_link_hover_bg_color', prop: '--sticky-header-link-background-hover-color', defVal: 'var(--header-link-background-hover-color)', prefix: '', suffix: ''},
        {name: 'multi_sticky_header_logo_height_mobile', prop: '--max-logo-height-mobile-sticky', defVal: '', prefix: '', suffix: 'px', type: 'integer'},
        {name: 'multi_sticky_header_height_mobile', prop: '--sticky-header-height-mobile', defVal: '', prefix: '', suffix: 'px', type: 'integer'},

        {name: 'multi_submenu_link_color', prop: '--submenu-link-color', defVal: '#ffffff', prefix: '', suffix: ''},
        {name: 'multi_submenu_link_hover_color', prop: '--submenu-link-hover-color', defVal: '#13bedf', prefix: '', suffix: ''},
        {name: 'multi_submenu_link_background_color', prop: '--submenu-link-background-color', defVal: '#404041', prefix: '', suffix: ''},
        {name: 'multi_submenu_link_background_hover_color', prop: '--submenu-link-background-hover-color', defVal: '#505051', prefix: '', suffix: ''},
        {name: 'multi_submenu_background_color', prop: '--submenu-background-color', defVal: '#404041', prefix: '', suffix: ''},
        {name: 'multi_submenu_background_color', prop: '--submenu-overlay-background-color', defVal: '#404041', prefix: '', suffix: ''},
        {name: 'multi_submenu_border_color', prop: '--submenu-border-color', defVal: '#404041', prefix: '', suffix: ''},
        {name: 'multi_sticky_header_background_color', prop: '--sticky-header-background-color', defVal: '#ffffffa0', prefix: '', suffix: ''},
        {name: 'multi_hamburger_icon_color', prop: '--hamburger-icon-color', defVal: '#ffffff', prefix: '', suffix: ''},
        {name: 'multi_hamburger_icon_hover_color', prop: '--hamburger-icon-hover-color', defVal: 'var(--link-color-hover)', prefix: '', suffix: ''},
        {name: 'multi_hamburger_icon_bg_color', prop: '--hamburger-icon-background-color', defVal: '#404041', prefix: '', suffix: ''},
		{name: 'multi_hamburger_icon_bg_hover_color', prop: '--hamburger-icon-background-hover-color', defVal: '#404041', prefix: '', suffix: ''},

		{name: 'multi_slider_arrow_color', prop: '--slider-arrow-color', defVal: 'var(--text-color-secondary)', prefix: '', suffix: ''},
		{name: 'multi_slider_arrow_hover_color', prop: '--slider-arrow-hover-color', defVal: 'var(--text-color-base)', prefix: '', suffix: ''},

		{name: 'multi_subheader_text_color', prop: '--subheader-text-color', defVal: 'var(--text-color-base)', prefix: '', suffix: ''},
		{name: 'multi_subheader_link_color', prop: '--subheader-link-color', defVal: 'var(--link-color-base)', prefix: '', suffix: ''},
		{name: 'multi_subheader_link_hover_color', prop: '--subheader-link-hover-color', defVal: 'var(--link-color-hover)', prefix: '', suffix: ''},

		// pagination
		{name: 'pagination_dot_spacing', prop: '--pagination-dot-spacing', defVal: '3', prefix: '', suffix: 'px', type: 'integer'},
		{name: 'pagination_line_width', prop: '--pagination-line-width', defVal: '0', prefix: '', suffix: 'px', type: 'integer'},
		{name: 'pagination_line_color', prop: '--pagination-line-color', defVal: '#e0e0e0', prefix: '', suffix: ''},
		{name: 'multi_pagination_current_page_color', prop: '--pagination-current-color', defVal: '', prefix: '', suffix: ''},

		{name: 'pagination_dot_width', prop: '--pagination-dot-width', defVal: '9', prefix: '', suffix: 'px', type: 'integer'},
		{name: 'pagination_dot_height', prop: '--pagination-dot-height', defVal: '9', prefix: '', suffix: 'px', type: 'integer'},
		{name: 'pagination_dot_color', prop: '--pagination-dot-color', defVal: '#ffffff', prefix: '', suffix: ''},
		{name: 'pagination_dot_border_color', prop: '--pagination-dot-border-color', defVal: '#cecece', prefix: '', suffix: ''},
		{name: 'pagination_dot_border_width', prop: '--pagination-dot-border-width', defVal: '2', prefix: '', suffix: 'px', type: 'integer'},
		{name: 'pagination_dot_border_radius', prop: '--pagination-dot-border-radius', defVal: '100', prefix: '', suffix: 'px', type: 'integer'},

		{name: 'pagination_dot_active_width', prop: '--pagination-dot-active-width', defVal: '9', prefix: '', suffix: 'px', type: 'integer'},
		{name: 'pagination_dot_active_height', prop: '--pagination-dot-active-height', defVal: '9', prefix: '', suffix: 'px', type: 'integer'},
		{name: 'pagination_dot_active_color', prop: '--pagination-dot-active-color', defVal: '#cecece', prefix: '', suffix: ''},
		{name: 'pagination_dot_active_border_color', prop: '--pagination-dot-active-border-color', defVal: '#cecece', prefix: '', suffix: ''},
		{name: 'pagination_dot_active_border_width', prop: '--pagination-dot-active-border-width', defVal: '2', prefix: '', suffix: 'px', type: 'integer'},
		{name: 'pagination_dot_active_border_radius', prop: '--pagination-dot-active-border-radius', defVal: '100', prefix: '', suffix: 'px', type: 'integer'},

		{name: 'pagination_dot_hover_color', prop: '--pagination-dot-hover-color', defVal: '#cecece', prefix: '', suffix: ''},
		{name: 'pagination_dot_hover_border_color', prop: '--pagination-dot-hover-border-color', defVal: '#cecece', prefix: '', suffix: ''},
		{name: 'pagination_dot_hover_border_width', prop: '--pagination-dot-hover-border-width', defVal: '2', prefix: '', suffix: 'px', type: 'integer'},
        // forms
		{name: 'multi_form_label_color', prop: '--form-label-color', defVal: '#343434', prefix: '', suffix: ''},
		{name: 'multi_form_label_background_color', prop: '--form-label-background-color', defVal: 'transparent', prefix: '', suffix: ''},
		{name: 'multi_form_label_font_size', prop: '--form-label-font-size', defVal: '13', prefix: '', suffix: 'px', type: 'integer'},
		{name: 'multi_form_label_line_height', prop: '--form-label-line-height', defVal: '20', prefix: '', suffix: 'px', type: 'integer'},
        {name: 'multi_form_border_color', prop: '--form-border-color', defVal: '#cccccc', prefix: '', suffix: ''},
        {name: 'multi_form_border_color_focus', prop: '--form-border-color-focus', defVal: '#ff6000', prefix: '', suffix: ''},
        {name: 'multi_form_text_color', prop: '--form-text-color', defVal: '#797979', prefix: '', suffix: ''},
        {name: 'multi_form_placeholder_color', prop: '--form-placeholder-color', defVal: 'var(--text-color-base)', prefix: '', suffix: ''},
        {name: 'multi_form_bg_color', prop: '--form-background-color', defVal: '#efefef', prefix: '', suffix: ''},
        {name: 'multi_mainmenu_searchform_background_color', prop: '--search-background-color', defVal: '#404041', prefix: '', suffix: ''},
        {name: 'multi_mainmenu_searchform_input_background_color', prop: '--search-input-background-color', defVal: '#ffffff', prefix: '', suffix: ''},
        {name: 'multi_input_height', prop: '--form-field-height', defVal: '37', prefix: '', suffix: 'px', type: 'integer'},
        {name: 'multi_form_border_top_width', prop: '--form-border-top-width', defVal: '0', prefix: '', suffix: 'px', type: 'integer'},
        {name: 'multi_form_border_right_width', prop: '--form-border-right-width', defVal: '0', prefix: '', suffix: 'px', type: 'integer'},
        {name: 'multi_form_border_bottom_width', prop: '--form-border-bottom-width', defVal: '0', prefix: '', suffix: 'px', type: 'integer'},
        {name: 'multi_form_border_left_width', prop: '--form-border-left-width', defVal: '0', prefix: '', suffix: 'px', type: 'integer'},
        {name: 'multi_form_border_top_color', prop: '--form-border-top-color', defVal: '#cccccc', prefix: '', suffix: ''},
        {name: 'multi_form_border_right_color', prop: '--form-border-right-color', defVal: '#cccccc', prefix: '', suffix: ''},
        {name: 'multi_form_border_bottom_color', prop: '--form-border-bottom-color', defVal: '#cccccc', prefix: '', suffix: ''},
        {name: 'multi_form_border_left_color', prop: '--form-border-left-color', defVal: '#cccccc', prefix: '', suffix: ''},
        {name: 'multi_form_border_radius', prop: '--form-border-radius', defVal: '19', prefix: '', suffix: 'px', type: 'integer'},
        {name: 'multi_search_border_radius', prop: '--search-border-radius', defVal: '99', prefix: '', suffix: 'px', type: 'integer'},
        //messages
        {name: 'multi_msg_type_info_color', prop: '--msg-color-info', defVal: '#269fcc', prefix: '', suffix: ''},
        {name: 'multi_msg_type_success_color', prop: '--msg-color-success', defVal: '#31d49c', prefix: '', suffix: ''},
        {name: 'multi_msg_type_notice_color', prop: '--msg-color-notice', defVal: '#f4c507', prefix: '', suffix: ''},
        {name: 'multi_msg_type_error_color', prop: '--msg-color-error', defVal: '#ff6000', prefix: '', suffix: ''},
        {name: 'multi_msg_border_width', prop: '--msg-border-width', defVal: '0', prefix: '', suffix: 'px', type: 'integer'},
        {name: 'multi_msg_border_radius', prop: '--msg-border-radius', defVal: '14', prefix: '', suffix: 'px', type: 'integer'},
        {name: 'multi_msg_border_color', prop: '--msg-border-color', defVal: '#e7e7e7', prefix: '', suffix: ''},
        {name: 'multi_msg_bg_color', prop: '--msg-bg-color', defVal: '#666666', prefix: '', suffix: ''},
        {name: 'multi_msg_text_color', prop: '--msg-text-color', defVal: '#797979', prefix: '', suffix: ''},
        {name: 'multi_msg_icon_color', prop: '--msg-icon-color', defVal: '#ffffff', prefix: '', suffix: ''},

        //layout
        {name: 'multi_content_bg_image', prop: '--content-background-image', defVal: '', prefix: 'url(', suffix: ')', type: 'url'},
        {name: 'multi_layout_width', prop: '--layout-width', defVal: '1170', prefix: '', suffix: 'px', type: 'integer'},
        {name: 'multi_sidebar_width', prop: '--sidebar-width', defVal: '300', prefix: '', suffix: 'px', type: 'integer'},
        {name: 'multi_column_gap', prop: '--column-gap', defVal: '35', prefix: '', suffix: 'px', type: 'integer'},
        {name: 'multi_content_bottom_margin', prop: '--content-bottom-margin', defVal: '50', prefix: '', suffix: 'px', type: 'integer'},
        // site identity
        {name: 'multi_logo_height', prop: '--max-logo-height', defVal: 'none', prefix: '', suffix: 'px', type: 'integer'},
        {name: 'multi_logo_v_offset', prop: '--logo-v-offset', defVal: '0', prefix: '', suffix: 'px', type: 'integer'},
        {name: 'multi_logo_v_offset_mobile', prop: '--logo-v-offset-mobile', defVal: '0', prefix: '', suffix: 'px', type: 'integer'},
        // social
        {name: 'multi_social_icons_color', prop: '--social-icon-color', defVal: '#ffffff', prefix: '', suffix: ''},
        {name: 'multi_social_icons_hover_color', prop: '--social-icon-hover-color', defVal: '#ffffff', prefix: '', suffix: ''},
        {name: 'multi_social_icons_background_color', prop: '--social-icon-background-color', defVal: '#404041', prefix: '', suffix: ''},
        {name: 'multi_social_icons_background_hover_color', prop: '--social-icon-background-hover-color', defVal: '#13bedf', prefix: '', suffix: ''},
        {name: 'multi_social_icons_border_color', prop: '--social-icon-border-color', defVal: '', prefix: '', suffix: ''},
        {name: 'multi_social_icons_border_hover_color', prop: '--social-icon-border-hover-color', defVal: '', prefix: '', suffix: ''},
        {name: 'multi_social_icons_border_width', prop: '--social-icon-border-width', defVal: '0', prefix: '', suffix: 'px', type: 'integer'},
        {name: 'multi_header_social_icons_color', prop: '--header-social-icons-color', defVal: 'var(--social-icon-color)', prefix: '', suffix: ''},
        {name: 'multi_header_social_icons_hover_color', prop: '--header-social-icons-hover-color', defVal: 'var(--social-icon-hover-color)', prefix: '', suffix: ''},
        {name: 'multi_header_social_icons_background_color', prop: '--header-social-icons-background-color', defVal: 'var(--social-icon-background-color)', prefix: '', suffix: ''},
        {name: 'multi_header_social_icons_background_hover_color', prop: '--header-social-icons-background-hover-color', defVal: 'var(--social-icon-background-hover-color)', prefix: '', suffix: ''},
        {name: 'multi_header_social_icons_border_color', prop: '--header-social-icons-border-color', defVal: 'var(--social-icon-color)', prefix: '', suffix: ''},
        {name: 'multi_header_social_icons_border_hover_color', prop: '--header-social-icons-border-hover-color', defVal: 'var(--social-icon-hover-color)', prefix: '', suffix: ''},
        {name: 'multi_footer_social_icons_color', prop: '--footer-social-icons-color', defVal: '#ffffff', prefix: '', suffix: ''},
        {name: 'multi_footer_social_icons_hover_color', prop: '--footer-social-icons-hover-color', defVal: 'var(--footer-link-hover-color)', prefix: '', suffix: ''},
        {name: 'multi_footer_social_icons_background_color', prop: '--footer-social-icons-background-color', defVal: '#4b4b4b', prefix: '', suffix: ''},
        {name: 'multi_footer_social_icons_background_hover_color', prop: '--footer-social-icons-background-hover-color', defVal: '#13bedf', prefix: '', suffix: ''},
        {name: 'multi_footer_social_icons_border_color', prop: '--footer-social-icons-border-color', defVal: 'transparent', prefix: '', suffix: ''},
        {name: 'multi_footer_social_icons_border_hover_color', prop: '--footer-social-icons-border-hover-color', defVal: 'transparent', prefix: '', suffix: ''},
        {name: 'multi_social_link_border_radius', prop: '--social-icon-border-radius', defVal: '99', prefix: '', suffix: 'px', type: 'integer'},
        {name: 'multi_social_links_icon_size', prop: '--social-links-icon-size', defVal: '20', prefix: '', suffix: 'px', type: 'integer'},
        {name: 'multi_social_links_box_size', prop: '--social-links-box-size', defVal: '30', prefix: '', suffix: 'px', type: 'integer'},
        {name: 'multi_social_links_spacing', prop: '--social-links-spacing', defVal: '6', prefix: '', suffix: 'px', type: 'integer'},
        {name: 'multi_social_lift', prop: '--social-lift', defVal: '0', prefix: '-', suffix: 'px', type: 'integer'},
        // subheader
        {name: 'multi_subheader_background_color', prop: '--subheader-bg-color', defVal: 'transparent', prefix: '', suffix: ''},
        {name: 'multi_subheader_custom_background_size', prop: '--subheader-custom-bg-size', defVal: '', prefix: '', suffix: ''},
        {name: 'multi_subheader_background_size', prop: '--subheader-bg-size', defVal: 'auto', prefix: '', suffix: ''},
        // topbar
        {name: 'multi_topbar_height', prop: '--topbar-height', defVal: '40', prefix: '', suffix: 'px', type: 'integer'},
        // typography
        {name: 'multi_body_font_size', prop: '--body-font-size', defVal: '16', prefix: '', suffix: 'px', type: 'float'},
        {name: 'multi_body_letter_spacing', prop: '--body-letter-spacing', defVal: '0', prefix: '', suffix: 'px', type: 'float'},
        {name: 'multi_body_font_weight', prop: '--body-font-weight', defVal: '400', prefix: '', suffix: ''},
		{name: 'multi_post_content_font_size', prop: '--post-content-font-size', defVal: '16', prefix: '', suffix: 'px', type: 'float'},
        {name: 'multi_submenu_font_size', prop: '--submenu-font-size', defVal: '13', prefix: '', suffix: 'px', type: 'integer'},
        {name: 'multi_header_menu_font', prop: '--header-menu-font-family', defVal: 'secondary', prefix: 'var(--', suffix: '-font)'},
        {name: 'multi_header_menu_font_size', prop: '--header-menu-font-size', defVal: '16', prefix: '', suffix: 'px', type: 'integer'},
        {name: 'multi_header_menu_font_weight', prop: '--header-menu-font-weight', defVal: '400', prefix: '', suffix: ''},
        {name: 'multi_h1_font', prop: '--h1-font-family', defVal: 'secondary', prefix: 'var(--', suffix: '-font)'},
        {name: 'multi_h1_font_size', prop: '--h1-font-size', defVal: '24', prefix: '', suffix: 'px', type: 'integer'},
        {name: 'multi_h2_font', prop: '--h2-font-family', defVal: 'secondary', prefix: 'var(--', suffix: '-font)'},
        {name: 'multi_h2_font_size', prop: '--h2-font-size', defVal: '16', prefix: '', suffix: 'px', type: 'integer'},
        {name: 'multi_h3_font', prop: '--h3-font-family', defVal: 'secondary', prefix: 'var(--', suffix: '-font)'},
        {name: 'multi_h3_font_size', prop: '--h3-font-size', defVal: '15', prefix: '', suffix: 'px', type: 'integer'},
        {name: 'multi_h4_font', prop: '--h4-font-family', defVal: 'secondary', prefix: 'var(--', suffix: '-font)'},
        {name: 'multi_h4_font_size', prop: '--h4-font-size', defVal: '18', prefix: '', suffix: 'px', type: 'integer'},
        {name: 'multi_h5_font', prop: '--h5-font-family', defVal: 'secondary', prefix: 'var(--', suffix: '-font)'},
        {name: 'multi_h5_font_size', prop: '--h5-font-size', defVal: '16', prefix: '', suffix: 'px', type: 'integer'},
        {name: 'multi_h6_font', prop: '--h6-font-family', defVal: 'secondary', prefix: 'var(--', suffix: '-font)'},
        {name: 'multi_h6_font_size', prop: '--h6-font-size', defVal: '14', prefix: '', suffix: 'px', type: 'integer'},
		{name: 'multi_quote_font', prop: '--blockquote-font', defVal: 'secondary', prefix: 'var(--', suffix: '-font)'},
        {name: 'multi_blockquote_font_size', prop: '--blockquote-font-size', defVal: '18', prefix: '', suffix: 'px', type: 'integer'},
        {name: 'multi_special_headings_font', prop: '--special-headings-font-family', defVal: 'secondary', prefix: 'var(--', suffix: '-font)'},
        {name: 'multi_special_headings_font_size', prop: '--special-headings-font-size', defVal: '15', prefix: '', suffix: 'px', type: 'integer'},
        {name: 'multi_widget_title_font', prop: '--widget-title-font-family', defVal: 'secondary', prefix: 'var(--', suffix: '-font)'},
        {name: 'multi_widget_title_font_size', prop: '--widget-title-font-size', defVal: '15', prefix: '', suffix: 'px', type: 'integer'},
		{name: 'multi_widget_text_font_size', prop: '--widget-text-font-size', defVal: '14', prefix: '', suffix: 'px', type: 'integer'},
        {name: 'multi_footer_menu_font_size', prop: '--footer-menu-font-size', defVal: '13', prefix: '', suffix: 'px', type: 'integer'},
        {name: 'multi_footer_content_font_size', prop: '--footer-content-font-size', defVal: '13', prefix: '', suffix: 'px', type: 'integer'},
		{name: 'multi_headings_font_weight', prop: '--headings-font-weight', defVal: '400', prefix: '', suffix: ''},
		{name: 'multi_button_font', prop: '--button-font-family', defVal: 'primary', prefix: 'var(--', suffix: '-font)'},
		{name: 'multi_related_post_title_font_size', prop: '--related-post-title-font-size', defVal: '14', prefix: '', suffix: 'px', type: 'integer'},

		// cursor
		{name: 'multi_cursor_color', prop: '--cursor-color', defVal: 'var(--main-color)', prefix: '', suffix: ''},

		// scrollbars
		{name: 'multi_scrollbar_background_color', prop: '--scrollbar-background-color', defVal: '#0000000a', prefix: '', suffix: ''},
		{name: 'multi_scrollbar_handle_color', prop: '--scrollbar-handle-color', defVal: 'var(--main-color)', prefix: '', suffix: ''},
		{name: 'multi_scrollbar_width', prop: '--scrollbar-width', defVal: 10, prefix: '', suffix: 'px', type: 'integer'},

    ];

    settings.forEach(setting => {
        const {name, prop, prefix, suffix, defVal, type} = setting;
        wp.customize(name, function (value) {
            value.bind(newVal => {
                switch (type) {
                    case 'integer':
                        newVal = parseInt(newVal);
                        break;
                    case 'float':
                        newVal = parseFloat(newVal);
                        break;
                    case 'url':
                        try {
                            new URL(newVal);
                        } catch (_) {
                            newVal = '';
                            console.error(newVal + ' is not a valid URL');
                        }
                        break;
                    default:
                        newVal = String(newVal).trim();
                        break;
                }
                if (defVal && !newVal && newVal !== 0) {
                    newVal = defVal;
                }
                document.documentElement.style.setProperty(prop, prefix + newVal + suffix);
            });
        });
    });

    wp.customize('multi_header_menu_item_spacing', function (value) {
        value.bind(newVal => {
            newVal = parseInt(newVal) / 2;
            document.documentElement.style.setProperty('--header-menu-item-spacing', newVal + 'px');
        });
    });

    wp.customize('multi_logo_v_offset', function (value) {
        value.bind(newVal => {
            newVal = parseInt(newVal);
            if (newVal < 0) {
                document.querySelector('.site-header .logo').classList.remove('offset-down');
                document.querySelector('.site-header .logo').classList.add('offset-up');
            } else if (newVal > 0) {
                document.querySelector('.site-header .logo').classList.add('offset-down');
                document.querySelector('.site-header .logo').classList.remove('offset-up');
            } else {
                document.querySelector('.site-header .logo').classList.remove('offset-down');
                document.querySelector('.site-header .logo').classList.remove('offset-up');
            }
        });
    });

    wp.customize('multi_logo_v_offset_mobile', function (value) {
        value.bind(newVal => {
            newVal = parseInt(newVal);
            if (newVal < 0) {
                document.querySelector('.site-header .logo').classList.remove('mobile-offset-down');
                document.querySelector('.site-header .logo').classList.add('mobile-offset-up');
            } else if (newVal > 0) {
                document.querySelector('.site-header .logo').classList.add('mobile-offset-down');
                document.querySelector('.site-header .logo').classList.remove('mobile-offset-up');
            } else {
                document.querySelector('.site-header .logo').classList.remove('mobile-offset-down');
                document.querySelector('.site-header .logo').classList.remove('mobile-offset-up');
            }
        });
    });

    wp.customize('multi_subheader_parallax', function (value) {
        value.bind(newVal => {
            if (newVal) {
                document.querySelector('.subheader').classList.add('parallax');
            } else {
                document.querySelector('.subheader').classList.remove('parallax');
            }
        });
    });

    wp.customize('multi_top_bar_msg', function (value) {
        value.bind( function(newVal) {
            document.querySelector('.top-bar-message').textContent = newVal;
		} );
    });

    wp.customize('multi_header_line_vpos', function (value) {
        value.bind( function(newVal) {
            newVal = newVal.toLowerCase();
            if (newVal === 'top') {
                newVal = '0px';
            } else if (newVal === 'middle') {
                newVal = 'calc(50% + var(--header-menu-font-size) / 2 - var(--link-line-thickness) + 10px)';
            } else if (newVal === 'bottom') {
                newVal = 'calc(100% - var(--link-line-thickness))';
            }
            document.documentElement.style.setProperty('--link-line-v-pos', newVal);
		} );
    });

    wp.customize('multi_header_animation', function (value) {
        value.bind( function( newVal ) {
            newVal = newVal.toLowerCase().trim();
            document.querySelector('.main-header-content').classList.remove('animation-grow-mb', 'animation-grow-mt', 'animation-grow-m', 'animation-fade', 'animation-grow-top', 'animation-grow-bottom', 'animation-grow-l', 'animation-grow-lr', 'animation-drop-in', 'animation-drop-out', 'animation-follow', 'animation-follow-stretch');
            if (newVal) {
                document.querySelector('.main-header-content').classList.add(newVal);
            }
		} );
    });

    wp.customize('multi_header_line_hpos', function (value) {
        value.bind( function( newVal ) {
            newVal = newVal.toLowerCase().trim();
            document.querySelector('.main-header-content').classList.remove('line-pos-left', 'line-pos-right', 'line-pos-center');
            document.querySelector('.main-header-content').classList.add('line-pos-' + newVal);
		} );
    });

    wp.customize('multi_header_menu_separators', function (value) {
        value.bind( function( newVal ) {
            const topRow = document.querySelector('.mainmenu-row-top');
            const bottomRow = document.querySelector('.mainmenu-row-bottom');
            newVal = newVal.toLowerCase().trim();
            switch (newVal) {
                case 'both':
                    if (topRow) {
                        topRow.classList.add('menu-with-separators');
                    }
                    if (bottomRow) {
                        bottomRow.classList.add('menu-with-separators');
                    }
                    break;
                case 'top':
                    if (topRow) {
                        topRow.classList.add('menu-with-separators');
                    }
                    if (bottomRow) {
                        bottomRow.classList.remove('menu-with-separators');
                    }
                    break;
                case 'bottom':
                    if (topRow) {
                        topRow.classList.remove('menu-with-separators');
                    }
                    if (bottomRow) {
                        bottomRow.classList.add('menu-with-separators');
                    }
                    break;
                default:
                    if (topRow) {
                        topRow.classList.remove('menu-with-separators');
                    }
                    if (bottomRow) {
                        bottomRow.classList.remove('menu-with-separators');
                    }
            }
		} );
    });

    wp.customize('multi_header_button_text', function (value) {
        value.bind( function( newVal ) {
            document.querySelector('.header-button').textContent = newVal;
		} );
    });

    wp.customize('multi_header_button_size', function (value) {
        value.bind( function( newVal ) {
            newVal = newVal.toLowerCase().trim();
            document.querySelector('.header-button').classList.remove('small', 'normal', 'large', 'x-large', 'xx-large');
            document.querySelector('.header-button').classList.add(newVal);
		} );
    });

    wp.customize('multi_header_button_type', function (value) {
        value.bind( function( newVal ) {
            newVal = newVal.toLowerCase().trim();
            document.querySelector('.header-button').classList.remove('flat', 'vista', 'gradient');
            document.querySelector('.header-button').classList.add(newVal);
		} );
    });

    wp.customize('multi_header_line_length', function (value) {
        value.bind( function( newVal ) {
            if (!parseInt(newVal)) {
                newVal = 'calc(100% - var(--header-menu-item-spacing) * 2)';
                document.querySelector('.main-header-content').removeAttribute('data-line-length');
            } else {
                document.querySelector('.main-header-content').dataset.lineLength = newVal;
                newVal += 'px';
            }
            document.documentElement.style.setProperty('--link-line-length', newVal);
		});
    });


} )( jQuery );