Initial unmodified import from Astra (Version: 3.6.5) @ /wp-content/themes/astra/.

5 files changed, 1714 insertions, 0 deletions

diff --git a/inc/builder/type/base/assets/js/customizer-preview.js b/inc/builder/type/base/assets/js/customizer-preview.js
new file mode 100644
index 0000000..0e1514d
--- /dev/null
+++ b/inc/builder/type/base/assets/js/customizer-preview.js
@@ -0,0 +1,717 @@
+/**

+ * HTML Component CSS.

+ *

+ * @param string builder_type Builder Type.

+ * @param string html_count HTML Count.

+ *

+ */

+function astra_builder_html_css( builder_type = 'header', html_count ) {

+

+    for ( var index = 1; index <= html_count; index++ ) {

+

+		let selector = ( 'header' === builder_type ) ? '.ast-header-html-' + index : '.footer-widget-area[data-section="section-fb-html-' + index + '"]';

+

+		let section = ( 'header' === builder_type ) ? 'section-hb-html-' + index : 'section-fb-html-' + index;

+

+		var tablet_break_point    = astraBuilderPreview.tablet_break_point || 768,

+			mobile_break_point    = astraBuilderPreview.mobile_break_point || 544;

+

+        // HTML color.

+        astra_color_responsive_css(

+			builder_type + '-html-' + index + '-color',

+            'astra-settings[' + builder_type + '-html-' + index + 'color]',

+            'color',

+            selector + ' .ast-builder-html-element'

+		);

+

+		// Link color.

+        astra_color_responsive_css(

+			builder_type + '-html-' + index + '-l-color',

+            'astra-settings[' + builder_type + '-html-' + index + 'link-color]',

+            'color',

+            selector + ' .ast-builder-html-element a'

+		);

+

+		// Link Hover color.

+        astra_color_responsive_css(

+			builder_type + '-html-' + index + '-l-h-color',

+            'astra-settings[' + builder_type + '-html-' + index + 'link-h-color]',

+            'color',

+            selector + ' .ast-builder-html-element a:hover'

+		);

+

+		// Advanced Visibility CSS Generation.

+		astra_builder_visibility_css( section, selector, 'block' );

+

+        // Margin.

+		wp.customize( 'astra-settings[' + section + '-margin]', function( value ) {

+			value.bind( function( margin ) {

+				if(

+					margin.desktop.bottom != '' || margin.desktop.top != '' || margin.desktop.left != '' || margin.desktop.right != '' ||

+					margin.tablet.bottom != '' || margin.tablet.top != '' || margin.tablet.left != '' || margin.tablet.right != '' ||

+					margin.mobile.bottom != '' || margin.mobile.top != '' || margin.mobile.left != '' || margin.mobile.right != ''

+				) {

+					var dynamicStyle = '';

+					dynamicStyle += selector + ' {';

+					dynamicStyle += 'margin-left: ' + margin['desktop']['left'] + margin['desktop-unit'] + ';';

+					dynamicStyle += 'margin-right: ' + margin['desktop']['right'] + margin['desktop-unit'] + ';';

+					dynamicStyle += 'margin-top: ' + margin['desktop']['top'] + margin['desktop-unit'] + ';';

+					dynamicStyle += 'margin-bottom: ' + margin['desktop']['bottom'] + margin['desktop-unit'] + ';';

+					dynamicStyle += '} ';

+

+					dynamicStyle +=  '@media (max-width: ' + tablet_break_point + 'px) {';

+					dynamicStyle += selector + ' {';

+					dynamicStyle += 'margin-left: ' + margin['tablet']['left'] + margin['tablet-unit'] + ';';

+					dynamicStyle += 'margin-right: ' + margin['tablet']['right'] + margin['tablet-unit'] + ';';

+					dynamicStyle += 'margin-top: ' + margin['tablet']['top'] + margin['desktop-unit'] + ';';

+					dynamicStyle += 'margin-bottom: ' + margin['tablet']['bottom'] + margin['desktop-unit'] + ';';

+					dynamicStyle += '} ';

+					dynamicStyle += '} ';

+

+					dynamicStyle +=  '@media (max-width: ' + mobile_break_point + 'px) {';

+					dynamicStyle += selector + ' {';

+					dynamicStyle += 'margin-left: ' + margin['mobile']['left'] + margin['mobile-unit'] + ';';

+					dynamicStyle += 'margin-right: ' + margin['mobile']['right'] + margin['mobile-unit'] + ';';

+					dynamicStyle += 'margin-top: ' + margin['mobile']['top'] + margin['desktop-unit'] + ';';

+					dynamicStyle += 'margin-bottom: ' + margin['mobile']['bottom'] + margin['desktop-unit'] + ';';

+					dynamicStyle += '} ';

+					dynamicStyle += '} ';

+					astra_add_dynamic_css( section + '-margin-toggle-button', dynamicStyle );

+				}

+			} );

+		} );

+

+		// Typography CSS Generation.

+		astra_responsive_font_size(

+			'astra-settings[font-size-' + section + ']',

+			selector + ' .ast-builder-html-element'

+		);

+    }

+}

+

+/**

+ * Button Component CSS.

+ *

+ * @param string builder_type Builder Type.

+ * @param string button_count Button Count.

+ *

+ */

+function astra_builder_button_css( builder_type = 'header', button_count ) {

+

+	var tablet_break_point    = astraBuilderPreview.tablet_break_point || 768,

+		mobile_break_point    = astraBuilderPreview.mobile_break_point || 544;

+

+	for ( var index = 1; index <= button_count; index++ ) {

+

+		var section = ( 'header' === builder_type ) ? 'section-hb-button-' + index : 'section-fb-button-' + index;

+		var context = ( 'header' === builder_type ) ? 'hb' : 'fb';

+		var prefix = 'button' + index;

+		var selector = '.ast-' + builder_type + '-button-' + index + ' .ast-builder-button-wrap';

+		var button_selector = '.ast-' + builder_type + '-button-' + index + '[data-section*="section-' + context + '-button-"] .ast-builder-button-wrap';

+

+		astra_css( 'flex', 'display', '.ast-' + builder_type + '-button-' + index + '[data-section="' + section + '"]' );

+

+		// Button Text Color.

+		astra_color_responsive_css(

+			context + '-button-color',

+			'astra-settings[' + builder_type + '-' + prefix + '-text-color]',

+			'color',

+			selector + ' .ast-custom-button'

+		);

+		astra_color_responsive_css(

+			context + '-button-color-h',

+			'astra-settings[' + builder_type + '-' + prefix + '-text-h-color]',

+			'color',

+			selector + ':hover .ast-custom-button'

+		);

+

+		// Button Background Color.

+		astra_color_responsive_css(

+			context + '-button-bg-color',

+			'astra-settings[' + builder_type + '-' + prefix + '-back-color]',

+			'background-color',

+			selector + ' .ast-custom-button'

+		);

+		astra_color_responsive_css(

+			context + '-button-bg-color-h',

+			'astra-settings[' + builder_type + '-' + prefix + '-back-h-color]',

+			'background-color',

+			selector + ':hover .ast-custom-button'

+		);

+

+		// Button Typography.

+		astra_responsive_font_size(

+			'astra-settings[' + builder_type + '-' + prefix + '-font-size]',

+			button_selector + ' .ast-custom-button'

+		);

+

+		// Border Radius.

+		astra_css(

+			'astra-settings[' + builder_type + '-' + prefix + '-border-radius]',

+			'border-radius',

+			selector + ' .ast-custom-button',

+			'px'

+		);

+

+		// Border Color.

+		astra_color_responsive_css(

+			context + '-button-border-color',

+			'astra-settings[' + builder_type + '-' + prefix + '-border-color]',

+			'border-color',

+			selector + ' .ast-custom-button'

+		);

+		astra_color_responsive_css(

+			context + '-button-border-color-h',

+			'astra-settings[' + builder_type + '-' + prefix + '-border-h-color]',

+			'border-color',

+			selector + ' .ast-custom-button:hover'

+		);

+

+		// Advanced CSS Generation.

+		astra_builder_advanced_css( section, button_selector + ' .ast-custom-button' );

+

+		// Advanced Visibility CSS Generation.

+		astra_builder_visibility_css( section, selector, 'block' );

+

+		(function (index) {

+			wp.customize( 'astra-settings[' + builder_type + '-button'+ index +'-border-size]', function( setting ) {

+				setting.bind( function( border ) {

+					var dynamicStyle = '.ast-' + builder_type + '-button-'+ index +' .ast-custom-button {';

+					dynamicStyle += 'border-top-width:'  + border.top + 'px;';

+					dynamicStyle += 'border-right-width:'  + border.right + 'px;';

+					dynamicStyle += 'border-left-width:'   + border.left + 'px;';

+					dynamicStyle += 'border-bottom-width:'   + border.bottom + 'px;';

+					dynamicStyle += '} ';

+					astra_add_dynamic_css( 'astra-settings[' + builder_type + '-button'+ index +'-border-size]', dynamicStyle );

+				} );

+			} );

+

+			if( 'footer' == builder_type ) {

+				wp.customize( 'astra-settings[footer-button-'+ index +'-alignment]', function( value ) {

+					value.bind( function( alignment ) {

+

+						if( alignment.desktop != '' || alignment.tablet != '' || alignment.mobile != '' ) {

+							var dynamicStyle = '';

+							dynamicStyle += '.ast-footer-button-'+ index +'[data-section="section-fb-button-'+ index +'"] {';

+							dynamicStyle += 'justify-content: ' + alignment['desktop'] + ';';

+							dynamicStyle += '} ';

+

+							dynamicStyle +=  '@media (max-width: ' + tablet_break_point + 'px) {';

+							dynamicStyle += '.ast-footer-button-'+ index +'[data-section="section-fb-button-'+ index +'"] {';

+							dynamicStyle += 'justify-content: ' + alignment['tablet'] + ';';

+							dynamicStyle += '} ';

+							dynamicStyle += '} ';

+

+							dynamicStyle +=  '@media (max-width: ' + mobile_break_point + 'px) {';

+							dynamicStyle += '.ast-footer-button-'+ index +'[data-section="section-fb-button-'+ index +'"] {';

+							dynamicStyle += 'justify-content: ' + alignment['mobile'] + ';';

+							dynamicStyle += '} ';

+							dynamicStyle += '} ';

+

+							astra_add_dynamic_css( 'footer-button-'+ index +'-alignment', dynamicStyle );

+						}

+					} );

+				} );

+			}

+		})(index);

+	}

+}

+

+/**

+ * Social Component CSS.

+ *

+ * @param string builder_type Builder Type.

+ * @param string section Section.

+ *

+ */

+function astra_builder_social_css( builder_type = 'header', social_count ) {

+

+	var tablet_break_point    = astraBuilderPreview.tablet_break_point || 768,

+		mobile_break_point    = astraBuilderPreview.mobile_break_point || 544;

+

+	for ( var index = 1; index <= social_count; index++ ) {

+

+		let selector = '.ast-' + builder_type + '-social-' + index + '-wrap';

+		let section = ( 'header' === builder_type ) ? 'section-hb-social-icons-' + index : 'section-fb-social-icons-' + index;

+		var context = ( 'header' === builder_type ) ? 'hb' : 'fb';

+		var visibility_selector = '.ast-builder-layout-element[data-section="' + section + '"]';

+

+		// Icon Color.

+		astra_color_responsive_css(

+			context + '-soc-color',

+			'astra-settings[' + builder_type + '-social-' + index + '-color]',

+			'fill',

+			selector + ' .ast-social-color-type-custom .ast-builder-social-element svg'

+		);

+

+		astra_color_responsive_css(

+			context + '-soc-label-color',

+			'astra-settings[' + builder_type + '-social-' + index + '-color]',

+			'color',

+			selector + ' .ast-social-color-type-custom .ast-builder-social-element .social-item-label'

+		);

+

+		astra_color_responsive_css(

+			context + '-soc-color-h',

+			'astra-settings[' + builder_type + '-social-' + index + '-h-color]',

+			'color',

+			selector + ' .ast-social-color-type-custom .ast-builder-social-element:hover'

+		);

+

+		astra_color_responsive_css(

+			context + '-soc-label-color-h',

+			'astra-settings[' + builder_type + '-social-' + index + '-h-color]',

+			'color',

+			selector + ' .ast-social-color-type-custom .ast-builder-social-element:hover .social-item-label'

+		);

+

+		astra_color_responsive_css(

+			context + '-soc-svg-color-h',

+			'astra-settings[' + builder_type + '-social-' + index + '-h-color]',

+			'fill',

+			selector + ' .ast-social-color-type-custom .ast-builder-social-element:hover svg'

+		);

+

+		// Icon Background Color.

+		astra_color_responsive_css(

+			context + '-soc-bg-color',

+			'astra-settings[' + builder_type + '-social-' + index + '-bg-color]',

+			'background-color',

+			selector + ' .ast-social-color-type-custom .ast-builder-social-element'

+		);

+

+		astra_color_responsive_css(

+			context + '-soc-bg-color-h',

+			'astra-settings[' + builder_type + '-social-' + index + '-bg-h-color]',

+			'background-color',

+			selector + ' .ast-social-color-type-custom .ast-builder-social-element:hover'

+		);

+

+		// Icon Label Color.

+		astra_color_responsive_css(

+			context + '-soc-label-color',

+			'astra-settings[' + builder_type + '-social-' + index + '-label-color]',

+			'color',

+			selector + ' .ast-social-color-type-custom .ast-builder-social-element span.social-item-label'

+		);

+

+		astra_color_responsive_css(

+			context + '-soc-label-color-h',

+			'astra-settings[' + builder_type + '-social-' + index + '-label-h-color]',

+			'color',

+			selector + ' .ast-social-color-type-custom .ast-builder-social-element:hover span.social-item-label'

+		);

+

+		// Icon Background Space.

+		astra_css(

+			'astra-settings[' + builder_type + '-social-' + index + '-bg-space]',

+			'padding',

+			selector + ' .' + builder_type + '-social-inner-wrap .ast-builder-social-element',

+			'px'

+		);

+

+		// Icon Border Radius.

+		astra_css(

+			'astra-settings[' + builder_type + '-social-' + index + '-radius]',

+			'border-radius',

+			selector + ' .' + builder_type + '-social-inner-wrap .ast-builder-social-element',

+			'px'

+		);

+

+		// Typography CSS Generation.

+		astra_responsive_font_size(

+			'astra-settings[font-size-' + section + ']',

+			selector

+		);

+

+		// Advanced Visibility CSS Generation.

+		astra_builder_visibility_css( section, visibility_selector, 'block' );

+

+		// Icon Spacing.

+		(function( index ) {

+			// Icon Size.

+			wp.customize( 'astra-settings[' + builder_type + '-social-' + index + '-size]', function( value ) {

+				value.bind( function( size ) {

+

+					if( size.desktop != '' || size.tablet != '' || size.mobile != '' ) {

+						var dynamicStyle = '';

+						dynamicStyle += selector + ' .' + builder_type + '-social-inner-wrap .ast-builder-social-element svg {';

+						dynamicStyle += 'height: ' + size.desktop + 'px;';

+						dynamicStyle += 'width: ' + size.desktop + 'px;';

+						dynamicStyle += '} ';

+

+						dynamicStyle +=  '@media (max-width: ' + tablet_break_point + 'px) {';

+						dynamicStyle += selector + ' .' + builder_type + '-social-inner-wrap .ast-builder-social-element svg {';

+						dynamicStyle += 'height: ' + size.tablet + 'px;';

+						dynamicStyle += 'width: ' + size.tablet + 'px;';

+						dynamicStyle += '} ';

+						dynamicStyle += '} ';

+

+						dynamicStyle +=  '@media (max-width: ' + mobile_break_point + 'px) {';

+						dynamicStyle += selector + ' .' + builder_type + '-social-inner-wrap .ast-builder-social-element svg {';

+						dynamicStyle += 'height: ' + size.mobile + 'px;';

+						dynamicStyle += 'width: ' + size.mobile + 'px;';

+						dynamicStyle += '} ';

+						dynamicStyle += '} ';

+

+						astra_add_dynamic_css( builder_type + '-social-' + index + '-size', dynamicStyle );

+					}

+				} );

+			} );

+

+

+			// Icon Space.

+			wp.customize( 'astra-settings[' + builder_type + '-social-' + index + '-space]', function( value ) {

+				value.bind( function( spacing ) {

+					var space = '';

+					var dynamicStyle = '';

+					if ( spacing.desktop != '' ) {

+						space = spacing.desktop/2;

+						dynamicStyle += selector + ' .' + builder_type + '-social-inner-wrap .ast-builder-social-element {';

+						dynamicStyle += 'margin-left: ' + space + 'px;';

+						dynamicStyle += 'margin-right: ' + space + 'px;';

+						dynamicStyle += '} ';

+						dynamicStyle += selector + ' .' + builder_type + '-social-inner-wrap .ast-builder-social-element:first-child {';

+						dynamicStyle += 'margin-left: 0;';

+						dynamicStyle += '} ';

+						dynamicStyle += selector + ' .' + builder_type + '-social-inner-wrap .ast-builder-social-element:last-child {';

+						dynamicStyle += 'margin-right: 0;';

+						dynamicStyle += '} ';

+					}

+

+					if ( spacing.tablet != '' ) {

+						space = spacing.tablet/2;

+						dynamicStyle +=  '@media (max-width: ' + tablet_break_point + 'px) {';

+						dynamicStyle += selector + ' .' + builder_type + '-social-inner-wrap .ast-builder-social-element {';

+						dynamicStyle += 'margin-left: ' + space + 'px;';

+						dynamicStyle += 'margin-right: ' + space + 'px;';

+						dynamicStyle += '} ';

+						dynamicStyle += selector + ' .' + builder_type + '-social-inner-wrap .ast-builder-social-element:first-child {';

+						dynamicStyle += 'margin-left: 0;';

+						dynamicStyle += '} ';

+						dynamicStyle += selector + ' .' + builder_type + '-social-inner-wrap .ast-builder-social-element:last-child {';

+						dynamicStyle += 'margin-right: 0;';

+						dynamicStyle += '} ';

+						dynamicStyle += '} ';

+					}

+

+					if ( spacing.mobile != '' ) {

+						space = spacing.mobile/2;

+						dynamicStyle +=  '@media (max-width: ' + mobile_break_point + 'px) {';

+						dynamicStyle += selector + ' .' + builder_type + '-social-inner-wrap .ast-builder-social-element {';

+						dynamicStyle += 'margin-left: ' + space + 'px;';

+						dynamicStyle += 'margin-right: ' + space + 'px;';

+						dynamicStyle += '} ';

+						dynamicStyle += selector + ' .' + builder_type + '-social-inner-wrap .ast-builder-social-element:first-child {';

+						dynamicStyle += 'margin-left: 0;';

+						dynamicStyle += '} ';

+						dynamicStyle += selector + ' .' + builder_type + '-social-inner-wrap .ast-builder-social-element:last-child {';

+						dynamicStyle += 'margin-right: 0;';

+						dynamicStyle += '} ';

+						dynamicStyle += '} ';

+					}

+

+					astra_add_dynamic_css( builder_type + '-social-icons-icon-space', dynamicStyle );

+				} );

+			} );

+

+			// Color Type - Custom/Official

+			wp.customize( 'astra-settings[' + builder_type + '-social-' + index + '-color-type]', function ( value ) {

+				value.bind( function ( newval ) {

+

+					var side_class = 'ast-social-color-type-' + newval;

+

+					jQuery('.ast-' + builder_type + '-social-' + index + '-wrap .' + builder_type + '-social-inner-wrap').removeClass( 'ast-social-color-type-custom' );

+					jQuery('.ast-' + builder_type + '-social-' + index + '-wrap .' + builder_type + '-social-inner-wrap').removeClass( 'ast-social-color-type-official' );

+					jQuery('.ast-' + builder_type + '-social-' + index + '-wrap .' + builder_type + '-social-inner-wrap').addClass( side_class );

+				} );

+			} );

+

+			// Margin.

+			wp.customize( 'astra-settings[' + section + '-margin]', function( value ) {

+				value.bind( function( margin ) {

+					if(

+						margin.desktop.bottom != '' || margin.desktop.top != '' || margin.desktop.left != '' || margin.desktop.right != '' ||

+						margin.tablet.bottom != '' || margin.tablet.top != '' || margin.tablet.left != '' || margin.tablet.right != '' ||

+						margin.mobile.bottom != '' || margin.mobile.top != '' || margin.mobile.left != '' || margin.mobile.right != ''

+					) {

+						var dynamicStyle = '';

+						dynamicStyle += selector + ' {';

+						dynamicStyle += 'margin-left: ' + margin['desktop']['left'] + margin['desktop-unit'] + ';';

+						dynamicStyle += 'margin-right: ' + margin['desktop']['right'] + margin['desktop-unit'] + ';';

+						dynamicStyle += 'margin-top: ' + margin['desktop']['top'] + margin['desktop-unit'] + ';';

+						dynamicStyle += 'margin-bottom: ' + margin['desktop']['bottom'] + margin['desktop-unit'] + ';';

+						dynamicStyle += '} ';

+

+						dynamicStyle +=  '@media (max-width: ' + tablet_break_point + 'px) {';

+						dynamicStyle += selector + ' {';

+						dynamicStyle += 'margin-left: ' + margin['tablet']['left'] + margin['tablet-unit'] + ';';

+						dynamicStyle += 'margin-right: ' + margin['tablet']['right'] + margin['tablet-unit'] + ';';

+						dynamicStyle += 'margin-top: ' + margin['tablet']['top'] + margin['desktop-unit'] + ';';

+						dynamicStyle += 'margin-bottom: ' + margin['tablet']['bottom'] + margin['desktop-unit'] + ';';

+						dynamicStyle += '} ';

+						dynamicStyle += '} ';

+

+						dynamicStyle +=  '@media (max-width: ' + mobile_break_point + 'px) {';

+						dynamicStyle += selector + ' {';

+						dynamicStyle += 'margin-left: ' + margin['mobile']['left'] + margin['mobile-unit'] + ';';

+						dynamicStyle += 'margin-right: ' + margin['mobile']['right'] + margin['mobile-unit'] + ';';

+						dynamicStyle += 'margin-top: ' + margin['mobile']['top'] + margin['desktop-unit'] + ';';

+						dynamicStyle += 'margin-bottom: ' + margin['mobile']['bottom'] + margin['desktop-unit'] + ';';

+						dynamicStyle += '} ';

+						dynamicStyle += '} ';

+						astra_add_dynamic_css( section + '-margin', dynamicStyle );

+					}

+				} );

+			} );

+

+			if ( 'footer' === builder_type ) {

+				// Alignment.

+				wp.customize( 'astra-settings[footer-social-' + index + '-alignment]', function( value ) {

+					value.bind( function( alignment ) {

+						if( alignment.desktop != '' || alignment.tablet != '' || alignment.mobile != '' ) {

+							var dynamicStyle = '';

+							dynamicStyle += '[data-section="section-fb-social-icons-' + index + '"] .footer-social-inner-wrap {';

+							dynamicStyle += 'text-align: ' + alignment['desktop'] + ';';

+							dynamicStyle += '} ';

+

+							dynamicStyle +=  '@media (max-width: ' + tablet_break_point + 'px) {';

+							dynamicStyle += '[data-section="section-fb-social-icons-' + index + '"] .footer-social-inner-wrap {';

+							dynamicStyle += 'text-align: ' + alignment['tablet'] + ';';

+							dynamicStyle += '} ';

+							dynamicStyle += '} ';

+

+							dynamicStyle +=  '@media (max-width: ' + mobile_break_point + 'px) {';

+							dynamicStyle += '[data-section="section-fb-social-icons-' + index + '"] .footer-social-inner-wrap {';

+							dynamicStyle += 'text-align: ' + alignment['mobile'] + ';';

+							dynamicStyle += '} ';

+							dynamicStyle += '} ';

+

+							astra_add_dynamic_css( 'footer-social-' + index + '-alignment', dynamicStyle );

+						}

+					} );

+				} );

+

+			}

+		})( index );

+	}

+}

+

+/**

+ * Widget Component CSS.

+ *

+ * @param string builder_type Builder Type.

+ * @param string section Section.

+ *

+ */

+function astra_builder_widget_css( builder_type = 'header' ) {

+

+	var tablet_break_point    = AstraBuilderWidgetData.tablet_break_point || 768,

+        mobile_break_point    = AstraBuilderWidgetData.mobile_break_point || 544;

+

+	let widget_count = 'header' === builder_type ? AstraBuilderWidgetData.header_widget_count: AstraBuilderWidgetData.footer_widget_count;

+

+	for ( var index = 1; index <= widget_count; index++ ) {

+

+		var selector = '.' + builder_type + '-widget-area[data-section="sidebar-widgets-' + builder_type + '-widget-' + index + '"]';

+

+		var section = AstraBuilderWidgetData.has_block_editor ? 'astra-sidebar-widgets-' + builder_type + '-widget-' + index : 'sidebar-widgets-' + builder_type + '-widget-' + index;

+

+		// Widget Content Color.

+		astra_color_responsive_css(

+			builder_type + '-widget-' + index + '-color',

+			'astra-settings[' + builder_type + '-widget-' + index + '-color]',

+			'color',

+			 ( AstraBuilderWidgetData.is_flex_based_css ) ? selector + '.' + builder_type + '-widget-area-inner' : selector + ' .' + builder_type + '-widget-area-inner'

+		);

+

+		// Widget Link Color.

+		astra_color_responsive_css(

+			builder_type + '-widget-' + index + '-link-color',

+			'astra-settings[' + builder_type + '-widget-' + index + '-link-color]',

+			'color',

+			( AstraBuilderWidgetData.is_flex_based_css ) ? selector + '.' + builder_type + '-widget-area-inner a' : selector + ' .' + builder_type + '-widget-area-inner a'

+		);

+

+		// Widget Link Hover Color.

+		astra_color_responsive_css(

+			builder_type + '-widget-' + index + '-link-h-color',

+			'astra-settings[' + builder_type + '-widget-' + index + '-link-h-color]',

+			'color',

+			( AstraBuilderWidgetData.is_flex_based_css ) ? selector + '.' + builder_type + '-widget-area-inner a:hover' : selector + ' .' + builder_type + '-widget-area-inner a:hover'

+		);

+

+		// Widget Title Color.

+		astra_color_responsive_css(

+			builder_type + '-widget-' + index + '-title-color',

+			'astra-settings[' + builder_type + '-widget-' + index + '-title-color]',

+			'color',

+			selector + ' .widget-title'

+		);

+

+		// Widget Title Typography.

+		astra_responsive_font_size(

+			'astra-settings[' + builder_type + '-widget-' + index + '-font-size]',

+			selector + ' .widget-title'

+		);

+

+		// Widget Content Typography.

+		astra_responsive_font_size(

+			'astra-settings[' + builder_type + '-widget-' + index + '-content-font-size]',

+			( AstraBuilderWidgetData.is_flex_based_css ) ? selector + '.' + builder_type + '-widget-area-inner' : selector + ' .' + builder_type + '-widget-area-inner'

+		);

+

+		// Advanced Visibility CSS Generation.

+		astra_builder_visibility_css( section, selector, 'block' );

+

+		(function (index) {

+

+			var marginControl = AstraBuilderWidgetData.has_block_editor ? 'astra-sidebar-widgets-' + builder_type + '-widget-' + index + '-margin' : 'sidebar-widgets-' + builder_type + '-widget-' + index + '-margin';

+

+			wp.customize( 'astra-settings[' + marginControl + ']', function( value ) {

+				value.bind( function( margin ) {

+					var selector = '.' + builder_type + '-widget-area[data-section="sidebar-widgets-' + builder_type + '-widget-' + index + '"]';

+					if(

+						margin.desktop.bottom != '' || margin.desktop.top != '' || margin.desktop.left != '' || margin.desktop.right != '' ||

+						margin.tablet.bottom != '' || margin.tablet.top != '' || margin.tablet.left != '' || margin.tablet.right != '' ||

+						margin.mobile.bottom != '' || margin.mobile.top != '' || margin.mobile.left != '' || margin.mobile.right != ''

+					) {

+						var dynamicStyle = '';

+						dynamicStyle += selector + ' {';

+						dynamicStyle += 'margin-left: ' + margin['desktop']['left'] + margin['desktop-unit'] + ';';

+						dynamicStyle += 'margin-right: ' + margin['desktop']['right'] + margin['desktop-unit'] + ';';

+						dynamicStyle += 'margin-top: ' + margin['desktop']['top'] + margin['desktop-unit'] + ';';

+						dynamicStyle += 'margin-bottom: ' + margin['desktop']['bottom'] + margin['desktop-unit'] + ';';

+						dynamicStyle += '} ';

+

+						dynamicStyle +=  '@media (max-width: ' + tablet_break_point + 'px) {';

+						dynamicStyle += selector + ' {';

+						dynamicStyle += 'margin-left: ' + margin['tablet']['left'] + margin['tablet-unit'] + ';';

+						dynamicStyle += 'margin-right: ' + margin['tablet']['right'] + margin['tablet-unit'] + ';';

+						dynamicStyle += 'margin-top: ' + margin['tablet']['top'] + margin['desktop-unit'] + ';';

+						dynamicStyle += 'margin-bottom: ' + margin['tablet']['bottom'] + margin['desktop-unit'] + ';';

+						dynamicStyle += '} ';

+						dynamicStyle += '} ';

+

+						dynamicStyle +=  '@media (max-width: ' + mobile_break_point + 'px) {';

+						dynamicStyle += selector + ' {';

+						dynamicStyle += 'margin-left: ' + margin['mobile']['left'] + margin['mobile-unit'] + ';';

+						dynamicStyle += 'margin-right: ' + margin['mobile']['right'] + margin['mobile-unit'] + ';';

+						dynamicStyle += 'margin-top: ' + margin['mobile']['top'] + margin['desktop-unit'] + ';';

+						dynamicStyle += 'margin-bottom: ' + margin['mobile']['bottom'] + margin['desktop-unit'] + ';';

+						dynamicStyle += '} ';

+						dynamicStyle += '} ';

+						astra_add_dynamic_css( 'sidebar-widgets-' + builder_type + '-widget-' + index + '-margin', dynamicStyle );

+					}

+				} );

+			} );

+

+			if ( 'footer' === builder_type ) {

+

+				wp.customize( 'astra-settings[footer-widget-alignment-' + index + ']', function( value ) {

+					value.bind( function( alignment ) {

+						if( alignment.desktop != '' || alignment.tablet != '' || alignment.mobile != '' ) {

+							var dynamicStyle = '';

+							if( AstraBuilderWidgetData.is_flex_based_css ){

+								dynamicStyle += '.footer-widget-area[data-section="sidebar-widgets-footer-widget-' + index + '"].footer-widget-area-inner {';

+							}else{

+								dynamicStyle += '.footer-widget-area[data-section="sidebar-widgets-footer-widget-' + index + '"] .footer-widget-area-inner {';

+							}

+							dynamicStyle += 'text-align: ' + alignment['desktop'] + ';';

+							dynamicStyle += '} ';

+

+							dynamicStyle +=  '@media (max-width: ' + tablet_break_point + 'px) {';

+							if( AstraBuilderWidgetData.is_flex_based_css ){

+								dynamicStyle += '.footer-widget-area[data-section="sidebar-widgets-footer-widget-' + index + '"].footer-widget-area-inner {';

+							}else{

+								dynamicStyle += '.footer-widget-area[data-section="sidebar-widgets-footer-widget-' + index + '"] .footer-widget-area-inner {';

+							}

+							dynamicStyle += 'text-align: ' + alignment['tablet'] + ';';

+							dynamicStyle += '} ';

+							dynamicStyle += '} ';

+

+							dynamicStyle +=  '@media (max-width: ' + mobile_break_point + 'px) {';

+							if( AstraBuilderWidgetData.is_flex_based_css ){

+								dynamicStyle += '.footer-widget-area[data-section="sidebar-widgets-footer-widget-' + index + '"].footer-widget-area-inner {';

+							}else{

+								dynamicStyle += '.footer-widget-area[data-section="sidebar-widgets-footer-widget-' + index + '"] .footer-widget-area-inner {';

+							}

+							dynamicStyle += 'text-align: ' + alignment['mobile'] + ';';

+							dynamicStyle += '} ';

+							dynamicStyle += '} ';

+

+							astra_add_dynamic_css( 'footer-widget-alignment-' + index, dynamicStyle );

+						}

+					} );

+				} );

+

+			}

+		})(index);

+

+	}

+

+}

+

+/**

+ * Apply Visibility CSS for the element

+ *

+ * @param string section Section ID.

+ * @param string selector Base Selector.

+ * @param string default_property default CSS property.

+ */

+function astra_builder_visibility_css( section, selector, default_property = 'flex' ) {

+

+    var tablet_break_point    = astraBuilderPreview.tablet_break_point || 768,

+		mobile_break_point    = astraBuilderPreview.mobile_break_point || 544;

+

+	// Header Desktop visibility.

+	wp.customize( 'astra-settings[' + section + '-hide-desktop]', function( setting ) {

+		setting.bind( function( desktop_visible ) {

+

+			var dynamicStyle = '';

+			var is_hidden = ( ! desktop_visible ) ? default_property : 'none';

+

+			dynamicStyle += selector + ' {';

+			dynamicStyle += 'display: ' + is_hidden + ';';

+			dynamicStyle += '} ';

+

+			astra_add_dynamic_css( section + '-hide-desktop', dynamicStyle );

+		} );

+

+	} );

+

+	// Header Tablet visibility.

+	wp.customize( 'astra-settings[' + section + '-hide-tablet]', function( setting ) {

+		setting.bind( function( tablet_visible ) {

+

+			var dynamicStyle = '';

+			var is_hidden = ( ! tablet_visible ) ? default_property : 'none';

+

+			dynamicStyle +=  '@media (min-width: ' + mobile_break_point + 'px) and (max-width: ' + tablet_break_point + 'px) {';

+			dynamicStyle += '.ast-header-break-point ' + selector + ' {';

+			dynamicStyle += 'display: ' + is_hidden + ';';

+			dynamicStyle += '} ';

+			dynamicStyle += '} ';

+

+			astra_add_dynamic_css( section + '-hide-tablet', dynamicStyle );

+		} );

+

+	} );

+

+	// Header Mobile visibility.

+	wp.customize( 'astra-settings[' + section + '-hide-mobile]', function( setting ) {

+		setting.bind( function( mobile_visible ) {

+

+			var dynamicStyle = '';

+			var is_hidden = ( ! mobile_visible ) ? default_property : 'none';

+

+			dynamicStyle +=  '@media (max-width: ' + mobile_break_point + 'px) {';

+			dynamicStyle += '.ast-header-break-point ' + selector + ' {';

+			dynamicStyle += 'display: ' + is_hidden + ';';

+			dynamicStyle += '} ';

+			dynamicStyle += '} ';

+

+			astra_add_dynamic_css( section + '-hide-mobile', dynamicStyle );

+		} );

+	} );

+}

diff --git a/inc/builder/type/base/dynamic-css/button/class-astra-button-component-dynamic-css.php b/inc/builder/type/base/dynamic-css/button/class-astra-button-component-dynamic-css.php
new file mode 100644
index 0000000..8695773
--- /dev/null
+++ b/inc/builder/type/base/dynamic-css/button/class-astra-button-component-dynamic-css.php
@@ -0,0 +1,215 @@
+<?php
+/**
+ * Astra Button Component Dynamic CSS.
+ *
+ * @package     astra-builder
+ * @author      Astra
+ * @copyright   Copyright (c) 2020, Astra
+ * @link        https://wpastra.com/
+ * @since       3.0.0
+ */
+
+// No direct access, please.
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+/**
+ * Register Builder Dynamic CSS.
+ *
+ * @since 3.0.0
+ */
+class Astra_Button_Component_Dynamic_CSS {
+
+	/**
+	 * Dynamic CSS
+	 *
+	 * @param string $builder_type Builder Type.
+	 * @return String Generated dynamic CSS for Heading Colors.
+	 *
+	 * @since 3.0.0
+	 */
+	public static function astra_button_dynamic_css( $builder_type = 'header' ) {
+
+		$generated_css = '';
+
+		$number_of_button = ( 'header' === $builder_type ) ? Astra_Builder_Helper::$num_of_header_button : Astra_Builder_Helper::$num_of_footer_button;
+		$hb_button_flag   = false;
+
+		for ( $index = 1; $index <= $number_of_button; $index++ ) {
+
+			if ( ! Astra_Builder_Helper::is_component_loaded( 'button-' . $index, $builder_type ) ) {
+				continue;
+			}
+			$hb_button_flag = ( 'header' === $builder_type ) ? true : false;
+
+			$_section = ( 'header' === $builder_type ) ? 'section-hb-button-' . $index : 'section-fb-button-' . $index;
+			$context  = ( 'header' === $builder_type ) ? 'hb' : 'fb';
+
+			$_prefix = 'button' . $index;
+
+			$selector             = '.ast-' . $builder_type . '-button-' . $index;
+			$button_font_size     = astra_get_option( $builder_type . '-' . $_prefix . '-font-size' );
+			$button_border_width  = astra_get_option( $builder_type . '-' . $_prefix . '-border-size' );
+			$button_border_radius = astra_get_option( $builder_type . '-' . $_prefix . '-border-radius' );
+			// Normal Responsive Colors.
+			$button_bg_color_desktop = astra_get_prop( astra_get_option( $builder_type . '-' . $_prefix . '-back-color' ), 'desktop' );
+			$button_bg_color_tablet  = astra_get_prop( astra_get_option( $builder_type . '-' . $_prefix . '-back-color' ), 'tablet' );
+			$button_bg_color_mobile  = astra_get_prop( astra_get_option( $builder_type . '-' . $_prefix . '-back-color' ), 'mobile' );
+			$button_color_desktop    = astra_get_prop( astra_get_option( $builder_type . '-' . $_prefix . '-text-color' ), 'desktop' );
+			$button_color_tablet     = astra_get_prop( astra_get_option( $builder_type . '-' . $_prefix . '-text-color' ), 'tablet' );
+			$button_color_mobile     = astra_get_prop( astra_get_option( $builder_type . '-' . $_prefix . '-text-color' ), 'mobile' );
+			// Hover Responsive Colors.
+			$button_bg_h_color_desktop = astra_get_prop( astra_get_option( $builder_type . '-' . $_prefix . '-back-h-color' ), 'desktop' );
+			$button_bg_h_color_tablet  = astra_get_prop( astra_get_option( $builder_type . '-' . $_prefix . '-back-h-color' ), 'tablet' );
+			$button_bg_h_color_mobile  = astra_get_prop( astra_get_option( $builder_type . '-' . $_prefix . '-back-h-color' ), 'mobile' );
+			$button_h_color_desktop    = astra_get_prop( astra_get_option( $builder_type . '-' . $_prefix . '-text-h-color' ), 'desktop' );
+			$button_h_color_tablet     = astra_get_prop( astra_get_option( $builder_type . '-' . $_prefix . '-text-h-color' ), 'tablet' );
+			$button_h_color_mobile     = astra_get_prop( astra_get_option( $builder_type . '-' . $_prefix . '-text-h-color' ), 'mobile' );
+
+			// Normal Responsive Colors.
+			$button_border_color_desktop = astra_get_prop( astra_get_option( $builder_type . '-' . $_prefix . '-border-color' ), 'desktop' );
+			$button_border_color_tablet  = astra_get_prop( astra_get_option( $builder_type . '-' . $_prefix . '-border-color' ), 'tablet' );
+			$button_border_color_mobile  = astra_get_prop( astra_get_option( $builder_type . '-' . $_prefix . '-border-color' ), 'mobile' );
+
+			// Hover Responsive Colors.
+			$button_border_h_color_desktop = astra_get_prop( astra_get_option( $builder_type . '-' . $_prefix . '-border-h-color' ), 'desktop' );
+			$button_border_h_color_tablet  = astra_get_prop( astra_get_option( $builder_type . '-' . $_prefix . '-border-h-color' ), 'tablet' );
+			$button_border_h_color_mobile  = astra_get_prop( astra_get_option( $builder_type . '-' . $_prefix . '-border-h-color' ), 'mobile' );
+
+			/**
+			 * Button CSS.
+			 */
+			$css_output_desktop = array(
+
+				/**
+				 * Button font size.
+				 */
+				$selector . '[data-section*="section-' . $context . '-button-"] .ast-builder-button-wrap .ast-custom-button' => array(
+					// Typography.
+					'font-size' => astra_responsive_font( $button_font_size, 'desktop' ),
+				),
+
+				/**
+				 * Button Colors.
+				 */
+				$selector . ' .ast-custom-button'       => array(
+					// Colors.
+					'color'               => $button_color_desktop,
+					'background'          => $button_bg_color_desktop,
+
+					// Border.
+					'border-color'        => $button_border_color_desktop,
+					'border-top-width'    => astra_get_css_value( $button_border_width['top'], 'px' ),
+					'border-bottom-width' => astra_get_css_value( $button_border_width['bottom'], 'px' ),
+					'border-left-width'   => astra_get_css_value( $button_border_width['left'], 'px' ),
+					'border-right-width'  => astra_get_css_value( $button_border_width['right'], 'px' ),
+					'border-radius'       => astra_get_css_value( $button_border_radius, 'px' ),
+				),
+
+				// Hover Options.
+				$selector . ' .ast-custom-button:hover' => array(
+					'color'        => $button_h_color_desktop,
+					'background'   => $button_bg_h_color_desktop,
+					'border-color' => $button_border_h_color_desktop,
+				),
+			);
+
+			/**
+			 * Button CSS.
+			 */
+			$css_output_tablet = array(
+
+				
+				/**
+				 * Button font size.
+				 */
+				$selector . '[data-section*="section-' . $context . '-button-"] .ast-builder-button-wrap .ast-custom-button' => array(
+					// Typography.
+					'font-size' => astra_responsive_font( $button_font_size, 'tablet' ),
+				),
+
+				/**
+				 * Button Colors.
+				 */
+				$selector . ' .ast-custom-button'       => array(
+					// Typography.
+					'font-size'    => astra_responsive_font( $button_font_size, 'tablet' ),
+
+					// Colors.
+					'color'        => $button_color_tablet,
+					'background'   => $button_bg_color_tablet,
+					'border-color' => $button_border_color_tablet,
+				),
+				// Hover Options.
+				$selector . ' .ast-custom-button:hover' => array(
+					'color'        => $button_h_color_tablet,
+					'background'   => $button_bg_h_color_tablet,
+					'border-color' => $button_border_h_color_tablet,
+				),
+			);
+
+			/**
+			 * Button CSS.
+			 */
+			$css_output_mobile = array(
+				
+				/**
+				 * Button font size.
+				 */
+				$selector . '[data-section*="section-' . $context . '-button-"] .ast-builder-button-wrap .ast-custom-button' => array(
+					// Typography.
+					'font-size' => astra_responsive_font( $button_font_size, 'mobile' ),
+				),
+
+				/**
+				 * Button Colors.
+				 */
+				$selector . ' .ast-custom-button'        => array(
+					// Typography.
+					'font-size'    => astra_responsive_font( $button_font_size, 'mobile' ),
+
+					// Colors.
+					'color'        => $button_color_mobile,
+					'background'   => $button_bg_color_mobile,
+					'border-color' => $button_border_color_mobile,
+				),
+				// Hover Options.
+				$selector . ' ..ast-custom-button:hover' => array(
+					'color'        => $button_h_color_mobile,
+					'background'   => $button_bg_h_color_mobile,
+					'border-color' => $button_border_h_color_mobile,
+				),
+			);
+
+			/* Parse CSS from array() */
+			$css_output  = astra_parse_css( $css_output_desktop );
+			$css_output .= astra_parse_css( $css_output_tablet, '', astra_get_tablet_breakpoint() );
+			$css_output .= astra_parse_css( $css_output_mobile, '', astra_get_mobile_breakpoint() );
+
+			$generated_css .= $css_output;
+
+			$generated_css .= Astra_Builder_Base_Dynamic_CSS::prepare_advanced_margin_padding_css( $_section, $selector . '[data-section*="section-' . $context . '-button-"] .ast-builder-button-wrap .ast-custom-button' );
+
+			$visibility_selector = '.ast-' . $builder_type . '-button-' . $index . '[data-section="' . $_section . '"]';
+			$generated_css      .= Astra_Builder_Base_Dynamic_CSS::prepare_visibility_css( $_section, $visibility_selector );
+		}
+
+		if ( true === $hb_button_flag ) {
+			$static_hb_css = array(
+				'[data-section*="section-hb-button-"] .menu-link' => array(
+					'display' => 'none',
+				),
+			);
+			return astra_parse_css( $static_hb_css ) . $generated_css;
+		}
+
+		return $generated_css;
+	}
+}
+
+/**
+ * Kicking this off by creating object of this class.
+ */
+
+new Astra_Button_Component_Dynamic_CSS();
diff --git a/inc/builder/type/base/dynamic-css/html/class-astra-html-component-dynamic-css.php b/inc/builder/type/base/dynamic-css/html/class-astra-html-component-dynamic-css.php
new file mode 100644
index 0000000..e36aca8
--- /dev/null
+++ b/inc/builder/type/base/dynamic-css/html/class-astra-html-component-dynamic-css.php
@@ -0,0 +1,187 @@
+<?php
+/**
+ * Astra HTML Component Dynamic CSS.
+ *
+ * @package     astra-builder
+ * @author      Astra
+ * @copyright   Copyright (c) 2020, Astra
+ * @link        https://wpastra.com/
+ * @since       3.0.0
+ */
+
+// No direct access, please.
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+/**
+ * Register Builder Dynamic CSS.
+ *
+ * @since 3.0.0
+ */
+class Astra_Html_Component_Dynamic_CSS {
+
+	/**
+	 * Dynamic CSS
+	 *
+	 * @param string $builder_type Builder Type.
+	 * @return String Generated dynamic CSS for Heading Colors.
+	 *
+	 * @since 3.0.0
+	 */
+	public static function astra_html_dynamic_css( $builder_type = 'header' ) {
+
+		$generated_css  = '';
+		$html_css_flag  = false;
+		$number_of_html = ( 'header' === $builder_type ) ? Astra_Builder_Helper::$num_of_header_html : Astra_Builder_Helper::$num_of_footer_html;
+
+		for ( $index = 1; $index <= $number_of_html; $index++ ) {
+
+			if ( ! Astra_Builder_Helper::is_component_loaded( 'html-' . $index, $builder_type ) ) {
+				continue;
+			}
+
+			$html_css_flag = true;
+
+			$_section = ( 'header' === $builder_type ) ? 'section-hb-html-' . $index : 'section-fb-html-' . $index;
+
+			$margin    = astra_get_option( $_section . '-margin' );
+			$font_size = astra_get_option( 'font-size-' . $_section );
+
+			$text_color_desktop = astra_get_prop( astra_get_option( $builder_type . '-html-' . $index . 'color' ), 'desktop' );
+			$text_color_tablet  = astra_get_prop( astra_get_option( $builder_type . '-html-' . $index . 'color' ), 'tablet' );
+			$text_color_mobile  = astra_get_prop( astra_get_option( $builder_type . '-html-' . $index . 'color' ), 'mobile' );
+
+			$link_color_desktop = astra_get_prop( astra_get_option( $builder_type . '-html-' . $index . 'link-color' ), 'desktop' );
+			$link_color_tablet  = astra_get_prop( astra_get_option( $builder_type . '-html-' . $index . 'link-color' ), 'tablet' );
+			$link_color_mobile  = astra_get_prop( astra_get_option( $builder_type . '-html-' . $index . 'link-color' ), 'mobile' );
+
+			$link_h_color_desktop = astra_get_prop( astra_get_option( $builder_type . '-html-' . $index . 'link-h-color' ), 'desktop' );
+			$link_h_color_tablet  = astra_get_prop( astra_get_option( $builder_type . '-html-' . $index . 'link-h-color' ), 'tablet' );
+			$link_h_color_mobile  = astra_get_prop( astra_get_option( $builder_type . '-html-' . $index . 'link-h-color' ), 'mobile' );
+
+			$selector = ( 'header' === $builder_type ) ? '.ast-header-html-' . $index : '.footer-widget-area[data-section="section-fb-html-' . $index . '"]';
+
+			$display_prop = ( 'header' === $builder_type ) ? 'flex' : 'block';
+
+			$css_output_desktop = array(
+
+				$selector . ' .ast-builder-html-element' => array(
+					'color'     => $text_color_desktop,
+					// Typography.
+					'font-size' => astra_responsive_font( $font_size, 'desktop' ),
+				),
+
+				$selector                                => array(
+					// Margin.
+					'margin-top'    => astra_responsive_spacing( $margin, 'top', 'desktop' ),
+					'margin-bottom' => astra_responsive_spacing( $margin, 'bottom', 'desktop' ),
+					'margin-left'   => astra_responsive_spacing( $margin, 'left', 'desktop' ),
+					'margin-right'  => astra_responsive_spacing( $margin, 'right', 'desktop' ),
+				),
+
+				// Link Color.
+				$selector . ' a'                         => array(
+					'color' => $link_color_desktop,
+				),
+
+				// Link Hover Color.
+				$selector . ' a:hover'                   => array(
+					'color' => $link_h_color_desktop,
+				),
+			);
+
+			/* Parse CSS from array() */
+			$css_output = astra_parse_css( $css_output_desktop );
+
+			// Tablet CSS.
+			$css_output_tablet = array(
+
+				$selector . ' .ast-builder-html-element' => array(
+					'color'     => $text_color_tablet,
+					// Typography.
+					'font-size' => astra_responsive_font( $font_size, 'tablet' ),
+				),
+
+				$selector                                => array(
+					// Margin CSS.
+					'margin-top'    => astra_responsive_spacing( $margin, 'top', 'tablet' ),
+					'margin-bottom' => astra_responsive_spacing( $margin, 'bottom', 'tablet' ),
+					'margin-left'   => astra_responsive_spacing( $margin, 'left', 'tablet' ),
+					'margin-right'  => astra_responsive_spacing( $margin, 'right', 'tablet' ),
+				),
+
+				// Link Color.
+				$selector . ' a'                         => array(
+					'color' => $link_color_tablet,
+				),
+
+				// Link Hover Color.
+				$selector . ' a:hover'                   => array(
+					'color' => $link_h_color_tablet,
+				),
+			);
+			$css_output .= astra_parse_css( $css_output_tablet, '', astra_get_tablet_breakpoint() );
+
+			// Mobile CSS.
+			$css_output_mobile = array(
+
+				$selector . ' .ast-builder-html-element' => array(
+					'color'     => $text_color_mobile,
+					// Typography.
+					'font-size' => astra_responsive_font( $font_size, 'mobile' ),
+				),
+
+				$selector                                => array(
+					// Margin CSS.
+					'margin-top'    => astra_responsive_spacing( $margin, 'top', 'mobile' ),
+					'margin-bottom' => astra_responsive_spacing( $margin, 'bottom', 'mobile' ),
+					'margin-left'   => astra_responsive_spacing( $margin, 'left', 'mobile' ),
+					'margin-right'  => astra_responsive_spacing( $margin, 'right', 'mobile' ),
+				),
+
+				// Link Color.
+				$selector . ' a'                         => array(
+					'color' => $link_color_mobile,
+				),
+
+				// Link Hover Color.
+				$selector . ' a:hover'                   => array(
+					'color' => $link_h_color_mobile,
+				),
+			);
+			$css_output .= astra_parse_css( $css_output_mobile, '', astra_get_mobile_breakpoint() );
+
+			$generated_css .= $css_output;
+
+			$generated_css .= Astra_Builder_Base_Dynamic_CSS::prepare_advanced_typography_css( $_section, $selector );
+
+			$generated_css .= Astra_Builder_Base_Dynamic_CSS::prepare_visibility_css( $_section, $selector, $display_prop );
+		}
+		if ( true === $html_css_flag ) {
+			$html_static_css = array(
+				'.ast-builder-html-element img.alignnone' => array(
+					'display' => 'inline-block',
+				),
+				'.ast-builder-html-element p:first-child' => array(
+					'margin-top' => '0',
+				),
+				'.ast-builder-html-element p:last-child'  => array(
+					'margin-bottom' => '0',
+				),
+				'.ast-header-break-point .main-header-bar .ast-builder-html-element' => array(
+					'line-height' => '1.85714285714286',
+				),
+			);
+			return astra_parse_css( $html_static_css ) . $generated_css;
+		}
+
+		return $generated_css;
+	}
+}
+
+/**
+ * Kicking this off by creating object of this class.
+ */
+
+new Astra_Html_Component_Dynamic_CSS();
diff --git a/inc/builder/type/base/dynamic-css/social/class-astra-social-component-dynamic-css.php b/inc/builder/type/base/dynamic-css/social/class-astra-social-component-dynamic-css.php
new file mode 100644
index 0000000..31d8044
--- /dev/null
+++ b/inc/builder/type/base/dynamic-css/social/class-astra-social-component-dynamic-css.php
@@ -0,0 +1,421 @@
+<?php
+/**
+ * Astra Social Component Dynamic CSS.
+ *
+ * @package     astra-builder
+ * @author      Astra
+ * @copyright   Copyright (c) 2020, Astra
+ * @link        https://wpastra.com/
+ * @since       3.0.0
+ */
+
+// No direct access, please.
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+/**
+ * Register Builder Dynamic CSS.
+ *
+ * @since 3.0.0
+ */
+class Astra_Social_Component_Dynamic_CSS {
+
+	/**
+	 * Dynamic CSS
+	 *
+	 * @param string $builder_type Builder Type.
+	 * @return String Generated dynamic CSS for Heading Colors.
+	 *
+	 * @since 3.0.0
+	 */
+	public static function astra_social_dynamic_css( $builder_type = 'header' ) {
+
+		$generated_css   = '';
+		$social_css_flag = false;
+
+		$number_of_social_icons = ( 'header' === $builder_type ) ? Astra_Builder_Helper::$num_of_header_social_icons : Astra_Builder_Helper::$num_of_footer_social_icons;
+
+		for ( $index = 1; $index <= $number_of_social_icons; $index++ ) {
+
+			if ( ! Astra_Builder_Helper::is_component_loaded( 'social-icons-' . $index, $builder_type ) ) {
+				continue;
+			}
+			$social_css_flag = true;
+			$selector        = '.ast-' . $builder_type . '-social-' . $index . '-wrap';
+			$_section        = ( 'header' === $builder_type ) ? 'section-hb-social-icons-' . $index : 'section-fb-social-icons-' . $index;
+
+			$icon_spacing    = astra_get_option( $builder_type . '-social-' . $index . '-space' );
+			$icon_bg_spacing = astra_get_option( $builder_type . '-social-' . $index . '-bg-space' );
+			$icon_size       = astra_get_option( $builder_type . '-social-' . $index . '-size' );
+			$icon_radius     = astra_get_option( $builder_type . '-social-' . $index . '-radius' );
+
+			$icon_spacing_desktop = ( isset( $icon_spacing['desktop'] ) && '' !== $icon_spacing['desktop'] ) ? (int) $icon_spacing['desktop'] / 2 : '';
+			$icon_spacing_tablet  = ( isset( $icon_spacing['tablet'] ) && '' !== $icon_spacing['tablet'] ) ? (int) $icon_spacing['tablet'] / 2 : '';
+			$icon_spacing_mobile  = ( isset( $icon_spacing['mobile'] ) && '' !== $icon_spacing['mobile'] ) ? (int) $icon_spacing['mobile'] / 2 : '';
+
+			$icon_size_desktop = ( isset( $icon_size['desktop'] ) && '' !== $icon_size['desktop'] ) ? (int) $icon_size['desktop'] : '';
+			$icon_size_tablet  = ( isset( $icon_size['tablet'] ) && '' !== $icon_size['tablet'] ) ? (int) $icon_size['tablet'] : '';
+			$icon_size_mobile  = ( isset( $icon_size['mobile'] ) && '' !== $icon_size['mobile'] ) ? (int) $icon_size['mobile'] : '';
+
+			$icon_radius     = ( isset( $icon_radius ) && '' !== $icon_radius ) ? (int) $icon_radius : '';
+			$icon_bg_spacing = ( isset( $icon_bg_spacing ) && '' !== $icon_bg_spacing ) ? (int) $icon_bg_spacing : '';
+
+			// Normal Responsive Colors.
+			$color_type                 = astra_get_option( $builder_type . '-social-' . $index . '-color-type' );
+			$social_icons_color_desktop = astra_get_prop( astra_get_option( $builder_type . '-social-' . $index . '-color' ), 'desktop' );
+			$social_icons_color_tablet  = astra_get_prop( astra_get_option( $builder_type . '-social-' . $index . '-color' ), 'tablet' );
+			$social_icons_color_mobile  = astra_get_prop( astra_get_option( $builder_type . '-social-' . $index . '-color' ), 'mobile' );
+
+			// Hover Responsive Colors.
+			$social_icons_h_color_desktop = astra_get_prop( astra_get_option( $builder_type . '-social-' . $index . '-h-color' ), 'desktop' );
+			$social_icons_h_color_tablet  = astra_get_prop( astra_get_option( $builder_type . '-social-' . $index . '-h-color' ), 'tablet' );
+			$social_icons_h_color_mobile  = astra_get_prop( astra_get_option( $builder_type . '-social-' . $index . '-h-color' ), 'mobile' );
+
+			// Normal Responsive Bg Colors.
+			$social_icons_bg_color_desktop = astra_get_prop( astra_get_option( $builder_type . '-social-' . $index . '-bg-color' ), 'desktop' );
+			$social_icons_bg_color_tablet  = astra_get_prop( astra_get_option( $builder_type . '-social-' . $index . '-bg-color' ), 'tablet' );
+			$social_icons_bg_color_mobile  = astra_get_prop( astra_get_option( $builder_type . '-social-' . $index . '-bg-color' ), 'mobile' );
+
+			// Hover Responsive Bg Colors.
+			$social_icons_h_bg_color_desktop = astra_get_prop( astra_get_option( $builder_type . '-social-' . $index . '-bg-h-color' ), 'desktop' );
+			$social_icons_h_bg_color_tablet  = astra_get_prop( astra_get_option( $builder_type . '-social-' . $index . '-bg-h-color' ), 'tablet' );
+			$social_icons_h_bg_color_mobile  = astra_get_prop( astra_get_option( $builder_type . '-social-' . $index . '-bg-h-color' ), 'mobile' );
+
+			// Normal Responsive Label Colors.
+			$social_icons_label_color_desktop = astra_get_prop( astra_get_option( $builder_type . '-social-' . $index . '-label-color' ), 'desktop' );
+			$social_icons_label_color_tablet  = astra_get_prop( astra_get_option( $builder_type . '-social-' . $index . '-label-color' ), 'tablet' );
+			$social_icons_label_color_mobile  = astra_get_prop( astra_get_option( $builder_type . '-social-' . $index . '-label-color' ), 'mobile' );
+
+			// Hover Responsive Label Colors.
+			$social_icons_label_h_color_desktop = astra_get_prop( astra_get_option( $builder_type . '-social-' . $index . '-label-h-color' ), 'desktop' );
+			$social_icons_label_h_color_tablet  = astra_get_prop( astra_get_option( $builder_type . '-social-' . $index . '-label-h-color' ), 'tablet' );
+			$social_icons_label_h_color_mobile  = astra_get_prop( astra_get_option( $builder_type . '-social-' . $index . '-label-h-color' ), 'mobile' );
+
+
+			$margin = astra_get_option( $_section . '-margin' );
+
+			/**
+			 * Social Icon CSS.
+			 */
+			$css_output_desktop = array(
+
+				$selector . ' .ast-builder-social-element' => array(
+					// Icon Spacing.
+					'margin-left'   => astra_get_css_value( $icon_spacing_desktop, 'px' ),
+					'margin-right'  => astra_get_css_value( $icon_spacing_desktop, 'px' ),
+
+					// Icon Background Space.
+					'padding'       => astra_get_css_value( $icon_bg_spacing, 'px' ),
+
+					// Icon Radius.
+					'border-radius' => astra_get_css_value( $icon_radius, 'px' ),
+				),
+				$selector . ' .ast-builder-social-element svg' => array(
+
+					// Icon Size.
+					'width'  => astra_get_css_value( $icon_size_desktop, 'px' ),
+					'height' => astra_get_css_value( $icon_size_desktop, 'px' ),
+				),
+				$selector . ' .ast-social-icon-image-wrap' => array(
+
+					// Icon Background Space.
+					'margin' => astra_get_css_value( $icon_bg_spacing, 'px' ),
+				),
+				$selector                                  => array(
+					// Margin CSS.
+					'margin-top'    => astra_responsive_spacing( $margin, 'top', 'desktop' ),
+					'margin-bottom' => astra_responsive_spacing( $margin, 'bottom', 'desktop' ),
+					'margin-left'   => astra_responsive_spacing( $margin, 'left', 'desktop' ),
+					'margin-right'  => astra_responsive_spacing( $margin, 'right', 'desktop' ),
+				),
+			);
+
+			if ( 'custom' === $color_type || is_customize_preview() ) {
+				$css_output_desktop[ $selector . ' .ast-social-color-type-custom svg' ]['fill'] = $social_icons_color_desktop;
+				$css_output_desktop[ $selector . ' .ast-builder-social-element' ]['background'] = $social_icons_bg_color_desktop;
+
+				$css_output_desktop[ $selector . ' .ast-social-color-type-custom .ast-builder-social-element:hover' ] = array(
+					// Hover.
+					'color'      => $social_icons_h_color_desktop,
+					'background' => $social_icons_h_bg_color_desktop,
+				);
+
+				$css_output_desktop[ $selector . ' .ast-social-color-type-custom .ast-builder-social-element:hover svg' ] = array(
+					'fill' => $social_icons_h_color_desktop,
+				);
+
+				if ( isset( $social_icons_label_color_desktop ) && ! empty( $social_icons_label_color_desktop ) ) {
+					$css_output_desktop[ $selector . ' .ast-social-color-type-custom .social-item-label' ]['color'] = $social_icons_label_color_desktop;
+				} else {
+					$css_output_desktop[ $selector . ' .ast-social-color-type-custom .social-item-label' ]['color'] = $social_icons_color_desktop;
+				}
+				if ( isset( $social_icons_label_h_color_desktop ) && ! empty( $social_icons_label_h_color_desktop ) ) {
+					$css_output_desktop[ $selector . ' .ast-builder-social-element:hover .social-item-label' ]['color'] = $social_icons_label_h_color_desktop;
+				} else {
+					$css_output_desktop[ $selector . ' .ast-builder-social-element:hover .social-item-label' ]['color'] = $social_icons_h_color_desktop;
+				}
+			}
+
+			/**
+			 * Social_icons CSS.
+			 */
+			$css_output_tablet = array(
+				$selector . ' .ast-builder-social-element svg' => array(
+
+					// Icon Size.
+					'width'  => astra_get_css_value( $icon_size_tablet, 'px' ),
+					'height' => astra_get_css_value( $icon_size_tablet, 'px' ),
+				),
+				$selector . ' .ast-builder-social-element' => array(
+					// Icon Spacing.
+					'margin-left'  => astra_get_css_value( $icon_spacing_tablet, 'px' ),
+					'margin-right' => astra_get_css_value( $icon_spacing_tablet, 'px' ),
+				),
+				$selector                                  => array(
+					// Margin CSS.
+					'margin-top'    => astra_responsive_spacing( $margin, 'top', 'tablet' ),
+					'margin-bottom' => astra_responsive_spacing( $margin, 'bottom', 'tablet' ),
+					'margin-left'   => astra_responsive_spacing( $margin, 'left', 'tablet' ),
+					'margin-right'  => astra_responsive_spacing( $margin, 'right', 'tablet' ),
+				),
+			);
+
+			if ( 'custom' === $color_type || is_customize_preview() ) {
+				$css_output_tablet[ $selector . ' .ast-social-color-type-custom svg' ]['fill'] = $social_icons_color_tablet;
+
+				$css_output_tablet[ $selector . ' .ast-social-color-type-custom .ast-builder-social-element' ]['background'] = $social_icons_bg_color_tablet;
+
+				$css_output_tablet[ $selector . ' .ast-social-color-type-custom .ast-builder-social-element:hover' ]     = array(
+					// Hover.
+					'color'      => $social_icons_h_color_tablet,
+					'background' => $social_icons_h_bg_color_tablet,
+				);
+				$css_output_tablet[ $selector . ' .ast-social-color-type-custom .ast-builder-social-element:hover svg' ] = array(
+					'fill' => $social_icons_h_color_tablet,
+				);
+
+				if ( isset( $social_icons_label_color_tablet ) && ! empty( $social_icons_label_color_tablet ) ) {
+					$css_output_tablet[ $selector . ' .ast-social-color-type-custom .social-item-label' ]['color'] = $social_icons_label_color_tablet;
+				} else {
+					$css_output_tablet[ $selector . ' .ast-social-color-type-custom .social-item-label' ]['color'] = $social_icons_color_tablet;
+				}
+				if ( isset( $social_icons_label_h_color_tablet ) && ! empty( $social_icons_label_h_color_tablet ) ) {
+					$css_output_tablet[ $selector . ' .ast-builder-social-element:hover .social-item-label' ]['color'] = $social_icons_label_h_color_tablet;
+				} else {
+					$css_output_tablet[ $selector . ' .ast-builder-social-element:hover .social-item-label' ]['color'] = $social_icons_h_color_tablet;
+				}
+			}
+
+			/**
+			 * Social_icons CSS.
+			 */
+			$css_output_mobile = array(
+				$selector . ' .ast-builder-social-element svg' => array(
+
+					// Icon Size.
+					'width'  => astra_get_css_value( $icon_size_mobile, 'px' ),
+					'height' => astra_get_css_value( $icon_size_mobile, 'px' ),
+				),
+				$selector . ' .ast-builder-social-element' => array(
+					// Icon Spacing.
+					'margin-left'  => astra_get_css_value( $icon_spacing_mobile, 'px' ),
+					'margin-right' => astra_get_css_value( $icon_spacing_mobile, 'px' ),
+				),
+				$selector                                  => array(
+					// Margin CSS.
+					'margin-top'    => astra_responsive_spacing( $margin, 'top', 'mobile' ),
+					'margin-bottom' => astra_responsive_spacing( $margin, 'bottom', 'mobile' ),
+					'margin-left'   => astra_responsive_spacing( $margin, 'left', 'mobile' ),
+					'margin-right'  => astra_responsive_spacing( $margin, 'right', 'mobile' ),
+				),
+			);
+
+			if ( 'custom' === $color_type || is_customize_preview() ) {
+				$css_output_mobile[ $selector . ' .ast-social-color-type-custom svg' ]['fill'] = $social_icons_color_mobile;
+
+				$css_output_mobile[ $selector . ' .ast-social-color-type-custom .ast-builder-social-element' ]['background'] = $social_icons_bg_color_mobile;
+
+				$css_output_mobile[ $selector . ' .ast-social-color-type-custom .ast-builder-social-element:hover' ]     = array(
+					// Hover.
+					'color'      => $social_icons_h_color_mobile,
+					'background' => $social_icons_h_bg_color_mobile,
+				);
+				$css_output_mobile[ $selector . ' .ast-social-color-type-custom .ast-builder-social-element:hover svg' ] = array(
+					'fill' => $social_icons_h_color_mobile,
+				);
+
+				if ( isset( $social_icons_label_color_mobile ) && ! empty( $social_icons_label_color_mobile ) ) {
+					$css_output_mobile[ $selector . ' .ast-social-color-type-custom .social-item-label' ]['color'] = $social_icons_label_color_mobile;
+				} else {
+					$css_output_mobile[ $selector . ' .ast-social-color-type-custom .social-item-label' ]['color'] = $social_icons_color_mobile;
+				}
+				if ( isset( $social_icons_label_h_color_mobile ) && ! empty( $social_icons_label_h_color_mobile ) ) {
+					$css_output_mobile[ $selector . ' .ast-builder-social-element:hover .social-item-label' ]['color'] = $social_icons_label_h_color_mobile;
+				} else {
+					$css_output_mobile[ $selector . ' .ast-builder-social-element:hover .social-item-label' ]['color'] = $social_icons_h_color_mobile;
+				}
+			}
+
+			if ( 'footer' === $builder_type ) {
+
+				// Footer Social Alignment CSS.
+				$alignment = astra_get_option( 'footer-social-' . $index . '-alignment' );
+
+				$desktop_alignment = ( isset( $alignment['desktop'] ) ) ? $alignment['desktop'] : '';
+				$tablet_alignment  = ( isset( $alignment['tablet'] ) ) ? $alignment['tablet'] : '';
+				$mobile_alignment  = ( isset( $alignment['mobile'] ) ) ? $alignment['mobile'] : '';
+
+				$css_output_desktop[ '[data-section="section-fb-social-icons-' . $index . '"] .footer-social-inner-wrap' ] = array(
+					'text-align' => $desktop_alignment,
+				);
+				$css_output_tablet[ '[data-section="section-fb-social-icons-' . $index . '"] .footer-social-inner-wrap' ]  = array(
+					'text-align' => $tablet_alignment,
+				);
+				$css_output_mobile[ '[data-section="section-fb-social-icons-' . $index . '"] .footer-social-inner-wrap' ]  = array(
+					'text-align' => $mobile_alignment,
+				);
+
+			}
+
+			/* Parse CSS from array() */
+			$css_output  = astra_parse_css( $css_output_desktop );
+			$css_output .= astra_parse_css( $css_output_tablet, '', astra_get_tablet_breakpoint() );
+			$css_output .= astra_parse_css( $css_output_mobile, '', astra_get_mobile_breakpoint() );
+
+			$css_output .= Astra_Builder_Base_Dynamic_CSS::prepare_advanced_typography_css( $_section, $selector );
+
+			$visibility_selector = '.ast-builder-layout-element[data-section="' . $_section . '"]';
+			$css_output         .= Astra_Builder_Base_Dynamic_CSS::prepare_visibility_css( $_section, $visibility_selector );
+
+			$generated_css .= $css_output;
+		}
+		if ( $social_css_flag ) {
+			return self::get_social_static_css() . $generated_css;
+		}
+
+		return $generated_css;
+	}
+
+	/**
+	 * Load Social default css.
+	 *
+	 * @since 3.0.0
+	 */
+	public static function get_social_static_css() {
+		$social_static_css = '
+		.ast-builder-social-element:hover {
+			color: #0274be;
+		}
+		.ast-social-stack-desktop .ast-builder-social-element,
+		.ast-social-stack-tablet .ast-builder-social-element,
+		.ast-social-stack-mobile .ast-builder-social-element {
+		  margin-top: 6px;
+		  margin-bottom: 6px;
+		}
+		.ast-social-color-type-official .ast-builder-social-element, .ast-social-color-type-official .social-item-label {
+			color: var(--color);
+			background-color: var(--background-color);
+		}
+		.header-social-inner-wrap.ast-social-color-type-official .ast-builder-social-element svg,
+		.footer-social-inner-wrap.ast-social-color-type-official .ast-builder-social-element svg {
+		  fill: currentColor;
+		}
+		.social-show-label-true .ast-builder-social-element {
+			width: auto;
+			padding: 0 0.4em;
+		}
+		[data-section^="section-fb-social-icons-"] .footer-social-inner-wrap {
+			text-align: center;
+		}
+		.ast-footer-social-wrap {
+			width: 100%;
+		}';
+		
+		if ( is_rtl() ) {
+			$social_static_css .= '.ast-footer-social-wrap .ast-builder-social-element:first-child {
+				margin-right: 0;
+			}
+			.ast-footer-social-wrap .ast-builder-social-element:last-child {
+				margin-left: 0;
+			}
+			.ast-header-social-wrap .ast-builder-social-element:first-child {
+				margin-right: 0;
+			}  
+			.ast-header-social-wrap .ast-builder-social-element:last-child {
+				margin-left: 0;
+			}
+			.ast-builder-social-element {
+				line-height: 1;
+				color: #3a3a3a;
+				background: transparent;
+				vertical-align: middle;
+				transition: all 0.01s;
+				margin-right: 6px;
+				margin-left: 6px;
+				justify-content: center;
+				align-items: center;
+			}
+			.ast-builder-social-element {
+				line-height: 1;
+				color: #3a3a3a;
+				background: transparent;
+				vertical-align: middle;
+				transition: all 0.01s;
+				margin-right: 6px;
+				margin-left: 6px;
+				justify-content: center;
+				align-items: center;
+			}
+			.ast-builder-social-element .social-item-label {
+				padding-right: 6px;
+			}';
+		} else {
+			$social_static_css .= '.ast-footer-social-wrap .ast-builder-social-element:first-child {
+				margin-left: 0;
+			}  
+			.ast-footer-social-wrap .ast-builder-social-element:last-child {
+				margin-right: 0;
+			}
+			.ast-header-social-wrap .ast-builder-social-element:first-child {
+				margin-left: 0;
+			}  
+			.ast-header-social-wrap .ast-builder-social-element:last-child {
+				margin-right: 0;
+			}
+			.ast-builder-social-element {
+				line-height: 1;
+				color: #3a3a3a;
+				background: transparent;
+				vertical-align: middle;
+				transition: all 0.01s;
+				margin-left: 6px;
+				margin-right: 6px;
+				justify-content: center;
+				align-items: center;
+			}
+			.ast-builder-social-element {
+				line-height: 1;
+				color: #3a3a3a;
+				background: transparent;
+				vertical-align: middle;
+				transition: all 0.01s;
+				margin-left: 6px;
+				margin-right: 6px;
+				justify-content: center;
+				align-items: center;
+			}
+			.ast-builder-social-element .social-item-label {
+				padding-left: 6px;
+			}';
+		}
+
+		return Astra_Enqueue_Scripts::trim_css( $social_static_css );
+	}
+}
+
+/**
+ * Kicking this off by creating object of this class.
+ */
+
+new Astra_Social_Component_Dynamic_CSS();
diff --git a/inc/builder/type/base/dynamic-css/widget/class-astra-widget-component-dynamic-css.php b/inc/builder/type/base/dynamic-css/widget/class-astra-widget-component-dynamic-css.php
new file mode 100644
index 0000000..243e25b
--- /dev/null
+++ b/inc/builder/type/base/dynamic-css/widget/class-astra-widget-component-dynamic-css.php
@@ -0,0 +1,174 @@
+<?php
+/**
+ * Astra Widget Component Dynamic CSS.
+ *
+ * @package     astra-builder
+ * @author      Astra
+ * @copyright   Copyright (c) 2020, Astra
+ * @link        https://wpastra.com/
+ * @since       3.0.0
+ */
+
+// No direct access, please.
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+/**
+ * Register Builder Dynamic CSS.
+ *
+ * @since 3.0.0
+ */
+class Astra_Widget_Component_Dynamic_CSS {
+
+	/**
+	 * Dynamic CSS
+	 *
+	 * @param string $builder_type Builder Type.
+	 * @return String Generated dynamic CSS for Heading Colors.
+	 *
+	 * @since 3.0.0
+	 */
+	public static function astra_widget_dynamic_css( $builder_type = 'header' ) {
+
+		$generated_css = '';
+
+		$no_of_widgets = 'header' === $builder_type ? Astra_Builder_Helper::$num_of_header_widgets : Astra_Builder_Helper::$num_of_footer_widgets;
+
+		for ( $index = 1; $index <= $no_of_widgets; $index++ ) {
+
+			if ( ! Astra_Builder_Helper::is_component_loaded( 'widget-' . $index, $builder_type ) ) {
+				continue;
+			}
+
+			$_section = ( ! astra_has_widgets_block_editor() ) ? 'sidebar-widgets-' . $builder_type . '-widget-' . $index : 'astra-sidebar-widgets-' . $builder_type . '-widget-' . $index;
+
+			$selector = '.' . $builder_type . '-widget-area[data-section="sidebar-widgets-' . $builder_type . '-widget-' . $index . '"]';
+
+			$margin = astra_get_option( $_section . '-margin' );
+
+			$title_font_size   = astra_get_option( $builder_type . '-widget-' . $index . '-font-size' );
+			$content_font_size = astra_get_option( $builder_type . '-widget-' . $index . '-content-font-size' );
+
+			$title_color_desktop = astra_get_prop( astra_get_option( $builder_type . '-widget-' . $index . '-title-color' ), 'desktop' );
+			$title_color_tablet  = astra_get_prop( astra_get_option( $builder_type . '-widget-' . $index . '-title-color' ), 'tablet' );
+			$title_color_mobile  = astra_get_prop( astra_get_option( $builder_type . '-widget-' . $index . '-title-color' ), 'mobile' );
+
+			$text_color_desktop = astra_get_prop( astra_get_option( $builder_type . '-widget-' . $index . '-color' ), 'desktop' );
+			$text_color_tablet  = astra_get_prop( astra_get_option( $builder_type . '-widget-' . $index . '-color' ), 'tablet' );
+			$text_color_mobile  = astra_get_prop( astra_get_option( $builder_type . '-widget-' . $index . '-color' ), 'mobile' );
+
+			$link_color_desktop = astra_get_prop( astra_get_option( $builder_type . '-widget-' . $index . '-link-color' ), 'desktop' );
+			$link_color_tablet  = astra_get_prop( astra_get_option( $builder_type . '-widget-' . $index . '-link-color' ), 'tablet' );
+			$link_color_mobile  = astra_get_prop( astra_get_option( $builder_type . '-widget-' . $index . '-link-color' ), 'mobile' );
+
+			$link_h_color_desktop = astra_get_prop( astra_get_option( $builder_type . '-widget-' . $index . '-link-h-color' ), 'desktop' );
+			$link_h_color_tablet  = astra_get_prop( astra_get_option( $builder_type . '-widget-' . $index . '-link-h-color' ), 'tablet' );
+			$link_h_color_mobile  = astra_get_prop( astra_get_option( $builder_type . '-widget-' . $index . '-link-h-color' ), 'mobile' );
+
+			/**
+			 * Copyright CSS.
+			 */
+			if ( Astra_Builder_Helper::apply_flex_based_css() ) {
+				$builder_widget_selector = $selector . '.' . $builder_type . '-widget-area-inner';
+			} else {
+				$builder_widget_selector = $selector . ' .' . $builder_type . '-widget-area-inner';
+			}
+			$css_output_desktop = array(
+				$builder_widget_selector              => array(
+					'color'     => $text_color_desktop,
+					// Typography.
+					'font-size' => astra_responsive_font( $content_font_size, 'desktop' ),
+				),
+				$builder_widget_selector . ' a'       => array(
+					'color' => $link_color_desktop,
+				),
+				$builder_widget_selector . ' a:hover' => array(
+					'color' => $link_h_color_desktop,
+				),
+				$selector . ' .widget-title'          => array(
+					'color'     => $title_color_desktop,
+					// Typography.
+					'font-size' => astra_responsive_font( $title_font_size, 'desktop' ),
+				),
+				$selector                             => array(
+					// Margin CSS.
+					'margin-top'    => astra_responsive_spacing( $margin, 'top', 'desktop' ),
+					'margin-bottom' => astra_responsive_spacing( $margin, 'bottom', 'desktop' ),
+					'margin-left'   => astra_responsive_spacing( $margin, 'left', 'desktop' ),
+					'margin-right'  => astra_responsive_spacing( $margin, 'right', 'desktop' ),
+				),
+			);
+
+			$css_output_tablet = array(
+				$builder_widget_selector              => array(
+					'color'     => $text_color_tablet,
+					// Typography.
+					'font-size' => astra_responsive_font( $content_font_size, 'tablet' ),
+				),
+				$selector . ' .widget-title'          => array(
+					'color'     => $title_color_tablet,
+					// Typography.
+					'font-size' => astra_responsive_font( $title_font_size, 'tablet' ),
+				),
+				$builder_widget_selector . ' a'       => array(
+					'color' => $link_color_tablet,
+				),
+				$builder_widget_selector . ' a:hover' => array(
+					'color' => $link_h_color_tablet,
+				),
+				$selector                             => array(
+					// Margin CSS.
+					'margin-top'    => astra_responsive_spacing( $margin, 'top', 'tablet' ),
+					'margin-bottom' => astra_responsive_spacing( $margin, 'bottom', 'tablet' ),
+					'margin-left'   => astra_responsive_spacing( $margin, 'left', 'tablet' ),
+					'margin-right'  => astra_responsive_spacing( $margin, 'right', 'tablet' ),
+				),
+			);
+
+			$css_output_mobile = array(
+				$builder_widget_selector              => array(
+					'color'     => $text_color_mobile,
+					// Typography.
+					'font-size' => astra_responsive_font( $content_font_size, 'mobile' ),
+				),
+				$selector . ' .widget-title'          => array(
+					'color'     => $title_color_mobile,
+					// Typography.
+					'font-size' => astra_responsive_font( $title_font_size, 'mobile' ),
+				),
+				$builder_widget_selector . ' a'       => array(
+					'color' => $link_color_mobile,
+				),
+				$builder_widget_selector . ' a:hover' => array(
+					'color' => $link_h_color_mobile,
+				),
+				$selector                             => array(
+					// Margin CSS.
+					'margin-top'    => astra_responsive_spacing( $margin, 'top', 'mobile' ),
+					'margin-bottom' => astra_responsive_spacing( $margin, 'bottom', 'mobile' ),
+					'margin-left'   => astra_responsive_spacing( $margin, 'left', 'mobile' ),
+					'margin-right'  => astra_responsive_spacing( $margin, 'right', 'mobile' ),
+				),
+			);
+
+			/* Parse CSS from array() */
+			$css_output  = astra_parse_css( $css_output_desktop );
+			$css_output .= astra_parse_css( $css_output_tablet, '', astra_get_tablet_breakpoint() );
+			$css_output .= astra_parse_css( $css_output_mobile, '', astra_get_mobile_breakpoint() );
+
+			$css_output .= Astra_Builder_Base_Dynamic_CSS::prepare_visibility_css( $_section, $selector, 'block' );
+
+			$generated_css .= $css_output;
+
+		}
+
+		return $generated_css;
+	}
+}
+
+/**
+ * Kicking this off by creating object of this class.
+ */
+
+new Astra_Widget_Component_Dynamic_CSS();