ablocks / includes / blocks / info-box / block.php

block.php in aBlocks – Gutenberg Blocks, User Dashboard Builder, Popup Builder, Form Builder & Animation Builder 2.13.1, at includes/blocks/info-box/block.php

1,065 lines 46.1 KB

Raw Download Zip

1	<?php
2	namespace ABlocks\Blocks\InfoBox;
3
4	if ( ! defined( 'ABSPATH' ) ) {
5	exit;
6	}
7
8	use ABlocks\Classes\BlockBaseAbstract;
9	use ABlocks\Classes\CssGenerator;
10	use ABlocks\Classes\CssGeneratorV2;
11	use ABlocks\Controls\Alignment;
12	use ABlocks\Controls\Typography;
13	use ABlocks\Controls\TextShadow;
14	use ABlocks\Controls\TextStroke;
15	use ABlocks\Controls\Border;
16	use ABlocks\Controls\Dimensions;
17	use ABlocks\Controls\Icon;
18	use ABlocks\Controls\Range;
19	use ABlocks\Controls\Color;
20
21	class Block extends BlockBaseAbstract {
22	protected $block_name = 'info-box';
23
24	public function build_css_v1( $attributes ) {
25	$css_generator = new CssGenerator( $attributes, $this->block_name );
26
27	$css_generator->add_class_styles(
28	'{{WRAPPER}}.ablocks-block--info-box > .ablocks-block-container',
29	$this->get_info_box( $attributes ),
30	$this->get_info_box( $attributes, 'Tablet' ),
31	$this->get_info_box( $attributes, 'Mobile' )
32	);
33	$css_generator->add_class_styles(
34	'{{WRAPPER}}.ablocks-block--info-box > .ablocks-block-container > .ablocks-block--info-box__content',
35	$this->get_info_box_content( $attributes ),
36	$this->get_info_box_content( $attributes, 'Tablet' ),
37	$this->get_info_box_content( $attributes, 'Mobile' )
38	);
39
40	// badge starts
41	$css_generator->add_class_styles(
42	'{{WRAPPER}}.ablocks-block--info-box > .ablocks-block-container > .ablocks-info-box-badge-link',
43	$this->get_badge_css( $attributes ),
44	$this->get_badge_css( $attributes, 'Tablet' ),
45	$this->get_badge_css( $attributes, 'Mobile' )
46	);
47	$css_generator->add_class_styles(
48	'{{WRAPPER}}.ablocks-block--info-box > .ablocks-block-container > .ablocks-info-box-badge-link:hover',
49	$this->get_badge_hover_css( $attributes ),
50	$this->get_badge_hover_css( $attributes, 'Tablet' ),
51	$this->get_badge_hover_css( $attributes, 'Mobile' )
52	);
53	$css_generator->add_class_styles(
54	'{{WRAPPER}}.ablocks-block--info-box > .ablocks-block-container > .ablocks-info-box-badge-link > .ablocks-info-box-badge-link-text',
55	$this->get_badge_text_css( $attributes )
56	);
57
58	// Icon Style
59	$css_generator->add_class_styles(
60	'{{WRAPPER}}.ablocks-block--info-box .ablocks-block-container > .ablocks-icon-wrap, {{WRAPPER}}.ablocks-block--info-box .ablocks-block-container > a .ablocks-icon-wrap',
61	Icon::get_wrapper_css( $attributes ),
62	Icon::get_wrapper_css( $attributes, 'Tablet' ),
63	Icon::get_wrapper_css( $attributes, 'Mobile' )
64	);
65	$css_generator->add_class_styles(
66	'{{WRAPPER}}.ablocks-block--info-box .ablocks-block-container > .ablocks-icon-wrap, {{WRAPPER}}.ablocks-block--info-box .ablocks-block-container > a .ablocks-icon-wrap',
67	$this->get_icon_wrapper_extra_css( $attributes ),
68	$this->get_icon_wrapper_extra_css( $attributes, 'Tablet' ),
69	$this->get_icon_wrapper_extra_css( $attributes, 'Mobile' )
70	);
71	$css_generator->add_class_styles(
72	'{{WRAPPER}}.ablocks-block--info-box > .ablocks-block-container > .ablocks-icon-wrap > img.ablocks-image-icon, {{WRAPPER}}.ablocks-block--info-box > .ablocks-block-container > a .ablocks-icon-wrap > img.ablocks-image-icon',
73	Icon::get_element_image_css( $attributes ),
74	Icon::get_element_image_css( $attributes, 'Tablet' ),
75	Icon::get_element_image_css( $attributes, 'Mobile' ),
76	);
77	$css_generator->add_class_styles(
78	'{{WRAPPER}}.ablocks-block--info-box:hover > .ablocks-block-container > .ablocks-icon-wrap > img.ablocks-image-icon, {{WRAPPER}}.ablocks-block--info-box:hover > .ablocks-block-container > a .ablocks-icon-wrap > img.ablocks-image-icon',
79	Icon::get_element_image_hover_css( $attributes ),
80	Icon::get_element_image_hover_css( $attributes, 'Tablet' ),
81	Icon::get_element_image_hover_css( $attributes, 'Mobile' ),
82	);
83	$css_generator->add_class_styles(
84	'{{WRAPPER}}.ablocks-block--info-box > .ablocks-block-container > .ablocks-icon-wrap > svg.ablocks-svg-icon',
85	Icon::get_element_css( $attributes ),
86	Icon::get_element_css( $attributes, 'Tablet' ),
87	Icon::get_element_css( $attributes, 'Mobile' ),
88	);
89	$css_generator->add_class_styles(
90	'{{WRAPPER}}.ablocks-block--info-box:hover > .ablocks-block-container > .ablocks-icon-wrap > svg.ablocks-svg-icon',
91	Icon::get_element_image_hover_css( $attributes ),
92	Icon::get_element_image_hover_css( $attributes, 'Tablet' ),
93	Icon::get_element_image_hover_css( $attributes, 'Mobile' ),
94	);
95	$css_generator->add_class_styles(
96	'{{WRAPPER}}.ablocks-block--info-box:hover .ablocks-block-container > .ablocks-icon-wrap svg.ablocks-svg-icon , {{WRAPPER}}.ablocks-block--info-box:hover .ablocks-block-container > a .ablocks-icon-wrap svg.ablocks-svg-icon',
97	$this->get_icon_css_hover( $attributes ),
98	);
99	$css_generator->add_class_styles(
100	'{{WRAPPER}}.ablocks-block--info-box:hover .ablocks-block-container > .ablocks-icon-wrap , {{WRAPPER}}.ablocks-block--info-box:hover .ablocks-block-container > a .ablocks-icon-wrap',
101	$this->get_icon_css_background_hover( $attributes ),
102	);
103
104	// Heading starts
105	$desktop_heading_text_styles = $this->get_heading_text_css( $attributes );
106	if ( ! empty( $attributes['headingTextColor'] ) ) {
107	$desktop_heading_text_styles['color'] = $attributes['headingTextColor'];
108	}
109	$css_generator->add_class_styles(
110	'{{WRAPPER}}.ablocks-block--info-box > .ablocks-block-container > .ablocks-block--info-box__content > .ablocks-info-box-heading',
111	$desktop_heading_text_styles,
112	$this->get_heading_text_css( $attributes, 'Tablet' ),
113	$this->get_heading_text_css( $attributes, 'Mobile' )
114	);
115	$css_generator->add_class_styles(
116	'{{WRAPPER}}.ablocks-block--info-box:hover > .ablocks-block-container > .ablocks-block--info-box__content > .ablocks-info-box-heading',
117	$this->get_heading_text_css_hover( $attributes ),
118	$this->get_heading_text_css_hover( $attributes, 'Tablet' ),
119	$this->get_heading_text_css_hover( $attributes, 'Mobile' )
120	);
121
122	// Sub Heading starts
123	$desktop_sub_heading_text_styles = $this->get_sub_heading_text_css( $attributes );
124	if ( ! empty( $attributes['subHeadingTextColor'] ) ) {
125	$desktop_sub_heading_text_styles['color'] = $attributes['subHeadingTextColor'];
126	}
127	$css_generator->add_class_styles(
128	'{{WRAPPER}}.ablocks-block--info-box > .ablocks-block-container > .ablocks-block--info-box__content > .ablocks-info-box-sub-heading',
129	$desktop_sub_heading_text_styles,
130	$this->get_sub_heading_text_css( $attributes, 'Tablet' ),
131	$this->get_sub_heading_text_css( $attributes, 'Mobile' )
132	);
133	$css_generator->add_class_styles(
134	'{{WRAPPER}}.ablocks-block--info-box:hover > .ablocks-block-container > .ablocks-block--info-box__content > .ablocks-info-box-sub-heading',
135	$this->get_sub_heading_text_css_hover( $attributes ),
136	$this->get_sub_heading_text_css_hover( $attributes, 'Tablet' ),
137	$this->get_sub_heading_text_css_hover( $attributes, 'Mobile' )
138	);
139
140	// Description starts
141	$desktop_des_text_style = $this->get_des_text_css( $attributes );
142	if ( ! empty( $attributes['desTextColor'] ) ) {
143	$desktop_des_text_style['color'] = $attributes['desTextColor'];
144	}
145	$css_generator->add_class_styles(
146	'{{WRAPPER}}.ablocks-block--info-box > .ablocks-block-container > .ablocks-block--info-box__content > .ablocks-info-box-text',
147	$desktop_des_text_style,
148	$this->get_des_text_css( $attributes, 'Tablet' ),
149	$this->get_des_text_css( $attributes, 'Mobile' ),
150	);
151	$css_generator->add_class_styles(
152	'{{WRAPPER}}.ablocks-block--info-box:hover > .ablocks-block-container > .ablocks-block--info-box__content > .ablocks-info-box-text',
153	$this->get_des_text_css_hover( $attributes ),
154	$this->get_des_text_css_hover( $attributes, 'Tablet' ),
155	$this->get_des_text_css_hover( $attributes, 'Mobile' )
156	);
157	$css_generator->add_class_styles(
158	'{{WRAPPER}}.ablocks-block--info-box > .ablocks-block-container > .ablocks-block--info-box__content > .ablocks-info-box-text-drop-caps::first-letter',
159	$this->get_des_drop_text_css( $attributes ),
160	$this->get_des_drop_text_css( $attributes, 'Tablet' ),
161	$this->get_des_drop_text_css( $attributes, 'Mobile' ),
162	);
163
164	// rating icon css
165	$css_generator->add_class_styles(
166	'{{WRAPPER}} .ablocks-info-box-star-ratings',
167	$this->get_container_css( $attributes ),
168	$this->get_container_css( $attributes, 'Tablet' ),
169	$this->get_container_css( $attributes, 'Mobile' ),
170	);
171	$css_generator->add_class_styles(
172	'{{WRAPPER}} .ablocks-info-box-star-ratings',
173	$this->get_rating_css( $attributes ),
174	$this->get_rating_css( $attributes, 'Tablet' ),
175	$this->get_rating_css( $attributes, 'Mobile' ),
176	);
177	$css_generator->add_class_styles(
178	'{{WRAPPER}} .ablocks-info-box-star-ratings-icons > .ablocks-info-box-rating > .ablocks-info-box-rating__fill > .ablocks-icon-wrap, {{WRAPPER}} .ablocks-info-box-star-ratings-icons > .ablocks-info-box-rating > .ablocks-info-box-rating__unfill > .ablocks-icon-wrap',
179	Icon::get_wrapper_css( $attributes, '', 'starIcon' ),
180	Icon::get_wrapper_css( $attributes, 'Tablet', 'starIcon' ),
181	Icon::get_wrapper_css( $attributes, 'Mobile', 'starIcon' )
182	);
183	// rating icon spacing css
184	$css_generator->add_class_styles(
185	'{{WRAPPER}} .ablocks-info-box-star-ratings-icons',
186	$this->get_rating_icon_spacing_css( $attributes ),
187	$this->get_rating_icon_spacing_css( $attributes, 'Tablet' ),
188	$this->get_rating_icon_spacing_css( $attributes, 'Mobile' ),
189	);
190	$css_generator->add_class_styles(
191	'{{WRAPPER}} .ablocks-info-box-star-ratings-icons > .ablocks-info-box-rating > .ablocks-info-box-rating__fill > .ablocks-icon-wrap > svg',
192	$this->get_fill_rating_css( $attributes ),
193	$this->get_fill_rating_css( $attributes, 'Tablet' ),
194	$this->get_fill_rating_css( $attributes, 'Mobile' ),
195	);
196	$css_generator->add_class_styles(
197	'{{WRAPPER}} .ablocks-info-box-star-ratings-icons > .ablocks-info-box-rating > .ablocks-info-box-rating__unfill > .ablocks-icon-wrap > svg',
198	$this->get_unfill_rating_css( $attributes ),
199	$this->get_unfill_rating_css( $attributes, 'Tablet' ),
200	$this->get_unfill_rating_css( $attributes, 'Mobile' ),
201	);
202	$css_generator->add_class_styles(
203	'{{WRAPPER}}.ablocks-block--info-box:hover > .ablocks-block-container > .ablocks-block--info-box__content > .ablocks-info-box-star-ratings > .ablocks-info-box-star-ratings-icons > .ablocks-info-box-rating > .ablocks-info-box-rating__fill > .ablocks-icon-wrap > svg',
204	$this->get_fill_rating_css_hover( $attributes ),
205	$this->get_fill_rating_css_hover( $attributes, 'Tablet' ),
206	$this->get_fill_rating_css_hover( $attributes, 'Mobile' ),
207	);
208	$css_generator->add_class_styles(
209	'{{WRAPPER}}.ablocks-block--info-box:hover > .ablocks-block-container > .ablocks-block--info-box__content > .ablocks-info-box-star-ratings > .ablocks-info-box-star-ratings-icons > .ablocks-info-box-rating > .ablocks-info-box-rating__unfill > .ablocks-icon-wrap > svg',
210	$this->get_unfill_rating_css_hover( $attributes ),
211	$this->get_unfill_rating_css_hover( $attributes, 'Tablet' ),
212	$this->get_unfill_rating_css_hover( $attributes, 'Mobile' ),
213	);
214	// rating number css
215	$css_generator->add_class_styles(
216	'{{WRAPPER}} .ablocks-info-box-star-rating-number',
217	$this->get_rating_number_css( $attributes ),
218	$this->get_rating_number_css( $attributes, 'Tablet' ),
219	$this->get_rating_number_css( $attributes, 'Mobile' ),
220	);
221
222	// Generate button CSS start
223	$css_generator->add_class_styles(
224	'{{WRAPPER}}.ablocks-block--info-box > .ablocks-block-container > .ablocks-block--info-box__content > .ablocks-info-box-btn-link',
225	$this->get_button_css( $attributes ),
226	$this->get_button_css( $attributes, 'Tablet' ),
227	$this->get_button_css( $attributes, 'Mobile' )
228	);
229	// Generate button CSS end
230	// Generate button hover CSS start
231	$css_generator->add_class_styles(
232	'{{WRAPPER}}.ablocks-block--info-box > .ablocks-block-container > .ablocks-block--info-box__content > .ablocks-info-box-btn-link:hover',
233	$this->get_button_hover_css( $attributes ),
234	$this->get_button_hover_css( $attributes, 'Tablet' ),
235	$this->get_button_hover_css( $attributes, 'Mobile' )
236	);
237	// Generate button icon hover CSS
238	$css_generator->add_class_styles(
239	'{{WRAPPER}}.ablocks-block--info-box > .ablocks-block-container > .ablocks-block--info-box__content > .ablocks-info-box-btn-link:hover > .ablocks-icon-wrap > svg.ablocks-svg-icon',
240	$this->get_button_icon_hover_css( $attributes ),
241	$this->get_button_icon_hover_css( $attributes, 'Tablet' ),
242	$this->get_button_icon_hover_css( $attributes, 'Mobile' )
243	);
244	// Generate button text CSS start
245	$css_generator->add_class_styles(
246	'{{WRAPPER}}.ablocks-block--info-box > .ablocks-block-container > .ablocks-block--info-box__content > .ablocks-info-box-btn-link > .ablocks-info-box-btn-link-text',
247	$this->get_button_text_css( $attributes )
248	);
249	// Generate button icon CSS start
250	$css_generator->add_class_styles(
251	'{{WRAPPER}} .ablocks-info-box-btn-link > .ablocks-icon-wrap',
252	Icon::get_wrapper_css( $attributes, '', 'btnIcon' ),
253	Icon::get_wrapper_css( $attributes, 'Tablet', 'btnIcon' ),
254	Icon::get_wrapper_css( $attributes, 'Mobile', 'btnIcon' )
255	);
256	$css_generator->add_class_styles(
257	'{{WRAPPER}} .ablocks-info-box-btn-link > .ablocks-icon-wrap > svg.ablocks-svg-icon',
258	Icon::get_element_css( $attributes, '', 'btnIcon' ),
259	Icon::get_element_css( $attributes, 'Tablet', 'btnIcon' ),
260	Icon::get_element_css( $attributes, 'Mobile', 'btnIcon' ),
261	);
262	$css_generator->add_class_styles(
263	'{{WRAPPER}} .ablocks-info-box-btn-link > .ablocks-icon-wrap > svg.ablocks-svg-icon:hover',
264	Icon::get_element_image_hover_css( $attributes, '', 'btnIcon' ),
265	Icon::get_element_image_hover_css( $attributes, 'Tablet', 'btnIcon' ),
266	Icon::get_element_image_hover_css( $attributes, 'Mobile', 'btnIcon' ),
267	);
268	$css_generator->add_class_styles(
269	'{{WRAPPER}} .ablocks-info-box-btn-link > .ablocks-icon-wrap:hover',
270	Icon::get_wrapper_hover_css( $attributes, '', 'btnIcon' ),
271	Icon::get_wrapper_hover_css( $attributes, 'Tablet', 'btnIcon' ),
272	Icon::get_wrapper_hover_css( $attributes, 'Mobile', 'btnIcon' ),
273	);
274	// Specificity override: the flex rule above has (0,2,0); the global hide rule also has (0,2,0) but
275	// comes earlier in the CSS output, so flex wins due to source order. This override uses
276	// {{WRAPPER}}:not(.ablocks-has-block-container).ablocks-hide-on-* → (0,3,0), placed last,
277	// so display:none always beats display:flex regardless of order. Restore uses flex (not block)
278	// so the Info Box layout stays intact when a device-hidden block becomes visible at a smaller breakpoint.
279	$css_generator->add_class_styles(
280	'{{WRAPPER}}:not(.ablocks-has-block-container).ablocks-hide-on-desktop,{{WRAPPER}}:not(.ablocks-has-block-container).ablocks-hide-on-tablet,{{WRAPPER}}:not(.ablocks-has-block-container).ablocks-hide-on-mobile',
281	! empty( $attributes['_hide_on_desktop'] ) ? [ 'display' => 'none' ] : [],
282	! empty( $attributes['_hide_on_tablet'] )
283	? [ 'display' => 'none' ]
284	: ( ! empty( $attributes['_hide_on_desktop'] ) ? [ 'display' => 'flex' ] : [] ),
285	! empty( $attributes['_hide_on_mobile'] )
286	? [ 'display' => 'none' ]
287	: ( ! empty( $attributes['_hide_on_tablet'] ) ? [ 'display' => 'flex' ] : [] )
288	);
289	return $css_generator->generate_css();
290	}
291	public function build_css_v2( $attributes ) {
292	$css_generator = new CssGeneratorV2( $attributes, $this->block_name );
293
294	$css_generator->add_class_styles(
295	'{{WRAPPER}}:not(.ablocks-has-block-container), {{WRAPPER}}.ablocks-block--info-box > .ablocks-block-container',
296	$this->get_info_box( $attributes ),
297	$this->get_info_box( $attributes, 'Tablet' ),
298	$this->get_info_box( $attributes, 'Mobile' )
299	);
300	$css_generator->add_class_styles(
301	'{{WRAPPER}} .ablocks-block--info-box__content',
302	$this->get_info_box_content( $attributes ),
303	$this->get_info_box_content( $attributes, 'Tablet' ),
304	$this->get_info_box_content( $attributes, 'Mobile' )
305	);
306
307	// badge starts
308	$css_generator->add_class_styles(
309	'{{WRAPPER}} .ablocks-info-box-badge-link',
310	$this->get_badge_css( $attributes ),
311	$this->get_badge_css( $attributes, 'Tablet' ),
312	$this->get_badge_css( $attributes, 'Mobile' )
313	);
314	$css_generator->add_class_styles(
315	'{{WRAPPER}} .ablocks-info-box-badge-link:hover',
316	$this->get_badge_hover_css( $attributes ),
317	$this->get_badge_hover_css( $attributes, 'Tablet' ),
318	$this->get_badge_hover_css( $attributes, 'Mobile' )
319	);
320	$css_generator->add_class_styles(
321	'{{WRAPPER}} .ablocks-info-box-badge-link > .ablocks-info-box-badge-link-text',
322	$this->get_badge_text_css( $attributes )
323	);
324
325	// Icon Style
326	$css_generator->add_class_styles(
327	'{{WRAPPER}}:not(.ablocks-has-block-container) > .ablocks-icon-wrap,
328	{{WRAPPER}} > .ablocks-block-container > .ablocks-icon-wrap,
329	{{WRAPPER}}:not(.ablocks-has-block-container) > a .ablocks-icon-wrap,
330	{{WRAPPER}} > .ablocks-block-container > a .ablocks-icon-wrap',
331	Icon::get_wrapper_css( $attributes ),
332	Icon::get_wrapper_css( $attributes, 'Tablet' ),
333	Icon::get_wrapper_css( $attributes, 'Mobile' )
334	);
335	// Icon Style
336	$css_generator->add_class_styles(
337	'{{WRAPPER}}:not(.ablocks-has-block-container) > .ablocks-icon-wrap:hover,
338	{{WRAPPER}} > .ablocks-block-container > .ablocks-icon-wrap:hover,
339	{{WRAPPER}}:not(.ablocks-has-block-container) > a .ablocks-icon-wrap:hover,
340	{{WRAPPER}} > .ablocks-block-container > a .ablocks-icon-wrap:hover',
341	Icon::get_wrapper_hover_css( $attributes ),
342	Icon::get_wrapper_hover_css( $attributes, 'Tablet' ),
343	Icon::get_wrapper_hover_css( $attributes, 'Mobile' )
344	);
345	$css_generator->add_class_styles(
346	'{{WRAPPER}}:not(.ablocks-has-block-container) > .ablocks-icon-wrap,
347	{{WRAPPER}} > .ablocks-block-container > .ablocks-icon-wrap,
348	{{WRAPPER}}:not(.ablocks-has-block-container) > a .ablocks-icon-wrap,
349	{{WRAPPER}} > .ablocks-block-container > a .ablocks-icon-wrap',
350	$this->get_icon_wrapper_extra_css( $attributes ),
351	$this->get_icon_wrapper_extra_css( $attributes, 'Tablet' ),
352	$this->get_icon_wrapper_extra_css( $attributes, 'Mobile' )
353	);
354	$css_generator->add_class_styles(
355	'{{WRAPPER}}:not(.ablocks-has-block-container) > .ablocks-icon-wrap > img.ablocks-image-icon, {{WRAPPER}} > .ablocks-block-container > .ablocks-icon-wrap > img.ablocks-image-icon, {{WRAPPER}} > a .ablocks-icon-wrap > img.ablocks-image-icon',
356	Icon::get_element_image_css( $attributes ),
357	Icon::get_element_image_css( $attributes, 'Tablet' ),
358	Icon::get_element_image_css( $attributes, 'Mobile' ),
359	);
360	$css_generator->add_class_styles(
361	'{{WRAPPER}}:not(.ablocks-has-block-container):hover > .ablocks-icon-wrap > img.ablocks-image-icon, {{WRAPPER}}:hover > .ablocks-block-container > .ablocks-icon-wrap > img.ablocks-image-icon , {{WRAPPER}}:hover > a .ablocks-icon-wrap > img.ablocks-image-icon',
362	Icon::get_element_image_hover_css( $attributes ),
363	Icon::get_element_image_hover_css( $attributes, 'Tablet' ),
364	Icon::get_element_image_hover_css( $attributes, 'Mobile' ),
365	);
366	$css_generator->add_class_styles(
367	'{{WRAPPER}}:not(.ablocks-has-block-container) > .ablocks-icon-wrap > svg.ablocks-svg-icon, {{WRAPPER}} > .ablocks-block-container > .ablocks-icon-wrap > svg.ablocks-svg-icon',
368	Icon::get_element_css( $attributes ),
369	Icon::get_element_css( $attributes, 'Tablet' ),
370	Icon::get_element_css( $attributes, 'Mobile' ),
371	);
372	$css_generator->add_class_styles(
373	'{{WRAPPER}}:not(.ablocks-has-block-container):hover > .ablocks-icon-wrap > svg.ablocks-svg-icon, {{WRAPPER}} > .ablocks-block-container > .ablocks-icon-wrap > svg.ablocks-svg-icon',
374	Icon::get_element_image_hover_css( $attributes ),
375	Icon::get_element_image_hover_css( $attributes, 'Tablet' ),
376	Icon::get_element_image_hover_css( $attributes, 'Mobile' ),
377	);
378	$css_generator->add_class_styles(
379	'{{WRAPPER}}:not(.ablocks-has-block-container).ablocks-block--info-box:hover > .ablocks-icon-wrap svg.ablocks-svg-icon ,
380	{{WRAPPER}}.ablocks-block--info-box:hover > .ablocks-block-container > .ablocks-icon-wrap svg.ablocks-svg-icon ,
381	{{WRAPPER}}:not(.ablocks-has-block-container).ablocks-block--info-box:hover > a .ablocks-icon-wrap svg.ablocks-svg-icon ,
382	{{WRAPPER}}.ablocks-block--info-box:hover > .ablocks-block-container > a .ablocks-icon-wrap svg.ablocks-svg-icon',
383	$this->get_icon_css_hover( $attributes ),
384	);
385	$css_generator->add_class_styles(
386	'{{WRAPPER}}:not(.ablocks-has-block-container).ablocks-block--info-box:hover > .ablocks-icon-wrap,
387	{{WRAPPER}}.ablocks-block--info-box:hover > .ablocks-block-container > .ablocks-icon-wrap,
388	{{WRAPPER}}:not(.ablocks-has-block-container).ablocks-block--info-box:hover > a .ablocks-icon-wrap,
389	{{WRAPPER}}.ablocks-block--info-box:hover > .ablocks-block-container > a .ablocks-icon-wrap',
390	$this->get_icon_css_background_hover( $attributes ),
391	);
392
393	// Heading starts
394	$css_generator->add_class_styles(
395	'{{WRAPPER}} .ablocks-block--info-box__content > .ablocks-info-box-heading',
396	$this->get_heading_text_css( $attributes ),
397	$this->get_heading_text_css( $attributes, 'Tablet' ),
398	$this->get_heading_text_css( $attributes, 'Mobile' )
399	);
400	$css_generator->add_class_styles(
401	'{{WRAPPER}}.ablocks-block--info-box:hover > .ablocks-block--info-box__content > .ablocks-info-box-heading',
402	$this->get_heading_text_css_hover( $attributes ),
403	$this->get_heading_text_css_hover( $attributes, 'Tablet' ),
404	$this->get_heading_text_css_hover( $attributes, 'Mobile' )
405	);
406
407	// Sub Heading starts
408	$css_generator->add_class_styles(
409	'{{WRAPPER}} .ablocks-block--info-box__content > .ablocks-info-box-sub-heading',
410	$this->get_sub_heading_text_css( $attributes ),
411	$this->get_sub_heading_text_css( $attributes, 'Tablet' ),
412	$this->get_sub_heading_text_css( $attributes, 'Mobile' )
413	);
414	$css_generator->add_class_styles(
415	'{{WRAPPER}}.ablocks-block--info-box:hover > .ablocks-block--info-box__content > .ablocks-info-box-sub-heading',
416	$this->get_sub_heading_text_css_hover( $attributes ),
417	$this->get_sub_heading_text_css_hover( $attributes, 'Tablet' ),
418	$this->get_sub_heading_text_css_hover( $attributes, 'Mobile' )
419	);
420
421	// Description starts
422	$css_generator->add_class_styles(
423	'{{WRAPPER}} .ablocks-block--info-box__content > .ablocks-info-box-text',
424	$this->get_des_text_css( $attributes ),
425	$this->get_des_text_css( $attributes, 'Tablet' ),
426	$this->get_des_text_css( $attributes, 'Mobile' ),
427	);
428	$css_generator->add_class_styles(
429	'{{WRAPPER}}.ablocks-block--info-box:hover > .ablocks-block--info-box__content > .ablocks-info-box-text',
430	$this->get_des_text_css_hover( $attributes ),
431	$this->get_des_text_css_hover( $attributes, 'Tablet' ),
432	$this->get_des_text_css_hover( $attributes, 'Mobile' )
433	);
434	$css_generator->add_class_styles(
435	'{{WRAPPER}} .ablocks-block--info-box__content > .ablocks-info-box-text-drop-caps::first-letter',
436	$this->get_des_drop_text_css( $attributes ),
437	$this->get_des_drop_text_css( $attributes, 'Tablet' ),
438	$this->get_des_drop_text_css( $attributes, 'Mobile' ),
439	);
440
441	// rating icon css
442	$css_generator->add_class_styles(
443	'{{WRAPPER}} .ablocks-info-box-star-ratings',
444	$this->get_container_css( $attributes ),
445	$this->get_container_css( $attributes, 'Tablet' ),
446	$this->get_container_css( $attributes, 'Mobile' ),
447	);
448	$css_generator->add_class_styles(
449	'{{WRAPPER}} .ablocks-info-box-star-ratings',
450	$this->get_rating_css( $attributes ),
451	$this->get_rating_css( $attributes, 'Tablet' ),
452	$this->get_rating_css( $attributes, 'Mobile' ),
453	);
454	$css_generator->add_class_styles(
455	'{{WRAPPER}} .ablocks-info-box-star-ratings-icons > .ablocks-info-box-rating > .ablocks-info-box-rating__fill > .ablocks-icon-wrap, {{WRAPPER}} .ablocks-info-box-star-ratings-icons > .ablocks-info-box-rating > .ablocks-info-box-rating__unfill > .ablocks-icon-wrap',
456	Icon::get_wrapper_css( $attributes, '', 'starIcon' ),
457	Icon::get_wrapper_css( $attributes, 'Tablet', 'starIcon' ),
458	Icon::get_wrapper_css( $attributes, 'Mobile', 'starIcon' )
459	);
460	// rating icon spacing css
461	$css_generator->add_class_styles(
462	'{{WRAPPER}} .ablocks-info-box-star-ratings-icons',
463	$this->get_rating_icon_spacing_css( $attributes ),
464	$this->get_rating_icon_spacing_css( $attributes, 'Tablet' ),
465	$this->get_rating_icon_spacing_css( $attributes, 'Mobile' ),
466	);
467	$css_generator->add_class_styles(
468	'{{WRAPPER}} .ablocks-info-box-star-ratings-icons > .ablocks-info-box-rating > .ablocks-info-box-rating__fill > .ablocks-icon-wrap > svg',
469	$this->get_fill_rating_css( $attributes ),
470	$this->get_fill_rating_css( $attributes, 'Tablet' ),
471	$this->get_fill_rating_css( $attributes, 'Mobile' ),
472	);
473	$css_generator->add_class_styles(
474	'{{WRAPPER}} .ablocks-info-box-star-ratings-icons > .ablocks-info-box-rating > .ablocks-info-box-rating__unfill > .ablocks-icon-wrap > svg',
475	$this->get_unfill_rating_css( $attributes ),
476	$this->get_unfill_rating_css( $attributes, 'Tablet' ),
477	$this->get_unfill_rating_css( $attributes, 'Mobile' ),
478	);
479	$css_generator->add_class_styles(
480	'{{WRAPPER}}.ablocks-block--info-box:hover > .ablocks-block--info-box__content > .ablocks-info-box-star-ratings > .ablocks-info-box-star-ratings-icons > .ablocks-info-box-rating > .ablocks-info-box-rating__fill > .ablocks-icon-wrap > svg',
481	$this->get_fill_rating_css_hover( $attributes ),
482	$this->get_fill_rating_css_hover( $attributes, 'Tablet' ),
483	$this->get_fill_rating_css_hover( $attributes, 'Mobile' ),
484	);
485	$css_generator->add_class_styles(
486	'{{WRAPPER}}.ablocks-block--info-box:hover > .ablocks-block--info-box__content > .ablocks-info-box-star-ratings > .ablocks-info-box-star-ratings-icons > .ablocks-info-box-rating > .ablocks-info-box-rating__unfill > .ablocks-icon-wrap > svg',
487	$this->get_unfill_rating_css_hover( $attributes ),
488	$this->get_unfill_rating_css_hover( $attributes, 'Tablet' ),
489	$this->get_unfill_rating_css_hover( $attributes, 'Mobile' ),
490	);
491	// rating number css
492	$css_generator->add_class_styles(
493	'{{WRAPPER}} .ablocks-info-box-star-rating-number',
494	$this->get_rating_number_css( $attributes ),
495	$this->get_rating_number_css( $attributes, 'Tablet' ),
496	$this->get_rating_number_css( $attributes, 'Mobile' ),
497	);
498
499	// Generate button CSS start
500	$css_generator->add_class_styles(
501	'{{WRAPPER}} .ablocks-block--info-box__content > .ablocks-info-box-btn-link',
502	$this->get_button_css( $attributes ),
503	$this->get_button_css( $attributes, 'Tablet' ),
504	$this->get_button_css( $attributes, 'Mobile' )
505	);
506	// Generate button CSS end
507	// Generate button hover CSS start
508	$css_generator->add_class_styles(
509	'{{WRAPPER}} .ablocks-block--info-box__content > .ablocks-info-box-btn-link:hover',
510	$this->get_button_hover_css( $attributes ),
511	$this->get_button_hover_css( $attributes, 'Tablet' ),
512	$this->get_button_hover_css( $attributes, 'Mobile' )
513	);
514	// Generate button icon hover CSS
515	$css_generator->add_class_styles(
516	'{{WRAPPER}} .ablocks-block--info-box__content > .ablocks-info-box-btn-link:hover > .ablocks-icon-wrap > svg.ablocks-svg-icon',
517	$this->get_button_icon_hover_css( $attributes ),
518	$this->get_button_icon_hover_css( $attributes, 'Tablet' ),
519	$this->get_button_icon_hover_css( $attributes, 'Mobile' )
520	);
521	// Generate button text CSS start
522	$css_generator->add_class_styles(
523	'{{WRAPPER}} .ablocks-block--info-box__content > .ablocks-info-box-btn-link > .ablocks-info-box-btn-link-text',
524	$this->get_button_text_css( $attributes )
525	);
526	// Generate button icon CSS start
527	$css_generator->add_class_styles(
528	'{{WRAPPER}} .ablocks-info-box-btn-link > .ablocks-icon-wrap',
529	Icon::get_wrapper_css( $attributes, '', 'btnIcon' ),
530	Icon::get_wrapper_css( $attributes, 'Tablet', 'btnIcon' ),
531	Icon::get_wrapper_css( $attributes, 'Mobile', 'btnIcon' )
532	);
533	$css_generator->add_class_styles(
534	'{{WRAPPER}} .ablocks-info-box-btn-link > .ablocks-icon-wrap > svg.ablocks-svg-icon',
535	Icon::get_element_css( $attributes, '', 'btnIcon' ),
536	Icon::get_element_css( $attributes, 'Tablet', 'btnIcon' ),
537	Icon::get_element_css( $attributes, 'Mobile', 'btnIcon' ),
538	);
539	$css_generator->add_class_styles(
540	'{{WRAPPER}} .ablocks-info-box-btn-link > .ablocks-icon-wrap > svg.ablocks-svg-icon:hover',
541	Icon::get_element_image_hover_css( $attributes, '', 'btnIcon' ),
542	Icon::get_element_image_hover_css( $attributes, 'Tablet', 'btnIcon' ),
543	Icon::get_element_image_hover_css( $attributes, 'Mobile', 'btnIcon' ),
544	);
545	$css_generator->add_class_styles(
546	'{{WRAPPER}} .ablocks-info-box-btn-link > .ablocks-icon-wrap:hover',
547	Icon::get_wrapper_hover_css( $attributes, '', 'btnIcon' ),
548	Icon::get_wrapper_hover_css( $attributes, 'Tablet', 'btnIcon' ),
549	Icon::get_wrapper_hover_css( $attributes, 'Mobile', 'btnIcon' ),
550	);
551	$css_generator->add_class_styles(
552	'{{WRAPPER}}:not(.ablocks-has-block-container).ablocks-hide-on-desktop,{{WRAPPER}}:not(.ablocks-has-block-container).ablocks-hide-on-tablet,{{WRAPPER}}:not(.ablocks-has-block-container).ablocks-hide-on-mobile',
553	! empty( $attributes['_hide_on_desktop'] ) ? [ 'display' => 'none' ] : [],
554	! empty( $attributes['_hide_on_tablet'] )
555	? [ 'display' => 'none' ]
556	: ( ! empty( $attributes['_hide_on_desktop'] ) ? [ 'display' => 'flex' ] : [] ),
557	! empty( $attributes['_hide_on_mobile'] )
558	? [ 'display' => 'none' ]
559	: ( ! empty( $attributes['_hide_on_tablet'] ) ? [ 'display' => 'flex' ] : [] )
560	);
561	return $css_generator->generate_css();
562	}
563	public function build_css( $attributes ) {
564	if ( isset( $attributes['blockVersion'] ) && (int) $attributes['blockVersion'] === 2 ) {
565	return $this->build_css_v2( $attributes );
566	}
567	return $this->build_css_v1( $attributes );
568	}
569
570	public function get_info_box( $attributes, $device = '' ) {
571	$css = [];
572
573	// Temporary approch instead of attribute migration. Might remove it in future
574	$iconPlacement = isset( $attributes['iconPlacement'][ 'value' . $device ] ) ? $attributes['iconPlacement'][ 'value' . $device ] : '';
575	if ( ! isset( $attributes['iconPlacement'] )
576	\|\| (
577	$attributes['stack'] !== ''
578	&& $iconPlacement !== $attributes['stack']
579	)
580	) {
581	$attributes['iconPlacement'][ 'value' . $device ] = $attributes['stack'];
582	$attributes['stack'] = '';
583	}
584	// Temporary approch instead of attribute migration. Might remove it in future
585
586	if ( isset( $attributes['iconPlacement'][ 'value' . $device ] ) ) {
587	$css['display'] = 'flex';
588	$css['flex-direction'] = $attributes['iconPlacement'][ 'value' . $device ];
589	}
590
591	if ( isset( $attributes['iconAlignment'][ 'value' . $device ] ) ) {
592	$css['align-items'] = $attributes['iconAlignment'][ 'value' . $device ];
593	}
594
595	return array_merge(
596	Range::get_css([
597	'attributeValue' => $attributes['iconGap'],
598	'attribute_object_key' => 'value',
599	'isResponsive' => true,
600	'defaultValue' => 16,
601	'hasUnit' => true,
602	'unitDefaultValue' => 'px',
603	'property' => 'gap',
604	'device' => $device,
605	]),
606	$css,
607	);
608	}
609
610	public function get_badge_css( $attributes, $device = '' ) {
611	$css = [];
612
613	if ( ! empty( $attributes['badgePosition'][ 'value' . $device ] ) ) {
614	$position = $attributes['badgePosition'][ 'value' . $device ];
615	if ( $position === 'top-left' ) {
616	$css['top'] = '0';
617	$css['left'] = '0';
618	$css['bottom'] = 'auto';
619	$css['right'] = 'auto';
620	} elseif ( $position === 'top-right' ) {
621	$css['top'] = '0';
622	$css['right'] = '0';
623	$css['bottom'] = 'auto';
624	$css['left'] = 'auto';
625	} elseif ( $position === 'bottom-left' ) {
626	$css['bottom'] = '0';
627	$css['left'] = '0';
628	$css['top'] = 'auto';
629	$css['right'] = 'auto';
630	} elseif ( $position === 'bottom-right' ) {
631	$css['bottom'] = '0';
632	$css['right'] = '0';
633	$css['top'] = 'auto';
634	$css['left'] = 'auto';
635	}//end if
636	}//end if
637
638	if ( ! empty( $attributes['badgeBackground'] ) ) {
639	$css['background'] = Color::get_css(
640	isset( $attributes['badgeBackground'] ) ? $attributes['badgeBackground'] : '');
641
642	} elseif ( ! empty( $attributes['badgeType'] ) ) {
643	$css['background'] = $attributes['badgeType'];
644	}
645	$typographyGlobal = ! empty( $attributes['badgeTypographyGlobal'] ) ? $attributes['badgeTypographyGlobal'] : array();
646
647	return array_merge(
648	[ 'color' => Color::get_css( isset( $attributes['badgeTextColorH'] ) ? $attributes['badgeTextColor'] : '' ) ],
649	Range::get_css([
650	'attributeValue' => $attributes['badgeTransition'],
651	'attribute_object_key' => 'value',
652	'defaultValue' => 0,
653	'unitDefaultValue' => 's',
654	'property' => 'transition-duration',
655	'device' => $device,
656	]),
657	$css,
658	Border::get_css( $attributes['badgeBorder'], '', $device ),
659	Typography::get_css( $attributes['badgeTypography'], '', $device, $typographyGlobal ),
660	Dimensions::get_css( $attributes['badgePadding'], 'padding', $device ),
661	);
662	}
663	public function get_badge_hover_css( $attributes, $device = '' ) {
664	$css = [];
665	return array_merge(
666	$css,
667	[ 'color' => Color::get_css( isset( $attributes['badgeTextColorH'] ) ? $attributes['badgeTextColorH'] : '' ) ],
668	[ 'background' => Color::get_css( isset( $attributes['badgeBackgroundH'] ) ? $attributes['badgeBackgroundH'] : '' ) ],
669	Border::get_css( $attributes['badgeBorder'], '', $device ),
670	);
671	}
672	public function get_badge_text_css( $attributes, $device = '' ) {
673	return TextShadow::get_css( $attributes['badgeTextShadow'] );
674	}
675
676	public function get_icon_wrapper_extra_css( $attributes, $device = '' ) {
677	$css = [];
678
679	return array_merge(
680	$css,
681	Dimensions::get_css( $attributes['iconMargin'], 'margin', $device ),
682	);
683	}
684
685	public function get_icon_css_hover( $attributes, $device = '' ) {
686	$css = [];
687
688	return array_merge(
689	[ 'fill' => Color::get_css( isset( $attributes['iconPrimaryColorH'] ) ? $attributes['iconPrimaryColorH'] : '' ) ],
690	Range::get_css([
691	'attributeValue' => $attributes['iconTransition'],
692	'attribute_object_key' => 'value',
693	'defaultValue' => 0,
694	'unitDefaultValue' => 's',
695	'property' => 'transition-duration',
696	'device' => $device,
697	]),
698	$css
699	);
700	}
701	public function get_icon_css_background_hover( $attributes, $device = '' ) {
702	$css = [];
703	if ( ! empty( $attributes['iconBackgroundColorH'] ) ) {
704	$css['background'] = $attributes['iconBackgroundColorH'];
705	}
706	return array_merge(
707	Range::get_css([
708	'attributeValue' => $attributes['iconTransition'],
709	'attribute_object_key' => 'value',
710	'defaultValue' => 0,
711	'unitDefaultValue' => 's',
712	'property' => 'transition-duration',
713	'device' => $device,
714	]),
715	$css
716	);
717	}
718
719	public function get_info_box_content( $attributes, $device = '' ) {
720	$css = [];
721
722	if ( isset( $attributes['alignment'][ 'value' . $device ] ) ) {
723	$css['align-items'] = $attributes['alignment'][ 'value' . $device ];
724	}
725
726	return array_merge(
727	Range::get_css([
728	'attributeValue' => $attributes['contentGap'],
729	'attribute_object_key' => 'value',
730	'isResponsive' => true,
731	'defaultValue' => 10,
732	'hasUnit' => true,
733	'unitDefaultValue' => 'px',
734	'property' => 'gap',
735	'device' => $device,
736	]),
737	$css,
738	);
739	}
740
741	public function get_heading_text_css( $attributes, $device = '' ) {
742	$typographyGlobal = ! empty( $attributes['headingTypographyGlobal'] ) ? $attributes['headingTypographyGlobal'] : array();
743	$typography_css = ! empty( $attributes['headingTypography'] ) ? Typography::get_css( $attributes['headingTypography'], '', $device, $typographyGlobal ) : array();
744	$textShadowCss = ! empty( $attributes['headingTextShadow'] ) ? TextShadow::get_css( $attributes['headingTextShadow'], '', $device ) : array();
745	$textStrokeCss = ! empty( $attributes['headingTextStroke'] ) ? TextStroke::get_css( $attributes['headingTextStroke'], '', $device ) : array();
746
747	$css = [];
748
749	if ( ! empty( $attributes['alignment'][ 'value' . $device ] ) ) {
750	if ( $attributes['alignment'][ 'value' . $device ] === 'flex-start' ) {
751	$css['text-align'] = 'left';
752	} elseif ( $attributes['alignment'][ 'value' . $device ] === 'flex-end' ) {
753	$css['text-align'] = 'right';
754	} else {
755	$css['text-align'] = $attributes['alignment'][ 'value' . $device ];
756	}
757	}
758
759	return array_merge(
760	$css,
761	$typography_css,
762	$textShadowCss,
763	$textStrokeCss,
764	[ 'color' => Color::get_css( isset( $attributes['headingTextColor'] ) ? $attributes['headingTextColor'] : '' ) ],
765	Dimensions::get_css( $attributes['headingMargin'], 'margin', $device ),
766	);
767	}
768	public function get_heading_text_css_hover( $attributes, $device = '' ) {
769	$css = [];
770	if ( ! empty( $attributes['headingTransition'] ) ) {
771	$css['transition-duration'] = $attributes['headingTransition'] . 's';
772	}
773
774	return array_merge(
775	[ 'color' => Color::get_css( isset( $attributes['headingTextColorHover'] ) ? $attributes['headingTextColorHover'] : '' ) ],
776	Range::get_css([
777	'attributeValue' => $attributes['headingTransition'],
778	'attribute_object_key' => 'value',
779	'defaultValue' => 0,
780	'unitDefaultValue' => 's',
781	'property' => 'transition-duration',
782	'device' => $device,
783	]),
784	$css
785	);
786	}
787
788
789	public function get_sub_heading_text_css( $attributes, $device = '' ) {
790	$typographyGlobal = ! empty( $attributes['subHeadingTypographyGlobal'] ) ? $attributes['subHeadingTypographyGlobal'] : array();
791	$typography_css = ! empty( $attributes['subHeadingTypography'] ) ? Typography::get_css( $attributes['subHeadingTypography'], '', $device, $typographyGlobal ) : array();
792	$textShadowCss = ! empty( $attributes['subHeadingTextShadow'] ) ? TextShadow::get_css( $attributes['subHeadingTextShadow'], '', $device ) : array();
793	$textStrokeCss = ! empty( $attributes['subHeadingTextStroke'] ) ? TextStroke::get_css( $attributes['subHeadingTextStroke'], '', $device ) : array();
794
795	$css = [];
796
797	if ( ! empty( $attributes['alignment'][ 'value' . $device ] ) ) {
798	if ( $attributes['alignment'][ 'value' . $device ] === 'flex-start' ) {
799	$css['text-align'] = 'left';
800	} elseif ( $attributes['alignment'][ 'value' . $device ] === 'flex-end' ) {
801	$css['text-align'] = 'right';
802	} else {
803	$css['text-align'] = $attributes['alignment'][ 'value' . $device ];
804	}
805	}
806
807	return array_merge(
808	$css,
809	$typography_css,
810	$textShadowCss,
811	$textStrokeCss,
812	[ 'color' => Color::get_css( isset( $attributes['subHeadingTextColor'] ) ? $attributes['subHeadingTextColor'] : '' ) ],
813	Dimensions::get_css( $attributes['subHeadingMargin'], 'margin', $device ),
814	);
815	}
816	public function get_sub_heading_text_css_hover( $attributes, $device = '' ) {
817	$css = [];
818	return array_merge(
819	[ 'color' => Color::get_css( isset( $attributes['subHeadingTextColorHover'] ) ? $attributes['subHeadingTextColorHover'] : '' ) ],
820	Range::get_css([
821	'attributeValue' => $attributes['subHeadingTransition'],
822	'attribute_object_key' => 'value',
823	'defaultValue' => 0,
824	'unitDefaultValue' => 's',
825	'property' => 'transition-duration',
826	'device' => $device,
827	]),
828	$css
829	);
830	}
831
832	public function get_des_text_css( $attributes, $device = '' ) {
833	$css = [];
834
835	if ( ! empty( $attributes['alignment'][ 'value' . $device ] ) ) {
836	if ( $attributes['alignment'][ 'value' . $device ] === 'flex-start' ) {
837	$css['text-align'] = 'left';
838	} elseif ( $attributes['alignment'][ 'value' . $device ] === 'flex-end' ) {
839	$css['text-align'] = 'right';
840	} else {
841	$css['text-align'] = $attributes['alignment'][ 'value' . $device ];
842	}
843	}
844	$typographyGlobal = ! empty( $attributes['desTypographyGlobal'] ) ? $attributes['desTypographyGlobal'] : array();
845	return array_merge(
846	$css,
847	[ 'color' => Color::get_css( isset( $attributes['desTextColor'] ) ? $attributes['desTextColor'] : '' ) ],
848	isset( $attributes['desTypography'] ) ? Typography::get_css( $attributes['desTypography'], '', $device, $typographyGlobal ) : [],
849	isset( $attributes['desTextStroke'] ) ? TextStroke::get_css( $attributes['desTextStroke'], '', $device ) : [],
850	isset( $attributes['desTextShadow'] ) ? TextShadow::get_css( $attributes['desTextShadow'], '', $device ) : [],
851	Dimensions::get_css( $attributes['desMargin'], 'margin', $device ),
852	);
853	}
854	public function get_des_text_css_hover( $attributes, $device = '' ) {
855	$css = [];
856	return array_merge(
857	[ 'color' => Color::get_css( isset( $attributes['desTextColorHover'] ) ? $attributes['desTextColorHover'] : '' ) ],
858	Range::get_css([
859	'attributeValue' => $attributes['desTransition'],
860	'attribute_object_key' => 'value',
861	'defaultValue' => 0,
862	'unitDefaultValue' => 's',
863	'property' => 'transition-duration',
864	'device' => $device,
865	]),
866	$css
867	);
868	}
869	public function get_des_drop_text_css( $attributes, $device = '' ) {
870	$css = [];
871	if ( ! empty( $attributes['desDropCapsTextColor'] ) ) {
872	$css['color'] = Color::get_css(
873	isset( $attributes['desDropCapsTextColor'] ) ? $attributes['desDropCapsTextColor'] : '');
874	}
875	return $css;
876	}
877
878	public function get_container_css( $attributes, $device = '' ) {
879	$css = [];
880
881	return array_merge(
882	Range::get_css([
883	'attributeValue' => $attributes['ratingNumberGap'],
884	'attribute_object_key' => 'value',
885	'isResponsive' => true,
886	'defaultValue' => 0,
887	'hasUnit' => true,
888	'unitDefaultValue' => 'px',
889	'property' => 'gap',
890	'device' => $device,
891	]),
892	$css,
893	isset( $attributes['alignment'] ) ? Alignment::get_css( $attributes['alignment'], 'justify-content', $device ) : [],
894	);
895	}
896	public function get_rating_number_css( $attributes, $device = '' ) {
897	$css = [];
898	if ( ! empty( $attributes['ratingNumberColor'] ) ) {
899	$css['color'] = Color::get_css(
900	isset( $attributes['ratingNumberColor'] ) ? $attributes['ratingNumberColor'] : '');
901
902	}
903	if ( ! empty( $attributes['ratingNumberPosition'] ) ) {
904	if ( 'left' === $attributes['ratingNumberPosition'] ) {
905	$css['order'] = '-5';
906	} else {
907	$css['order'] = '10';
908	}
909	}
910	$typographyGlobal = ! empty( $attributes['ratingNumberTypographyGlobal'] ) ? $attributes['ratingNumberTypographyGlobal'] : array();
911	return array_merge(
912	$css,
913	isset( $attributes['ratingNumberTypography'] ) ? Typography::get_css( $attributes['ratingNumberTypography'], '', $device, $typographyGlobal ) : [],
914	);
915	}
916	public function get_rating_css( $attributes, $device = '' ) {
917	$rating_css = [];
918	return array_merge(
919	$rating_css,
920	Dimensions::get_css( $attributes['ratingMargin'], 'margin', $device ),
921	);
922	}
923
924
925	public function get_rating_icon_spacing_css( $attributes, $device = '' ) {
926	$rating_icon_spacing_css = [];
927
928	return array_merge(
929	Range::get_css([
930	'attributeValue' => $attributes['spacing'],
931	'attribute_object_key' => 'value',
932	'isResponsive' => true,
933	'defaultValue' => 0,
934	'hasUnit' => true,
935	'unitDefaultValue' => 'px',
936	'property' => 'gap',
937	'device' => $device,
938	]),
939	$rating_icon_spacing_css
940	);
941	}
942
943	public function get_fill_rating_css( $attributes, $device = '' ) {
944	$css = [];
945	return array_merge(
946	[ 'fill' => Color::get_css( isset( $attributes['ratingColor'] ) ? $attributes['ratingColor'] : '' ) ],
947	Range::get_css([
948	'attributeValue' => $attributes['ratingTransition'],
949	'attribute_object_key' => 'value',
950	'defaultValue' => 0,
951	'unitDefaultValue' => 's',
952	'property' => 'transition-duration',
953	'device' => $device,
954	]),
955	$css
956	);
957	}
958	public function get_unfill_rating_css( $attributes, $device = '' ) {
959	$css = [];
960	if ( ! empty( $attributes['ratingColor'] ) ) {
961	$css['fill'] = Color::get_css(
962	isset( $attributes['ratingUnmarkedColor'] ) ? $attributes['ratingUnmarkedColor'] : '');
963	}
964	return array_merge(
965	Range::get_css([
966	'attributeValue' => $attributes['ratingTransition'],
967	'attribute_object_key' => 'value',
968	'defaultValue' => 0,
969	'unitDefaultValue' => 's',
970	'property' => 'transition-duration',
971	'device' => $device,
972	]),
973	$css
974	);
975	}
976	public function get_fill_rating_css_hover( $attributes, $device = '' ) {
977	$css = [];
978	return array_merge(
979	[ 'fill' => Color::get_css( isset( $attributes['ratingColorHover'] ) ? $attributes['ratingColorHover'] : '' ) ],
980	Range::get_css([
981	'attributeValue' => $attributes['ratingTransition'],
982	'attribute_object_key' => 'value',
983	'defaultValue' => 0,
984	'unitDefaultValue' => 's',
985	'property' => 'transition-duration',
986	'device' => $device,
987	]),
988	$css
989	);
990	}
991	public function get_unfill_rating_css_hover( $attributes, $device = '' ) {
992	$css = [];
993	if ( ! empty( $attributes['ratingColorHover'] ) ) {
994	$css['fill'] = Color::get_css(
995	isset( $attributes['ratingUnmarkedColorHover'] ) ? $attributes['ratingUnmarkedColorHover'] : '');
996	}
997	return array_merge(
998	Range::get_css([
999	'attributeValue' => $attributes['ratingTransition'],
1000	'attribute_object_key' => 'value',
1001	'defaultValue' => 0,
1002	'unitDefaultValue' => 's',
1003	'property' => 'transition-duration',
1004	'device' => $device,
1005	]),
1006	$css
1007	);
1008	}
1009
1010	public function get_button_css( $attributes, $device = '' ) {
1011	$css = [];
1012
1013	if ( ! empty( $attributes['btnBackground'] ) ) {
1014	$css['background'] = Color::get_css(
1015	isset( $attributes['btnBackground'] ) ? $attributes['btnBackground'] : '');
1016	} else {
1017	$css['background'] = $attributes['btnType'];
1018	}
1019
1020	if ( isset( $attributes['btnAlignment'][ 'value' . $device ] ) ) {
1021	$css['justify-content'] = $attributes['btnAlignment'][ 'value' . $device ];
1022	}
1023	$typographyGlobal = ! empty( $attributes['btnTypographyGlobal'] ) ? $attributes['btnTypographyGlobal'] : array();
1024
1025	return array_merge(
1026	Range::get_css([
1027	'attributeValue' => $attributes['btnIconSpace'],
1028	'attribute_object_key' => 'value',
1029	'defaultValue' => 10,
1030	'property' => 'column-gap',
1031	'device' => $device,
1032	]),
1033	Range::get_css([
1034	'attributeValue' => $attributes['btnTransition'],
1035	'attribute_object_key' => 'value',
1036	'defaultValue' => 0,
1037	'unitDefaultValue' => 's',
1038	'property' => 'transition-duration',
1039	'device' => $device,
1040	]),
1041	$css,
1042	[ 'color' => Color::get_css( isset( $attributes['btnTextColor'] ) ? $attributes['btnTextColor'] : '' ) ],
1043	Border::get_css( $attributes['btnBorder'], '', $device ),
1044	Typography::get_css( $attributes['btnTypography'], '', $device, $typographyGlobal ),
1045	Dimensions::get_css( $attributes['btnPadding'], 'padding', $device ),
1046	Dimensions::get_css( $attributes['btnMargin'], 'margin', $device ),
1047	);
1048	}
1049	public function get_button_hover_css( $attributes, $device = '' ) {
1050	$css = [];
1051	return array_merge(
1052	$css,
1053	[ 'color' => Color::get_css( isset( $attributes['btnTextColorH'] ) ? $attributes['btnTextColorH'] : '' ) ],
1054	[ 'background' => Color::get_css( isset( $attributes['btnBackgroundH'] ) ? $attributes['btnBackgroundH'] : '' ) ],
1055	Border::get_hover_css( $attributes['btnBorder'], '', $device )
1056	);
1057	}
1058	public function get_button_text_css( $attributes, $device = '' ) {
1059	return TextShadow::get_css( $attributes['btnTextShadow'] );
1060	}
1061	public function get_button_icon_hover_css( $attributes, $device = '' ) {
1062	return [ 'fill' => Color::get_css( isset( $attributes['btnTextColorH'] ) ? $attributes['btnTextColorH'] : '' ) ];
1063	}
1064	}
1065