File Editor

Directories:

Files:

Create New File

Edit File: Background.php

<?php
/**
 * Background helper Class.
 *
 * @package Divi
 * @subpackage Builder
 */

if ( ! defined( 'ABSPATH' ) ) {
	die( 'Direct access forbidden.' );
}

/**
 * Background helper methods.
 *
 * Intended for module that needs to extend module background mechanism with few modification
 * (eg. post slider which needs to apply module background on individual slide that has featured
 * image).
 *
 * @since 4.3.3
 * @since 4.6.0 Add sticky style support
 * @since 4.15.0 Add pattern/mask style support.
 *
 * Class ET_Builder_Module_Helper_Background
 */
class ET_Builder_Module_Helper_Background {
	/**
	 * Returns instance of the class.
	 *
	 * @return ET_Builder_Module_Helper_Background
	 */
	public static function instance() {
		static $instance;

return $instance ? $instance : $instance = new self();
	}

/**
	 * Get prop name alias. Some background settings (eg. button's gradient background enable) might
	 * use slightly different prop name to store background config;
	 *
	 * @since 4.6.0
	 *
	 * @param array  $aliases   Aliases.
	 * @param string $prop_name Prop name.
	 *
	 * @return string
	 */
	public function get_prop_name_alias( $aliases = array(), $prop_name = '' ) {
		// If no aliases given, simply return the prop name because it has no alias.
		if ( empty( $aliases ) ) {
			return $prop_name;
		}

return isset( $aliases[ $prop_name ] ) ? $aliases[ $prop_name ] : $prop_name;
	}

/**
	 * Get gradient properties for hover mode
	 *
	 * @since 4.3.3
	 * @since 4.6.0 add capability to look for sticky style's gradient
	 * @since 4.16.0   Uses the `_stops` field introduced in the Gradient Builder update.
	 *
	 * @param string $mode                        Mode name.
	 * @param array  $props                       Module's props.
	 * @param string $base_prop_name              Background base prop name.
	 * @param array  $gradient_properties_desktop {
	 *     @type string $mode
	 *     @type string $stops
	 *     @type string $type
	 *     @type string $direction
	 *     @type string $radial_direction
	 *     @type string $color_start
	 *     @type string $color_end
	 *     @type string $start_position
	 *     @type string $end_position
	 * }
	 *
	 * @return array|false
	 */
	public function get_gradient_mode_properties( $mode, $props, $base_prop_name, $gradient_properties_desktop = array() ) {
		$helper = et_builder_get_helper( $mode );

if ( ! $mode ) {
			return false;
		}

// Desktop value as default.
		$gradient_repeat_desktop           = et_pb_responsive_options()->get_any_value( $props, "{$base_prop_name}_color_repeat_image", '', true );
		$gradient_type_desktop             = et_()->array_get( $gradient_properties_desktop, 'type', '' );
		$gradient_direction_desktop        = et_()->array_get( $gradient_properties_desktop, 'direction', '' );
		$gradient_radial_direction_desktop = et_()->array_get( $gradient_properties_desktop, 'radial_direction', '' );
		$gradient_stops_desktop            = et_()->array_get( $gradient_properties_desktop, 'stops', '' );
		$gradient_unit_desktop             = et_()->array_get( $gradient_properties_desktop, 'unit', '' );
		$gradient_overlays_image_desktop   = et_pb_responsive_options()->get_any_value( $props, "{$base_prop_name}_color_gradient_overlays_image", '', true );

$gradient_color_start_desktop    = et_()->array_get( $gradient_properties_desktop, 'color_start', '' );
		$gradient_color_end_desktop      = et_()->array_get( $gradient_properties_desktop, 'color_end', '' );
		$gradient_start_position_desktop = et_()->array_get( $gradient_properties_desktop, 'start_position', '' );
		$gradient_end_position_desktop   = et_()->array_get( $gradient_properties_desktop, 'end_position', '' );

// Mode value.
		$gradient_repeat_mode           = $helper->get_raw_value( "{$base_prop_name}_color_repeat_image", $props, $gradient_repeat_desktop );
		$gradient_type_mode             = $helper->get_raw_value( "{$base_prop_name}_color_gradient_type", $props, $gradient_type_desktop );
		$gradient_direction_mode        = $helper->get_raw_value( "{$base_prop_name}_color_gradient_direction", $props, $gradient_direction_desktop );
		$gradient_direction_radial_mode = $helper->get_raw_value( "{$base_prop_name}_color_gradient_direction_radial", $props, $gradient_radial_direction_desktop );
		$gradient_stops_mode            = $helper->get_raw_value( "{$base_prop_name}_color_gradient_stops", $props, $gradient_stops_desktop );
		$gradient_unit_mode             = $helper->get_raw_value( "{$base_prop_name}_color_gradient_unit", $props, $gradient_unit_desktop );
		$gradient_overlays_image_mode   = $helper->get_raw_value( "{$base_prop_name}_color_gradient_overlays_image", $props, $gradient_overlays_image_desktop );

$gradient_start_mode          = $helper->get_raw_value( "{$base_prop_name}_color_gradient_start", $props, $gradient_color_start_desktop );
		$gradient_end_mode            = $helper->get_raw_value( "{$base_prop_name}_color_gradient_end", $props, $gradient_color_end_desktop );
		$gradient_start_position_mode = $helper->get_raw_value( "{$base_prop_name}_color_gradient_start_position", $props, $gradient_start_position_desktop );
		$gradient_end_position_mode   = $helper->get_raw_value( "{$base_prop_name}_color_gradient_end_position", $props, $gradient_end_position_desktop );

$color_start_value = '' !== $gradient_start_mode ? $gradient_start_mode : $gradient_color_start_desktop;
		$color_end_value   = '' !== $gradient_end_mode ? $gradient_end_mode : $gradient_color_end_desktop;

return array(
			'repeat'           => '' !== $gradient_repeat_mode ? $gradient_repeat_mode : $gradient_repeat_desktop,
			'type'             => '' !== $gradient_type_mode ? $gradient_type_mode : $gradient_type_desktop,
			'direction'        => '' !== $gradient_direction_mode ? $gradient_direction_mode : $gradient_direction_desktop,
			'radial_direction' => '' !== $gradient_direction_radial_mode ? $gradient_direction_radial_mode : $gradient_radial_direction_desktop,
			'stops'            => '' !== $gradient_stops_mode ? $gradient_stops_mode : $gradient_stops_desktop,
			'color_start'      => '' !== $gradient_start_mode ? $gradient_start_mode : $gradient_color_start_desktop,
			'color_end'        => '' !== $gradient_end_mode ? $gradient_end_mode : $gradient_color_end_desktop,
			'start_position'   => '' !== $gradient_start_position_mode ? $gradient_start_position_mode : $gradient_start_position_desktop,
			'end_position'     => '' !== $gradient_end_position_mode ? $gradient_end_position_mode : $gradient_end_position_desktop,
			'unit'             => '' !== $gradient_unit_mode ? $gradient_unit_mode : $gradient_stops_desktop,
		);
	}

/**
	 * Get gradient properties based on given props
	 *
	 * @since 4.3.3
	 * @since 4.16.0   Uses the `_stops` field introduced in the Gradient Builder update.
	 *
	 * @param array  $props          Module's props.
	 * @param string $base_prop_name Background base prop name.
	 * @param string $suffix         Background base prop name's suffix.
	 *
	 * @return array
	 */
	public function get_gradient_properties( $props, $base_prop_name, $suffix ) {
		return array(
			'repeat'           => et_pb_responsive_options()->get_any_value( $props, "{$base_prop_name}_color_gradient_repeat{$suffix}", '', true ),
			'type'             => et_pb_responsive_options()->get_any_value( $props, "{$base_prop_name}_color_gradient_type{$suffix}", '', true ),
			'direction'        => et_pb_responsive_options()->get_any_value( $props, "{$base_prop_name}_color_gradient_direction{$suffix}", '', true ),
			'radial_direction' => et_pb_responsive_options()->get_any_value( $props, "{$base_prop_name}_color_gradient_direction_radial{$suffix}", '', true ),
			'stops'            => et_pb_responsive_options()->get_any_value( $props, "{$base_prop_name}_color_gradient_stops{$suffix}", '', true ),
			'unit'             => et_pb_responsive_options()->get_any_value( $props, "{$base_prop_name}_color_gradient_unit{$suffix}", '', true ),
			'color_start'      => et_pb_responsive_options()->get_any_value( $props, "{$base_prop_name}_color_gradient_start{$suffix}", '', true ),
			'color_end'        => et_pb_responsive_options()->get_any_value( $props, "{$base_prop_name}_color_gradient_end{$suffix}", '', true ),
			'start_position'   => et_pb_responsive_options()->get_any_value( $props, "{$base_prop_name}_color_gradient_start_position{$suffix}", '', true ),
			'end_position'     => et_pb_responsive_options()->get_any_value( $props, "{$base_prop_name}_color_gradient_end_position{$suffix}", '', true ),
		);
	}

/**
	 * Get background gradient style based on properties given
	 *
	 * @since 4.3.3
	 * @since 4.16.0   Uses the `_stops` field introduced in the Gradient Builder update.
	 *
	 * @param array $args {
	 *     @type string $repeat           Whether the gradient stops repeat.
	 *     @type string $type             Linear or radial gradient.
	 *     @type string $direction        The gradient line's angle of direction.
	 *     @type string $radial_direction The position of the gradient.
	 *     @type string $stops            Brace-delimited list of color stops.
	 *     @type string $color_start      Deprecated.
	 *     @type string $color_end        Deprecated.
	 *     @type string $start_position   Deprecated.
	 *     @type string $end_position     Deprecated.
	 * }
	 *
	 * @return string
	 */
	public function get_gradient_style( $args ) {
		$default_gradient = array(
			'repeat'           => ET_Global_Settings::get_value( 'all_background_gradient_repeat' ),
			'type'             => ET_Global_Settings::get_value( 'all_background_gradient_type' ),
			'direction'        => ET_Global_Settings::get_value( 'all_background_gradient_direction' ),
			'radial_direction' => ET_Global_Settings::get_value( 'all_background_gradient_direction_radial' ),
			'stops'            => ET_Global_Settings::get_value( 'all_background_gradient_stops' ),
		);

$defaults = apply_filters( 'et_pb_default_gradient', $default_gradient );
		$args     = wp_parse_args( array_filter( $args ), $defaults );
		$stops    = str_replace( '|', ', ', $args['stops'] );

$stops = $this->get_color_value( $stops );

switch ( $args['type'] ) {
			case 'conic':
				$type      = 'conic';
				$direction = "from {$args['direction']} at {$args['radial_direction']}";
				break;
			case 'elliptical':
				$type      = 'radial';
				$direction = "ellipse at {$args['radial_direction']}";
				break;
			case 'radial':
			case 'circular':
				$type      = 'radial';
				$direction = "circle at {$args['radial_direction']}";
				break;
			case 'linear':
			default:
				$type      = 'linear';
				$direction = $args['direction'];
		}

// Apply gradient repeat (if set).
		if ( 'on' === $args['repeat'] ) {
			$type = "repeating-{$type}";
		}

return esc_html(
			"{$type}-gradient( {$direction}, {$stops} )"
		);
	}

/**
	 * Get individual background image style
	 *
	 * @since 4.3.3
	 * @since 4.15.0 deprecated
	 *
	 * @deprecated Use {@see get_attr_value} instead.
	 *
	 * @param string $attr                 Background attribute name.
	 * @param string $base_prop_name       Base background prop name.
	 * @param string $suffix               Attribute name suffix.
	 * @param array  $props                Module props.
	 * @param array  $fields_definition    Module's fields definition.
	 * @param bool   $is_prev_image_active Whether previous background image is active or not.
	 *
	 * @return string
	 */
	public function get_image_style( $attr, $base_prop_name, $suffix = '', $props = array(), $fields_definition = array(), $is_prev_image_active = true ) {
		return $this->get_attr_value( $attr, $base_prop_name, $suffix = '', $props, $fields_definition, $is_prev_image_active );
	}

/**
	 * Get individual default value.
	 *
	 * @since 4.15.0
	 *
	 * @param string $attr                  Background attribute name.
	 * @param string $base_prop_name        Base background prop name.
	 * @param array  $fields_definition     Module's fields definition.
	 * @param bool   $is_prev_device_active Whether previous background image is active or not.
	 *
	 * @return string
	 */
	public function get_attr_default( $attr, $base_prop_name, $fields_definition = array(), $is_prev_device_active = true ) {
		$default = isset( $fields_definition[ "{$base_prop_name}_{$attr}" ]['default'] )
			? $fields_definition[ "{$base_prop_name}_{$attr}" ]['default']
			: '';

return $is_prev_device_active ? $default : '';
	}

/**
	 * Get individual background attribute value.
	 *
	 * @since 4.15.0
	 *
	 * @param string $attr                 Background attribute name.
	 * @param string $base_prop_name       Base background prop name.
	 * @param string $suffix               Attribute name suffix.
	 * @param array  $props                Module props.
	 * @param array  $fields_definition    Module's fields definition.
	 * @param bool   $is_prev_device_active  Whether is active in previous device or not.
	 *
	 * @return string
	 */
	public function get_attr_value( $attr, $base_prop_name, $suffix = '', $props = array(), $fields_definition = array(), $is_prev_device_active = true ) {
		$default = $this->get_attr_default( $attr, $base_prop_name, $fields_definition, $is_prev_device_active );

return et_pb_responsive_options()->get_any_value( $props, "{$base_prop_name}_{$attr}{$suffix}", $default, ! $is_prev_device_active );
	}

/**
	 * Return CSS for Transform State.
	 *
	 * @since 4.15.0
	 *
	 * @param string $values Transform states.
	 * @param string $state  Query state, valid options: horizontal | vertical | rotate | invert.
	 *
	 * @return string
	 */
	public function get_transform_state( $values, $state ) {
		$flip = '' !== $values ? explode( '|', $values ) : array();

switch ( $state ) {
			case 'horizontal':
				$result = in_array( 'flip_horizontal', $flip, true );
				break;
			case 'invert':
				$result = in_array( 'invert', $flip, true );
				break;
			case 'rotate':
				$result = in_array( 'rotate_90_degree', $flip, true );
				break;
			case 'vertical':
				$result = in_array( 'flip_vertical', $flip, true );
				break;
			default:
				$result = false;
		}

return $result;
	}

/**
	 * Return CSS for Transform State.
	 *
	 * We use `scale` here because CSS Transform's `rotateX`/`rotateY` trigger a 10+
	 * year old Safari bug that hides rotated background images (including SVGs).
	 *
	 * @see https://bugs.webkit.org/show_bug.cgi?id=61824
	 *
	 * @since 4.15.0
	 *
	 * @param bool $horizontal Horizontal state.
	 * @param bool $vertical   Vertical state.
	 *
	 * @return string
	 */
	public function get_transform_css( $horizontal, $vertical ) {
		$flip_h = $horizontal ? '-1' : '1';
		$flip_v = $vertical ? '-1' : '1';

return "scale($flip_h, $flip_v)";
	}

/**
	 * Helper function to return CSS for BackgroundPosition.
	 *
	 * @since 4.15.0
	 *
	 * @param string $position Position.
	 * @param string $horizontal_offset Horizontal Offset.
	 * @param string $vertical_offset Vertical Offset.
	 * @param string $position_default Default Position.
	 *
	 * @return array
	 */
	public function get_background_position_css( $position, $horizontal_offset, $vertical_offset, $position_default = '' ) {
		$position_value          = empty( $position ) ? $position_default : $position;
		$horizontal_offset_value = et_builder_process_range_value( $horizontal_offset );
		$vertical_offset_value   = et_builder_process_range_value( $vertical_offset );
		$position_array          = explode( '_', $position_value );
		$output                  = array();

// Vertical Offset.
		if ( isset( $position_array[0] ) ) {
			switch ( $position_array[0] ) {
				case 'top':
					// Top doesn't need suffix when value is 0.
					$output['position-y'] = 0 === (int) $vertical_offset
						? $position_array[0]
						: "{$position_array[0]} {$vertical_offset_value}";
					break;
				case 'bottom':
					$output['position-y'] = "{$position_array[0]} {$vertical_offset_value}";
					break;
				case 'center':
				default:
					$output['position-y'] = 'center';
			}
		}

// Horizontal Offset.
		if ( isset( $position_array[1] ) ) {
			switch ( $position_array[1] ) {
				case 'left':
					// Left doesn't need suffix when value is 0.
					$output['position-x'] = 0 === (int) $horizontal_offset
						? $position_array[1]
						: "{$position_array[1]} {$horizontal_offset_value}";
					break;
				case 'right':
					$output['position-x'] = "{$position_array[1]} {$horizontal_offset_value}";
					break;
				case 'center':
				default:
					$output['position-x'] = 'center';
			}
		} else {
			// When $position_array[1] is absence.
			$output['position-x'] = 'center';
		}

// Prepare output for the CSS value.
		$output['position'] = 'center' === $output['position-x'] && 'center' === $output['position-y']
			? 'center'
			: "{$output['position-x']} {$output['position-y']}";

return $output;
	}

/**
	 * Helper function to return CSS for BackgroundSize.
	 *
	 * @since 4.15.0
	 *
	 * @param string $size Size.
	 * @param string $width Width.
	 * @param string $height Vertical Offset.
	 * @param string $size_default Default Size.
	 * @param string $type Type, use to handle special case.
	 *
	 * @return array
	 */
	public function get_background_size_css( $size, $width, $height, $size_default = '', $type = '' ) {
		$size_value = '' === $size ? $size_default : $size;
		$output     = array();

switch ( $size_value ) {
			case 'custom':
				$is_width_auto  = 'auto' === $width || '' === $width || 0 === (int) $width;
				$is_height_auto = 'auto' === $height || '' === $height || 0 === (int) $height;
				$width_value    = $is_width_auto ? 'auto' : et_builder_process_range_value( $width );
				$height_value   = $is_height_auto ? 'auto' : et_builder_process_range_value( $height );

if ( $is_width_auto && $is_height_auto ) {
					$output['size'] = 'initial';
				} else {
					$output['size'] = "{$width_value} {$height_value}";
				}
				break;
			case 'stretch':
				// For mask, increase 2px to resolve sub-pixel rendering issue in Chrome/Safari.
				$output['size'] = 'mask' === $type
					? 'calc(100% + 2px) calc(100% + 2px)'
					: '100% 100%';
				break;
			case 'cover':
			case 'contain':
			case 'initial':
				$output['size'] = $size_value;
				break;
			default:
				$output['size'] = '';
		}

return $output;
	}

/**
	 * Get background UI option's style based on given props and prop name
	 *
	 * @since 4.3.3
	 * @since 4.6.0 Add sticky style support.
	 * @since 4.15.0 Add pattern/mask style support.
	 *
	 * @todo Further simplify this method; Break it down into more encapsulated methods
	 *
	 * @param array $args {
	 *     @type string $base_prop_name
	 *     @type array  $props
	 *     @type string $important
	 *     @type array  $fields_Definition
	 *     @type string $selector
	 *     @type string $selector_hover
	 *     @type string $selector_sticky
	 *     @type number $priority
	 *     @type string $function_name
	 *     @type bool   $has_background_color_toggle
	 *     @type bool   $use_background_color
	 *     @type bool   $use_background_color_gradient
	 *     @type bool   $use_background_image
	 *     @type bool   $use_background_video
	 *     @type bool   $use_background_pattern
	 *     @type bool   $use_background_mask
	 *     @type bool   $use_background_color_reset
	 *     @type bool   $use_background_image_parallax
	 * }
	 */
	public function get_background_style( $args = array() ) {
		// Default settings.
		$defaults = array(
			'base_prop_name'                => 'background',
			'props'                         => array(),
			'important'                     => '',
			'fields_definition'             => array(),
			'selector'                      => '',
			'selector_hover'                => '',
			'selector_sticky'               => '',
			'selector_pattern'              => '',
			'selector_mask'                 => '',
			'priority'                      => '',
			'function_name'                 => '',
			'has_background_color_toggle'   => false,
			'use_background_color'          => true,
			'use_background_color_gradient' => true,
			'use_background_image'          => true,
			'use_background_video'          => true,
			'use_background_color_reset'    => true,
			'use_background_pattern'        => true,
			'use_background_mask'           => true,
			'use_background_image_parallax' => true,
			'prop_name_aliases'             => array(),
		);

// Parse arguments.
		$args = wp_parse_args( $args, $defaults );

// Break argument into variables.
		$base_prop_name    = $args['base_prop_name'];
		$props             = $args['props'];
		$important         = $args['important'];
		$fields_definition = $args['fields_definition'];
		$selector          = $args['selector'];
		$selector_pattern  = $args['selector_pattern'];
		$selector_mask     = $args['selector_mask'];
		$priority          = $args['priority'];
		$function_name     = $args['function_name'];

// Possible values for use_background_* variables are true, false, or 'fields_only'.
		$has_color_toggle_options = $args['has_background_color_toggle'];
		$use_gradient_options     = $args['use_background_color_gradient'];
		$use_image_options        = $args['use_background_image'];
		$use_color_options        = $args['use_background_color'];
		$use_color_reset_options  = $args['use_background_color_reset'];
		$use_pattern_options      = $args['use_background_pattern'];
		$use_mask_options         = $args['use_background_mask'];

// Prop name aliases. Some background element uses different prop name (eg. button background).
		$prop_name_aliases = $args['prop_name_aliases'];

// Save processed background. These will be compared with the smaller device background
		// processed value to avoid rendering the same styles.
		$processed_color                 = '';
		$gradient_properties_desktop     = array();
		$gradient_overlays_image_desktop = 'off';

// Store background images status because the process is extensive.
		$image_status                   = $this->get_default_mode_status();
		$processed_image_size_style     = array( 'size' => $this->get_attr_default( 'size', $base_prop_name, $fields_definition ) );
		$processed_image                = '';
		$processed_image_position_style = '';
		$processed_image_blend_style    = '';

// Background pattern.
		$pattern_base_prop_name            = "{$base_prop_name}_pattern";
		$pattern_status                    = $this->get_default_mode_status();
		$processed_pattern_transform_style = '';
		$processed_pattern_svg             = '';
		$processed_pattern_size_style      = array( 'size' => $this->get_attr_default( 'size', $pattern_base_prop_name, $fields_definition ) );
		$processed_pattern_position_style  = '';

// Background mask.
		$mask_base_prop_name            = "{$base_prop_name}_mask";
		$mask_status                    = $this->get_default_mode_status();
		$processed_mask_transform_style = '';
		$processed_mask_svg             = '';
		$processed_mask_size_style      = array( 'size' => $this->get_attr_default( 'size', $mask_base_prop_name, $fields_definition ) );
		$processed_mask_position_style  = '';

// Helper.
		$feature_manager = ET_Builder_Module_Features::instance();
		$responsive      = et_pb_responsive_options();

/**
		 * Module Component.
		 *
		 * @var ET_Builder_Element $module
		 */
		$module = isset( $args['module'] ) ? $args['module'] : ET_Builder_Element::get_module( $function_name );

// Bail, there is nothing to process.
		// Happens when et_pb_posts module don't find a $post to process.
		if ( is_string( $module ) || ! ( $module && $module instanceof ET_Builder_Element ) ) {
			return;
		}

// We got the module, get unprocessed attrs.
		$attrs_unprocessed = $module->get_attrs_unprocessed();

// Get dynamic attributes.
		$dynamic_attributes = $this->_get_enabled_dynamic_attributes( $props );

// Parsed prop name, in case it has aliases.
		$base_prop_name_parsed = $this->get_prop_name_alias( $prop_name_aliases, $base_prop_name );

// Background Desktop, Tablet, and Phone.
		foreach ( $responsive->get_modes() as $device ) {
			$is_desktop = 'desktop' === $device;
			$suffix     = ! $is_desktop ? "_{$device}" : '';
			$style      = '';

$style_pattern = '';
			$style_mask    = '';

// Conditionals.
			$has_gradient           = false;
			$has_image              = false;
			$has_gradient_and_image = false;
			$is_gradient_disabled   = false;
			$is_image_disabled      = false;

$is_enabled = $feature_manager->get(
			// Is background responsive enabled for $device.
			// keys: bared, baret, barep.
				'bare' . $device[0],
				function() use ( $responsive, $base_prop_name_parsed, $props ) {
					return $responsive->is_responsive_enabled( $props, $base_prop_name_parsed );
				}
			);

// Ensure responsive settings is enabled on mobile.
			if ( ! $is_desktop && ! $is_enabled ) {
				continue;
			}

// Styles output.
			$image_style             = '';
			$color_style             = '';
			$images                  = array();
			$gradient_overlays_image = 'off';

$image_size_style        = '';
			$image_position_style    = '';
			$pattern_transform_style = '';
			$pattern_style_svg       = '';
			$pattern_size_style      = '';
			$pattern_position_style  = '';
			$mask_transform_style    = '';
			$mask_style_svg          = '';
			$mask_size_style         = '';
			$mask_position_style     = '';

// A. Background Gradient.
			if ( $use_gradient_options && 'fields_only' !== $use_gradient_options ) {
				$use_gradient = $responsive->get_inheritance_background_value(
					$props,
					$this->get_prop_name_alias( $prop_name_aliases, "use_{$base_prop_name}_color_gradient" ),
					$device,
					$base_prop_name,
					$fields_definition
				);

// 1. Ensure gradient color is active.
				if ( 'on' === $use_gradient ) {
					$gradient_overlays_image = $responsive->get_any_value( $props, "{$base_prop_name}_color_gradient_overlays_image{$suffix}", '', true );
					$gradient_properties     = $this->get_gradient_properties( $props, $base_prop_name, $suffix );

// Will be used as default of Gradient hover.
					if ( $is_desktop ) {
						$gradient_properties_desktop     = $gradient_properties;
						$gradient_overlays_image_desktop = $gradient_overlays_image;
					}

// Save background gradient into background images list.
					$background_gradient = $this->get_gradient_style( $gradient_properties );
					$images[]            = $background_gradient;

// Flag to inform Background Color if current module has Gradient.
					$has_gradient = true;
				} elseif ( 'off' === $use_gradient ) {
					$is_gradient_disabled = true;
				}
			}

// B. Background Image.
			if ( $use_image_options && 'fields_only' !== $use_image_options ) {
				$image    = $responsive->get_inheritance_background_value( $props, "{$base_prop_name}_image", $device, $base_prop_name, $fields_definition );
				$parallax = $responsive->get_any_value( $props, "parallax{$suffix}", 'off' );

// Determine whether force inline styles.
				if ( ! ET_Builder_Element::$forced_inline_styles ) {
					$background_image_field = $responsive->get_field_name( "{$base_prop_name}_image", $device );
					$raw                    = isset( $attrs_unprocessed[ $background_image_field ] ) ? $attrs_unprocessed[ $background_image_field ] : '';
					if ( $this->_is_dynamic_value( $background_image_field, $raw, $dynamic_attributes ) ) {
						ET_Builder_Element::$forced_inline_styles = true;
					}
				}

// Featured image as background is in higher priority.
				if ( $module->featured_image_background ) {
					$featured_image         = isset( $props['featured_image'] ) ? $props['featured_image'] : '';
					$featured_placement     = isset( $props['featured_placement'] ) ? $props['featured_placement'] : '';
					$featured_image_src_obj = wp_get_attachment_image_src( get_post_thumbnail_id( self::_get_main_post_id() ), 'full' );
					$featured_image_src     = isset( $featured_image_src_obj[0] ) ? $featured_image_src_obj[0] : '';

if ( 'on' === $featured_image && 'background' === $featured_placement && '' !== $featured_image_src ) {
						$image = $featured_image_src;
					}
				}

// Background image and parallax status.
				$is_image_active         = '' !== $image && 'on' !== $parallax;
				$image_status[ $device ] = $is_image_active;

// 1. Ensure image exists and parallax is off.
				if ( $is_image_active ) {
					// Flag to inform Background Color if current module has Image.
					$has_image = true;

// Check previous Background image status. Needed to get the correct value.
					$is_prev_image_active = true;

if ( ! $is_desktop ) {
						$is_prev_image_active = 'tablet' === $device ?
							$image_status['desktop'] :
							$image_status['tablet'];
					}

// Size.
					$image_size_default   = $this->get_attr_default( 'size', $base_prop_name, $fields_definition );
					$image_size_inherit   = $this->get_attr_value( 'size', $base_prop_name, $suffix, $props, $fields_definition, false );
					$image_width_inherit  = $this->get_attr_value( 'image_width', $base_prop_name, $suffix, $props, $fields_definition, false );
					$image_height_inherit = $this->get_attr_value( 'image_height', $base_prop_name, $suffix, $props, $fields_definition, false );

if ( '' !== $image_size_inherit || $image_width_inherit || $image_height_inherit ) {
						// Get Size CSS.
						$image_size_style = $this->get_background_size_css( $image_size_inherit, $image_width_inherit, $image_height_inherit, $image_size_default, 'image' );

// Set image background size styles only it's different compared to the larger device.
						if ( $processed_image_size_style !== $image_size_style ) {
							if ( isset( $image_size_style['size'] ) && $image_size_style['size'] ) {
								$style .= sprintf(
									'background-size: %1$s; ',
									esc_html( $image_size_style['size'] )
								);
							}
						}
					}

// Check if image size has 'stretch' value or not.
					$is_image_size_stretch = 'stretch' === $this->get_attr_value( 'size', $base_prop_name, $suffix, $props, $fields_definition, false );

// Repeat.
					$image_repeat = $this->get_attr_value( 'repeat', $base_prop_name, $suffix, $props, $fields_definition, $is_prev_image_active );

// Print image repeat when image size is not 'stretch'.
					if ( ! $is_image_size_stretch && '' !== $image_repeat ) {
						$style .= sprintf( 'background-repeat: %1$s; ', esc_html( $image_repeat ) );
					}

// Position.
					$image_position_default          = $this->get_attr_default( "{$base_prop_name}_position{$suffix}", $base_prop_name, $fields_definition );
					$image_position_inherit          = $this->get_attr_value( 'position', $base_prop_name, $suffix, $props, $fields_definition, $is_prev_image_active );
					$image_horizontal_offset_inherit = $this->get_attr_value( 'horizontal_offset', $base_prop_name, $suffix, $props, $fields_definition, $is_prev_image_active );
					$image_vertical_offset_inherit   = $this->get_attr_value( 'vertical_offset', $base_prop_name, $suffix, $props, $fields_definition, $is_prev_image_active );

// Check if image repeat has 'space' value or not.
					$is_image_repeat_space = 'space' === $this->get_attr_value( 'repeat', $base_prop_name, $suffix, $props, $fields_definition, false );

// Print image repeat origin/offset when image size is not 'stretch', and
					// image repeat is not 'space'.
					if (
						! $is_image_size_stretch
						&& ! $is_image_repeat_space
						&& ( '' !== $image_position_inherit || $image_horizontal_offset_inherit || $image_vertical_offset_inherit )
					) {
						// Get Position CSS.
						$image_position_style = $this->get_background_position_css( $image_position_inherit, $image_horizontal_offset_inherit, $image_vertical_offset_inherit, $image_position_default );

// Set background image position styles only it's different compared to the larger device.
						if ( $processed_image_position_style !== $image_position_style ) {
							$style .= sprintf(
								'background-position: %1$s; ',
								esc_html( $image_position_style['position'] )
							);
						}
					}

// Blend.
					$image_blend_inherit = $this->get_attr_value( 'blend', $base_prop_name, $suffix, $props, $fields_definition, $is_prev_image_active );
					$image_blend_default = $this->get_attr_default( 'blend', $base_prop_name, $fields_definition );

if ( '' !== $image_blend_inherit ) {
						// Don't print the same image blend style.
						if ( $processed_image_blend_style !== $image_blend_inherit ) {
							$style .= sprintf( 'background-blend-mode: %1$s; ', esc_html( $image_blend_inherit ) );
						}

// Reset - If background has image and gradient, force background-color: initial.
						if ( $has_gradient && 'fields_only' !== $use_color_reset_options && $image_blend_inherit !== $image_blend_default ) {
							$has_gradient_and_image = true;
							$color_style            = 'initial';

$style .= sprintf( 'background-color: initial%1$s; ', esc_html( $important ) );
						}

$processed_image_blend_style = $image_blend_inherit;
					}

// Only append background image when the image is exist.
					$images[] = sprintf( 'url(%1$s)', esc_html( $image ) );
				} elseif ( '' === $image ) {
					// Reset - If background image is disabled, ensure we reset prev background blend mode.
					if ( '' !== $processed_image_blend_style ) {
						$style                      .= 'background-blend-mode: normal; ';
						$processed_image_blend_style = '';
					}

$is_image_disabled = true;
				}
			}

if ( ! empty( $images ) ) {
				// Check if Parallax and Gradient Overlays are on.
				$gradient_overlays_image = $responsive->get_any_value( $props, "{$base_prop_name}_color_gradient_overlays_image{$suffix}", 'off', true );
				$parallax                = $responsive->get_any_value( $props, "parallax{$suffix}", 'off', true );

// The browsers stack the images in the opposite order to what you'd expect.
				if ( 'on' !== $gradient_overlays_image ) {
					$images = array_reverse( $images );
				}

if ( $use_gradient_options && 'on' === $gradient_overlays_image && 'on' === $parallax ) {
					// Set background image to initial when Parallax and Gradient Overlays are on.
					$image_style = 'initial';
				} else {
					// Set background image styles only it's different compared to the larger device.
					$image_style = join( ', ', $images );
				}

if ( $processed_image !== $image_style ) {
					$style .= sprintf(
						'background-image: %1$s%2$s;',
						esc_html( $image_style ),
						$important
					);
				}
			} elseif ( ! $is_desktop && $is_gradient_disabled && $is_image_disabled ) {
				// Reset - If background image and gradient are disabled, reset current background image.
				$image_style = 'initial';

$style .= sprintf(
					'background-image: %1$s%2$s;',
					esc_html( $image_style ),
					$important
				);
			}

// Save processed background images.
			$processed_image = $image_style;

// Save processed styles.
			$processed_image_size_style     = $image_size_style;
			$processed_image_position_style = $image_position_style;

// C. Background Color.
			if ( $use_color_options && 'fields_only' !== $use_color_options ) {

$use_color_value = $responsive->get_any_value( $props, "use_{$base_prop_name}_color{$suffix}", 'on', true );

if ( ! $has_gradient_and_image && 'off' !== $use_color_value ) {
					$color       = $responsive->get_inheritance_background_value( $props, "{$base_prop_name}_color", $device, $base_prop_name, $fields_definition );
					$color       = ! $is_desktop && '' === $color ? 'initial' : $color;
					$color_style = $color;

if ( '' !== $color && $processed_color !== $color ) {
						$style .= sprintf(
							'background-color: %1$s%2$s; ',
							esc_html( $this->get_color_value( $color ) ),
							esc_html( $important )
						);
					}
				} elseif ( $has_color_toggle_options && 'off' === $use_color_value && ! $is_desktop ) {
					// Reset - If current module has background color toggle, it's off, and current mode
					// it's not desktop, we should reset the background color.
					$style .= sprintf(
						'background-color: initial %1$s; ',
						esc_html( $important )
					);
				}
			}

// Save processed background color.
			$processed_color = $color_style;

// E. Background Pattern.
			if ( $use_pattern_options && 'fields_only' !== $use_pattern_options ) {
				$pattern_style_name = $responsive->get_inheritance_background_value( $props, "{$pattern_base_prop_name}_style", $device, $base_prop_name, $fields_definition );

$is_pattern_active         = '' !== $pattern_style_name;
				$pattern_status[ $device ] = $is_pattern_active;

if ( $is_pattern_active ) {
					// Check previous pattern status. Needed to get the correct value.
					$is_prev_pattern_active = true;
					if ( ! $is_desktop ) {
						$is_prev_pattern_active = 'tablet' === $device ? $pattern_status['desktop'] : $pattern_status['tablet'];
					}

// Pattern Transform.
					$pattern_transform_inherit = $responsive->get_any_value( $props, "{$pattern_base_prop_name}_transform{$suffix}", '', true );

$pattern_is_horizontal   = $this->get_transform_state( $pattern_transform_inherit, 'horizontal' );
					$pattern_is_vertical     = $this->get_transform_state( $pattern_transform_inherit, 'vertical' );
					$pattern_is_rotated      = $this->get_transform_state( $pattern_transform_inherit, 'rotate' );
					$pattern_is_inverted     = $this->get_transform_state( $pattern_transform_inherit, 'invert' );
					$pattern_transform_style = $this->get_transform_css( $pattern_is_horizontal, $pattern_is_vertical );

$is_pattern_transform_style_different = $processed_pattern_transform_style !== $pattern_transform_style;

if ( $is_pattern_transform_style_different && ( $pattern_is_horizontal || $pattern_is_vertical ) ) {
						$style_pattern .= sprintf(
							'transform: %1$s; ',
							esc_html( $pattern_transform_style )
						);
					} elseif ( $is_pattern_transform_style_different && ! $is_desktop ) {
						$style_pattern .= sprintf(
							'transform: %1$s; ',
							esc_html( $pattern_transform_style )
						);
					}

// Pattern Image.
					$pattern_color     = $responsive->get_any_value( $props, "{$pattern_base_prop_name}_color{$suffix}", '', true );
					$pattern_style_svg = et_pb_background_pattern_options()->get_svg( $pattern_style_name, $pattern_color, 'default', $pattern_is_rotated, $pattern_is_inverted );

// Set pattern style when it's different compared to the larger device.
					if ( $processed_pattern_svg !== $pattern_style_svg ) {
						$style_pattern .= sprintf(
							'background-image: %1$s; ',
							esc_html( $pattern_style_svg )
						);
					}

// Pattern Size.
					$pattern_size_default   = $this->get_attr_default( 'size', $pattern_base_prop_name, $fields_definition );
					$pattern_size_inherit   = $this->get_attr_value( 'size', $pattern_base_prop_name, $suffix, $props, $fields_definition, $is_prev_pattern_active );
					$pattern_width_inherit  = $this->get_attr_value( 'width', $pattern_base_prop_name, $suffix, $props, $fields_definition, $is_prev_pattern_active );
					$pattern_height_inherit = $this->get_attr_value( 'height', $pattern_base_prop_name, $suffix, $props, $fields_definition, $is_prev_pattern_active );

if ( '' !== $pattern_size_inherit || $pattern_width_inherit || $pattern_height_inherit ) {
						// Get Size CSS.
						$pattern_size_style = $this->get_background_size_css( $pattern_size_inherit, $pattern_width_inherit, $pattern_height_inherit, $pattern_size_default );

// Set pattern background size styles only it's different compared to the larger device.
						if ( $processed_pattern_size_style !== $pattern_size_style ) {
							if ( isset( $pattern_size_style['size'] ) && $pattern_size_style['size'] ) {
								$style_pattern .= sprintf(
									'background-size: %1$s; ',
									esc_html( $pattern_size_style['size'] )
								);
							}
						}
					}

// Check if pattern size has 'stretch' value or not.
					$is_pattern_size_stretch = 'stretch' === $this->get_attr_value( 'size', $pattern_base_prop_name, $suffix, $props, $fields_definition, false );

// Pattern Repeat.
					$pattern_repeat_inherit = $this->get_attr_value( 'repeat', $pattern_base_prop_name, $suffix, $props, $fields_definition, $is_prev_pattern_active );

// Print pattern repeat when pattern size is not 'stretch'.
					if ( ! $is_pattern_size_stretch && '' !== $pattern_repeat_inherit ) {
						$style_pattern .= sprintf(
							'background-repeat: %1$s; ',
							esc_html( $pattern_repeat_inherit )
						);
					}

// Pattern Repeat Origin.
					$pattern_position_default          = $this->get_attr_default( 'repeat_origin', $pattern_base_prop_name, $fields_definition );
					$pattern_position_inherit          = $this->get_attr_value( 'repeat_origin', $pattern_base_prop_name, $suffix, $props, $fields_definition, $is_prev_pattern_active );
					$pattern_horizontal_offset_inherit = $this->get_attr_value( 'horizontal_offset', $pattern_base_prop_name, $suffix, $props, $fields_definition, $is_prev_pattern_active );
					$pattern_vertical_offset_inherit   = $this->get_attr_value( 'vertical_offset', $pattern_base_prop_name, $suffix, $props, $fields_definition, $is_prev_pattern_active );

// Check if pattern repeat has 'space' value or not.
					$is_pattern_repeat_space = 'space' === $this->get_attr_value( 'repeat', $pattern_base_prop_name, $suffix, $props, $fields_definition, false );

// Print pattern repeat origin/offset when pattern size is not 'stretch', and
					// pattern repeat is not 'space'.
					if (
						! $is_pattern_size_stretch
						&& ! $is_pattern_repeat_space
						&& ( '' !== $pattern_position_inherit || $pattern_horizontal_offset_inherit || $pattern_vertical_offset_inherit )
					) {
						// Get Position CSS.
						$pattern_position_style = $this->get_background_position_css( $pattern_position_inherit, $pattern_horizontal_offset_inherit, $pattern_vertical_offset_inherit, $pattern_position_default );

// Set background pattern position styles only it's different compared to the larger device.
						if ( $processed_pattern_position_style !== $pattern_position_style ) {
							$style_pattern .= sprintf(
								'background-position: %1$s; ',
								esc_html( $pattern_position_style['position'] )
							);
						}
					}

// Pattern Blend Mode.
					$pattern_blend_inherit = $this->get_attr_value( 'blend_mode', $pattern_base_prop_name, $suffix, $props, $fields_definition, $is_prev_pattern_active );

if ( '' !== $pattern_blend_inherit ) {
						$style_pattern .= sprintf(
							'mix-blend-mode: %1$s; ',
							esc_html( $pattern_blend_inherit )
						);
					}
				} elseif ( ! $is_desktop && $processed_pattern_svg !== $pattern_style_svg ) {
					// Reset pattern image.
					$pattern_style_svg = 'initial';
					$style_pattern    .= sprintf(
						'background-image: %1$s; ',
						esc_html( $pattern_style_svg )
					);
				}
			}

// Save processed styles.
			$processed_pattern_transform_style = $pattern_transform_style;
			$processed_pattern_svg             = $pattern_style_svg;
			$processed_pattern_size_style      = $pattern_size_style;
			$processed_pattern_position_style  = $pattern_position_style;

// F. Background Mask.
			if ( $use_mask_options && 'fields_only' !== $use_mask_options ) {
				$mask_style_name = $responsive->get_inheritance_background_value( $props, "{$mask_base_prop_name}_style", $device, $base_prop_name, $fields_definition );

$is_mask_active         = '' !== $mask_style_name;
				$mask_status[ $device ] = $is_mask_active;

if ( $is_mask_active ) {
					// Check previous mask status. Needed to get the correct value.
					$is_prev_mask_active = true;
					if ( ! $is_desktop ) {
						$is_prev_mask_active = 'tablet' === $device ? $mask_status['desktop'] : $mask_status['tablet'];
					}

// Mask Transform.
					$mask_transform_inherit = $responsive->get_any_value( $props, "{$mask_base_prop_name}_transform{$suffix}", '', true );

$mask_is_horizontal   = $this->get_transform_state( $mask_transform_inherit, 'horizontal' );
					$mask_is_vertical     = $this->get_transform_state( $mask_transform_inherit, 'vertical' );
					$mask_is_rotated      = $this->get_transform_state( $mask_transform_inherit, 'rotate' );
					$mask_is_inverted     = $this->get_transform_state( $mask_transform_inherit, 'invert' );
					$mask_transform_style = $this->get_transform_css( $mask_is_horizontal, $mask_is_vertical );

$is_mask_transform_style_different = $processed_mask_transform_style !== $mask_transform_style;

if ( $is_mask_transform_style_different && ( $mask_is_horizontal || $mask_is_vertical ) ) {
						$style_mask .= sprintf(
							'transform: %1$s; ',
							esc_html( $mask_transform_style )
						);
					} elseif ( $is_mask_transform_style_different && ! $is_desktop ) {
						$style_mask .= sprintf(
							'transform: %1$s; ',
							esc_html( $mask_transform_style )
						);
					}

// Mask Size.
					$mask_size_default   = $this->get_attr_default( 'size', $mask_base_prop_name, $fields_definition );
					$mask_size_inherit   = $this->get_attr_value( 'size', $mask_base_prop_name, $suffix, $props, $fields_definition, $is_prev_mask_active );
					$mask_width_inherit  = $this->get_attr_value( 'width', $mask_base_prop_name, $suffix, $props, $fields_definition, $is_prev_mask_active );
					$mask_height_inherit = $this->get_attr_value( 'height', $mask_base_prop_name, $suffix, $props, $fields_definition, $is_prev_mask_active );

if ( '' !== $mask_size_inherit || ( $mask_width_inherit || $mask_height_inherit ) ) {
						// Get Size CSS.
						$mask_size_style = $this->get_background_size_css( $mask_size_inherit, $mask_width_inherit, $mask_height_inherit, $mask_size_default, 'mask' );

// Set mask background size styles only it's different compared to the larger device.
						if ( $processed_mask_size_style !== $mask_size_style ) {
							if ( isset( $mask_size_style['size'] ) && $mask_size_style['size'] ) {
								$style_mask .= sprintf(
									'background-size: %1$s; ',
									esc_html( $mask_size_style['size'] )
								);
							}
						}
					}

// Check if mask size has 'stretch' value or not.
					$is_mask_size_stretch = 'stretch' === $mask_size_inherit;

// Set background mask style only it's different compared to the larger device.
					$mask_color     = $responsive->get_any_value( $props, "{$mask_base_prop_name}_color{$suffix}", '', true );
					$mask_ratio     = $responsive->get_any_value( $props, "{$mask_base_prop_name}_aspect_ratio{$suffix}", '', true );
					$mask_style_svg = et_pb_background_mask_options()->get_svg( $mask_style_name, $mask_color, $mask_ratio, $mask_is_rotated, $mask_is_inverted, $mask_size_inherit );

if ( $processed_mask_svg !== $mask_style_svg ) {
						$style_mask .= sprintf(
							'background-image: %1$s; ',
							esc_html( $mask_style_svg )
						);
					}

// Mask Position.
					$mask_position_default          = $responsive->get_any_value( $props, "{$mask_base_prop_name}_position{$suffix}", '', true );
					$mask_position_inherit          = $this->get_attr_value( 'position', $mask_base_prop_name, $suffix, $props, $fields_definition, $is_prev_mask_active );
					$mask_horizontal_offset_inherit = $this->get_attr_value( 'horizontal_offset', $mask_base_prop_name, $suffix, $props, $fields_definition, $is_prev_mask_active );
					$mask_vertical_offset_inherit   = $this->get_attr_value( 'vertical_offset', $mask_base_prop_name, $suffix, $props, $fields_definition, $is_prev_mask_active );

if ( ! $is_mask_size_stretch && ( '' !== $mask_position_inherit || $mask_horizontal_offset_inherit || $mask_vertical_offset_inherit ) ) {
						// Get Position CSS.
						$mask_position_style = $this->get_background_position_css( $mask_position_inherit, $mask_horizontal_offset_inherit, $mask_vertical_offset_inherit, $mask_position_default );

// Set background mask position styles only it's different compared to the larger device.
						if ( $processed_mask_position_style !== $mask_position_style ) {
							$style_mask .= sprintf(
								'background-position: %1$s; ',
								esc_html( $mask_position_style['position'] )
							);
						}
					}

// Mask Blend Mode.
					$mask_blend_inherit = $this->get_attr_value( 'blend_mode', $mask_base_prop_name, $suffix, $props, $fields_definition, $is_prev_mask_active );

if ( '' !== $mask_blend_inherit ) {
						$style_mask .= sprintf(
							'mix-blend-mode: %1$s; ',
							esc_html( $mask_blend_inherit )
						);
					}
				} elseif ( ! $is_desktop && $processed_mask_svg !== $mask_style_svg ) {
					// Reset mask image.
					$mask_style_svg = 'initial';
					$style_mask    .= sprintf(
						'background-image: %1$s; ',
						esc_html( $mask_style_svg )
					);
				}
			}

// Save processed styles.
			$processed_mask_transform_style = $mask_transform_style;
			$processed_mask_svg             = $mask_style_svg;
			$processed_mask_size_style      = $mask_size_style;
			$processed_mask_position_style  = $mask_position_style;

// Add media query parameter.
			$background_args = array();
			if ( ! $is_desktop ) {
				$current_media_query            = 'tablet' === $device ? 'max_width_980' : 'max_width_767';
				$background_args['media_query'] = ET_Builder_Element::get_media_query( $current_media_query );
			}

// Render background styles.
			if ( '' !== $style ) {
				$el_style = array(
					'selector'    => $selector,
					'declaration' => rtrim( $style ),
					'priority'    => $module->get_style_priority(),
				);
				ET_Builder_Element::set_style( $function_name, wp_parse_args( $background_args, $el_style ) );
			}

// Render pattern styles.
			if ( '' !== $style_pattern ) {
				$el_pattern_style = array(
					'selector'    => $selector_pattern,
					'declaration' => rtrim( $style_pattern ),
					'priority'    => $module->get_style_priority(),
				);
				ET_Builder_Element::set_style( $function_name, wp_parse_args( $background_args, $el_pattern_style ) );
			}

// Render mask styles.
			if ( '' !== $style_mask ) {
				$el_mask_style = array(
					'selector'    => $selector_mask,
					'declaration' => rtrim( $style_mask ),
					'priority'    => $module->get_style_priority(),
				);
				ET_Builder_Element::set_style( $function_name, wp_parse_args( $background_args, $el_mask_style ) );
			}
		}

// Background Modes (Hover & Sticky).
		$modes = array( 'hover', 'sticky' );

foreach ( $modes as $mode ) {
			// Get helper.
			$helper = et_builder_get_helper( $mode );

// Bail if no helper.
			if ( ! $helper ) {
				continue;
			}

// Get selector.
			$selector_mode = $args[ "selector_{$mode}" ];

$selector_pattern_mode = '';
			$selector_mask_mode    = '';

// If no fixed selector defined, prepend / append default selector.
			if ( '' === $selector_mode ) {
				if ( 'hover' === $mode ) {
					$selector_mode = $helper->add_hover_to_selectors( $selector );
				} elseif ( 'sticky' === $mode ) {
					$is_sticky_module = $helper->is_sticky_module( $props );
					$selector_mode    = $helper->add_sticky_to_order_class( $selector, $is_sticky_module );
				}
			}

$base_prop_name_mode_parsed = $this->get_prop_name_alias( $prop_name_aliases, $base_prop_name );
			$is_enabled_mode            = $helper->is_enabled( $base_prop_name_mode_parsed, $props );
			$background_image_field     = "{$base_prop_name}_image";

if ( 'hover' === $mode ) {
				$selector_pattern_mode  = $helper->add_hover_to_order_class( $selector_pattern );
				$selector_mask_mode     = $helper->add_hover_to_order_class( $selector_mask );
				$background_image_field = $helper->get_hover_field( $background_image_field );
			} elseif ( 'sticky' === $mode ) {
				$is_sticky_module       = $helper->is_sticky_module( $props );
				$selector_pattern_mode  = $helper->add_sticky_to_order_class( $selector_pattern, $is_sticky_module );
				$selector_mask_mode     = $helper->add_sticky_to_order_class( $selector_mask, $is_sticky_module );
				$background_image_field = $helper->get_sticky_field( $background_image_field );
			}

// Check if mode is enabled.
			if ( $is_enabled_mode ) {
				$images_mode = array();
				$style_mode  = '';

$style_pattern_mode = '';
				$style_mask_mode    = '';

$has_gradient_mode           = false;
				$has_image_mode              = false;
				$has_gradient_and_image_mode = false;
				$is_gradient_mode_disabled   = false;
				$is_image_mode_disabled      = false;

$gradient_overlays_image_mode = 'off';

// Background Gradient Mode (Hover / Sticky).
				// This part is little bit different compared to responsive implementation. In
				// this case, mode is enabled on the background field, not on the each of those
				// fields. So, built in function get_value() doesn't work in this case.
				// Temporarily, we need to fetch the the value from get_raw_value().
				if ( $use_gradient_options && 'fields_only' !== $use_gradient_options ) {
					$use_gradient_mode = $responsive->get_inheritance_background_value(
						$props,
						$this->get_prop_name_alias( $prop_name_aliases, "use_{$base_prop_name}_color_gradient" ),
						$mode,
						$base_prop_name,
						$fields_definition
					);

// 1. Ensure gradient color is active and values are not null.
					if ( 'on' === $use_gradient_mode ) {
						// Flag to inform BG Color if current module has Gradient.
						$has_gradient_mode    = true;
						$gradient_values_mode = $this->get_gradient_mode_properties(
							$mode,
							$props,
							$base_prop_name,
							$gradient_properties_desktop
						);

$gradient_mode = $this->get_gradient_style( $gradient_values_mode );
						$images_mode[] = $gradient_mode;

$gradient_overlays_image_desktop = $responsive->get_any_value(
							$props,
							"{$base_prop_name}_color_gradient_overlays_image",
							'',
							true
						);
						$gradient_overlays_image_mode    = $helper->get_raw_value(
							"{$base_prop_name}_color_gradient_overlays_image",
							$props,
							$gradient_overlays_image_desktop
						);
					} elseif ( 'off' === $use_gradient_mode ) {
						$is_gradient_mode_disabled = true;
					}
				}

// Background Image Mode (Hover / Sticky).
				// This part is little bit different compared to responsive implementation. In
				// this case, mode is enabled on the background field, not on the each of those
				// fields. So, built in function get_value() doesn't work in this case.
				// Temporarily, we need to fetch the the value from get_raw_value().
				if ( $use_image_options && 'fields_only' !== $use_image_options ) {
					$image_mode    = $responsive->get_inheritance_background_value(
						$props,
						"{$base_prop_name}_image",
						$mode,
						$base_prop_name,
						$fields_definition
					);
					$parallax_mode = $helper->get_raw_value( 'parallax', $props );

// Determine whether force inline styles.
					if ( ! ET_Builder_Element::$forced_inline_styles ) {
						$raw = isset( $attrs_unprocessed[ $background_image_field ] ) ? $attrs_unprocessed[ $background_image_field ] : '';
						if ( $this->_is_dynamic_value( $background_image_field, $raw, $dynamic_attributes ) ) {
							ET_Builder_Element::$forced_inline_styles = true;
						}
					}

// Featured image as background is in higher priority.
					if ( $module->featured_image_background ) {
						$featured_image         = isset( $props['featured_image'] ) ? $props['featured_image'] : '';
						$featured_placement     = isset( $props['featured_placement'] ) ? $props['featured_placement'] : '';
						$featured_image_src_obj = wp_get_attachment_image_src( get_post_thumbnail_id( self::_get_main_post_id() ), 'full' );
						$featured_image_src     = isset( $featured_image_src_obj[0] ) ? $featured_image_src_obj[0] : '';

if ( 'on' === $featured_image && 'background' === $featured_placement && '' !== $featured_image_src ) {
							$image_mode = $featured_image_src;
						}
					}

if ( '' !== $image_mode && null !== $image_mode && 'on' !== $parallax_mode ) {
						// Flag to inform BG Color if current module has Image.
						$has_image_mode = true;

// Size.
						$image_size_default = $this->get_attr_default( 'size', $base_prop_name, $fields_definition );
						$image_size_mode    = $helper->get_raw_value( "{$base_prop_name}_size", $props );
						$image_size_desktop = isset( $props[ "{$base_prop_name}_size" ] ) ? $props[ "{$base_prop_name}_size" ] : '';

if ( empty( $image_size_mode ) && ! empty( $image_size_desktop ) ) {
							$image_size_mode = $image_size_desktop;
						}

$is_same_image_size = $image_size_mode === $image_size_desktop;

if ( ! empty( $image_size_mode ) && ! $is_same_image_size ) {
							$image_width_desktop  = isset( $props[ "{$base_prop_name}_image_width" ] ) ? $props[ "{$base_prop_name}_image_width" ] : '';
							$image_width_mode     = $helper->get_raw_value( "{$base_prop_name}_image_width", $props, $image_width_desktop );
							$image_height_desktop = isset( $props[ "{$base_prop_name}_image_height" ] ) ? $props[ "{$base_prop_name}_image_height" ] : '';
							$image_height_mode    = $helper->get_raw_value( "{$base_prop_name}_image_height", $props, $image_height_desktop );

// Get Size CSS.
							$image_size_style_desktop = $this->get_background_size_css( $image_size_desktop, $image_width_desktop, $image_height_desktop, $image_size_default, 'image' );
							$image_size_style_mode    = $this->get_background_size_css( $image_size_mode, $image_width_mode, $image_height_mode, $image_size_default, 'image' );

$is_same_image_size_style = $image_size_style_mode === $image_size_style_desktop;

if ( ! empty( $image_size_style_mode ) && ! $is_same_image_size_style ) {
								if ( isset( $image_size_style_mode['size'] ) && $image_size_style_mode['size'] ) {
									$style_mode .= sprintf(
										'background-size: %1$s; ',
										esc_html( $image_size_style_mode['size'] )
									);
								}
							}
						}

// Check if image size has 'stretch' value or not.
						$is_image_size_stretch_mode = 'stretch' === $image_size_mode;

// Repeat.
						$image_repeat_mode    = $helper->get_raw_value( "{$base_prop_name}_repeat", $props );
						$image_repeat_desktop = isset( $props[ "{$base_prop_name}_repeat" ] ) ? $props[ "{$base_prop_name}_repeat" ] : '';
						$is_same_image_repeat = $image_repeat_mode === $image_repeat_desktop;

if ( empty( $image_repeat_mode ) && ! empty( $image_repeat_desktop ) ) {
							$image_repeat_mode = $image_repeat_desktop;
						}

// Don't print the same image repeat.
						// Don't print image repeat when image size is 'stretch'.
						if ( ! empty( $image_repeat_mode ) && ! $is_same_image_repeat && ! $is_image_size_stretch_mode ) {
							$style_mode .= sprintf(
								'background-repeat: %1$s; ',
								esc_html( $image_repeat_mode )
							);
						}

// Position.
						$image_position_mode    = $helper->get_raw_value( "{$base_prop_name}_position", $props );
						$image_position_desktop = isset( $props[ "{$base_prop_name}_position" ] ) ? $props[ "{$base_prop_name}_position" ] : '';

if ( empty( $image_position_mode ) && ! empty( $image_position_desktop ) ) {
							$image_position_mode = $image_position_desktop;
						}

// Check if pattern repeat has 'space' value or not.
						$is_image_repeat_space_mode = 'space' === $image_repeat_mode;

// Print image position/offset when pattern size is not 'stretch', and
						// image repeat is not 'space'.
						if ( ! empty( $image_position_mode ) && ! $is_image_repeat_space_mode && ! $is_image_size_stretch_mode ) {
							$horizontal_offset_desktop = isset( $props[ "{$base_prop_name}_horizontal_offset" ] ) ? $props[ "{$base_prop_name}_horizontal_offset" ] : '';
							$horizontal_offset_mode    = $helper->get_raw_value( "{$base_prop_name}_horizontal_offset", $props, $horizontal_offset_desktop );
							$vertical_offset_desktop   = isset( $props[ "{$base_prop_name}_vertical_offset" ] ) ? $props[ "{$base_prop_name}_vertical_offset" ] : '';
							$vertical_offset_mode      = $helper->get_raw_value( "{$base_prop_name}_vertical_offset", $props, $vertical_offset_desktop );

// Get Position CSS.
							$image_position_style_desktop = $this->get_background_position_css( $image_position_desktop, $horizontal_offset_desktop, $vertical_offset_desktop );
							$image_position_style_mode    = $this->get_background_position_css( $image_position_mode, $horizontal_offset_mode, $vertical_offset_mode );

$is_same_image_position_style = $image_position_style_mode === $image_position_style_desktop;

if ( ! empty( $image_position_style_mode ) && ! $is_same_image_position_style ) {
								$style_mode .= sprintf(
									'background-position: %1$s; ',
									esc_html( $image_position_style_mode['position'] )
								);
							}
						}

// Blend.
						$image_blend_mode    = $helper->get_raw_value( "{$base_prop_name}_blend", $props );
						$image_blend_default = $this->get_attr_default( 'blend', $base_prop_name, $fields_definition );
						$image_blend_desktop = isset( $props[ "{$base_prop_name}_blend" ] ) ? $props[ "{$base_prop_name}_blend" ] : '';
						$is_same_image_blend = $image_blend_mode === $image_blend_desktop;

if ( empty( $image_blend_mode ) && ! empty( $image_blend_desktop ) ) {
							$image_blend_mode = $image_blend_desktop;
						}

if ( ! empty( $image_blend_mode ) ) {
							// Don't print the same background blend.
							if ( ! $is_same_image_blend ) {
								$style_mode .= sprintf(
									'background-blend-mode: %1$s; ',
									esc_html( $image_blend_mode )
								);
							}

// Force background-color: initial.
							if ( $has_gradient_mode && $has_image_mode && $image_blend_mode !== $image_blend_default ) {
								$has_gradient_and_image_mode = true;
								$style_mode                 .= sprintf( 'background-color: initial%1$s; ', esc_html( $important ) );
							}
						}

// Only append background image when the image is exist.
						$images_mode[] = sprintf( 'url(%1$s)', esc_html( $image_mode ) );
					} elseif ( '' === $image_mode ) {
						$is_image_mode_disabled = true;
					}
				}

if ( ! empty( $images_mode ) ) {
					// Check if Parallax and Gradient Overlays are on.
					$gradient_overlays_image_desktop = $responsive->get_any_value( $props, "{$base_prop_name}_color_gradient_overlays_image", 'off', true );
					$gradient_overlays_image_mode    = $helper->get_raw_value( "{$base_prop_name}_color_gradient_overlays_image", $props, $gradient_overlays_image_desktop );
					$parallax_desktop                = $responsive->get_any_value( $props, 'parallax', 'off', true );
					$parallax_mode                   = $helper->get_raw_value( 'parallax', $props, $parallax_desktop );

// The browsers stack the images in the opposite order to what you'd expect.
					if ( 'on' !== $gradient_overlays_image_mode ) {
						$images_mode = array_reverse( $images_mode );
					}

if ( $use_gradient_options && 'on' === $gradient_overlays_image_mode && 'on' === $parallax_mode ) {
						// Set background image to initial when Parallax and Gradient Overlays are on.
						$images_mode = 'initial';
					} else {
						$images_mode = join( ', ', $images_mode );
					}

$style_mode .= sprintf(
						'background-image: %1$s%2$s;',
						esc_html( $images_mode ),
						$important
					);
				} elseif ( $is_gradient_mode_disabled && $is_image_mode_disabled ) {
					$style_mode .= sprintf(
						'background-image: initial %1$s;',
						$important
					);
				}

// Background Color Mode (Hover / Sticky).
				if ( $use_color_options && 'fields_only' !== $use_color_options ) {
					$use_color_mode_default = isset( $props[ "use_{$base_prop_name}_color" ] ) ? $props[ "use_{$base_prop_name}_color" ] : 'on';
					$use_color_mode_value   = $helper->get_raw_value( "use_{$base_prop_name}_color", $props );
					$use_color_mode_value   = ! empty( $use_color_mode_value )
						? $use_color_mode_value
						: $use_color_mode_default;

if ( ! $has_gradient_and_image_mode && 'off' !== $use_color_mode_value ) {
						$color_mode = $responsive->get_inheritance_background_value(
							$props,
							"{$base_prop_name}_color",
							$mode,
							$base_prop_name,
							$fields_definition
						);

$color_mode = '' !== $color_mode ? $color_mode : 'transparent';

if ( '' !== $color_mode ) {
							$style_mode .= sprintf(
								'background-color: %1$s%2$s; ',
								esc_html( $this->get_color_value( $color_mode ) ),
								esc_html( $important )
							);
						}
					} elseif ( $has_color_toggle_options && 'off' === $use_color_mode_value ) {
						// Reset - If current module has background color toggle, it's off, and current mode
						// it's not desktop, we should reset the background color.
						$style .= sprintf(
							'background-color: initial %1$s; ',
							esc_html( $important )
						);
					}
				}

// Background Pattern Mode (Hover / Sticky).
				// This part is little bit different compared to responsive implementation. In
				// this case, mode is enabled on the background field, not on the each of those
				// fields. So, built in function get_value() doesn't work in this case.
				// Temporarily, we need to fetch the the value from get_raw_value().
				if ( $use_pattern_options && 'fields_only' !== $use_pattern_options ) {
					$pattern_style_name_mode = $responsive->get_inheritance_background_value(
						$props,
						"{$pattern_base_prop_name}_style",
						$mode,
						$base_prop_name,
						$fields_definition
					);

if ( '' !== $pattern_style_name_mode ) {
						// Pattern Transform.
						$pattern_transform_mode    = $helper->get_raw_value( "{$pattern_base_prop_name}_transform", $props );
						$pattern_transform_desktop = isset( $props[ "{$pattern_base_prop_name}_transform" ] ) ? $props[ "{$pattern_base_prop_name}_transform" ] : '';

if ( empty( $pattern_transform_mode ) && ! empty( $pattern_transform_desktop ) ) {
							$pattern_transform_mode = $pattern_transform_desktop;
						}

$pattern_is_horizontal_mode = $this->get_transform_state( $pattern_transform_mode, 'horizontal' );
						$pattern_is_vertical_mode   = $this->get_transform_state( $pattern_transform_mode, 'vertical' );
						$pattern_is_rotated_mode    = $this->get_transform_state( $pattern_transform_mode, 'rotate' );
						$pattern_is_inverted_mode   = $this->get_transform_state( $pattern_transform_mode, 'invert' );

if ( ! empty( $pattern_transform_mode ) && ( $pattern_is_horizontal_mode || $pattern_is_vertical_mode ) ) {
							$style_pattern_mode .= sprintf(
								'transform: %1$s; ',
								esc_html( $this->get_transform_css( $pattern_is_horizontal_mode, $pattern_is_vertical_mode ) )
							);
						};

// Set background pattern style only it's different compared to the larger device.
						$pattern_color_mode    = $helper->get_raw_value( "{$pattern_base_prop_name}_color", $props );
						$pattern_color_desktop = isset( $props[ "{$pattern_base_prop_name}_color" ] ) ? $props[ "{$pattern_base_prop_name}_color" ] : '';

if ( empty( $pattern_color_mode ) && ! empty( $pattern_color_desktop ) ) {
							$pattern_color_mode = $pattern_color_desktop;
						}

$pattern_style_svg_mode = et_pb_background_pattern_options()->get_svg( $pattern_style_name_mode, $pattern_color_mode, 'default', $pattern_is_rotated_mode, $pattern_is_inverted_mode );

$style_pattern_mode .= sprintf(
							'background-image: %1$s; ',
							esc_html( $pattern_style_svg_mode )
						);

// Pattern Size.
						$pattern_size_mode    = $helper->get_raw_value( "{$pattern_base_prop_name}_size", $props );
						$pattern_size_desktop = isset( $props[ "{$pattern_base_prop_name}_size" ] ) ? $props[ "{$pattern_base_prop_name}_size" ] : '';

if ( empty( $pattern_size_mode ) && ! empty( $pattern_size_desktop ) ) {
							$pattern_size_mode = $pattern_size_desktop;
						}

if ( ! empty( $pattern_size_mode ) ) {
							$pattern_width_desktop  = isset( $props[ "{$pattern_base_prop_name}_width" ] ) ? $props[ "{$pattern_base_prop_name}_width" ] : '';
							$pattern_width_mode     = $helper->get_raw_value( "{$pattern_base_prop_name}_width", $props, $pattern_width_desktop );
							$pattern_height_desktop = isset( $props[ "{$pattern_base_prop_name}_height" ] ) ? $props[ "{$pattern_base_prop_name}_height" ] : '';
							$pattern_height_mode    = $helper->get_raw_value( "{$pattern_base_prop_name}_height", $props, $pattern_height_desktop );

// Get Size CSS.
							$pattern_size_style_desktop = $this->get_background_size_css( $pattern_size_desktop, $pattern_width_desktop, $pattern_height_desktop );
							$pattern_size_style_mode    = $this->get_background_size_css( $pattern_size_mode, $pattern_width_mode, $pattern_height_mode );

$is_same_pattern_size_style = $pattern_size_style_mode === $pattern_size_style_desktop;

if ( ! empty( $pattern_size_style_mode ) && ! $is_same_pattern_size_style ) {
								if ( isset( $pattern_size_style_mode['size'] ) && $pattern_size_style_mode['size'] ) {
									$style_pattern_mode .= sprintf(
										'background-size: %1$s; ',
										esc_html( $pattern_size_style_mode['size'] )
									);
								}
							}
						}

// Check if pattern size has 'stretch' value or not.
						$is_pattern_size_stretch_mode = 'stretch' === $pattern_size_mode;

// Pattern Repeat.
						$pattern_repeat_mode    = $helper->get_raw_value( "{$pattern_base_prop_name}_repeat", $props );
						$pattern_repeat_desktop = isset( $props[ "{$pattern_base_prop_name}_repeat" ] ) ? $props[ "{$pattern_base_prop_name}_repeat" ] : '';

if ( empty( $pattern_repeat_mode ) && ! empty( $pattern_repeat_desktop ) ) {
							$pattern_repeat_mode = $pattern_repeat_desktop;
						}

$is_same_pattern_repeat_style = $pattern_repeat_mode === $pattern_repeat_desktop;

// Don't print the same pattern repeat.
						// Don't print pattern repeat when pattern size is 'stretch'.
						if ( ! empty( $pattern_repeat_mode ) && ! $is_same_pattern_repeat_style && ! $is_pattern_size_stretch_mode ) {
							$style_pattern_mode .= sprintf(
								'background-repeat: %1$s; ',
								esc_html( $pattern_repeat_mode )
							);
						}

// Pattern repeat origin.
						$pattern_position_mode    = $helper->get_raw_value( "{$pattern_base_prop_name}_repeat_origin", $props );
						$pattern_position_desktop = isset( $props[ "{$pattern_base_prop_name}_repeat_origin" ] ) ? $props[ "{$pattern_base_prop_name}_repeat_origin" ] : '';

if ( empty( $pattern_position_mode ) && ! empty( $pattern_position_desktop ) ) {
							$pattern_position_mode = $pattern_position_desktop;
						}

// Check if pattern repeat has 'space' value or not.
						$is_pattern_repeat_space_mode = 'space' === $pattern_repeat_mode;

// Print pattern repeat origin/offset when pattern size is not 'stretch',
						// and pattern repeat is not 'space'.
						if ( ! empty( $pattern_position_mode ) && ! $is_pattern_repeat_space_mode && ! $is_pattern_size_stretch_mode ) {
							$pattern_horizontal_offset_desktop = isset( $props[ "{$pattern_base_prop_name}_horizontal_offset" ] ) ? $props[ "{$pattern_base_prop_name}_horizontal_offset" ] : '';
							$pattern_horizontal_offset_mode    = $helper->get_raw_value( "{$pattern_base_prop_name}_horizontal_offset", $props, $pattern_horizontal_offset_desktop );
							$pattern_vertical_offset_desktop   = isset( $props[ "{$pattern_base_prop_name}_vertical_offset" ] ) ? $props[ "{$pattern_base_prop_name}_vertical_offset" ] : '';
							$pattern_vertical_offset_mode      = $helper->get_raw_value( "{$pattern_base_prop_name}_vertical_offset", $props, $pattern_vertical_offset_desktop );

// Get Position CSS.
							$pattern_position_style_desktop = $this->get_background_position_css( $pattern_position_desktop, $pattern_horizontal_offset_desktop, $pattern_vertical_offset_desktop );
							$pattern_position_style_mode    = $this->get_background_position_css( $pattern_position_mode, $pattern_horizontal_offset_mode, $pattern_vertical_offset_mode );

$is_same_pattern_position_style = $pattern_position_style_mode === $pattern_position_style_desktop;

if ( ! empty( $pattern_position_style_mode ) && ! $is_same_pattern_position_style ) {
								$style_pattern_mode .= sprintf(
									'background-position: %1$s; ',
									esc_html( $pattern_position_style_mode['position'] )
								);
							}
						}

// Pattern Blend Mode.
						$pattern_blend_mode    = $helper->get_raw_value( "{$pattern_base_prop_name}_blend_mode", $props );
						$pattern_blend_desktop = isset( $props[ "{$pattern_base_prop_name}_blend_mode" ] ) ? $props[ "{$pattern_base_prop_name}_blend_mode" ] : '';

if ( empty( $pattern_blend_mode ) && ! empty( $pattern_blend_desktop ) ) {
							$pattern_blend_mode = $pattern_blend_desktop;
						}

$is_same_pattern_blend_style = $pattern_blend_mode === $pattern_blend_desktop;

// Don't print the same pattern blend mode.
						if ( ! empty( $pattern_blend_mode ) && ! $is_same_pattern_blend_style ) {
							$style_pattern_mode .= sprintf(
								'mix-blend-mode: %1$s; ',
								esc_html( $pattern_blend_mode )
							);
						}
					}
				}

// Background Mask Mode (Hover / Sticky).
				// This part is little bit different compared to responsive implementation. In
				// this case, mode is enabled on the background field, not on the each of those
				// fields. So, built in function get_value() doesn't work in this case.
				// Temporarily, we need to fetch the the value from get_raw_value().
				if ( $use_mask_options && 'fields_only' !== $use_mask_options ) {
					$mask_style_name_mode = $responsive->get_inheritance_background_value(
						$props,
						"{$base_prop_name}_mask_style",
						$mode,
						$base_prop_name,
						$fields_definition
					);

if ( '' !== $mask_style_name_mode ) {
						// Mask Transform.
						$mask_transform_mode    = $helper->get_raw_value( "{$mask_base_prop_name}_transform", $props );
						$mask_transform_desktop = isset( $props[ "{$mask_base_prop_name}_transform" ] ) ? $props[ "{$mask_base_prop_name}_transform" ] : '';

if ( empty( $mask_transform_mode ) && ! empty( $mask_transform_desktop ) ) {
							$mask_transform_mode = $mask_transform_desktop;
						}

$mask_is_horizontal_mode = $this->get_transform_state( $mask_transform_mode, 'horizontal' );
						$mask_is_vertical_mode   = $this->get_transform_state( $mask_transform_mode, 'vertical' );
						$mask_is_rotated_mode    = $this->get_transform_state( $mask_transform_mode, 'rotate' );
						$mask_is_inverted_mode   = $this->get_transform_state( $mask_transform_mode, 'invert' );

if ( ! empty( $mask_transform_mode ) && ( $mask_is_horizontal_mode || $mask_is_vertical_mode ) ) {
							$style_mask_mode .= sprintf(
								'transform: %1$s; ',
								esc_html( $this->get_transform_css( $mask_is_horizontal_mode, $mask_is_vertical_mode ) )
							);
						};

// Mask Size.
						$mask_size_default = $this->get_attr_default( 'size', $mask_base_prop_name, $fields_definition );
						$mask_size_mode    = $helper->get_raw_value( "{$mask_base_prop_name}_size", $props );
						$mask_size_desktop = isset( $props[ "{$mask_base_prop_name}_size" ] ) ? $props[ "{$mask_base_prop_name}_size" ] : '';

if ( empty( $mask_size_mode ) && ! empty( $mask_size_desktop ) ) {
							$mask_size_mode = $mask_size_desktop;
						}

if ( ! empty( $mask_size_mode ) ) {
							$mask_width_desktop  = isset( $props[ "{$mask_base_prop_name}_width" ] ) ? $props[ "{$mask_base_prop_name}_width" ] : '';
							$mask_width_mode     = $helper->get_raw_value( "{$mask_base_prop_name}_width", $props, $mask_width_desktop );
							$mask_height_desktop = isset( $props[ "{$mask_base_prop_name}_height" ] ) ? $props[ "{$mask_base_prop_name}_height" ] : '';
							$mask_height_mode    = $helper->get_raw_value( "{$mask_base_prop_name}_height", $props, $mask_height_desktop );

// Get Size CSS.
							$mask_size_style_desktop = $this->get_background_size_css( $mask_size_desktop, $mask_width_desktop, $mask_height_desktop, $mask_size_default, 'mask' );
							$mask_size_style_mode    = $this->get_background_size_css( $mask_size_mode, $mask_width_mode, $mask_height_mode, $mask_size_default, 'mask' );

$is_same_mask_size_style = $mask_size_style_mode === $mask_size_style_desktop;

if ( ! empty( $mask_size_style_mode ) && ! $is_same_mask_size_style ) {
								if ( isset( $mask_size_style_mode['size'] ) && $mask_size_style_mode['size'] ) {
									$style_mask_mode .= sprintf(
										'background-size: %1$s; ',
										esc_html( $mask_size_style_mode['size'] )
									);
								}
							}
						}

// Set background mask style only it's different compared to the larger device.
						$mask_color_mode    = $helper->get_raw_value( "{$mask_base_prop_name}_color", $props );
						$mask_color_desktop = isset( $props[ "{$mask_base_prop_name}_color" ] ) ? $props[ "{$mask_base_prop_name}_color" ] : '';

if ( empty( $mask_color_mode ) && ! empty( $mask_color_desktop ) ) {
							$mask_color_mode = $mask_color_desktop;
						}

$mask_ratio_mode    = $helper->get_raw_value( "{$mask_base_prop_name}_aspect_ratio", $props );
						$mask_ratio_desktop = isset( $props[ "{$mask_base_prop_name}_aspect_ratio" ] ) ? $props[ "{$mask_base_prop_name}_aspect_ratio" ] : '';

if ( empty( $mask_ratio_mode ) && ! empty( $mask_ratio_desktop ) ) {
							$mask_ratio_mode = $mask_ratio_desktop;
						}

$mask_style_svg_mode = et_pb_background_mask_options()->get_svg( $mask_style_name_mode, $mask_color_mode, $mask_ratio_mode, $mask_is_rotated_mode, $mask_is_inverted_mode, $mask_size_mode );

$style_mask_mode .= sprintf(
							'background-image: %1$s; ',
							esc_html( $mask_style_svg_mode )
						);

// Mask Position.
						$mask_position_mode    = $helper->get_raw_value( "{$mask_base_prop_name}_position", $props );
						$mask_position_desktop = isset( $props[ "{$mask_base_prop_name}_position" ] ) ? $props[ "{$mask_base_prop_name}_position" ] : '';

if ( empty( $mask_position_mode ) && ! empty( $mask_position_desktop ) ) {
							$mask_position_mode = $mask_position_desktop;
						}

if ( ! empty( $mask_position_mode ) && ! empty( $mask_size_mode ) && 'stretch' !== $mask_size_mode ) {
							$mask_horizontal_offset_desktop = isset( $props[ "{$mask_base_prop_name}_horizontal_offset" ] ) ? $props[ "{$mask_base_prop_name}_horizontal_offset" ] : '';
							$mask_horizontal_offset_mode    = $helper->get_raw_value( "{$mask_base_prop_name}_horizontal_offset", $props, $mask_horizontal_offset_desktop );
							$mask_vertical_offset_desktop   = isset( $props[ "{$mask_base_prop_name}_vertical_offset" ] ) ? $props[ "{$mask_base_prop_name}_vertical_offset" ] : '';
							$mask_vertical_offset_mode      = $helper->get_raw_value( "{$mask_base_prop_name}_vertical_offset", $props, $mask_vertical_offset_desktop );

// Get Position CSS.
							$mask_position_style_desktop = $this->get_background_position_css( $mask_position_desktop, $mask_horizontal_offset_desktop, $mask_vertical_offset_desktop );
							$mask_position_style_mode    = $this->get_background_position_css( $mask_position_mode, $mask_horizontal_offset_mode, $mask_vertical_offset_mode );

$is_same_mask_position_style = $mask_position_style_mode === $mask_position_style_desktop;

if ( ! empty( $mask_position_style_mode ) && ! $is_same_mask_position_style ) {
								$style_mask_mode .= sprintf(
									'background-position: %1$s; ',
									esc_html( $mask_position_style_mode['position'] )
								);
							}
						}

// Mask Blend Mode.
						$mask_blend_mode    = $helper->get_raw_value( "{$mask_base_prop_name}_blend_mode", $props );
						$mask_blend_desktop = isset( $props[ "{$mask_base_prop_name}_blend_mode" ] ) ? $props[ "{$mask_base_prop_name}_blend_mode" ] : '';

if ( empty( $mask_blend_mode ) && ! empty( $mask_blend_desktop ) ) {
							$mask_blend_mode = $mask_blend_desktop;
						}

$is_same_mask_blend_style = $mask_blend_mode === $mask_blend_desktop;

// Don't print the same mask blend mode.
						if ( ! empty( $mask_blend_mode ) && ! $is_same_mask_blend_style ) {
							$style_mask_mode .= sprintf(
								'mix-blend-mode: %1$s; ',
								esc_html( $mask_blend_mode )
							);
						}
					}
				}

// Render background mode styles.
				if ( '' !== $style_mode ) {
					$el_style = array(
						'selector'    => $selector_mode,
						'declaration' => rtrim( $style_mode ),
						'priority'    => $module->get_style_priority(),
					);
					ET_Builder_Element::set_style( $function_name, $el_style );
				}

// Render pattern mode styles.
				if ( '' !== $style_pattern_mode ) {
					$el_pattern_style = array(
						'selector'    => $selector_pattern_mode,
						'declaration' => rtrim( $style_pattern_mode ),
						'priority'    => $module->get_style_priority(),
					);
					ET_Builder_Element::set_style( $function_name, $el_pattern_style );
				}

// Render mask mode styles.
				if ( '' !== $style_mask_mode ) {
					$el_mask_style = array(
						'selector'    => $selector_mask_mode,
						'declaration' => rtrim( $style_mask_mode ),
						'priority'    => $module->get_style_priority(),
					);
					ET_Builder_Element::set_style( $function_name, $el_mask_style );
				}
			}
		}

// Cleanup.
		$args              = null;
		$attrs_unprocessed = null;
		$feature_manager   = null;
		$module            = null;
		$props             = null;
		$responsive        = null;
	}

/**
	 * Return default status for device modes.
	 *
	 * @since 4.15.0
	 *
	 * @return array
	 */
	public function get_default_mode_status() {
		return array(
			'desktop' => false,
			'tablet'  => false,
			'phone'   => false,
		);
	}

/**
	 * Returns real color value by the global color ID, if any.
	 *
	 * @param string $color Raw Color Value.
	 *
	 * @since 4.16.0 Refactored to perform a substring find/replace (for compound settings like in Gradient Builder).
	 *
	 * @return string
	 */
	public function get_color_value( $color ) {
		if ( false === strpos( $color, 'gcid-' ) ) {
			return $color;
		}

$global_colors = et_builder_get_all_global_colors();

// If there are no matching Global Colors, return null.
		if ( ! is_array( $global_colors ) ) {
			return null;
		}

foreach ( $global_colors as $gcid => $details ) {
			if ( false !== strpos( $color, $gcid ) ) {
				// Match substring (needed for attrs like gradient stops).
				$color = str_replace( $gcid, $details['color'], $color );
			}
		}

return $color;
	}

/**
	 * Get array of attributes which have dynamic content enabled.
	 *
	 * @param mixed[] $attrs Module attributes.
	 *
	 * @see ET_Builder_Element::_get_enabled_dynamic_attributes()
	 *
	 * @since 4.15.0
	 *
	 * @return string[]
	 */
	protected function _get_enabled_dynamic_attributes( $attrs ) {
		$enabled_dynamic_attributes = isset( $attrs['_dynamic_attributes'] ) ? $attrs['_dynamic_attributes'] : '';
		$enabled_dynamic_attributes = array_filter( explode( ',', $enabled_dynamic_attributes ) );

return $enabled_dynamic_attributes;
	}

/**
	 * Check if an attribute value is dynamic or not.
	 *
	 * @param string $attribute Attribute name.
	 * @param string $value Attribute value.
	 * @param array  $enabled_dynamic_attributes Attributes which have dynamic content enabled.
	 *
	 * @see ET_Builder_Element::_is_dynamic_value()
	 *
	 * @since 4.15.0
	 *
	 * @return bool
	 */
	protected function _is_dynamic_value( $attribute, $value, $enabled_dynamic_attributes ) {
		if ( ! in_array( $attribute, $enabled_dynamic_attributes, true ) ) {
			return false;
		}

return et_builder_parse_dynamic_content( $value )->is_dynamic();
	}

/**
	 * Get whether third party post interference should be respected.
	 * Current use case is for plugins like Toolset that render a
	 * loop within a layout which renders another layout for
	 * each post - in this case we must NOT override the
	 * current post so the loop works as expected.
	 *
	 * @see ET_Builder_Element::_should_respect_post_interference()
	 *
	 * @since 4.15.0
	 *
	 * @return boolean
	 */
	protected static function _should_respect_post_interference() {
		$post = ET_Post_Stack::get();

return null !== $post && get_the_ID() !== $post->ID;
	}

/**
	 * Retrieve the main query post id.
	 * Accounts for third party interference with the current post.
	 *
	 * @see ET_Builder_Element::_get_main_post_id()
	 *
	 * @since 4.15.0
	 *
	 * @return integer|boolean
	 */
	protected static function _get_main_post_id() {
		if ( self::_should_respect_post_interference() ) {
			return get_the_ID();
		}

return ET_Post_Stack::get_main_post_id();
	}
}

Rename File

Retirement Max Radio - We Maximize Your Retirement

Ask Ken!

Have a Retirement Question? Email us to have your question aired live on Retirement Max Radio.

email us...!

Shoot us a text...!

Latest Show

Retirement Max Radio with Ken Reeves · Retirement Max Radio with Ken Reeves

Topics We Discuss



LIFETIME INCOME

WE PUT THE PIECES TOGETHER!



LONG TERM CARE

UNDERSTAND THE RISK



GROWTH

PRINCIPAL PROTECTION IS THE KEY



INFLATION

DO YOU REMEBER WHEN…



FEE ANALYSIS

HOW MUCH ARE YOU PAYING?



RISK MANAGEMENT

ALWAYS YOUR CHOICE



TAXES

ONLY AS MUCH AS NECESSARY



Social Security

When is the best time to take?

We’ll Show You How It’s Done

We will make retirement simple. Our mission is to equip our listeners with the knowledge they need to create a retirement roadmap.

Each week we cover hot topics with our host and guest. The latest developments in the financial world can affect your retirement drastically. We will help navigate that mine field with common-sense strategies that will help you make the most of your retirement.

Trainings & Workshops

We Make it Easy to Connect With Users On Every Platform

Listen on your favorite platform.

Multiple Ways to Listen!

Retirement Max Radio

WZRR Saturday from 12:00 – 1:00
WERC Sunday from 9:00 AM – 10:00 PM
WAAX Sunday from 1:00 – 2:00

Retirement Max Radio Apex Financial Group on Computer Ken Reeves

Success Stories

I was driving back from the beach when I heard Ken’s radio show. My husband and I decided to give him a call for a free consultation. He identified several fees that we were paying and how much of our retirement was going towards our former broker!

Angel Marks

Retired

Listening to retirement Max Radio was the best thing that I happened to my retirement. Learning how to secure a base benefit first to cover all of my bases ensures that I don’t have to worry about my bill being paid in retirement. In addition, I was able to maximize my social security benefit.

Daniel Parker

Pre-Retiree

I wasn’t quite sure how to handle my social security. I got several recommendations from other advisors, but none compared to Ken’s recommendation. He used software that helped both me and my wife maximize our social security benefits. We now have a perfect guide to go by.

John Smith

Retired

Let’s Get Started

Ready To Make a Real Change? Let’s Build this Thing Together!

Setup a Free Meeting

G-Q6D691ZTVP