Smart Post – Post Grid, Post Carousel, Post Slider Gutenberg Blocks for Blog & News / 4.0.7

Smart Post – Post Grid, Post Carousel, Post Slider Gutenberg Blocks for Blog & News v4.0.7

post-carousel / src / blocks / shared / dynamicCss.js

dynamicCss.js in Smart Post – Post Grid, Post Carousel, Post Slider Gutenberg Blocks for Blog & News 4.0.7, at src/blocks/shared/dynamicCss.js

2,371 lines 79.0 KB

Raw Download Zip

1	import { maxValueFromObject, showHide } from "../../controls/controls";
2	import { boxCss, colorControls, spacingGenerate, rangerCss } from "./helpFn";
3
4	const sharedDynamicCss = (attributes, page) => {
5	const {
6	uniqueId,
7	blockName,
8	titleMargin,
9	titleColor,
10	titleFontSize,
11	titleTypography,
12	titleLatterSpacing,
13	titleLineHeight,
14	catTabCategoryTypography,
15	catTabCategoryFontSize,
16	catTabCategoryLineHeight,
17	catTabCategoryLetterSpacing,
18	catTabCategoryColor,
19	imageGrayscaleLevel,
20	imageBlurEffect,
21	imageBrightness,
22	imageGrayscaleLevelHover,
23	imageBlurEffectHover,
24	imageBrightnessHover,
25	catTabCategoryBg,
26	catTabCategorySpaceBetween,
27	catTabCategoryPadding,
28	catTabCategoryBorderRadius,
29	catTabCategoryMargin,
30	contentAreaBg,
31	contentAreaHeight,
32	metaTypography,
33	metaFontSize,
34	metaFontSpacing,
35	metaLineHeight,
36	metaColors,
37	metaSpaceBetween,
38	metadataMargin,
39	excerptTypography,
40	excerptFontSize,
41	excerptFontSpacing,
42	excerptLineHeight,
43	excerptColor,
44	excerptMargin,
45	socialShareIconSize,
46	socialShareBorder,
47	socialShareBorderWidth,
48	socialShareBorderRadius,
49	socialShareSpaceBetween,
50	socialShareMargin,
51	socialShareCustomColor,
52	socialShareCustomBgColor,
53	socialShareIconType,
54	contentAreaBoxShadow,
55	contentAreaEnableBoxShadow,
56	contentAreaPadding,
57	imageOpacityEffect,
58	imageMode,
59	imageNormalHover,
60	imageGrayscaleHover,
61	imageBorderWidth,
62	imageBorder,
63	imageRadius,
64	imageSpace,
65	imageWidth,
66	imageHeight,
67	imageSize,
68	imageScale,
69	readMoreButtonTypography,
70	readMoreButtonFontSize,
71	readMoreButtonFontSpacing,
72	readMoreButtonLineHeight,
73	readMoreBg,
74	readMoreColor,
75	readMoreButtonBorder,
76	readMoreButtonBorderWidth,
77	readMoreButtonBorderRadius,
78	readMoreButtonPadding,
79	readMoreButtonMargin,
80	contentAlignment,
81	advancedBg,
82	advancedBorderStyleWidth,
83	advancedBorderStyle,
84	advancedBorderRadius,
85	advancedBoxShadow,
86	advancedBoxShadowEnable,
87	advancedPadding,
88	advancedMargin,
89	postCardBg,
90	imageOverlayCustomColor,
91	postCardBorder,
92	postCardBorderWidth,
93	postCardHoverBorderWidth,
94	postCardBorderRadius,
95	postCardHoverBorderRadius,
96	postCardHoverBoxShadow,
97	postCardBoxShadow,
98	postCardHoverBoxShadowEnable,
99	postCardBoxShadowEnable,
100	postCardPadding,
101	paginationColor,
102	paginationBGColor,
103	paginationBorder,
104	paginationBorderWidth,
105	paginationSpaceBetween,
106	paginationBorderRadius,
107	paginationPadding,
108	paginationMargin,
109	paginationTypography,
110	paginationFontSize,
111	paginationLetterSpacing,
112	paginationLineHeight,
113	navigationArrowHeight,
114	navigationArrowWidth,
115	navigationArrowSize,
116	carouselArrowSize,
117	carouselArrowWidth,
118	carouselArrowHeight,
119	carouselArrowSpaceBetween,
120	carouselArrowColor,
121	carouselArrowBgColor,
122	carouselArrowBorder,
123	carouselArrowBorderWidth,
124	carouselArrowBorderRadius,
125	carouselArrowHorizontal,
126	carouselArrowVertical,
127	carouselBoxShadowEnable,
128	carouselBoxShadow,
129	carouselPaginationStyle,
130	carouselPaginationWidth,
131	carouselPaginationHeight,
132	carouselPaginationSpaceBetween,
133	carouselPaginationHorizontal,
134	carouselPaginationVertical,
135	carouselPaginationTextColor,
136	carouselPaginationColor,
137	carouselPaginationBorder,
138	carouselPaginationBorderWidth,
139	carouselPaginationBorderWidthHover,
140	hideOnDesktop,
141	hideOnTablet,
142	hideOnMobile,
143	popupImageSize,
144	popupImageWidth,
145	popupImageHeight,
146	catTabCategoryBorder,
147	catTabCategoryBorderWidth,
148	contentAreaWidth,
149	contentAreaMargin,
150	imagePosition,
151	metaRowGap,
152	timelineConnectorColor,
153	timelineIndicatorColor,
154	timelineCircleBgColor,
155	timelineConnectorBorder,
156	timelineConnectorBorderWidth,
157	timelineConnectorBorderRadius,
158	timelineLayout,
159	readMoreIconGap,
160	socialSharePadding,
161	socialShareIconPosition,
162	socialPopupShareColor,
163	socialPopupShareBGColor,
164	socialPopupContainerBGColor,
165	socialSharePopupBorder,
166	socialSharePopupBorderWidth,
167	socialShareBoxShadow,
168	socialPopupBoxShadow,
169	socialPopupBoxShadowValue,
170	socialPopupPadding,
171	titleShow,
172	excerptShow,
173	catTabCategoryEnable,
174	carouselNavArrow,
175	carouselPaginationDot,
176	showReadMoreButton,
177	socialShareEnableSocial,
178	socialIconDisplayType,
179	paginationType,
180	contentVerticalPosition,
181	contentHorizontalPosition,
182	popupCloseBtnColor,
183	generalLinkOpen,
184	popupCloseBtnSize,
185	popupMaxWidth,
186	popupMaxHeight,
187	popupBgColor,
188	popupOverlayColor,
189	popupTitleColor,
190	popupMetaFieldsColor,
191	popupExcerptColor,
192	popupNavArrowColor,
193	popupNavArrowBgColor,
194	titleWordSpacing,
195	metaWordSpacing,
196	excerptWordSpacing,
197	catTabCategoryWordSpacing,
198	readMoreButtonWordSpacing,
199	paginationWordSpacing,
200	socialShareBoxShadowValue,
201	catTabCategoryBorderWidthHover,
202	catTabCategoryBorderRadiusHover,
203	readMoreButtonBorderRadiusHover,
204	readMoreButtonBorderWidthHover,
205	carouselArrowBorderWidthHover,
206	advancedBorderStyleWidthHover,
207	advancedBorderRadiusHover,
208	imageFeaturedImg,
209	imageOverlayColor,
210	readMoreIocVisibility,
211	metaSeparatorColor,
212	showImageGallery,
213	imageGalleryNavArrowSize,
214	titleEffect,
215	titleUnderlineEffect,
216	titleEffectColor,
217	imageGalleryNavArrowColor,
218	imageGalleryNavArrowBgColor,
219	} = attributes;
220
221	const spContentPosition = {
222	top: "start",
223	center: "center",
224	bottom: "end",
225	left: "start",
226	right: "end",
227	};
228
229	const typographyCss = (attr) => {
230	return {
231	"font-family": attr?.typography?.family,
232	"font-weight": attr?.typography?.fontWeight,
233	"font-style": attr?.typography?.style,
234	"text-decoration": attr?.typography?.decoration,
235	"text-transform": attr?.typography?.transform,
236	};
237	};
238
239	// Title Css.
240	const titleCss = () => {
241	return titleShow
242	? [
243	{
244	class: `#${uniqueId} .sp-smart-post-title`,
245	styles: {
246	...typographyCss(titleTypography),
247	"font-size": rangerCss(titleFontSize),
248	"line-height": rangerCss(titleLineHeight),
249	"letter-spacing": rangerCss(titleLatterSpacing),
250	"word-spacing": rangerCss(titleWordSpacing),
251	color: titleColor.color,
252	margin: spacingGenerate(titleMargin, "Desktop"),
253	},
254	},
255	{
256	class: `#${uniqueId} .sp-smart-post-title:hover`,
257	styles: {
258	color: titleColor.hoverColor,
259	},
260	},
261	{
262	class: `#${uniqueId} .sp-smart-post-title-wrapper`,
263	styles: {
264	"justify-content": contentAlignment,
265	},
266	},
267	]
268	: [];
269	};
270
271	// Title responsive Css.
272	const titleResponsiveCss = (deviceType) => {
273	return titleShow
274	? {
275	[`#${uniqueId} .sp-smart-post-title`]: {
276	"font-size": rangerCss(titleFontSize, deviceType),
277	"line-height": rangerCss(titleLineHeight, deviceType),
278	"letter-spacing": rangerCss(titleLatterSpacing, deviceType),
279	"word-spacing": rangerCss(titleWordSpacing, deviceType),
280	margin: spacingGenerate(titleMargin, deviceType),
281	},
282	}
283	: {};
284	};
285
286	// Meta data css.
287	const metaCss = () => {
288	return [
289	{
290	class: `#${uniqueId} .sp-smart-post-details`,
291	styles: {
292	...typographyCss(metaTypography),
293	"column-gap": `${metaSpaceBetween?.value}px`,
294	"row-gap": `${metaRowGap?.value}px`,
295	"justify-content": spContentPosition[contentAlignment],
296	},
297	},
298	{
299	class: `#${uniqueId} .sp-smart-post-date-orientation-two .sp-smart-post-day, #${uniqueId} .sp-smart-post-date-orientation-two .sp-smart-post-month-year`,
300	styles: {
301	...typographyCss(metaTypography),
302	},
303	},
304	{
305	class: `#${uniqueId} .sp-smart-post-details .sp-smart-post-meta-text, #${uniqueId} .sp-smart-post-details ul li a`,
306	styles: {
307	...typographyCss(metaTypography),
308	color: metaColors?.color,
309	},
310	},
311	{
312	class: `#${uniqueId} .sp-smart-post-details .sp-smart-post-meta-icon`,
313	styles: {
314	color: metaColors.color,
315	},
316	},
317	{
318	class: `#${uniqueId} .sp-smart-post-details i,
319	#${uniqueId} .sp-smart-post-details .pcpl-count`,
320	styles: {
321	color: metaColors.color,
322	},
323	},
324	{
325	class: `#${uniqueId} .sp-smart-post-details .sp-smart-post-meta-icon svg path`,
326	styles: {
327	fill: metaColors.color,
328	},
329	},
330	{
331	class: `#${uniqueId} .sp-smart-post-details .sp-smart-post-meta:hover .sp-smart-post-meta-text, #${uniqueId} .sp-smart-post-details ul li:hover a`,
332	styles: {
333	color: metaColors.hoverColor,
334	},
335	},
336	{
337	class: `#${uniqueId} .sp-smart-post-details .sp-smart-post-meta:hover .sp-smart-post-meta-icon,
338	#${uniqueId} .sp-smart-post-details .sp-smart-post-meta:hover .sp-smart-post-meta-icon svg path,
339	#${uniqueId} .sp-smart-post-details .sp-smart-post-meta:hover i,
340	#${uniqueId} .sp-smart-post-details .sp-smart-post-meta:hover .pcpl-count`,
341	styles: {
342	color: metaColors.hoverColor,
343	fill: metaColors.hoverColor,
344	},
345	},
346	{
347	class: `#${uniqueId} .sp-meta-data.sp-smart-post-meta-details-inline:not(.sp-space-between)`,
348	styles: {
349	"justify-content": spContentPosition[contentAlignment],
350	},
351	},
352	{
353	class: `#${uniqueId} .sp-smart-post-meta-separator`,
354	styles: {
355	color: metaSeparatorColor,
356	},
357	},
358	];
359	};
360
361	// Meta data responsive css.
362	const metaResponsiveCss = (deviceType) => {
363	return {
364	[`#${uniqueId} .sp-smart-post-details`]: {
365	"letter-spacing": rangerCss(metaFontSpacing, deviceType),
366	"word-spacing": rangerCss(metaWordSpacing, deviceType),
367	"line-height": rangerCss(metaLineHeight, deviceType),
368	margin: spacingGenerate(metadataMargin, deviceType),
369	},
370	[`#${uniqueId} .sp-smart-post-date-orientation-two .sp-smart-post-day, #${uniqueId} .sp-smart-post-date-orientation-two .sp-smart-post-month-year`]:
371	{
372	"letter-spacing": rangerCss(metaFontSpacing, deviceType),
373	"word-spacing": rangerCss(metaWordSpacing, deviceType),
374	"line-height": rangerCss(metaLineHeight, deviceType),
375	},
376	[`#${uniqueId} .sp-smart-post-details .sp-smart-post-meta-text, #${uniqueId} .sp-smart-post-details ul li a`]:
377	{
378	"font-size": rangerCss(metaFontSize, deviceType) + " !important",
379	"line-height": rangerCss(metaLineHeight, deviceType),
380	"word-spacing": rangerCss(metaWordSpacing, deviceType),
381	"letter-spacing": rangerCss(metaFontSpacing, deviceType),
382	},
383	[`#${uniqueId} .sp-smart-post-details .sp-smart-post-meta-icon`]: {
384	width: rangerCss(metaFontSize, deviceType),
385	height: rangerCss(metaFontSize, deviceType),
386	"font-size": rangerCss(metaFontSize, deviceType),
387	},
388	[`#${uniqueId} .sp-smart-post-meta-separator`]: {
389	"font-size": rangerCss(metaFontSize, deviceType),
390	},
391	};
392	};
393
394	// Excerpt Css
395	const excerptCss = () => {
396	return excerptShow
397	? [
398	{
399	class: `#${uniqueId} .sp-smart-post-excerpt-wrapper .sp-smart-post-excerpt`,
400	styles: {
401	...typographyCss(excerptTypography),
402	color: excerptColor.color,
403	},
404	},
405	]
406	: [];
407	};
408
409	// Excerpt responsive Css
410	const excerptResponsiveCss = (deviceType) => {
411	return excerptShow
412	? {
413	[`#${uniqueId} .sp-smart-post-excerpt-wrapper .sp-smart-post-excerpt`]: {
414	"font-size": rangerCss(excerptFontSize, deviceType),
415	"line-height": rangerCss(excerptLineHeight, deviceType),
416	"letter-spacing": rangerCss(excerptFontSpacing, deviceType),
417	"word-spacing": rangerCss(excerptWordSpacing, deviceType),
418	margin: spacingGenerate(excerptMargin, deviceType),
419	},
420	}
421	: {};
422	};
423
424	// Taxonomy css.
425	const taxonomyCss = () => {
426	return catTabCategoryEnable
427	? [
428	{
429	class: `#${uniqueId} .sp-smart-post-category`,
430	styles: {
431	"justify-content": contentAlignment,
432	},
433	},
434	{
435	class: `#${uniqueId} .sp-smart-post-category ul, #${uniqueId} .sp-smart-post-category span`,
436	styles: {
437	gap: `${catTabCategorySpaceBetween.value}px`,
438	},
439	},
440	{
441	class: `#${uniqueId} .sp-smart-post-category ul`,
442	styles: {
443	margin: spacingGenerate(catTabCategoryMargin, "Desktop"),
444	},
445	},
446	{
447	class: `#${uniqueId} .sp-smart-post-category .sp-taxonomy-type-category a, #${uniqueId} .sp-smart-post-category .sp-taxonomy-type-post_tag a`,
448	styles: {
449	...typographyCss(catTabCategoryTypography),
450	color: catTabCategoryColor.color,
451	background: colorControls(
452	catTabCategoryBg.color.style,
453	catTabCategoryBg.color.solidColor,
454	catTabCategoryBg.color.gradient
455	),
456	"border-style": catTabCategoryBorder.style,
457	"border-color": catTabCategoryBorder.color,
458	},
459	},
460	{
461	class: `#${uniqueId} .sp-smart-post-category a:hover`,
462	styles: {
463	color: catTabCategoryColor.hoverColor,
464	background: colorControls(
465	catTabCategoryBg.hover.style,
466	catTabCategoryBg.hover.solidColor,
467	catTabCategoryBg.hover.gradient
468	),
469	"border-style": catTabCategoryBorder.hoverStyle,
470	"border-color": catTabCategoryBorder.hoverColor,
471	},
472	},
473	{
474	class: `#${uniqueId} .category-container .sp-position-top-right`,
475	styles: {
476	top: "10px",
477	right: "50px",
478	},
479	},
480	]
481	: [];
482	};
483
484	// Taxonomy responsive css.
485	const taxonomyResponsiveCss = (deviceType) => {
486	return catTabCategoryEnable
487	? {
488	[`#${uniqueId} .sp-smart-post-category ul`]: {
489	margin: spacingGenerate(catTabCategoryMargin, deviceType),
490	},
491	[`#${uniqueId} .sp-smart-post-category .sp-taxonomy-type-category a, #${uniqueId} .sp-smart-post-category .sp-taxonomy-type-post_tag a`]:
492	{
493	"font-size": rangerCss(catTabCategoryFontSize, deviceType),
494	"line-height": rangerCss(catTabCategoryLineHeight, deviceType),
495	"letter-spacing": rangerCss(catTabCategoryLetterSpacing, deviceType),
496	"word-spacing": rangerCss(catTabCategoryWordSpacing, deviceType),
497	"border-width": spacingGenerate(catTabCategoryBorderWidth, deviceType),
498	"border-radius": spacingGenerate(catTabCategoryBorderRadius, deviceType),
499
500	padding: spacingGenerate(catTabCategoryPadding, deviceType),
501	},
502	[`#${uniqueId} .sp-smart-post-category a:hover`]: {
503	"border-width": spacingGenerate(catTabCategoryBorderWidthHover, deviceType),
504	"border-radius": spacingGenerate(catTabCategoryBorderRadiusHover, deviceType),
505	},
506	}
507	: {};
508	};
509
510	// Feature image css.
511	const featureImageCss = () => {
512	const grayscaleNormal = `grayscale(${imageGrayscaleLevel.value}%)`;
513	let grayscaleHover = `grayscale(${imageGrayscaleLevelHover.value}%)`;
514
515	if (imageGrayscaleHover && "original" === imageMode) {
516	grayscaleHover = `grayscale(1)`;
517	}
518
519	if (imageNormalHover && "grayscale" === imageMode) {
520	grayscaleHover = `grayscale(0)`;
521	}
522
523	return imageFeaturedImg
524	? [
525	{
526	class: `#${uniqueId} .sp-smart-post-card-image img`,
527	styles: {
528	filter: `blur(${imageBlurEffect.value}px) brightness(${imageBrightness}) ${grayscaleNormal}`,
529	"object-fit": imageScale,
530	},
531	},
532	{
533	class: `#${uniqueId} .sp-smart-post-card-image:hover img, #${uniqueId} .sp-smart-post-background-layout .sp-smart-post-card:hover .sp-smart-post-card-image img`,
534	styles: {
535	filter: `blur(${imageBlurEffectHover.value}px) brightness(${imageBrightnessHover}) ${grayscaleHover}`,
536	},
537	},
538	{
539	class: `#${uniqueId} .sp-smart-post-card .sp-smart-post-card-image:hover.img-opacity img, #${uniqueId} .sp-smart-post-background-layout .sp-smart-post-card:hover .sp-smart-post-card-image.img-opacity img`,
540	styles: {
541	opacity: imageOpacityEffect,
542	},
543	},
544	{
545	class: `#${uniqueId} .sp-smart-post-card-image`,
546	styles: {
547	"border-radius": spacingGenerate(imageRadius, "Desktop"),
548	"border-style": imageBorder.style,
549	"border-color": imageBorder.color,
550	},
551	},
552	{
553	class: `#${uniqueId} .sp-smart-post-card-image:hover`,
554	styles: {
555	"border-color": imageBorder.hoverColor,
556	},
557	},
558	]
559	: [];
560	};
561
562	// Feature image responsive css.
563	const featureImageResponsiveCss = (deviceType) => {
564	const imageSizeCss =
565	"custom" === imageSize
566	? {
567	width: rangerCss(imageWidth, deviceType),
568	height: rangerCss(imageHeight, deviceType),
569	}
570	: {};
571
572	return imageFeaturedImg
573	? {
574	[`#${uniqueId} .sp-smart-post-card-image`]: {
575	"border-width": spacingGenerate(imageBorderWidth, deviceType),
576	"border-radius": spacingGenerate(imageRadius, deviceType),
577	...imageSizeCss,
578	},
579	}
580	: {};
581	};
582
583	// Content area css.
584	const contentAreaCss = () => {
585	return [
586	{
587	class: `#${uniqueId} .sp-smart-post-card`,
588	styles: {
589	background: colorControls(
590	postCardBg.color.style,
591	postCardBg.color.solidColor,
592	postCardBg.color.gradient
593	),
594	"border-style": postCardBorder.style,
595	"border-color": postCardBorder.color,
596	},
597	},
598	{
599	class: `#${uniqueId} .sp-smart-post-background-layout .sp-smart-post-card .sp-smart-post-template-one-content`,
600	styles: {
601	"align-items": spContentPosition[contentVerticalPosition],
602	},
603	},
604	{
605	class: `#${uniqueId} .sp-smart-post-background-layout .sp-smart-post-card.overlay-type-box .sp-smart-post-card-content`,
606	styles: {
607	background:
608	colorControls(
609	contentAreaBg.color.style,
610	contentAreaBg.color.solidColor,
611	contentAreaBg.color.gradient
612	) + " !important",
613	},
614	},
615	{
616	class: `#${uniqueId} .sp-smart-post-card .sp-smart-post-card-content`,
617	styles: {
618	background: colorControls(
619	contentAreaBg.color.style,
620	contentAreaBg.color.solidColor,
621	contentAreaBg.color.gradient
622	),
623	"text-align": contentAlignment,
624	// 'align-items': spContentPosition[ contentAlignment ],
625	},
626	},
627	{
628	class: `#${uniqueId} .sp-smart-post-card:hover`,
629	styles: {
630	background: colorControls(
631	postCardBg.hover.style,
632	postCardBg.hover.solidColor,
633	postCardBg.hover.gradient
634	),
635	"border-style": postCardBorder.hoverStyle,
636	"border-color": postCardBorder.hoverColor,
637	},
638	},
639	{
640	class: `#${uniqueId} .sp-smart-post-block-wrapper:not(.sp-smart-post-background-layout) .sp-smart-post-card, #${uniqueId} .sp-smart-post-background-layout .sp-smart-post-card.overlay-type-full .sp-smart-post-template-one-content`,
641	styles: {
642	padding: spacingGenerate(postCardPadding, "Desktop"),
643	},
644	},
645	{
646	class: `#${uniqueId} .sp-smart-post-background-layout .sp-smart-post-card.overlay-type-box .sp-smart-post-card-content, #${uniqueId} .sp-smart-post-background-layout .sp-smart-post-card.overlay-type-box .image-overlay`,
647	styles: {
648	position: "absolute",
649	},
650	},
651	];
652	};
653
654	// Content area responsive css.
655	const contentAreaResponsiveCss = (deviceType) => {
656	const contentPadding =
657	"background" !== imagePosition ? { padding: spacingGenerate(postCardPadding, deviceType) } : {};
658	const overlayPositionH = (position, attr) => {
659	if (["top", "left"].includes(position)) {
660	return "0";
661	}
662	if ("center" === position) {
663	return `50%`;
664	}
665	if (["bottom", "right"].includes(position)) {
666	return `100%`;
667	}
668	};
669
670	return {
671	[`#${uniqueId} .sp-smart-post-card`]: {
672	"border-width": spacingGenerate(postCardBorderWidth, deviceType),
673	"border-radius": spacingGenerate(postCardBorderRadius, deviceType),
674	"box-shadow": boxCss(postCardBoxShadowEnable, deviceType, postCardBoxShadow, "color"),
675	...contentPadding,
676	margin: spacingGenerate(contentAreaMargin, deviceType),
677	gap: rangerCss(imageSpace, deviceType),
678	},
679	[`#${uniqueId} sp-smart-post-block-wrapper:not(.sp-smart-post-background-layout) .sp-smart-post-card, #${uniqueId} .sp-smart-post-background-layout .sp-smart-post-card.overlay-type-full .sp-smart-post-template-one-content`]:
680	{
681	padding: spacingGenerate(postCardPadding, deviceType),
682	},
683	[`#${uniqueId} .sp-smart-post-background-layout .sp-smart-post-card.overlay-type-box .sp-smart-post-card-content, #${uniqueId} .sp-smart-post-background-layout .sp-smart-post-card.overlay-type-box .image-overlay`]:
684	{
685	width: rangerCss(contentAreaWidth, deviceType),
686	height: rangerCss(contentAreaHeight, deviceType),
687	top: overlayPositionH(contentVerticalPosition, contentAreaHeight),
688	left: overlayPositionH(contentHorizontalPosition, contentAreaWidth),
689	transform: `translate(-${overlayPositionH(
690	contentHorizontalPosition,
691	contentAreaWidth
692	)}, -${overlayPositionH(contentVerticalPosition, contentAreaHeight)})`,
693	},
694	[`#${uniqueId} .sp-smart-post-card .sp-smart-post-card-content`]: {
695	padding: spacingGenerate(contentAreaPadding, deviceType),
696	},
697	[`#${uniqueId} .sp-smart-post-card:hover`]: {
698	"border-width": spacingGenerate(postCardHoverBorderWidth, deviceType),
699	"border-radius": spacingGenerate(postCardHoverBorderRadius, deviceType),
700	"box-shadow": boxCss(postCardHoverBoxShadowEnable, deviceType, postCardHoverBoxShadow, "color"),
701	},
702	};
703	};
704	// Container area Css.
705	const containerCss = () => {
706	return [
707	{
708	class: `#${uniqueId}`,
709	styles: {
710	background: colorControls(
711	advancedBg.color.style,
712	advancedBg.color.solidColor,
713	advancedBg.color.gradient
714	),
715	"border-style": advancedBorderStyle.style,
716	"border-color": advancedBorderStyle.color,
717	},
718	},
719	{
720	class: `#${uniqueId}:hover`,
721	styles: {
722	background: colorControls(
723	advancedBg.hover.style,
724	advancedBg.hover.solidColor,
725	advancedBg.hover.gradient
726	),
727	"border-style": advancedBorderStyle.hoverStyle,
728	"border-color": advancedBorderStyle.hoverColor,
729	},
730	},
731	];
732	};
733
734	// Container area responsive Css.
735	const containerResponsiveCss = (deviceType) => {
736	return {
737	[`#${uniqueId}`]: {
738	"border-width": spacingGenerate(advancedBorderStyleWidth, deviceType),
739	"border-radius": spacingGenerate(advancedBorderRadius, deviceType),
740	"box-shadow": boxCss(advancedBoxShadowEnable, deviceType, advancedBoxShadow, "color"),
741	padding: spacingGenerate(advancedPadding, deviceType),
742	margin: spacingGenerate(advancedMargin, deviceType),
743
744	// "margin-block-start": "editor" === page ? "" : "0px",
745	},
746	[`#${uniqueId}:hover`]: {
747	"border-width": spacingGenerate(advancedBorderStyleWidthHover, deviceType),
748	"border-radius": spacingGenerate(advancedBorderRadiusHover, deviceType),
749	},
750	};
751	};
752
753	// Carousel Navigation button css.
754	const carouselNavBtnCss = () => {
755	const navigationArrowCss =
756	carouselArrowSpaceBetween?.device?.Desktop > 99 && carouselArrowSpaceBetween?.unit?.Desktop === "%"
757	? {
758	right: rangerCss(carouselArrowHorizontal),
759	left: "auto",
760	}
761	: {
762	left: rangerCss(carouselArrowHorizontal),
763	};
764	return carouselNavArrow
765	? [
766	{
767	class: `#${uniqueId} .sp-smart-post-swiper-nav-arrow`,
768	styles: {
769	top: rangerCss(carouselArrowVertical),
770	gap: rangerCss(carouselArrowSpaceBetween),
771	width: `calc(100% - ${carouselArrowWidth.device.Desktop * 2}px)`,
772	},
773	},
774	{
775	class: `#${uniqueId} .sp-smart-post-swiper-nav-arrow .btn-prev`,
776	styles: {
777	left: rangerCss(carouselArrowHorizontal),
778	},
779	},
780	{
781	class: `#${uniqueId} div:not(.post-timeline-three) .sp-smart-post-swiper-nav-arrow .btn-next`,
782	styles: {
783	...navigationArrowCss,
784	},
785	},
786	{
787	class: `#${uniqueId} .post-timeline-three .sp-smart-post-swiper-nav-arrow .btn-next`,
788	styles: {
789	...navigationArrowCss,
790	},
791	},
792	{
793	class: `#${uniqueId} .sp-smart-post-swiper-nav-arrow-btn i`,
794	styles: {
795	color: carouselArrowColor.color,
796	background: carouselArrowBgColor.color,
797	"border-color": carouselArrowBorder.color,
798	"border-style": carouselArrowBorder.style,
799	},
800	},
801	{
802	class: `#${uniqueId} .sp-smart-post-swiper-nav-arrow-btn i svg`,
803	styles: {
804	fill: carouselArrowColor.color,
805	},
806	},
807	{
808	class: `#${uniqueId} .sp-smart-post-swiper-nav-arrow-btn i:hover`,
809	styles: {
810	color: carouselArrowColor.hoverColor,
811	background: carouselArrowBgColor.hoverColor,
812	"border-color": carouselArrowBorder.hoverColor,
813	"border-style": carouselArrowBorder.hoverStyle,
814	},
815	},
816	{
817	class: `#${uniqueId} .sp-smart-post-swiper-nav-arrow-btn i:hover svg`,
818	styles: {
819	fill: carouselArrowColor.hoverColor,
820	},
821	},
822	]
823	: [];
824	};
825
826	// Carousel Navigation button responsive css.
827	const carouselNavBtnResponsiveCss = (deviceType) => {
828	const navigationArrowCss =
829	carouselArrowSpaceBetween?.device?.[deviceType] > 99 && carouselArrowSpaceBetween?.unit?.[deviceType] === "%"
830	? {
831	right: rangerCss(carouselArrowHorizontal, deviceType),
832	left: "auto",
833	}
834	: {
835	left: rangerCss(carouselArrowHorizontal, deviceType),
836	};
837	return carouselNavArrow
838	? {
839	[`#${uniqueId} .sp-smart-post-swiper-nav-arrow`]: {
840	top: rangerCss(carouselArrowVertical, deviceType),
841	gap: rangerCss(carouselArrowSpaceBetween, deviceType),
842	width: `calc(100% - ${carouselArrowWidth.device?.[deviceType] * 2}px)`,
843	},
844	[`#${uniqueId} .sp-smart-post-swiper-nav-arrow .btn-prev`]: {
845	left: rangerCss(carouselArrowHorizontal, deviceType),
846	},
847	// [ `#${ uniqueId } div:not(.post-timeline-three) .sp-smart-post-swiper-nav-arrow .btn-next` ]:
848	// {
849	// left: `calc(${rangerCss( carouselArrowSpaceBetween, deviceType )} - ${carouselArrowWidth.device?.[deviceType]}px)`,
850	// },
851	[`#${uniqueId} div:not(.post-timeline-three) .sp-smart-post-swiper-nav-arrow .btn-next`]: {
852	...navigationArrowCss,
853	},
854	[`#${uniqueId} .post-timeline-three .sp-smart-post-swiper-nav-arrow .btn-next`]: {
855	...navigationArrowCss,
856	},
857	[`#${uniqueId} .sp-smart-post-swiper-nav-arrow-btn i`]: {
858	"font-size": rangerCss(carouselArrowSize, deviceType),
859	width: rangerCss(carouselArrowWidth, deviceType),
860	height: rangerCss(carouselArrowHeight, deviceType),
861	"border-width": spacingGenerate(carouselArrowBorderWidth, deviceType),
862	"border-radius": spacingGenerate(carouselArrowBorderRadius, deviceType),
863	"box-shadow": boxCss(carouselBoxShadowEnable, deviceType, carouselBoxShadow, "color"),
864	},
865	[`#${uniqueId} .sp-smart-post-swiper-nav-arrow-btn i svg`]: {
866	width: rangerCss(carouselArrowSize, deviceType),
867	height: rangerCss(carouselArrowSize, deviceType),
868	},
869	[`#${uniqueId} .sp-smart-post-swiper-nav-arrow-btn i:hover`]: {
870	"border-width": spacingGenerate(carouselArrowBorderWidthHover, deviceType),
871	},
872	}
873	: {};
874	};
875
876	// Carousel Pagination Dots css.
877	const paginationDotsCss = () => {
878	const scrollbarCss =
879	"scrollbar" === carouselPaginationStyle
880	? [
881	{
882	class: `#${uniqueId} .swiper-scrollbar`,
883	styles: {
884	background: carouselPaginationColor.color,
885	},
886	},
887	{
888	class: `#${uniqueId} .swiper-scrollbar .swiper-scrollbar-drag`,
889	styles: {
890	background: carouselPaginationColor.hoverColor,
891	},
892	},
893	]
894	: [];
895
896	const notFraction =
897	"fraction" !== carouselPaginationStyle
898	? {
899	width: "max-content !important",
900	height: "fit-content !important",
901	}
902	: {};
903
904	return carouselPaginationDot
905	? [
906	{
907	class: `#${uniqueId} .sp-smart-post-pagination-${carouselPaginationStyle}`,
908	styles: {
909	color: carouselPaginationTextColor.color,
910	...notFraction,
911	},
912	},
913	{
914	class: `#${uniqueId} .sp-smart-post-pagination-${carouselPaginationStyle} .swiper-pagination-bullet`,
915	styles: {
916	background: carouselPaginationColor.color,
917	"border-color": carouselPaginationBorder.color,
918	"border-style": carouselPaginationBorder.style,
919	opacity: "1",
920	},
921	},
922	{
923	class: `#${uniqueId} .sp-smart-post-pagination-${carouselPaginationStyle} .swiper-pagination-bullet:hover`,
924	styles: {
925	background: carouselPaginationColor.color,
926	"border-color": carouselPaginationBorder.color,
927	"border-style": carouselPaginationBorder.style,
928	opacity: "1",
929	},
930	},
931	{
932	class: `#${uniqueId} .sp-smart-post-pagination-${carouselPaginationStyle} .swiper-pagination-bullet.swiper-pagination-bullet-active`,
933	styles: {
934	background: carouselPaginationColor.hoverColor + " !important",
935	color: carouselPaginationTextColor.activeColor,
936	"border-color": carouselPaginationBorder.hoverColor,
937	"border-style": carouselPaginationBorder.hoverStyle,
938	},
939	},
940	{
941	class: `#${uniqueId} .sp-smart-post-pagination-strokes .swiper-pagination-bullet.swiper-pagination-bullet-active`,
942	styles: {
943	width: "50px",
944	"border-radius": "5px",
945	},
946	},
947	{
948	class: `#${uniqueId} .sp-smart-post-pagination-fraction`,
949	styles: {
950	background: carouselPaginationColor.color,
951	"border-color": carouselPaginationBorder.color,
952	"border-style": carouselPaginationBorder.style,
953	},
954	},
955	{
956	class: `#${uniqueId} .sp-smart-post-pagination-fraction:hover`,
957	styles: {
958	background: carouselPaginationColor.hoverColor,
959	"border-color": carouselPaginationBorder.hoverColor,
960	"border-style": carouselPaginationBorder.hoverStyle,
961	color: carouselPaginationTextColor.activeColor,
962	},
963	},
964	...scrollbarCss,
965	]
966	: [];
967	};
968
969	// Carousel Pagination Dots responsive css.
970	const paginationDotsResponsiveCss = (deviceType) => {
971	return carouselPaginationDot
972	? {
973	[`#${uniqueId} .sp-smart-post-pagination-${carouselPaginationStyle}`]: {
974	gap: rangerCss(carouselPaginationSpaceBetween, deviceType),
975	bottom: rangerCss(carouselPaginationVertical, deviceType),
976	left: rangerCss(carouselPaginationHorizontal, deviceType),
977	},
978	[`#${uniqueId} .sp-smart-post-pagination-${carouselPaginationStyle} .swiper-pagination-bullet`]: {
979	width: rangerCss(carouselPaginationWidth, deviceType),
980	height: rangerCss(carouselPaginationHeight, deviceType),
981	"border-width": spacingGenerate(carouselPaginationBorderWidth, deviceType),
982	},
983	[`#${uniqueId} .sp-smart-post-pagination-fraction`]: {
984	width: `${rangerCss(carouselPaginationWidth, deviceType)} !important`,
985	height: rangerCss(carouselPaginationWidth, deviceType),
986	"border-width": spacingGenerate(carouselPaginationBorderWidth, deviceType),
987	},
988	[`#${uniqueId} .sp-smart-post-pagination-fraction:hover`]: {
989	"border-width": spacingGenerate(carouselPaginationBorderWidthHover, deviceType),
990	},
991	}
992	: {};
993	};
994
995	// Read More Button css.
996	const readMoreButtonCss = () => {
997	return showReadMoreButton
998	? [
999	{
1000	class: `#${uniqueId} .sp-smart-post-read-more-button`,
1001	styles: {
1002	"justify-content": spContentPosition[contentAlignment],
1003	},
1004	},
1005	{
1006	class: `#${uniqueId} .sp-smart-post-read-more-button a`,
1007	styles: {
1008	...typographyCss(readMoreButtonTypography),
1009	color: readMoreColor.color,
1010	background: colorControls(
1011	readMoreBg.color.style,
1012	readMoreBg.color.solidColor,
1013	readMoreBg.color.gradient
1014	),
1015	"border-style": readMoreButtonBorder.style,
1016	"border-color": readMoreButtonBorder.color,
1017	},
1018	},
1019	{
1020	class: `#${uniqueId} .sp-smart-post-read-more-button a:hover`,
1021	styles: {
1022	color: readMoreColor.hoverColor,
1023	background: colorControls(
1024	readMoreBg.hover.style,
1025	readMoreBg.hover.solidColor,
1026	readMoreBg.hover.gradient
1027	),
1028	"border-color": readMoreButtonBorder.hoverColor,
1029	"border-style": readMoreButtonBorder.hoverStyle,
1030	},
1031	},
1032	{
1033	class: `#${uniqueId} .sp-smart-post-read-more-button a i`,
1034	styles: {
1035	"margin-left": ["always"].includes(readMoreIocVisibility)
1036	? rangerCss(readMoreIconGap)
1037	: "0",
1038	},
1039	},
1040	{
1041	class: `#${uniqueId} .sp-smart-post-read-more-button a:hover i`,
1042	styles: {
1043	"margin-left": ["always", "hover"].includes(readMoreIocVisibility)
1044	? rangerCss(readMoreIconGap)
1045	: "0",
1046	},
1047	},
1048	]
1049	: [];
1050	};
1051
1052	// Read More Button responsive css.
1053	const readMoreButtonResponsiveCss = (deviceType) => {
1054	return showReadMoreButton
1055	? {
1056	[`#${uniqueId} .sp-smart-post-read-more-button a`]: {
1057	"font-size": rangerCss(readMoreButtonFontSize, deviceType),
1058	"letter-spacing": rangerCss(readMoreButtonFontSpacing, deviceType),
1059	"word-spacing": rangerCss(readMoreButtonWordSpacing, deviceType),
1060	"line-height": rangerCss(readMoreButtonLineHeight, deviceType),
1061	"border-width": spacingGenerate(readMoreButtonBorderWidth, deviceType),
1062	"border-radius": spacingGenerate(readMoreButtonBorderRadius, deviceType),
1063	padding: spacingGenerate(readMoreButtonPadding, deviceType),
1064	margin: spacingGenerate(readMoreButtonMargin, deviceType),
1065	},
1066	[`#${uniqueId} .sp-smart-post-read-more-button a:hover`]: {
1067	"border-width": spacingGenerate(readMoreButtonBorderWidthHover, deviceType),
1068	"border-radius": spacingGenerate(readMoreButtonBorderRadiusHover, deviceType),
1069	},
1070	[`#${uniqueId} .sp-smart-post-read-more-button a i`]: {
1071	"margin-left": ["always"].includes(readMoreIocVisibility)
1072	? rangerCss(readMoreIconGap, deviceType)
1073	: "0",
1074	},
1075	[`#${uniqueId} .sp-smart-post-read-more-button a:hover i`]: {
1076	"margin-left": ["always", "hover"].includes(readMoreIocVisibility)
1077	? rangerCss(readMoreIconGap, deviceType)
1078	: "0",
1079	},
1080	}
1081	: {};
1082	};
1083
1084	// Social Share css.
1085	const socialShareCss = () => {
1086	const customCss =
1087	"custom" === socialShareIconType
1088	? {
1089	"background-color": socialShareCustomBgColor.color,
1090	color: socialShareCustomColor.color,
1091	"box-shadow": boxCss(socialShareBoxShadow, "Desktop", socialPopupBoxShadowValue, "color"),
1092	}
1093	: {};
1094	const customCssHover =
1095	"custom" === socialShareIconType
1096	? {
1097	"background-color": socialShareCustomBgColor.hoverColor,
1098	color: socialShareCustomColor.hoverColor,
1099	"box-shadow": boxCss(socialShareBoxShadow, "Desktop", socialPopupBoxShadowValue, "hover"),
1100	}
1101	: {};
1102
1103	const popupCss =
1104	"popup-share" === socialIconDisplayType
1105	? [
1106	{
1107	class: `#${uniqueId} .sp-social-share-popup .sp-social-popup-icon-list`,
1108	styles: {
1109	background: socialPopupContainerBGColor.color,
1110	"border-color": socialSharePopupBorder.color,
1111	"border-style": socialSharePopupBorder.style,
1112	"border-width": spacingGenerate(socialSharePopupBorderWidth),
1113	padding: spacingGenerate(socialPopupPadding),
1114	"box-shadow": boxCss(
1115	socialPopupBoxShadow,
1116	"Desktop",
1117	socialPopupBoxShadowValue,
1118	"color"
1119	),
1120	},
1121	},
1122	{
1123	class: `#${uniqueId} .sp-social-share-popup .sp-social-popup-icon-list:after`,
1124	styles: {
1125	"border-top-color": socialPopupContainerBGColor.color,
1126	},
1127	},
1128	{
1129	class: `#${uniqueId} .sp-social-share-popup .sp-social-popup-icon-list:before`,
1130	styles: {
1131	"border-top-color": socialSharePopupBorder.color,
1132	"border-top-style": socialSharePopupBorder.style,
1133	},
1134	},
1135	{
1136	class: `#${uniqueId} .sp-smart-post-card .sp-social-share-popup .sp-social-share-popup-icon.popup-share-icon svg`,
1137	styles: {
1138	width: socialShareIconSize.value + "px",
1139	height: socialShareIconSize.value + "px",
1140	},
1141	},
1142	{
1143	class: `#${uniqueId} .sp-smart-post-card .sp-social-share-popup .sp-social-share-popup-icon.popup-share-icon`,
1144	styles: {
1145	background: socialPopupShareBGColor.color,
1146	},
1147	},
1148	{
1149	class: `#${uniqueId} .sp-smart-post-card .sp-social-share-popup .sp-social-share-popup-icon.popup-share-icon svg path`,
1150	styles: {
1151	fill: socialPopupShareColor.color,
1152	},
1153	},
1154	{
1155	class: `#${uniqueId} .sp-smart-post-card .sp-social-share-popup .sp-social-share-popup-icon.popup-share-icon:hover`,
1156	styles: {
1157	background: socialPopupShareBGColor.hoverColor,
1158	},
1159	},
1160	{
1161	class: `#${uniqueId} .sp-smart-post-card .sp-social-share-popup .sp-social-share-popup-icon.popup-share-icon:hover svg path`,
1162	styles: {
1163	fill: socialPopupShareColor.hoverColor,
1164	},
1165	},
1166	{
1167	class: `#${uniqueId} .sp-smart-post-card .sp-meta-data .sp-social-share-popup .sp-social-share-popup-icon.popup-share-icon`,
1168	styles: {
1169	margin: spacingGenerate(metadataMargin, "Desktop"),
1170	},
1171	},
1172	]
1173	: [];
1174
1175	return socialShareEnableSocial
1176	? [
1177	{
1178	class: `#${uniqueId} .sp-smart-post-social-share`,
1179	styles: {
1180	gap: `${socialShareSpaceBetween.value}${socialShareSpaceBetween.unit}`,
1181	"justify-content": spContentPosition[contentAlignment],
1182	},
1183	},
1184	{
1185	class: `#${uniqueId} .sp-smart-post-social-share li a i, #${uniqueId} .sp-social-share-popup .sp-social-share-popup-icon.popup-share-icon`,
1186	styles: {
1187	"font-size": `${socialShareIconSize.value}${socialShareIconSize.unit}`,
1188	...customCss,
1189	"border-color": socialShareBorder.color,
1190	"border-style": socialShareBorder.style,
1191	},
1192	},
1193	{
1194	class: `#${uniqueId} .sp-smart-post-social-share li a:hover i, #${uniqueId} .sp-social-share-popup .sp-social-share-popup-icon.popup-share-icon:hover`,
1195	styles: {
1196	"border-color": socialShareBorder.hoverColor,
1197	...customCssHover,
1198	},
1199	},
1200	{
1201	class: `#${uniqueId} .sp-smart-post-card-content .sp-smart-post-social-share .sp-post-url-copy-popup`,
1202	styles: {
1203	left: contentAlignment !== "right" ? "0" : "",
1204	right: contentAlignment === "right" ? "0" : "",
1205	},
1206	},
1207	...popupCss,
1208	]
1209	: [];
1210	};
1211
1212	// Social Share Responsive css.
1213	const socialShareResponsiveCss = (deviceType) => {
1214	const socialCustomCss = {
1215	"box-shadow": boxCss(socialShareBoxShadow, deviceType, socialShareBoxShadowValue, "color"),
1216	};
1217
1218	const socialAlignment = !["space-between-taxonomy", "space-between-meta"].includes(socialShareIconPosition)
1219	? {
1220	left:
1221	"center" === contentAlignment
1222	? `calc(50% - 15px)`
1223	: "left" === contentAlignment
1224	? "0"
1225	: "unset",
1226	right: "right" === contentAlignment ? `0` : "unset",
1227	}
1228	: {};
1229
1230	const socialPopupCss =
1231	"popup-share" === socialIconDisplayType
1232	? {
1233	[`#${uniqueId} .sp-social-share-popup .sp-social-popup-icon-list`]: {
1234	"border-width": spacingGenerate(socialSharePopupBorderWidth, deviceType),
1235	padding: spacingGenerate(socialPopupPadding, deviceType),
1236	"box-shadow": boxCss(socialPopupBoxShadow, deviceType, socialPopupBoxShadowValue, "color"),
1237	...socialAlignment,
1238	},
1239	[`#${uniqueId} .sp-smart-post-card .sp-meta-data .sp-social-share-popup .sp-social-share-popup-icon.popup-share-icon`]:
1240	{
1241	margin: spacingGenerate(metadataMargin, deviceType),
1242	},
1243	}
1244	: {};
1245
1246	return socialShareEnableSocial
1247	? {
1248	[`#${uniqueId} .sp-smart-post-social-share`]: {
1249	margin: spacingGenerate(socialShareMargin, deviceType),
1250	},
1251	[`#${uniqueId} .sp-smart-post-social-share li a i, #${uniqueId} .sp-social-share-popup .sp-social-share-popup-icon.popup-share-icon`]:
1252	{
1253	"font-size": `${socialShareIconSize.value}${socialShareIconSize.unit}`,
1254	"border-width": spacingGenerate(socialShareBorderWidth, deviceType),
1255	"border-radius": spacingGenerate(socialShareBorderRadius, deviceType),
1256	padding: spacingGenerate(socialSharePadding, deviceType),
1257	...socialCustomCss,
1258	},
1259	...socialPopupCss,
1260	}
1261	: {};
1262	};
1263
1264	// Load more button css.
1265	const loadMoreButtonCss = () => {
1266	return ["load-more", "pagination", "navigation"].includes(paginationType)
1267	? [
1268	{
1269	class: `#${uniqueId} .sp-smart-post-pagination-buttons a, #${uniqueId} .sp-smart-post-navigation-buttons span, #${uniqueId} .sp-smart-post-load-more-button a`,
1270	styles: {
1271	...typographyCss(paginationTypography),
1272	"border-style": paginationBorder.style,
1273	"border-color": paginationBorder.color,
1274	},
1275	},
1276	{
1277	class: `#${uniqueId} .sp-smart-post-pagination-buttons a:hover,
1278	#${uniqueId} .sp-smart-post-pagination-buttons .current,
1279	#${uniqueId} .sp-smart-post-navigation-buttons span:hover,
1280	#${uniqueId} .sp-smart-post-load-more-button a:hover`,
1281	styles: {
1282	color: paginationColor.hoverColor,
1283	"background-color": paginationBGColor.hoverColor,
1284	"border-color": paginationBorder.hoverColor,
1285	},
1286	},
1287	{
1288	class: `#${uniqueId} .sp-smart-post-navigation-buttons:not(.sp-prev-next) span`,
1289	styles: {
1290	width: rangerCss(navigationArrowWidth),
1291	height: rangerCss(navigationArrowHeight),
1292	"font-size": rangerCss(navigationArrowSize),
1293	},
1294	},
1295	{
1296	class: `#${uniqueId} .sp-smart-post-navigation-buttons .sp-smart-post-grid-nav-arrow,
1297	#${uniqueId} .sp-smart-post-pagination-buttons`,
1298	styles: {
1299	gap: `${paginationSpaceBetween.device.Desktop}px`,
1300	},
1301	},
1302	]
1303	: [];
1304	};
1305
1306	// Load more button responsive css.
1307	const loadMoreButtonResponsiveCss = (deviceType) => {
1308	return ["load-more", "pagination", "navigation"].includes(paginationType)
1309	? {
1310	[`#${uniqueId} .sp-smart-post-pagination-buttons a, #${uniqueId} .sp-smart-post-navigation-buttons span, #${uniqueId} .sp-smart-post-load-more-button a`]:
1311	{
1312	"font-size": rangerCss(paginationFontSize, deviceType),
1313	"letter-spacing": rangerCss(paginationLetterSpacing, deviceType),
1314	"word-spacing": rangerCss(paginationWordSpacing, deviceType),
1315	"line-height": rangerCss(paginationLineHeight, deviceType),
1316	margin: spacingGenerate(paginationMargin, deviceType),
1317	padding: spacingGenerate(paginationPadding, deviceType),
1318	"border-width": spacingGenerate(paginationBorderWidth, deviceType),
1319	"border-radius": spacingGenerate(paginationBorderRadius, deviceType),
1320	},
1321	[`#${uniqueId} .sp-smart-post-navigation-buttons:not(.sp-prev-next) span`]: {
1322	width: rangerCss(navigationArrowWidth, deviceType),
1323	height: rangerCss(navigationArrowHeight, deviceType),
1324	"font-size": rangerCss(navigationArrowSize, deviceType),
1325	},
1326	[`#${uniqueId} .sp-smart-post-navigation-buttons .sp-smart-post-grid-nav-arrow, #${uniqueId} .sp-smart-post-pagination-buttons`]:
1327	{
1328	gap: `${paginationSpaceBetween.device?.[deviceType]}px`,
1329	},
1330	}
1331	: {};
1332	};
1333
1334	// Popup Css.
1335	const popupCss = () => {
1336	return ["single-popup", "multi-popup"].includes(generalLinkOpen)
1337	? [
1338	{
1339	class: `#${uniqueId}-modal .sp-smart-post-modal-content-lightbox.sp-smart-post-modal-content`,
1340	styles: {
1341	"background-color": popupBgColor,
1342	"max-width": popupMaxWidth.value + popupMaxWidth.unit,
1343	"max-height": popupMaxHeight.value + popupMaxHeight.unit,
1344	},
1345	},
1346	{
1347	class: `#${uniqueId}-modal`,
1348	styles: {
1349	"background-color": popupOverlayColor,
1350	},
1351	},
1352	{
1353	class: `#${uniqueId}-modal .sp-smart-post-card-modal-image img`,
1354	styles: {
1355	"object-fit": "cover",
1356	"max-width": "100%",
1357	},
1358	},
1359	{
1360	class: `#${uniqueId}-modal .sp-modal-close-btn.cursor`,
1361	styles: {
1362	color: popupCloseBtnColor.color,
1363	},
1364	},
1365	{
1366	class: `#${uniqueId}-modal .sp-modal-close-btn.cursor:hover`,
1367	styles: {
1368	color: popupCloseBtnColor.hover,
1369	},
1370	},
1371	{
1372	class: `#${uniqueId}-modal .sp-post-modal-title`,
1373	styles: {
1374	color: popupTitleColor,
1375	},
1376	},
1377	{
1378	class: `#${uniqueId}-modal .sp-smart-post-card-content-modal .sp-smart-post-meta-text`,
1379	styles: {
1380	color: popupMetaFieldsColor,
1381	},
1382	},
1383	{
1384	class: `#${uniqueId}-modal .sp-smart-post-card-content-modal .sp-smart-post-meta-icon svg path`,
1385	styles: {
1386	fill: popupMetaFieldsColor,
1387	},
1388	},
1389	{
1390	class: `#${uniqueId}-modal .sp-smart-post-card-content-modal .sp-post-modal-excerpt p`,
1391	styles: {
1392	color: popupExcerptColor,
1393	},
1394	},
1395	{
1396	class: `#${uniqueId}-modal .sp-smart-modal-navigation`,
1397	styles: {
1398	color: popupNavArrowColor.color,
1399	"background-color": popupNavArrowBgColor.color,
1400	},
1401	},
1402	{
1403	class: `#${uniqueId}-modal .sp-smart-modal-navigation:hover`,
1404	styles: {
1405	color: popupNavArrowColor.hover,
1406	"background-color": popupNavArrowBgColor.hover,
1407	},
1408	},
1409	]
1410	: [];
1411	};
1412	// Popup Responsive Css.
1413	const responsivePopupCss = (device) => {
1414	return ["single-popup", "multi-popup"].includes(generalLinkOpen)
1415	? {
1416	[`#${uniqueId}-modal .sp-smart-post-card-modal-image img`]: {
1417	width: `${
1418	popupImageSize === "custom"
1419	? popupImageWidth.device?.[device] + popupImageWidth.unit?.[device]
1420	: ""
1421	}`,
1422	height: `${
1423	popupImageSize === "custom"
1424	? popupImageHeight.device?.[device] + popupImageHeight.unit?.[device]
1425	: ""
1426	}`,
1427	},
1428	[`#${uniqueId}-modal .sp-modal-close-btn i`]: {
1429	"font-size": rangerCss(popupCloseBtnSize, device),
1430	},
1431	}
1432	: {};
1433	};
1434
1435	// Responsive css.
1436	const responsiveCss = (deviceType) => {
1437	//---------------------------------------------------------title effects---------------------------------------------------------//
1438	const titleEffects =
1439	[
1440	"post-carousel-two",
1441	"post-grid-two",
1442	"post-grid-three",
1443	"post-grid-four",
1444	"post-grid-five",
1445	"post-grid-six",
1446	"post-slider",
1447	"post-slider-two",
1448	"post-thumbnail-slider",
1449	"thumbnail-slider-two",
1450	"post-timeline-two",
1451	].includes(blockName) && titleEffect !== "none"
1452	? [
1453	{
1454	class: `#${uniqueId} .sp-smart-post-grid-two .sp-smart-post-card .sp-smart-post-title:after,
1455	#${uniqueId} .sp-smart-post-carousel-two .sp-smart-post-card .sp-smart-post-title:after,
1456	#${uniqueId} .sp-smart-post-slider .sp-smart-post-card .sp-smart-post-title:after,
1457	#${uniqueId} .sp-smart-post-slider-two .sp-smart-post-card .sp-smart-post-title:after,
1458	#${uniqueId} .sp-smart-post-thumbnail-slide .sp-smart-post-card .sp-smart-post-title:after,
1459	#${uniqueId} .sp-smart-post-thumbnail-slide-two .sp-smart-post-card .sp-smart-post-title:after,
1460	#${uniqueId}.sp-smart-post-grid-four .sp-smart-post-card .sp-smart-post-title:after,
1461	#${uniqueId}.sp-smart-post-grid-five .sp-smart-post-card .sp-smart-post-title:after,
1462	#${uniqueId}.sp-smart-post-grid-six .sp-smart-post-card .sp-smart-post-title:after,
1463	#${uniqueId}.sp-smart-post-grid-three .sp-smart-post-card .sp-smart-post-title:after,
1464	#${uniqueId}.sp-smart-post-timeline-two .sp-smart-post-card .sp-smart-post-title:after`,
1465
1466	styles: {
1467	...(titleEffect === "topBottomLine" &&
1468	(titleUnderlineEffect === "leftToRight" \|\|
1469	titleUnderlineEffect === "oppositeStart") && {
1470	left: 0,
1471	bottom: 0,
1472	height: "2px",
1473	}),
1474
1475	...(titleEffect === "topBottomLine" &&
1476	(titleUnderlineEffect === "rightToLeft" \|\|
1477	titleUnderlineEffect === "oppositeStartReversed") && {
1478	right: 0,
1479	bottom: 0,
1480	height: "2px",
1481	}),
1482
1483	...(titleEffect === "topBottomLine" &&
1484	titleUnderlineEffect === "startCentered" && {
1485	left: "50%",
1486	"-webkit-transform": "translateX(-50%)",
1487	transform: "translateX(-50%)",
1488	bottom: 0,
1489	height: "2px",
1490	}),
1491
1492	width: 0,
1493	"background-color": titleEffectColor,
1494	},
1495	},
1496
1497	{
1498	class: `#${uniqueId} .sp-smart-post-grid-two .sp-smart-post-card .sp-smart-post-title:before,
1499	#${uniqueId} .sp-smart-post-carousel-two .sp-smart-post-card .sp-smart-post-title:before,
1500	#${uniqueId} .sp-smart-post-slider .sp-smart-post-card .sp-smart-post-title:before,
1501	#${uniqueId} .sp-smart-post-slider-two .sp-smart-post-card .sp-smart-post-title:before,
1502	#${uniqueId} .sp-smart-post-thumbnail-slide .sp-smart-post-card .sp-smart-post-title:before,
1503	#${uniqueId} .sp-smart-post-thumbnail-slide-two .sp-smart-post-card .sp-smart-post-title:before,
1504	#${uniqueId}.sp-smart-post-grid-four .sp-smart-post-card .sp-smart-post-title:before,
1505	#${uniqueId}.sp-smart-post-grid-five .sp-smart-post-card .sp-smart-post-title:before,
1506	#${uniqueId}.sp-smart-post-grid-six .sp-smart-post-card .sp-smart-post-title:before,
1507	#${uniqueId}.sp-smart-post-grid-three .sp-smart-post-card .sp-smart-post-title:before,
1508	#${uniqueId}.sp-smart-post-timeline-two .sp-smart-post-card .sp-smart-post-title:before`,
1509	styles: {
1510	...(titleEffect === "topBottomLine" &&
1511	(titleUnderlineEffect === "leftToRight" \|\|
1512	titleUnderlineEffect === "oppositeStartReversed") && {
1513	left: 0,
1514	top: 0,
1515	height: "2px",
1516	}),
1517
1518	...(titleEffect === "topBottomLine" &&
1519	(titleUnderlineEffect === "rightToLeft" \|\|
1520	titleUnderlineEffect === "oppositeStart") && {
1521	right: 0,
1522	top: 0,
1523	height: "2px",
1524	}),
1525
1526	...(titleEffect === "topBottomLine" &&
1527	titleUnderlineEffect === "startCentered" && {
1528	left: "50%",
1529	"-webkit-transform": "translateX(-50%)",
1530	transform: "translateX(-50%)",
1531	top: 0,
1532
1533	height: "2px",
1534	}),
1535
1536	width: 0,
1537	"background-color": titleEffectColor,
1538	},
1539	},
1540
1541	{
1542	class: `#${uniqueId} .sp-smart-post-grid-two .sp-smart-post-card .sp-smart-post-title:hover:after, #${uniqueId} .sp-smart-post-grid-two .sp-smart-post-card .sp-smart-post-title:hover:before,
1543	#${uniqueId} .sp-smart-post-carousel-two .sp-smart-post-card .sp-smart-post-title:hover:after, #${uniqueId} .sp-smart-post-carousel-two .sp-smart-post-card .sp-smart-post-title:hover:before,
1544	#${uniqueId} .sp-smart-post-slider .sp-smart-post-card .sp-smart-post-title:hover:after, #${uniqueId} .sp-smart-post-slider .sp-smart-post-card .sp-smart-post-title:hover:before,
1545	#${uniqueId} .sp-smart-post-slider-two .sp-smart-post-card .sp-smart-post-title:hover:after, #${uniqueId} .sp-smart-post-slide-two .sp-smart-post-card .sp-smart-post-title:hover:before,
1546	#${uniqueId} .sp-smart-post-thumbnail-slide .sp-smart-post-card .sp-smart-post-title:hover:after, #${uniqueId} .sp-smart-post-thumbnail-slide .sp-smart-post-card .sp-smart-post-title:hover:before,
1547	#${uniqueId} .sp-smart-post-thumbnail-slide-two .sp-smart-post-card .sp-smart-post-title:hover:after, #${uniqueId} .sp-smart-post-thumbnail-slide-two .sp-smart-post-card .sp-smart-post-title:hover:before,
1548	#${uniqueId}.sp-smart-post-grid-four .sp-smart-post-card .sp-smart-post-title:hover:after, #${uniqueId}.sp-smart-post-grid-four .sp-smart-post-card .sp-smart-post-title:hover:before,
1549	#${uniqueId}.sp-smart-post-grid-three .sp-smart-post-card .sp-smart-post-title:hover:after, #${uniqueId}.sp-smart-post-grid-three .sp-smart-post-card .sp-smart-post-title:hover:before,
1550	#${uniqueId}.sp-smart-post-grid-five .sp-smart-post-card .sp-smart-post-title:hover:after, #${uniqueId}.sp-smart-post-grid-five .sp-smart-post-card .sp-smart-post-title:hover:before,
1551	#${uniqueId}.sp-smart-post-grid-six .sp-smart-post-card .sp-smart-post-title:hover:after, #${uniqueId}.sp-smart-post-grid-six .sp-smart-post-card .sp-smart-post-title:hover:before,
1552	#${uniqueId}.sp-smart-post-timeline-two .sp-smart-post-card .sp-smart-post-title:hover:after, #${uniqueId}.sp-smart-post-timeline-two .sp-smart-post-card .sp-smart-post-title:hover:before`,
1553	styles: {
1554	width: "100%",
1555	},
1556	},
1557
1558	{
1559	class: `#${uniqueId} .sp-smart-post-grid-two .sp-smart-post-card .sp-smart-post-title .line::after,
1560	#${uniqueId} .sp-smart-post-carousel-two .sp-smart-post-card .sp-smart-post-title .line::after,
1561	#${uniqueId} .sp-smart-post-slider .sp-smart-post-card .sp-smart-post-title .line::after,
1562	#${uniqueId} .sp-smart-post-slider-two .sp-smart-post-card .sp-smart-post-title .line::after,
1563	#${uniqueId} .sp-smart-post-thumbnail-slide .sp-smart-post-card .sp-smart-post-title .line::after,
1564	#${uniqueId} .sp-smart-post-thumbnail-slide-two .sp-smart-post-card .sp-smart-post-title .line::after,
1565	#${uniqueId}.sp-smart-post-grid-four .sp-smart-post-card .sp-smart-post-title .line::after,
1566	#${uniqueId}.sp-smart-post-grid-five .sp-smart-post-card .sp-smart-post-title .line::after,
1567	#${uniqueId}.sp-smart-post-grid-six .sp-smart-post-card .sp-smart-post-title .line::after,
1568	#${uniqueId}.sp-smart-post-grid-three .sp-smart-post-card .sp-smart-post-title .line::after,
1569	#${uniqueId}.sp-smart-post-timeline-two .sp-smart-post-card .sp-smart-post-title .line::after`,
1570	styles: {
1571	...(titleEffect !== "topBottomLine" && {
1572	height: titleEffect === "backgroundFill" ? "100%" : "2px",
1573	background: `linear-gradient(90deg, ${titleEffectColor})`,
1574	"transform-origin":
1575	titleEffect === "backgroundFill"
1576	? "left"
1577	: titleUnderlineEffect === "rightToLeft"
1578	? "right"
1579	: titleUnderlineEffect === "leftToRight"
1580	? "left"
1581	: "center",
1582	}),
1583	},
1584	},
1585	{
1586	class: `#${uniqueId} .sp-smart-post-grid-two .sp-smart-post-card .sp-smart-post-title,
1587	#${uniqueId} .sp-smart-post-carousel-two .sp-smart-post-card .sp-smart-post-title,
1588	#${uniqueId} .sp-smart-post-slider .sp-smart-post-card .sp-smart-post-title,
1589	#${uniqueId} .sp-smart-post-slider-two .sp-smart-post-card .sp-smart-post-title,
1590	#${uniqueId} .sp-smart-post-thumbnail-slide .sp-smart-post-card .sp-smart-post-title,
1591	#${uniqueId} .sp-smart-post-thumbnail-slide-two .sp-smart-post-card .sp-smart-post-title,
1592	#${uniqueId}.sp-smart-post-grid-four .sp-smart-post-card .sp-smart-post-title,
1593	#${uniqueId}.sp-smart-post-grid-five .sp-smart-post-card .sp-smart-post-title,
1594	#${uniqueId}.sp-smart-post-grid-three .sp-smart-post-card .sp-smart-post-title,
1595	#${uniqueId}.sp-smart-post-grid-six .sp-smart-post-card .sp-smart-post-title,
1596	#${uniqueId}.sp-smart-post-timeline-two .sp-smart-post-card .sp-smart-post-title`,
1597	styles: {
1598	...(titleEffect === "backgroundFill" && {
1599	"box-shadow": `inset 0 0 0 0 ${titleEffectColor}`,
1600	// padding: "2px .30rem",
1601	// margin: "0 -.30rem",
1602	transition: "color .8s ease-in-out, box-shadow .6s ease-in-out",
1603	}),
1604	},
1605	},
1606	]
1607	: [];
1608	//---------------------------------------------------------title effects---------------------------------------------------------//
1609
1610	const thumbnailPaginationPosition = {
1611	Desktop: "180px",
1612	Tablet: "130px",
1613	Mobile: "110px",
1614	};
1615
1616	const carouselNavigationCss = (deviceType) => {
1617	return carouselNavArrow
1618	? [
1619	{
1620	class: `#${uniqueId} .sp-smart-post-swiper-nav-arrow-btn i`,
1621	styles: {
1622	"box-shadow": boxCss(carouselBoxShadowEnable, [deviceType], carouselBoxShadow, "color"),
1623	},
1624	},
1625	]
1626	: [];
1627	};
1628
1629	const paginationDots = (deviceType) => {
1630	return carouselPaginationDot
1631	? [
1632	{
1633	class: `#${uniqueId} .sp-smart-post-pagination-${carouselPaginationStyle}`,
1634	styles: {
1635	"justify-content": `${
1636	carouselPaginationHorizontal.device?.[deviceType] !== "" ? "flex-start" : "center"
1637	}`,
1638	gap: `${
1639	carouselPaginationSpaceBetween.device?.[deviceType] +
1640	carouselPaginationSpaceBetween.unit?.[deviceType]
1641	}`,
1642	bottom: `${
1643	carouselPaginationVertical.device?.[deviceType]
1644	? carouselPaginationVertical.device?.[deviceType] +
1645	carouselPaginationVertical.unit?.[deviceType]
1646	: 180 === carouselPaginationVertical.device.Desktop
1647	? thumbnailPaginationPosition[deviceType]
1648	: carouselPaginationVertical.device.Desktop
1649	}`,
1650	left: `${
1651	carouselPaginationHorizontal.device?.[deviceType] === ""
1652	? "50%"
1653	: carouselPaginationHorizontal.device?.[deviceType] +
1654	carouselPaginationHorizontal.unit?.[deviceType]
1655	}`,
1656	transform: "translateX(-50%)",
1657	},
1658	},
1659	{
1660	class: `#${uniqueId} .sp-smart-post-pagination-${carouselPaginationStyle} .swiper-pagination-bullet`,
1661	styles: {
1662	width: `${
1663	carouselPaginationWidth.device?.[deviceType] +
1664	carouselPaginationWidth.unit?.[deviceType]
1665	}`,
1666	height:
1667	carouselPaginationHeight.device?.[deviceType] +
1668	carouselPaginationHeight.unit?.[deviceType],
1669	"font-size": `${
1670	carouselPaginationWidth.device?.[deviceType] < 10
1671	? "10px"
1672	: Math.floor(carouselPaginationWidth.device?.[deviceType] / 1.5) +
1673	carouselPaginationWidth.unit?.[deviceType]
1674	}`,
1675	"border-width": spacingGenerate(carouselPaginationBorderWidth, deviceType),
1676	},
1677	},
1678	{
1679	class: `#${uniqueId} .sp-smart-post-pagination-${carouselPaginationStyle} .swiper-pagination-bullet.swiper-pagination-bullet-active`,
1680	styles: {
1681	width: `${
1682	carouselPaginationWidth.device?.[deviceType] +
1683	carouselPaginationWidth.unit?.[deviceType]
1684	}`,
1685	"border-width": spacingGenerate(carouselPaginationBorderWidthHover, deviceType),
1686	},
1687	},
1688	{
1689	class: `#${uniqueId} .sp-smart-post-pagination-strokes`,
1690	styles: {
1691	left: `${
1692	"" === carouselPaginationStyle
1693	? "50%"
1694	: carouselPaginationHorizontal.device?.[deviceType] +
1695	carouselPaginationHorizontal.unit?.[deviceType]
1696	}`,
1697	},
1698	},
1699	{
1700	class: `#${uniqueId} .sp-smart-post-pagination-strokes:not(.sp-pagination-vertical)`,
1701	styles: {
1702	transform: `translateX(-${
1703	"" === carouselPaginationStyle
1704	? "50%"
1705	: carouselPaginationHorizontal.device?.[deviceType] +
1706	carouselPaginationHorizontal.unit?.[deviceType]
1707	})`,
1708	},
1709	},
1710	{
1711	class: `#${uniqueId} .sp-smart-post-pagination-strokes:not(.sp-pagination-vertical) .swiper-pagination-bullet-active`,
1712	styles: {
1713	width: `${
1714	carouselPaginationWidth.device?.[deviceType] * 2 +
1715	carouselPaginationWidth.unit?.[deviceType]
1716	} !important`,
1717	},
1718	},
1719	{
1720	class: `#${uniqueId} .sp-smart-post-pagination-strokes.sp-pagination-vertical .swiper-pagination-bullet-active`,
1721	styles: {
1722	height: `${
1723	carouselPaginationHeight.device?.[deviceType] * 2 +
1724	carouselPaginationHeight.unit?.[deviceType]
1725	} !important`,
1726	},
1727	},
1728	{
1729	class: `#${uniqueId} .sp-smart-post-pagination-fraction `,
1730	styles: {
1731	width: `${
1732	carouselPaginationWidth.device?.[deviceType] +
1733	carouselPaginationWidth.unit?.[deviceType]
1734	} !important`,
1735	height: `${
1736	carouselPaginationWidth.device?.[deviceType] +
1737	carouselPaginationWidth.unit?.[deviceType]
1738	}`,
1739	"font-size": `${
1740	Math.ceil(carouselPaginationWidth.device?.[deviceType] / 2.5) +
1741	carouselPaginationWidth.unit?.[deviceType]
1742	}`,
1743	"border-width": spacingGenerate(carouselPaginationBorderWidth, deviceType),
1744	left: `${
1745	carouselPaginationHorizontal.device?.[deviceType] +
1746	carouselPaginationHorizontal.unit?.[deviceType]
1747	}`,
1748	bottom: `${
1749	"" === carouselPaginationVertical.device?.[deviceType]
1750	? ""
1751	: carouselPaginationVertical.device?.[deviceType] +
1752	carouselPaginationVertical.unit?.[deviceType]
1753	}`,
1754	transform: `translate(-${
1755	"" === carouselPaginationHorizontal.device?.[deviceType]
1756	? "50%"
1757	: carouselPaginationHorizontal.device?.[deviceType] +
1758	carouselPaginationHorizontal.unit?.[deviceType]
1759	}, -${
1760	"" === carouselPaginationVertical.device?.[deviceType]
1761	? "94%"
1762	: carouselPaginationVertical.device?.[deviceType] +
1763	carouselPaginationVertical.unit?.[deviceType]
1764	})`,
1765	gap: "0px",
1766	},
1767	},
1768	{
1769	class: `#${uniqueId} .sp-smart-post-pagination-fraction:hover`,
1770	styles: {
1771	"border-width": spacingGenerate(carouselPaginationBorderWidthHover, deviceType),
1772	},
1773	},
1774	{
1775	class: `#${uniqueId} .sp-smart-post-pagination-numbers`,
1776	styles: {
1777	bottom: `${
1778	"" === carouselPaginationVertical.device?.[deviceType]
1779	? ""
1780	: carouselPaginationVertical.device?.[deviceType] +
1781	carouselPaginationVertical.unit?.[deviceType]
1782	}`,
1783	},
1784	},
1785	{
1786	class: `#${uniqueId} .sp-smart-post-pagination-numbers .swiper-pagination-bullet`,
1787	styles: {
1788	width: `${
1789	carouselPaginationWidth.device?.[deviceType] +
1790	carouselPaginationWidth.unit?.[deviceType]
1791	} !important`,
1792	},
1793	},
1794	{
1795	class: `#${uniqueId} .swiper-scrollbar:not(.swiper-scrollbar-vertical)`,
1796	styles: {
1797	height: `${
1798	carouselPaginationHeight.device?.[deviceType] +
1799	carouselPaginationHeight.unit?.[deviceType]
1800	}`,
1801	bottom: `${
1802	carouselPaginationVertical.device?.[deviceType] > -1
1803	? carouselPaginationVertical.device?.[deviceType] +
1804	carouselPaginationVertical.unit?.[deviceType]
1805	: "0px"
1806	}`,
1807	},
1808	},
1809	]
1810	: [];
1811	};
1812
1813	let allResponsiveCss = ["single-popup", "multi-popup"].includes(generalLinkOpen)
1814	? [
1815	//Post modal content styles
1816	{
1817	class: `#${uniqueId} .sp-smart-post-modal-portal .sp-smart-post-modal-content img`,
1818	styles: {
1819	width: `${
1820	popupImageSize === "custom"
1821	? popupImageWidth.device?.[deviceType] + popupImageWidth.unit?.[deviceType]
1822	: "auto"
1823	}`,
1824	height: `${
1825	popupImageSize === "custom"
1826	? popupImageHeight.device?.[deviceType] + popupImageHeight.unit?.[deviceType]
1827	: "auto"
1828	}`,
1829	"object-fit": "cover",
1830	},
1831	},
1832	]
1833	: [];
1834	if (imageFeaturedImg && blockName !== "post-grid-one") {
1835	allResponsiveCss = [
1836	...allResponsiveCss,
1837	{
1838	class: `#${uniqueId} .sp-smart-post-card.template-one .sp-smart-post-card-image`,
1839	styles: {
1840	width: `${
1841	imageSize === "custom" && imageWidth.device?.[deviceType]
1842	? imageWidth.device?.[deviceType] + imageWidth.unit?.[deviceType]
1843	: blockName === "post-grid-six"
1844	? "50%"
1845	: ""
1846	}`,
1847	},
1848	},
1849	];
1850	}
1851	if (blockName && !["post-grid-one", "post-grid-six"].includes(blockName)) {
1852	allResponsiveCss = [...allResponsiveCss];
1853	}
1854	if (
1855	blockName &&
1856	![
1857	"post-carousel",
1858	"post-slider",
1859	"post-slider-two",
1860	"post-thumbnail-slider",
1861	"thumbnail-slider-two",
1862	"post-timeline-three",
1863	].includes(blockName)
1864	) {
1865	allResponsiveCss = [
1866	...allResponsiveCss,
1867	{
1868	class: `#${uniqueId}:not(.post-timeline-one, .sp-smart-post-timeline-one)`,
1869	styles: (function () {
1870	const calculatePadding = () => {
1871	if (!postCardBoxShadowEnable \|\| !postCardBoxShadow.device?.[deviceType]) {
1872	return "";
1873	}
1874	return maxValueFromObject(postCardBoxShadow.device?.[deviceType]) + "px";
1875	};
1876	const paddingLeft = calculatePadding();
1877	const paddingRight = calculatePadding();
1878	const style = {};
1879	if (paddingLeft) {
1880	style["padding-left"] = paddingLeft + " !important";
1881	}
1882	if (paddingRight) {
1883	style["padding-right"] = paddingRight + " !important";
1884	}
1885
1886	return style;
1887	})(),
1888	},
1889	];
1890	}
1891
1892	if (
1893	blockName &&
1894	[
1895	"post-carousel",
1896	"post-slider",
1897	"post-slider-two",
1898	"post-thumbnail-slider",
1899	"thumbnail-slider-two",
1900	"post-timeline-three",
1901	].includes(blockName)
1902	) {
1903	allResponsiveCss = [
1904	...allResponsiveCss,
1905	...carouselNavigationCss(deviceType),
1906	...paginationDots(deviceType),
1907
1908	{
1909	class: `#${uniqueId} .sp-smart-post-carousel .swiper, #${uniqueId} .sp-smart-post-slider .swiper, #${uniqueId} .sp-smart-post-timeline-three-container .swiper`,
1910	styles: {
1911	"border-top-left-radius":
1912	advancedBorderRadius.device?.[deviceType].top + advancedBorderRadius.unit?.[deviceType],
1913	"border-top-right-radius":
1914	advancedBorderRadius.device?.[deviceType].right + advancedBorderRadius.unit?.[deviceType],
1915	transition: "all 0.3s ease-in-out",
1916	},
1917	},
1918	{
1919	class: `#${uniqueId}:hover .sp-smart-post-carousel .swiper, #${uniqueId}:hover .sp-smart-post-slider .swiper, #${uniqueId}:hover .sp-smart-post-timeline-three-container .swiper`,
1920	styles: {
1921	"border-top-left-radius":
1922	advancedBorderRadiusHover.device?.[deviceType].top +
1923	advancedBorderRadiusHover.unit?.[deviceType],
1924	"border-top-right-radius":
1925	advancedBorderRadiusHover.device?.[deviceType].right +
1926	advancedBorderRadiusHover.unit?.[deviceType],
1927	},
1928	},
1929	{
1930	class: `#${uniqueId} .sp-smart-post-thumbnail-slide .swiper, #${uniqueId} .sp-smart-post-timeline-three-container`,
1931	styles: {
1932	"border-top-left-radius":
1933	advancedBorderRadius.device?.[deviceType].top + advancedBorderRadius.unit?.[deviceType],
1934	"border-top-right-radius":
1935	advancedBorderRadius.device?.[deviceType].right + advancedBorderRadius.unit?.[deviceType],
1936	},
1937	},
1938	//............................carousel-two
1939
1940	{
1941	class: `#${uniqueId} .sp-smart-post-carousel-two .swiper, #${uniqueId} .sp-smart-post-slider .swiper, #${uniqueId} .sp-smart-post-timeline-three-container .swiper`,
1942	styles: {
1943	"border-top-left-radius":
1944	advancedBorderRadius.device?.[deviceType].top + advancedBorderRadius.unit?.[deviceType],
1945	"border-top-right-radius":
1946	advancedBorderRadius.device?.[deviceType].right + advancedBorderRadius.unit?.[deviceType],
1947	transition: "all 0.3s ease-in-out",
1948	},
1949	},
1950	{
1951	class: `#${uniqueId}:hover .sp-smart-post-carousel-two .swiper, #${uniqueId}:hover .sp-smart-post-slider .swiper, #${uniqueId}:hover .sp-smart-post-timeline-three-container .swiper`,
1952	styles: {
1953	"border-top-left-radius":
1954	advancedBorderRadiusHover.device?.[deviceType].top +
1955	advancedBorderRadiusHover.unit?.[deviceType],
1956	"border-top-right-radius":
1957	advancedBorderRadiusHover.device?.[deviceType].right +
1958	advancedBorderRadiusHover.unit?.[deviceType],
1959	},
1960	},
1961
1962	//............................carousel-two
1963
1964	{
1965	class: `#${uniqueId} .sp-smart-post-thumbnail-thumb .swiper`,
1966	styles: {
1967	"border-bottom-left-radius":
1968	advancedBorderRadius.device?.[deviceType].bottom + advancedBorderRadius.unit?.[deviceType],
1969	"border-bottom-right-radius":
1970	advancedBorderRadius.device?.[deviceType].left + advancedBorderRadius.unit?.[deviceType],
1971	},
1972	},
1973	{
1974	class: `#${uniqueId} div:not(.sp-smart-post-slider) .swiper`,
1975	styles: {
1976	padding: `${
1977	(postCardBoxShadowEnable
1978	? "0 " +
1979	maxValueFromObject(postCardBoxShadow.device?.[deviceType]) +
1980	"px " +
1981	maxValueFromObject(postCardBoxShadow.device?.[deviceType]) +
1982	"px"
1983	: "") \|\|
1984	(postCardHoverBoxShadowEnable
1985	? "0 " +
1986	maxValueFromObject(postCardHoverBoxShadow.device?.[deviceType]) +
1987	"px " +
1988	maxValueFromObject(postCardHoverBoxShadow.device?.[deviceType]) +
1989	"px"
1990	: "")
1991	}`,
1992	},
1993	},
1994	{
1995	class: `#${uniqueId} .sp-smart-post-slider .swiper .sp-smart-post-template-one-content`,
1996	styles: {
1997	margin: `${
1998	contentAreaEnableBoxShadow
1999	? maxValueFromObject(contentAreaBoxShadow.device?.[deviceType]) + "px"
2000	: ""
2001	}`,
2002	},
2003	},
2004	];
2005	}
2006
2007	// Image gallery navigation icon size.
2008	const imageGalleryNavIconSize = showImageGallery
2009	? [
2010	{
2011	class: `#${uniqueId} .sp-slider-wrapper svg`,
2012	styles: {
2013	height: rangerCss(imageGalleryNavArrowSize, deviceType),
2014	width: rangerCss(imageGalleryNavArrowSize, deviceType),
2015	},
2016	},
2017	]
2018	: [];
2019
2020	allResponsiveCss = [...allResponsiveCss, ...imageGalleryNavIconSize, ...titleEffects];
2021
2022	return allResponsiveCss;
2023	};
2024
2025	const responsive = (deviceType) => {
2026	return {
2027	// Title responsive css.
2028	...titleResponsiveCss(deviceType),
2029
2030	// Excerpt responsive css.
2031	...excerptResponsiveCss(deviceType),
2032
2033	// Meta data responsive css.
2034	...metaResponsiveCss(deviceType),
2035
2036	// Taxonomy responsive Css
2037	...taxonomyResponsiveCss(deviceType),
2038
2039	// Image responsive css.
2040	...featureImageResponsiveCss(deviceType),
2041
2042	// Content area responsive css.
2043	...contentAreaResponsiveCss(deviceType),
2044
2045	// Container area responsive css.
2046	...containerResponsiveCss(deviceType),
2047
2048	// Navigation responsive css.
2049	...carouselNavBtnResponsiveCss(deviceType),
2050
2051	// Pagination responsive css.
2052	...paginationDotsResponsiveCss(deviceType),
2053
2054	// Read more button responsive css.
2055	...readMoreButtonResponsiveCss(deviceType),
2056
2057	// Social share responsive css.
2058	...socialShareResponsiveCss(deviceType),
2059
2060	// Load more button responsive css.
2061	...loadMoreButtonResponsiveCss(deviceType),
2062
2063	// Popup responsive css.
2064	...responsivePopupCss(deviceType),
2065	};
2066	};
2067
2068	const dynamicCss = () => {
2069	return [
2070	...titleCss(),
2071	// ...badgesCss(),
2072	...excerptCss(),
2073	...metaCss(),
2074	...taxonomyCss(),
2075	...featureImageCss(),
2076	...contentAreaCss(),
2077	...containerCss(),
2078	...carouselNavBtnCss(),
2079	...paginationDotsCss(),
2080	...readMoreButtonCss(),
2081	...socialShareCss(),
2082	...loadMoreButtonCss(),
2083	...popupCss(),
2084	];
2085	};
2086
2087	const customOverlayCss =
2088	"custom" === imageOverlayColor
2089	? [
2090	{
2091	class: `#${uniqueId} .sp-smart-post-card.template-one .sp-smart-post-template-one-content.overlay-custom`,
2092	styles: {
2093	background: colorControls(
2094	imageOverlayCustomColor.color.style,
2095	imageOverlayCustomColor.color.solidColor,
2096	imageOverlayCustomColor.color.gradient
2097	),
2098	transition: "background 0.3s ease-in-out",
2099	},
2100	},
2101	{
2102	class: `#${uniqueId} .sp-smart-post-card.template-one .sp-smart-post-template-one-content.overlay-custom:hover`,
2103	styles: {
2104	background: colorControls(
2105	imageOverlayCustomColor.hover.style,
2106	imageOverlayCustomColor.hover.solidColor,
2107	imageOverlayCustomColor.hover.gradient
2108	),
2109	},
2110	},
2111	{
2112	class: `#${uniqueId} .sp-smart-post-card.template-one .sp-smart-post-card-image .image-overlay.overlay-custom`,
2113	styles: {
2114	background: colorControls(
2115	imageOverlayCustomColor.color.style,
2116	imageOverlayCustomColor.color.solidColor,
2117	imageOverlayCustomColor.color.gradient
2118	),
2119	transition: "all 0.3s ease-in-out",
2120	},
2121	},
2122	{
2123	class: `#${uniqueId} .sp-smart-post-card.template-one .sp-smart-post-card-image:hover .image-overlay.overlay-custom`,
2124	styles: {
2125	background: colorControls(
2126	imageOverlayCustomColor.hover.style,
2127	imageOverlayCustomColor.hover.solidColor,
2128	imageOverlayCustomColor.hover.gradient
2129	),
2130	},
2131	},
2132	{
2133	class: `#${uniqueId} .sp-smart-post-card .image-overlay.overlay-custom`,
2134	styles: {
2135	background: colorControls(
2136	imageOverlayCustomColor.color.style,
2137	imageOverlayCustomColor.color.solidColor,
2138	imageOverlayCustomColor.color.gradient
2139	),
2140	transition: "all 0.3s ease-in-out",
2141	},
2142	},
2143	{
2144	class: `#${uniqueId} .sp-smart-post-card:hover .image-overlay.overlay-custom`,
2145	styles: {
2146	background: colorControls(
2147	imageOverlayCustomColor.hover.style,
2148	imageOverlayCustomColor.hover.solidColor,
2149	imageOverlayCustomColor.hover.gradient
2150	),
2151	},
2152	},
2153	]
2154	: [];
2155
2156	const imageGalleryNavStyles = showImageGallery
2157	? [
2158	{
2159	class: `#${uniqueId} .sp-smart-image-gallery-nav-arrow .sp-prev, #${uniqueId} .sp-smart-image-gallery-nav-arrow .sp-next`,
2160	styles: {
2161	color: imageGalleryNavArrowColor.color,
2162	background: imageGalleryNavArrowBgColor.color,
2163	},
2164	},
2165	{
2166	class: `#${uniqueId} .sp-smart-image-gallery-nav-arrow .sp-prev:hover, #${uniqueId} .sp-smart-image-gallery-nav-arrow .sp-next:hover`,
2167	styles: {
2168	color: imageGalleryNavArrowColor.hoverColor,
2169	background: imageGalleryNavArrowBgColor.hoverColor,
2170	},
2171	},
2172	]
2173	: [];
2174
2175	let sharedDesktopCss = [
2176	...responsiveCss("Desktop"),
2177	...dynamicCss()?.map((css) => ({
2178	...css,
2179	styles: { ...css.styles, ...responsive("Desktop")[css.class] },
2180	})),
2181
2182	...imageGalleryNavStyles,
2183	...customOverlayCss,
2184	{
2185	class: `#${uniqueId}`,
2186	styles: {
2187	background: colorControls(
2188	advancedBg.color.style,
2189	advancedBg.color.solidColor,
2190	advancedBg.color.gradient
2191	),
2192	transition: "all 0.3s ease-in-out",
2193	},
2194	},
2195	{
2196	class: `#${uniqueId}:hover`,
2197	styles: {
2198	background: colorControls(
2199	advancedBg.hover.style,
2200	advancedBg.hover.solidColor,
2201	advancedBg.hover.gradient
2202	),
2203	},
2204	},
2205	{
2206	class: `#${uniqueId} .sp-smart-post-show-equal-height .sp-smart-post-template-one-content, #${uniqueId} .sp-smart-post-show-equal-height .sp-smart-post-card-content, #${uniqueId} .sp-smart-post-show-equal-height .sp-smart-post-card`,
2207	styles: {
2208	height: `${imagePosition === "top" ? "50%" : "100%"}`,
2209	},
2210	},
2211	];
2212
2213	// Timeline connector css
2214	if (blockName && ["post-timeline-one", "post-timeline-two", "post-timeline-three"].includes(blockName)) {
2215	sharedDesktopCss = [
2216	...sharedDesktopCss,
2217	{
2218	class: `#${uniqueId} .post-timeline-one .sp-smart-post-timeline-container::before, #${uniqueId} .post-timeline-two .sp-smart-post-timeline-container::before`,
2219	styles: {
2220	"background-color": `${timelineConnectorColor.color}`,
2221	},
2222	},
2223	{
2224	class: `#${uniqueId} .post-timeline-one .sp-smart-post-timeline-container::after, #${uniqueId} .post-timeline-two .sp-smart-post-timeline-container::after, #${uniqueId} .post-timeline-three .sp-smart-post-timeline-three-container .sp-smart-post-timeline-border`,
2225	styles: {
2226	"background-color": `${timelineConnectorColor.active}`,
2227	},
2228	},
2229	// Timeline bubble speech ( indicator )
2230	{
2231	class: `
2232	#${uniqueId} .post-timeline-one .sp-smart-post-timeline-container .sp-smart-post-timeline-one-post-container:nth-of-type(odd) .sp-smart-indicator-arrow,
2233	#${uniqueId} .post-timeline-two .sp-smart-post-timeline-container .sp-smart-post-timeline-one-post-container:nth-of-type(odd) .sp-smart-indicator-arrow
2234	`,
2235	styles: {
2236	border: `medium solid ${timelineIndicatorColor.color}`,
2237	"border-color": `${
2238	timelineLayout !== "timeline-one-layout-six"
2239	? "transparent transparent transparent " + timelineIndicatorColor.color
2240	: "transparent " + timelineIndicatorColor.color + " transparent transparent"
2241	}`,
2242	"border-width": `${
2243	timelineLayout !== "timeline-one-layout-six" ? "15px 0 15px 15px" : "15px 15px 15px 0"
2244	}`,
2245	},
2246	},
2247	{
2248	class: `#${uniqueId} .post-timeline-one .sp-smart-post-timeline-container .sp-smart-post-timeline-one-post-container:nth-of-type(even) .sp-smart-indicator-arrow,
2249	#${uniqueId} .post-timeline-two .sp-smart-post-timeline-container .sp-smart-post-timeline-one-post-container:nth-of-type(even) .sp-smart-indicator-arrow`,
2250	styles: {
2251	border: `medium solid ${timelineIndicatorColor.color}`,
2252	"border-color": `${
2253	timelineLayout !== "timeline-one-layout-five"
2254	? "transparent " + timelineIndicatorColor.color + " transparent transparent"
2255	: "transparent transparent transparent " + timelineIndicatorColor.color
2256	} `,
2257	"border-width": `${
2258	timelineLayout !== "timeline-one-layout-five" ? "15px 15px 15px 0" : "15px 0 15px 15px"
2259	}`,
2260	},
2261	},
2262	// Timeline connector circle
2263	{
2264	class: `
2265	#${uniqueId} .post-timeline-one .sp-smart-post-timeline-container .sp-smart-post-timeline-one-post-container .sp-smart-indicator-circle,
2266	#${uniqueId} .post-timeline-two .sp-smart-post-timeline-container .sp-smart-post-timeline-one-post-container .sp-smart-indicator-circle`,
2267	styles: {
2268	"background-color": `${timelineCircleBgColor.color}`,
2269	"border-width": spacingGenerate(timelineConnectorBorderWidth, "Desktop"),
2270	"border-style": `${timelineConnectorBorder.style}`,
2271	"border-color": `${timelineConnectorBorder.color}`,
2272	"border-radius": spacingGenerate(timelineConnectorBorderRadius, "Desktop"),
2273	},
2274	},
2275	{
2276	class: `#${uniqueId} .post-timeline-three .sp-smart-post-timeline-three-container.timeline-three-layout-one .sp-smart-post-timeline-three-post-container::before`,
2277	styles: {
2278	border: `medium solid ${timelineIndicatorColor.color}`,
2279	"border-color": `transparent transparent ${timelineIndicatorColor.color} transparent`,
2280	"border-width": "0 15px 15px 15px",
2281	},
2282	},
2283	{
2284	class: `#${uniqueId} .post-timeline-three .sp-smart-post-timeline-three-container.timeline-three-layout-two .sp-smart-post-timeline-three-post-container:nth-of-type(odd)::before`,
2285	styles: {
2286	border: `medium solid ${timelineIndicatorColor.color}`,
2287	"border-color": `transparent transparent ${timelineIndicatorColor.color} transparent`,
2288	"border-width": "0 15px 15px 15px",
2289	},
2290	},
2291	{
2292	class: `#${uniqueId} .post-timeline-three.timeline-three-layout-two .sp-smart-post-timeline-three-post-container:nth-of-type(even)::before`,
2293	styles: {
2294	border: `medium solid ${timelineIndicatorColor.color}`,
2295	"border-color": `transparent transparent ${timelineIndicatorColor.color} transparent`,
2296	"border-width": "0 15px 15px 15px",
2297	},
2298	},
2299	{
2300	class: `#${uniqueId} .post-timeline-three .sp-smart-post-timeline-three-container .sp-smart-post-timeline-three-post-container::after `,
2301	styles: {
2302	"background-color": `${timelineCircleBgColor.color}`,
2303	"border-width": spacingGenerate(timelineConnectorBorderWidth, "Desktop"),
2304	"border-style": `${timelineConnectorBorder.style}`,
2305	"border-color": `${timelineConnectorBorder.color}`,
2306	"border-radius": spacingGenerate(timelineConnectorBorderRadius, "Desktop"),
2307	},
2308	},
2309	{
2310	class: `#${uniqueId}.sp-smart-post-timeline-one`,
2311	styles: {
2312	"padding-left": `0`,
2313	"padding-right": `0`,
2314	},
2315	},
2316	];
2317	}
2318
2319	let sharedTabletCss = [
2320	...responsiveCss("Tablet"),
2321	...dynamicCss()?.map((css) => ({
2322	...css,
2323	styles: { ...responsive("Tablet")[css.class] },
2324	})),
2325	];
2326
2327	let sharedMobileCss = [
2328	...responsiveCss("Mobile"),
2329	...dynamicCss()?.map((css) => ({
2330	...css,
2331	styles: { ...responsive("Mobile")[css.class] },
2332	})),
2333	];
2334
2335	if (blockName && ["post-timeline-one", "post-timeline-two", "post-timeline-three"].includes(blockName)) {
2336	sharedMobileCss = [
2337	...sharedMobileCss,
2338	// Timeline bubble speech ( indicator )
2339	{
2340	class: `#${uniqueId} .post-timeline-one .sp-smart-post-timeline-container .sp-smart-post-timeline-one-post-container:nth-of-type(even)::before, #${uniqueId} .post-timeline-two .sp-smart-post-timeline-container .sp-smart-post-timeline-one-post-container:nth-of-type(even)::before`,
2341	styles: {
2342	border: `medium solid ${timelineIndicatorColor.color}`,
2343	"border-color": `${
2344	timelineLayout !== "timeline-one-layout-six"
2345	? "transparent transparent transparent " + timelineIndicatorColor.color
2346	: "transparent " + timelineIndicatorColor.color + " transparent transparent"
2347	}`,
2348	"border-width": `${
2349	timelineLayout !== "timeline-one-layout-six" ? "15px 0 15px 15px" : "15px 15px 15px 0"
2350	}`,
2351	},
2352	},
2353	];
2354	}
2355
2356	// Show/hide on device sizes
2357	sharedDesktopCss = showHide(sharedDesktopCss, uniqueId, hideOnDesktop, "");
2358	// sharedTabletCss = showHide(sharedTabletCss, uniqueId, hideOnTablet, "flex");
2359	// sharedMobileCss = showHide(sharedMobileCss, uniqueId, hideOnMobile, "flex");
2360
2361	const deviceCss = {
2362	sharedDesktopCss,
2363	sharedTabletCss,
2364	sharedMobileCss,
2365	};
2366
2367	return deviceCss;
2368	};
2369
2370	export default sharedDynamicCss;
2371