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

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

1,030 lines 43.7 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
269	return $css_generator->generate_css();
270	}
271	public function build_css_v2( $attributes ) {
272	$css_generator = new CssGeneratorV2( $attributes, $this->block_name );
273
274	$css_generator->add_class_styles(
275	'{{WRAPPER}}:not(.ablocks-has-block-container), {{WRAPPER}}.ablocks-block--info-box > .ablocks-block-container',
276	$this->get_info_box( $attributes ),
277	$this->get_info_box( $attributes, 'Tablet' ),
278	$this->get_info_box( $attributes, 'Mobile' )
279	);
280	$css_generator->add_class_styles(
281	'{{WRAPPER}} .ablocks-block--info-box__content',
282	$this->get_info_box_content( $attributes ),
283	$this->get_info_box_content( $attributes, 'Tablet' ),
284	$this->get_info_box_content( $attributes, 'Mobile' )
285	);
286
287	// badge starts
288	$css_generator->add_class_styles(
289	'{{WRAPPER}} .ablocks-info-box-badge-link',
290	$this->get_badge_css( $attributes ),
291	$this->get_badge_css( $attributes, 'Tablet' ),
292	$this->get_badge_css( $attributes, 'Mobile' )
293	);
294	$css_generator->add_class_styles(
295	'{{WRAPPER}} .ablocks-info-box-badge-link:hover',
296	$this->get_badge_hover_css( $attributes ),
297	$this->get_badge_hover_css( $attributes, 'Tablet' ),
298	$this->get_badge_hover_css( $attributes, 'Mobile' )
299	);
300	$css_generator->add_class_styles(
301	'{{WRAPPER}} .ablocks-info-box-badge-link > .ablocks-info-box-badge-link-text',
302	$this->get_badge_text_css( $attributes )
303	);
304
305	// Icon Style
306	$css_generator->add_class_styles(
307	'{{WRAPPER}}:not(.ablocks-has-block-container) > .ablocks-icon-wrap,
308	{{WRAPPER}} > .ablocks-block-container > .ablocks-icon-wrap,
309	{{WRAPPER}}:not(.ablocks-has-block-container) > a .ablocks-icon-wrap,
310	{{WRAPPER}} > .ablocks-block-container > a .ablocks-icon-wrap',
311	Icon::get_wrapper_css( $attributes ),
312	Icon::get_wrapper_css( $attributes, 'Tablet' ),
313	Icon::get_wrapper_css( $attributes, 'Mobile' )
314	);
315	// Icon Style
316	$css_generator->add_class_styles(
317	'{{WRAPPER}}:not(.ablocks-has-block-container) > .ablocks-icon-wrap:hover,
318	{{WRAPPER}} > .ablocks-block-container > .ablocks-icon-wrap:hover,
319	{{WRAPPER}}:not(.ablocks-has-block-container) > a .ablocks-icon-wrap:hover,
320	{{WRAPPER}} > .ablocks-block-container > a .ablocks-icon-wrap:hover',
321	Icon::get_wrapper_hover_css( $attributes ),
322	Icon::get_wrapper_hover_css( $attributes, 'Tablet' ),
323	Icon::get_wrapper_hover_css( $attributes, 'Mobile' )
324	);
325	$css_generator->add_class_styles(
326	'{{WRAPPER}}:not(.ablocks-has-block-container) > .ablocks-icon-wrap,
327	{{WRAPPER}} > .ablocks-block-container > .ablocks-icon-wrap,
328	{{WRAPPER}}:not(.ablocks-has-block-container) > a .ablocks-icon-wrap,
329	{{WRAPPER}} > .ablocks-block-container > a .ablocks-icon-wrap',
330	$this->get_icon_wrapper_extra_css( $attributes ),
331	$this->get_icon_wrapper_extra_css( $attributes, 'Tablet' ),
332	$this->get_icon_wrapper_extra_css( $attributes, 'Mobile' )
333	);
334	$css_generator->add_class_styles(
335	'{{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',
336	Icon::get_element_image_css( $attributes ),
337	Icon::get_element_image_css( $attributes, 'Tablet' ),
338	Icon::get_element_image_css( $attributes, 'Mobile' ),
339	);
340	$css_generator->add_class_styles(
341	'{{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',
342	Icon::get_element_image_hover_css( $attributes ),
343	Icon::get_element_image_hover_css( $attributes, 'Tablet' ),
344	Icon::get_element_image_hover_css( $attributes, 'Mobile' ),
345	);
346	$css_generator->add_class_styles(
347	'{{WRAPPER}}:not(.ablocks-has-block-container) > .ablocks-icon-wrap > svg.ablocks-svg-icon, {{WRAPPER}} > .ablocks-block-container > .ablocks-icon-wrap > svg.ablocks-svg-icon',
348	Icon::get_element_css( $attributes ),
349	Icon::get_element_css( $attributes, 'Tablet' ),
350	Icon::get_element_css( $attributes, 'Mobile' ),
351	);
352	$css_generator->add_class_styles(
353	'{{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',
354	Icon::get_element_image_hover_css( $attributes ),
355	Icon::get_element_image_hover_css( $attributes, 'Tablet' ),
356	Icon::get_element_image_hover_css( $attributes, 'Mobile' ),
357	);
358	$css_generator->add_class_styles(
359	'{{WRAPPER}}:not(.ablocks-has-block-container).ablocks-block--info-box:hover > .ablocks-icon-wrap svg.ablocks-svg-icon ,
360	{{WRAPPER}}.ablocks-block--info-box:hover > .ablocks-block-container > .ablocks-icon-wrap svg.ablocks-svg-icon ,
361	{{WRAPPER}}:not(.ablocks-has-block-container).ablocks-block--info-box:hover > a .ablocks-icon-wrap svg.ablocks-svg-icon ,
362	{{WRAPPER}}.ablocks-block--info-box:hover > .ablocks-block-container > a .ablocks-icon-wrap svg.ablocks-svg-icon',
363	$this->get_icon_css_hover( $attributes ),
364	);
365	$css_generator->add_class_styles(
366	'{{WRAPPER}}:not(.ablocks-has-block-container).ablocks-block--info-box:hover > .ablocks-icon-wrap,
367	{{WRAPPER}}.ablocks-block--info-box:hover > .ablocks-block-container > .ablocks-icon-wrap,
368	{{WRAPPER}}:not(.ablocks-has-block-container).ablocks-block--info-box:hover > a .ablocks-icon-wrap,
369	{{WRAPPER}}.ablocks-block--info-box:hover > .ablocks-block-container > a .ablocks-icon-wrap',
370	$this->get_icon_css_background_hover( $attributes ),
371	);
372
373	// Heading starts
374	$css_generator->add_class_styles(
375	'{{WRAPPER}} .ablocks-block--info-box__content > .ablocks-info-box-heading',
376	$this->get_heading_text_css( $attributes ),
377	$this->get_heading_text_css( $attributes, 'Tablet' ),
378	$this->get_heading_text_css( $attributes, 'Mobile' )
379	);
380	$css_generator->add_class_styles(
381	'{{WRAPPER}}.ablocks-block--info-box:hover > .ablocks-block--info-box__content > .ablocks-info-box-heading',
382	$this->get_heading_text_css_hover( $attributes ),
383	$this->get_heading_text_css_hover( $attributes, 'Tablet' ),
384	$this->get_heading_text_css_hover( $attributes, 'Mobile' )
385	);
386
387	// Sub Heading starts
388	$css_generator->add_class_styles(
389	'{{WRAPPER}} .ablocks-block--info-box__content > .ablocks-info-box-sub-heading',
390	$this->get_sub_heading_text_css( $attributes ),
391	$this->get_sub_heading_text_css( $attributes, 'Tablet' ),
392	$this->get_sub_heading_text_css( $attributes, 'Mobile' )
393	);
394	$css_generator->add_class_styles(
395	'{{WRAPPER}}.ablocks-block--info-box:hover > .ablocks-block--info-box__content > .ablocks-info-box-sub-heading',
396	$this->get_sub_heading_text_css_hover( $attributes ),
397	$this->get_sub_heading_text_css_hover( $attributes, 'Tablet' ),
398	$this->get_sub_heading_text_css_hover( $attributes, 'Mobile' )
399	);
400
401	// Description starts
402	$css_generator->add_class_styles(
403	'{{WRAPPER}} .ablocks-block--info-box__content > .ablocks-info-box-text',
404	$this->get_des_text_css( $attributes ),
405	$this->get_des_text_css( $attributes, 'Tablet' ),
406	$this->get_des_text_css( $attributes, 'Mobile' ),
407	);
408	$css_generator->add_class_styles(
409	'{{WRAPPER}}.ablocks-block--info-box:hover > .ablocks-block--info-box__content > .ablocks-info-box-text',
410	$this->get_des_text_css_hover( $attributes ),
411	$this->get_des_text_css_hover( $attributes, 'Tablet' ),
412	$this->get_des_text_css_hover( $attributes, 'Mobile' )
413	);
414	$css_generator->add_class_styles(
415	'{{WRAPPER}} .ablocks-block--info-box__content > .ablocks-info-box-text-drop-caps::first-letter',
416	$this->get_des_drop_text_css( $attributes ),
417	$this->get_des_drop_text_css( $attributes, 'Tablet' ),
418	$this->get_des_drop_text_css( $attributes, 'Mobile' ),
419	);
420
421	// rating icon css
422	$css_generator->add_class_styles(
423	'{{WRAPPER}} .ablocks-info-box-star-ratings',
424	$this->get_container_css( $attributes ),
425	$this->get_container_css( $attributes, 'Tablet' ),
426	$this->get_container_css( $attributes, 'Mobile' ),
427	);
428	$css_generator->add_class_styles(
429	'{{WRAPPER}} .ablocks-info-box-star-ratings',
430	$this->get_rating_css( $attributes ),
431	$this->get_rating_css( $attributes, 'Tablet' ),
432	$this->get_rating_css( $attributes, 'Mobile' ),
433	);
434	$css_generator->add_class_styles(
435	'{{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',
436	Icon::get_wrapper_css( $attributes, '', 'starIcon' ),
437	Icon::get_wrapper_css( $attributes, 'Tablet', 'starIcon' ),
438	Icon::get_wrapper_css( $attributes, 'Mobile', 'starIcon' )
439	);
440	// rating icon spacing css
441	$css_generator->add_class_styles(
442	'{{WRAPPER}} .ablocks-info-box-star-ratings-icons',
443	$this->get_rating_icon_spacing_css( $attributes ),
444	$this->get_rating_icon_spacing_css( $attributes, 'Tablet' ),
445	$this->get_rating_icon_spacing_css( $attributes, 'Mobile' ),
446	);
447	$css_generator->add_class_styles(
448	'{{WRAPPER}} .ablocks-info-box-star-ratings-icons > .ablocks-info-box-rating > .ablocks-info-box-rating__fill > .ablocks-icon-wrap > svg',
449	$this->get_fill_rating_css( $attributes ),
450	$this->get_fill_rating_css( $attributes, 'Tablet' ),
451	$this->get_fill_rating_css( $attributes, 'Mobile' ),
452	);
453	$css_generator->add_class_styles(
454	'{{WRAPPER}} .ablocks-info-box-star-ratings-icons > .ablocks-info-box-rating > .ablocks-info-box-rating__unfill > .ablocks-icon-wrap > svg',
455	$this->get_unfill_rating_css( $attributes ),
456	$this->get_unfill_rating_css( $attributes, 'Tablet' ),
457	$this->get_unfill_rating_css( $attributes, 'Mobile' ),
458	);
459	$css_generator->add_class_styles(
460	'{{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',
461	$this->get_fill_rating_css_hover( $attributes ),
462	$this->get_fill_rating_css_hover( $attributes, 'Tablet' ),
463	$this->get_fill_rating_css_hover( $attributes, 'Mobile' ),
464	);
465	$css_generator->add_class_styles(
466	'{{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',
467	$this->get_unfill_rating_css_hover( $attributes ),
468	$this->get_unfill_rating_css_hover( $attributes, 'Tablet' ),
469	$this->get_unfill_rating_css_hover( $attributes, 'Mobile' ),
470	);
471	// rating number css
472	$css_generator->add_class_styles(
473	'{{WRAPPER}} .ablocks-info-box-star-rating-number',
474	$this->get_rating_number_css( $attributes ),
475	$this->get_rating_number_css( $attributes, 'Tablet' ),
476	$this->get_rating_number_css( $attributes, 'Mobile' ),
477	);
478
479	// Generate button CSS start
480	$css_generator->add_class_styles(
481	'{{WRAPPER}} .ablocks-block--info-box__content > .ablocks-info-box-btn-link',
482	$this->get_button_css( $attributes ),
483	$this->get_button_css( $attributes, 'Tablet' ),
484	$this->get_button_css( $attributes, 'Mobile' )
485	);
486	// Generate button CSS end
487	// Generate button hover CSS start
488	$css_generator->add_class_styles(
489	'{{WRAPPER}} .ablocks-block--info-box__content > .ablocks-info-box-btn-link:hover',
490	$this->get_button_hover_css( $attributes ),
491	$this->get_button_hover_css( $attributes, 'Tablet' ),
492	$this->get_button_hover_css( $attributes, 'Mobile' )
493	);
494	// Generate button icon hover CSS
495	$css_generator->add_class_styles(
496	'{{WRAPPER}} .ablocks-block--info-box__content > .ablocks-info-box-btn-link:hover > .ablocks-icon-wrap > svg.ablocks-svg-icon',
497	$this->get_button_icon_hover_css( $attributes ),
498	$this->get_button_icon_hover_css( $attributes, 'Tablet' ),
499	$this->get_button_icon_hover_css( $attributes, 'Mobile' )
500	);
501	// Generate button text CSS start
502	$css_generator->add_class_styles(
503	'{{WRAPPER}} .ablocks-block--info-box__content > .ablocks-info-box-btn-link > .ablocks-info-box-btn-link-text',
504	$this->get_button_text_css( $attributes )
505	);
506	// Generate button icon CSS start
507	$css_generator->add_class_styles(
508	'{{WRAPPER}} .ablocks-info-box-btn-link > .ablocks-icon-wrap',
509	Icon::get_wrapper_css( $attributes, '', 'btnIcon' ),
510	Icon::get_wrapper_css( $attributes, 'Tablet', 'btnIcon' ),
511	Icon::get_wrapper_css( $attributes, 'Mobile', 'btnIcon' )
512	);
513	$css_generator->add_class_styles(
514	'{{WRAPPER}} .ablocks-info-box-btn-link > .ablocks-icon-wrap > svg.ablocks-svg-icon',
515	Icon::get_element_css( $attributes, '', 'btnIcon' ),
516	Icon::get_element_css( $attributes, 'Tablet', 'btnIcon' ),
517	Icon::get_element_css( $attributes, 'Mobile', 'btnIcon' ),
518	);
519	$css_generator->add_class_styles(
520	'{{WRAPPER}} .ablocks-info-box-btn-link > .ablocks-icon-wrap > svg.ablocks-svg-icon:hover',
521	Icon::get_element_image_hover_css( $attributes, '', 'btnIcon' ),
522	Icon::get_element_image_hover_css( $attributes, 'Tablet', 'btnIcon' ),
523	Icon::get_element_image_hover_css( $attributes, 'Mobile', 'btnIcon' ),
524	);
525
526	return $css_generator->generate_css();
527	}
528	public function build_css( $attributes ) {
529	if ( isset( $attributes['blockVersion'] ) && (int) $attributes['blockVersion'] === 2 ) {
530	return $this->build_css_v2( $attributes );
531	}
532	return $this->build_css_v1( $attributes );
533	}
534
535	public function get_info_box( $attributes, $device = '' ) {
536	$css = [];
537
538	// Temporary approch instead of attribute migration. Might remove it in future
539	$iconPlacement = isset( $attributes['iconPlacement'][ 'value' . $device ] ) ? $attributes['iconPlacement'][ 'value' . $device ] : '';
540	if ( ! isset( $attributes['iconPlacement'] )
541	\|\| (
542	$attributes['stack'] !== ''
543	&& $iconPlacement !== $attributes['stack']
544	)
545	) {
546	$attributes['iconPlacement'][ 'value' . $device ] = $attributes['stack'];
547	$attributes['stack'] = '';
548	}
549	// Temporary approch instead of attribute migration. Might remove it in future
550
551	if ( isset( $attributes['iconPlacement'][ 'value' . $device ] ) ) {
552	$css['display'] = 'flex';
553	$css['flex-direction'] = $attributes['iconPlacement'][ 'value' . $device ];
554	}
555
556	if ( isset( $attributes['iconAlignment'][ 'value' . $device ] ) ) {
557	$css['align-items'] = $attributes['iconAlignment'][ 'value' . $device ];
558	}
559
560	return array_merge(
561	Range::get_css([
562	'attributeValue' => $attributes['iconGap'],
563	'attribute_object_key' => 'value',
564	'isResponsive' => true,
565	'defaultValue' => 16,
566	'hasUnit' => true,
567	'unitDefaultValue' => 'px',
568	'property' => 'gap',
569	'device' => $device,
570	]),
571	$css,
572	);
573	}
574
575	public function get_badge_css( $attributes, $device = '' ) {
576	$css = [];
577
578	if ( ! empty( $attributes['badgePosition'][ 'value' . $device ] ) ) {
579	$position = $attributes['badgePosition'][ 'value' . $device ];
580	if ( $position === 'top-left' ) {
581	$css['top'] = '0';
582	$css['left'] = '0';
583	$css['bottom'] = 'auto';
584	$css['right'] = 'auto';
585	} elseif ( $position === 'top-right' ) {
586	$css['top'] = '0';
587	$css['right'] = '0';
588	$css['bottom'] = 'auto';
589	$css['left'] = 'auto';
590	} elseif ( $position === 'bottom-left' ) {
591	$css['bottom'] = '0';
592	$css['left'] = '0';
593	$css['top'] = 'auto';
594	$css['right'] = 'auto';
595	} elseif ( $position === 'bottom-right' ) {
596	$css['bottom'] = '0';
597	$css['right'] = '0';
598	$css['top'] = 'auto';
599	$css['left'] = 'auto';
600	}//end if
601	}//end if
602
603	if ( ! empty( $attributes['badgeBackground'] ) ) {
604	$css['background'] = Color::get_css(
605	isset( $attributes['badgeBackground'] ) ? $attributes['badgeBackground'] : '');
606
607	} elseif ( ! empty( $attributes['badgeType'] ) ) {
608	$css['background'] = $attributes['badgeType'];
609	}
610	$typographyGlobal = ! empty( $attributes['badgeTypographyGlobal'] ) ? $attributes['badgeTypographyGlobal'] : array();
611
612	return array_merge(
613	[ 'color' => Color::get_css( isset( $attributes['badgeTextColorH'] ) ? $attributes['badgeTextColor'] : '' ) ],
614	Range::get_css([
615	'attributeValue' => $attributes['badgeTransition'],
616	'attribute_object_key' => 'value',
617	'defaultValue' => 0,
618	'unitDefaultValue' => 's',
619	'property' => 'transition-duration',
620	'device' => $device,
621	]),
622	$css,
623	Border::get_css( $attributes['badgeBorder'], '', $device ),
624	Typography::get_css( $attributes['badgeTypography'], '', $device, $typographyGlobal ),
625	Dimensions::get_css( $attributes['badgePadding'], 'padding', $device ),
626	);
627	}
628	public function get_badge_hover_css( $attributes, $device = '' ) {
629	$css = [];
630	return array_merge(
631	$css,
632	[ 'color' => Color::get_css( isset( $attributes['badgeTextColorH'] ) ? $attributes['badgeTextColorH'] : '' ) ],
633	[ 'background' => Color::get_css( isset( $attributes['badgeBackgroundH'] ) ? $attributes['badgeBackgroundH'] : '' ) ],
634	Border::get_css( $attributes['badgeBorder'], '', $device ),
635	);
636	}
637	public function get_badge_text_css( $attributes, $device = '' ) {
638	return TextShadow::get_css( $attributes['badgeTextShadow'] );
639	}
640
641	public function get_icon_wrapper_extra_css( $attributes, $device = '' ) {
642	$css = [];
643
644	return array_merge(
645	$css,
646	Dimensions::get_css( $attributes['iconMargin'], 'margin', $device ),
647	);
648	}
649
650	public function get_icon_css_hover( $attributes, $device = '' ) {
651	$css = [];
652
653	return array_merge(
654	[ 'fill' => Color::get_css( isset( $attributes['iconPrimaryColorH'] ) ? $attributes['iconPrimaryColorH'] : '' ) ],
655	Range::get_css([
656	'attributeValue' => $attributes['iconTransition'],
657	'attribute_object_key' => 'value',
658	'defaultValue' => 0,
659	'unitDefaultValue' => 's',
660	'property' => 'transition-duration',
661	'device' => $device,
662	]),
663	$css
664	);
665	}
666	public function get_icon_css_background_hover( $attributes, $device = '' ) {
667	$css = [];
668	if ( ! empty( $attributes['iconBackgroundColorH'] ) ) {
669	$css['background'] = $attributes['iconBackgroundColorH'];
670	}
671	return array_merge(
672	Range::get_css([
673	'attributeValue' => $attributes['iconTransition'],
674	'attribute_object_key' => 'value',
675	'defaultValue' => 0,
676	'unitDefaultValue' => 's',
677	'property' => 'transition-duration',
678	'device' => $device,
679	]),
680	$css
681	);
682	}
683
684	public function get_info_box_content( $attributes, $device = '' ) {
685	$css = [];
686
687	if ( isset( $attributes['alignment'][ 'value' . $device ] ) ) {
688	$css['align-items'] = $attributes['alignment'][ 'value' . $device ];
689	}
690
691	return array_merge(
692	Range::get_css([
693	'attributeValue' => $attributes['contentGap'],
694	'attribute_object_key' => 'value',
695	'isResponsive' => true,
696	'defaultValue' => 10,
697	'hasUnit' => true,
698	'unitDefaultValue' => 'px',
699	'property' => 'gap',
700	'device' => $device,
701	]),
702	$css,
703	);
704	}
705
706	public function get_heading_text_css( $attributes, $device = '' ) {
707	$typographyGlobal = ! empty( $attributes['headingTypographyGlobal'] ) ? $attributes['headingTypographyGlobal'] : array();
708	$typography_css = ! empty( $attributes['headingTypography'] ) ? Typography::get_css( $attributes['headingTypography'], '', $device, $typographyGlobal ) : array();
709	$textShadowCss = ! empty( $attributes['headingTextShadow'] ) ? TextShadow::get_css( $attributes['headingTextShadow'], '', $device ) : array();
710	$textStrokeCss = ! empty( $attributes['headingTextStroke'] ) ? TextStroke::get_css( $attributes['headingTextStroke'], '', $device ) : array();
711
712	$css = [];
713
714	if ( ! empty( $attributes['alignment'][ 'value' . $device ] ) ) {
715	if ( $attributes['alignment'][ 'value' . $device ] === 'flex-start' ) {
716	$css['text-align'] = 'left';
717	} elseif ( $attributes['alignment'][ 'value' . $device ] === 'flex-end' ) {
718	$css['text-align'] = 'right';
719	} else {
720	$css['text-align'] = $attributes['alignment'][ 'value' . $device ];
721	}
722	}
723
724	return array_merge(
725	$css,
726	$typography_css,
727	$textShadowCss,
728	$textStrokeCss,
729	[ 'color' => Color::get_css( isset( $attributes['headingTextColor'] ) ? $attributes['headingTextColor'] : '' ) ],
730	Dimensions::get_css( $attributes['headingMargin'], 'margin', $device ),
731	);
732	}
733	public function get_heading_text_css_hover( $attributes, $device = '' ) {
734	$css = [];
735	if ( ! empty( $attributes['headingTransition'] ) ) {
736	$css['transition-duration'] = $attributes['headingTransition'] . 's';
737	}
738
739	return array_merge(
740	[ 'color' => Color::get_css( isset( $attributes['headingTextColorHover'] ) ? $attributes['headingTextColorHover'] : '' ) ],
741	Range::get_css([
742	'attributeValue' => $attributes['headingTransition'],
743	'attribute_object_key' => 'value',
744	'defaultValue' => 0,
745	'unitDefaultValue' => 's',
746	'property' => 'transition-duration',
747	'device' => $device,
748	]),
749	$css
750	);
751	}
752
753
754	public function get_sub_heading_text_css( $attributes, $device = '' ) {
755	$typographyGlobal = ! empty( $attributes['subHeadingTypographyGlobal'] ) ? $attributes['subHeadingTypographyGlobal'] : array();
756	$typography_css = ! empty( $attributes['subHeadingTypography'] ) ? Typography::get_css( $attributes['subHeadingTypography'], '', $device, $typographyGlobal ) : array();
757	$textShadowCss = ! empty( $attributes['subHeadingTextShadow'] ) ? TextShadow::get_css( $attributes['subHeadingTextShadow'], '', $device ) : array();
758	$textStrokeCss = ! empty( $attributes['subHeadingTextStroke'] ) ? TextStroke::get_css( $attributes['subHeadingTextStroke'], '', $device ) : array();
759
760	$css = [];
761
762	if ( ! empty( $attributes['alignment'][ 'value' . $device ] ) ) {
763	if ( $attributes['alignment'][ 'value' . $device ] === 'flex-start' ) {
764	$css['text-align'] = 'left';
765	} elseif ( $attributes['alignment'][ 'value' . $device ] === 'flex-end' ) {
766	$css['text-align'] = 'right';
767	} else {
768	$css['text-align'] = $attributes['alignment'][ 'value' . $device ];
769	}
770	}
771
772	return array_merge(
773	$css,
774	$typography_css,
775	$textShadowCss,
776	$textStrokeCss,
777	[ 'color' => Color::get_css( isset( $attributes['subHeadingTextColor'] ) ? $attributes['subHeadingTextColor'] : '' ) ],
778	Dimensions::get_css( $attributes['subHeadingMargin'], 'margin', $device ),
779	);
780	}
781	public function get_sub_heading_text_css_hover( $attributes, $device = '' ) {
782	$css = [];
783	return array_merge(
784	[ 'color' => Color::get_css( isset( $attributes['subHeadingTextColorHover'] ) ? $attributes['subHeadingTextColorHover'] : '' ) ],
785	Range::get_css([
786	'attributeValue' => $attributes['subHeadingTransition'],
787	'attribute_object_key' => 'value',
788	'defaultValue' => 0,
789	'unitDefaultValue' => 's',
790	'property' => 'transition-duration',
791	'device' => $device,
792	]),
793	$css
794	);
795	}
796
797	public function get_des_text_css( $attributes, $device = '' ) {
798	$css = [];
799
800	if ( ! empty( $attributes['alignment'][ 'value' . $device ] ) ) {
801	if ( $attributes['alignment'][ 'value' . $device ] === 'flex-start' ) {
802	$css['text-align'] = 'left';
803	} elseif ( $attributes['alignment'][ 'value' . $device ] === 'flex-end' ) {
804	$css['text-align'] = 'right';
805	} else {
806	$css['text-align'] = $attributes['alignment'][ 'value' . $device ];
807	}
808	}
809	$typographyGlobal = ! empty( $attributes['desTypographyGlobal'] ) ? $attributes['desTypographyGlobal'] : array();
810	return array_merge(
811	$css,
812	[ 'color' => Color::get_css( isset( $attributes['desTextColor'] ) ? $attributes['desTextColor'] : '' ) ],
813	isset( $attributes['desTypography'] ) ? Typography::get_css( $attributes['desTypography'], '', $device, $typographyGlobal ) : [],
814	isset( $attributes['desTextStroke'] ) ? TextStroke::get_css( $attributes['desTextStroke'], '', $device ) : [],
815	isset( $attributes['desTextShadow'] ) ? TextShadow::get_css( $attributes['desTextShadow'], '', $device ) : [],
816	Dimensions::get_css( $attributes['desMargin'], 'margin', $device ),
817	);
818	}
819	public function get_des_text_css_hover( $attributes, $device = '' ) {
820	$css = [];
821	return array_merge(
822	[ 'color' => Color::get_css( isset( $attributes['desTextColorHover'] ) ? $attributes['desTextColorHover'] : '' ) ],
823	Range::get_css([
824	'attributeValue' => $attributes['desTransition'],
825	'attribute_object_key' => 'value',
826	'defaultValue' => 0,
827	'unitDefaultValue' => 's',
828	'property' => 'transition-duration',
829	'device' => $device,
830	]),
831	$css
832	);
833	}
834	public function get_des_drop_text_css( $attributes, $device = '' ) {
835	$css = [];
836	if ( ! empty( $attributes['desDropCapsTextColor'] ) ) {
837	$css['color'] = Color::get_css(
838	isset( $attributes['desDropCapsTextColor'] ) ? $attributes['desDropCapsTextColor'] : '');
839	}
840	return $css;
841	}
842
843	public function get_container_css( $attributes, $device = '' ) {
844	$css = [];
845
846	return array_merge(
847	Range::get_css([
848	'attributeValue' => $attributes['ratingNumberGap'],
849	'attribute_object_key' => 'value',
850	'isResponsive' => true,
851	'defaultValue' => 0,
852	'hasUnit' => true,
853	'unitDefaultValue' => 'px',
854	'property' => 'gap',
855	'device' => $device,
856	]),
857	$css,
858	isset( $attributes['alignment'] ) ? Alignment::get_css( $attributes['alignment'], 'justify-content', $device ) : [],
859	);
860	}
861	public function get_rating_number_css( $attributes, $device = '' ) {
862	$css = [];
863	if ( ! empty( $attributes['ratingNumberColor'] ) ) {
864	$css['color'] = Color::get_css(
865	isset( $attributes['ratingNumberColor'] ) ? $attributes['ratingNumberColor'] : '');
866
867	}
868	if ( ! empty( $attributes['ratingNumberPosition'] ) ) {
869	if ( 'left' === $attributes['ratingNumberPosition'] ) {
870	$css['order'] = '-5';
871	} else {
872	$css['order'] = '10';
873	}
874	}
875	$typographyGlobal = ! empty( $attributes['ratingNumberTypographyGlobal'] ) ? $attributes['ratingNumberTypographyGlobal'] : array();
876	return array_merge(
877	$css,
878	isset( $attributes['ratingNumberTypography'] ) ? Typography::get_css( $attributes['ratingNumberTypography'], '', $device, $typographyGlobal ) : [],
879	);
880	}
881	public function get_rating_css( $attributes, $device = '' ) {
882	$rating_css = [];
883	return array_merge(
884	$rating_css,
885	Dimensions::get_css( $attributes['ratingMargin'], 'margin', $device ),
886	);
887	}
888
889
890	public function get_rating_icon_spacing_css( $attributes, $device = '' ) {
891	$rating_icon_spacing_css = [];
892
893	return array_merge(
894	Range::get_css([
895	'attributeValue' => $attributes['spacing'],
896	'attribute_object_key' => 'value',
897	'isResponsive' => true,
898	'defaultValue' => 0,
899	'hasUnit' => true,
900	'unitDefaultValue' => 'px',
901	'property' => 'gap',
902	'device' => $device,
903	]),
904	$rating_icon_spacing_css
905	);
906	}
907
908	public function get_fill_rating_css( $attributes, $device = '' ) {
909	$css = [];
910	return array_merge(
911	[ 'fill' => Color::get_css( isset( $attributes['ratingColor'] ) ? $attributes['ratingColor'] : '' ) ],
912	Range::get_css([
913	'attributeValue' => $attributes['ratingTransition'],
914	'attribute_object_key' => 'value',
915	'defaultValue' => 0,
916	'unitDefaultValue' => 's',
917	'property' => 'transition-duration',
918	'device' => $device,
919	]),
920	$css
921	);
922	}
923	public function get_unfill_rating_css( $attributes, $device = '' ) {
924	$css = [];
925	if ( ! empty( $attributes['ratingColor'] ) ) {
926	$css['fill'] = Color::get_css(
927	isset( $attributes['ratingUnmarkedColor'] ) ? $attributes['ratingUnmarkedColor'] : '');
928	}
929	return array_merge(
930	Range::get_css([
931	'attributeValue' => $attributes['ratingTransition'],
932	'attribute_object_key' => 'value',
933	'defaultValue' => 0,
934	'unitDefaultValue' => 's',
935	'property' => 'transition-duration',
936	'device' => $device,
937	]),
938	$css
939	);
940	}
941	public function get_fill_rating_css_hover( $attributes, $device = '' ) {
942	$css = [];
943	return array_merge(
944	[ 'fill' => Color::get_css( isset( $attributes['ratingColorHover'] ) ? $attributes['ratingColorHover'] : '' ) ],
945	Range::get_css([
946	'attributeValue' => $attributes['ratingTransition'],
947	'attribute_object_key' => 'value',
948	'defaultValue' => 0,
949	'unitDefaultValue' => 's',
950	'property' => 'transition-duration',
951	'device' => $device,
952	]),
953	$css
954	);
955	}
956	public function get_unfill_rating_css_hover( $attributes, $device = '' ) {
957	$css = [];
958	if ( ! empty( $attributes['ratingColorHover'] ) ) {
959	$css['fill'] = Color::get_css(
960	isset( $attributes['ratingUnmarkedColorHover'] ) ? $attributes['ratingUnmarkedColorHover'] : '');
961	}
962	return array_merge(
963	Range::get_css([
964	'attributeValue' => $attributes['ratingTransition'],
965	'attribute_object_key' => 'value',
966	'defaultValue' => 0,
967	'unitDefaultValue' => 's',
968	'property' => 'transition-duration',
969	'device' => $device,
970	]),
971	$css
972	);
973	}
974
975	public function get_button_css( $attributes, $device = '' ) {
976	$css = [];
977
978	if ( ! empty( $attributes['btnBackground'] ) ) {
979	$css['background'] = Color::get_css(
980	isset( $attributes['btnBackground'] ) ? $attributes['btnBackground'] : '');
981	} else {
982	$css['background'] = $attributes['btnType'];
983	}
984
985	if ( isset( $attributes['btnAlignment'][ 'value' . $device ] ) ) {
986	$css['justify-content'] = $attributes['btnAlignment'][ 'value' . $device ];
987	}
988	$typographyGlobal = ! empty( $attributes['btnTypographyGlobal'] ) ? $attributes['btnTypographyGlobal'] : array();
989
990	return array_merge(
991	Range::get_css([
992	'attributeValue' => $attributes['btnIconSpace'],
993	'attribute_object_key' => 'value',
994	'defaultValue' => 10,
995	'property' => 'column-gap',
996	'device' => $device,
997	]),
998	Range::get_css([
999	'attributeValue' => $attributes['btnTransition'],
1000	'attribute_object_key' => 'value',
1001	'defaultValue' => 0,
1002	'unitDefaultValue' => 's',
1003	'property' => 'transition-duration',
1004	'device' => $device,
1005	]),
1006	$css,
1007	[ 'color' => Color::get_css( isset( $attributes['btnTextColor'] ) ? $attributes['btnTextColor'] : '' ) ],
1008	Border::get_css( $attributes['btnBorder'], '', $device ),
1009	Typography::get_css( $attributes['btnTypography'], '', $device, $typographyGlobal ),
1010	Dimensions::get_css( $attributes['btnPadding'], 'padding', $device ),
1011	Dimensions::get_css( $attributes['btnMargin'], 'margin', $device ),
1012	);
1013	}
1014	public function get_button_hover_css( $attributes, $device = '' ) {
1015	$css = [];
1016	return array_merge(
1017	$css,
1018	[ 'color' => Color::get_css( isset( $attributes['btnTextColorH'] ) ? $attributes['btnTextColorH'] : '' ) ],
1019	[ 'background' => Color::get_css( isset( $attributes['btnBackgroundH'] ) ? $attributes['btnBackgroundH'] : '' ) ],
1020	Border::get_hover_css( $attributes['btnBorder'], '', $device )
1021	);
1022	}
1023	public function get_button_text_css( $attributes, $device = '' ) {
1024	return TextShadow::get_css( $attributes['btnTextShadow'] );
1025	}
1026	public function get_button_icon_hover_css( $attributes, $device = '' ) {
1027	return [ 'fill' => Color::get_css( isset( $attributes['btnTextColorH'] ) ? $attributes['btnTextColorH'] : '' ) ];
1028	}
1029	}
1030