import {
    WRAPPER_BG,
    WRAPPER_MARGIN,
    WRAPPER_PADDING,
    WRAPPER_BORDER_SHADOW,
    TITLE_MARGIN,
    SUBTITLE_MARGIN,
    BUTTON_MARGIN,
    BUTTON_PADDING,
    BUTTON_BORDER_SHADOW,
    BUTTON2_MARGIN,
    BUTTON2_PADDING,
    BUTTON2_BORDER_SHADOW,
    SLIDE_TO_SHOW,
    CUSTOM_HEIGHT,
    DOTS_GAP,
    ARROW_POSITION,
    DOTS_POSITION,
    ARROW_SIZE,
    DOTS_SIZE,
    SLIDES_GAP,
    SLIDER_BORDER_SHADOW,
} from "./constants/constants";
import {
    TITLE_TYPOGRAPHY,
    SUBTITLE_TYPOGRAPHY,
    BUTTON_TYPOGRAPHY,
    BUTTON2_TYPOGRAPHY,
} from "./constants/typography-constant";

import {
    softMinifyCssStrings,
    generateTypographyStyles,
    generateDimensionsControlStyles,
    generateBorderShadowStyles,
    generateResponsiveRangeStyles,
    generateBackgroundControlStyles,
    generateMaskStyles,
    StyleComponent
} from "@essential-blocks/controls";

export default function Style(props) {
    const { attributes, setAttributes, name } = props;
    const {
        resOption,
        blockId,
        blockMeta,
        sliderType,
        sliderContentType,
        isCustomHeight,
        speed,
        initialSlide,
        titleColor,
        subtitleColor,
        buttonColor,
        buttonHoverColor,
        buttonBGColor,
        buttonHoverBGColor,
        secondButtonColor,
        secondButtonHoverColor,
        secondButtonBGColor,
        secondButtonHoverBGColor,
        overlayColor,
        arrowColor,
        arrowHoverColor,
        dotsColor,
        dotsActiveColor,
        textAlign,
        verticalAlign,
        classHook,
        isRTLEnable,
        slidesGapRange,

    } = attributes;

    // Title Typography
    const {
        typoStylesDesktop: titleTypographyDesktop,
        typoStylesTab: titleTypographyTab,
        typoStylesMobile: titleTypographyMobile,
    } = generateTypographyStyles({
        attributes,
        prefixConstant: TITLE_TYPOGRAPHY,
    });

    // Sub Title Typography
    const {
        typoStylesDesktop: subtitleTypographyDesktop,
        typoStylesTab: subtitleTypographyTab,
        typoStylesMobile: subtitleTypographyMobile,
    } = generateTypographyStyles({
        attributes,
        prefixConstant: SUBTITLE_TYPOGRAPHY,
    });

    // Button Typography
    const {
        typoStylesDesktop: buttonTypographyDesktop,
        typoStylesTab: buttonTypographyTab,
        typoStylesMobile: buttonTypographyMobile,
    } = generateTypographyStyles({
        attributes,
        prefixConstant: BUTTON_TYPOGRAPHY,
    });
    const {
        typoStylesDesktop: button2TypographyDesktop,
        typoStylesTab: button2TypographyTab,
        typoStylesMobile: button2TypographyMobile,
    } = generateTypographyStyles({
        attributes,
        prefixConstant: BUTTON2_TYPOGRAPHY,
    });

    /* Wrapper Margin */
    const {
        dimensionStylesDesktop: wrapperMarginDesktop,
        dimensionStylesTab: wrapperMarginTab,
        dimensionStylesMobile: wrapperMarginMobile,
    } = generateDimensionsControlStyles({
        controlName: WRAPPER_MARGIN,
        styleFor: "margin",
        attributes,
    });

    /* Wrapper Padding */
    const {
        dimensionStylesDesktop: wrapperPaddingDesktop,
        dimensionStylesTab: wrapperPaddingTab,
        dimensionStylesMobile: wrapperPaddingMobile,
    } = generateDimensionsControlStyles({
        controlName: WRAPPER_PADDING,
        styleFor: "padding",
        attributes,
    });

    /* Title Margin */
    const {
        dimensionStylesDesktop: titleMarginDesktop,
        dimensionStylesTab: titleMarginTab,
        dimensionStylesMobile: titleMarginMobile,
    } = generateDimensionsControlStyles({
        controlName: TITLE_MARGIN,
        styleFor: "margin",
        attributes,
    });

    /* Subtitle Margin */
    const {
        dimensionStylesDesktop: subtitleMarginDesktop,
        dimensionStylesTab: subtitleMarginTab,
        dimensionStylesMobile: subtitleMarginMobile,
    } = generateDimensionsControlStyles({
        controlName: SUBTITLE_MARGIN,
        styleFor: "margin",
        attributes,
    });

    /* Button Margin */
    const {
        dimensionStylesDesktop: buttonMarginDesktop,
        dimensionStylesTab: buttonMarginTab,
        dimensionStylesMobile: buttonMarginMobile,
    } = generateDimensionsControlStyles({
        controlName: BUTTON_MARGIN,
        styleFor: "margin",
        attributes,
    });

    /* Button Padding */
    const {
        dimensionStylesDesktop: buttonPaddingDesktop,
        dimensionStylesTab: buttonPaddingTab,
        dimensionStylesMobile: buttonPaddingMobile,
    } = generateDimensionsControlStyles({
        controlName: BUTTON_PADDING,
        styleFor: "padding",
        attributes,
    });
    const {
        dimensionStylesDesktop: button2MarginDesktop,
        dimensionStylesTab: button2MarginTab,
        dimensionStylesMobile: button2MarginMobile,
    } = generateDimensionsControlStyles({
        controlName: BUTTON2_MARGIN,
        styleFor: "margin",
        attributes,
    });

    /* Button Padding */
    const {
        dimensionStylesDesktop: button2PaddingDesktop,
        dimensionStylesTab: button2PaddingTab,
        dimensionStylesMobile: button2PaddingMobile,
    } = generateDimensionsControlStyles({
        controlName: BUTTON2_PADDING,
        styleFor: "padding",
        attributes,
    });

    // range controller Slider Height
    const {
        rangeStylesDesktop: sliderHeightDesktop,
        rangeStylesTab: sliderHeightTab,
        rangeStylesMobile: sliderHeightMobile,
    } = generateResponsiveRangeStyles({
        controlName: CUSTOM_HEIGHT,
        property: "height",
        attributes,
    });

    // range controller Slider Height
    const {
        rangeStylesDesktop: sliderMinHeightDesktop,
        rangeStylesTab: sliderMinHeightTab,
        rangeStylesMobile: sliderMinHeightMobile,
    } = generateResponsiveRangeStyles({
        controlName: CUSTOM_HEIGHT,
        property: "min-height",
        attributes,
    });

    // range controller Slides to Show
    const {
        rangeStylesDesktop: slideToShowDesktop,
        rangeStylesTab: slideToShowTab,
        rangeStylesMobile: slideToShowMobile,
    } = generateResponsiveRangeStyles({
        controlName: SLIDE_TO_SHOW,
        property: "",
        attributes,
    });

    // range controller Slider Dots Gap
    const {
        rangeStylesDesktop: dotsGapDesktop,
        rangeStylesTab: dotsGapTab,
        rangeStylesMobile: dotsGapMobile,
    } = generateResponsiveRangeStyles({
        controlName: DOTS_GAP,
        property: "margin-right",
        attributes,
    });

    // range controller Slider Left Arrow Position
    const {
        rangeStylesDesktop: leftArrowPositionDesktop,
        rangeStylesTab: leftArrowPositionTab,
        rangeStylesMobile: leftArrowPositionMobile,
    } = generateResponsiveRangeStyles({
        controlName: ARROW_POSITION,
        property: "left",
        attributes,
    });

    // range controller Slider Left Arrow Position
    const {
        rangeStylesDesktop: rightArrowPositionDesktop,
        rangeStylesTab: rightArrowPositionTab,
        rangeStylesMobile: rightArrowPositionMobile,
    } = generateResponsiveRangeStyles({
        controlName: ARROW_POSITION,
        property: "right",
        attributes,
    });

    // range controller Slider Arrow Size
    const {
        rangeStylesDesktop: arrowSizeDesktop,
        rangeStylesTab: arrowSizeTab,
        rangeStylesMobile: arrowSizeMobile,
    } = generateResponsiveRangeStyles({
        controlName: ARROW_SIZE,
        property: "font-size",
        attributes,
    });

    const {
        rangeStylesDesktop: arrowSvgWidthDesktop,
        rangeStylesTab: arrowSvgWidthTab,
        rangeStylesMobile: arrowSvgWidthMobile,
    } = generateResponsiveRangeStyles({
        controlName: ARROW_SIZE,
        property: "width",
        attributes,
    });

    const {
        rangeStylesDesktop: arrowSvgHeightDesktop,
        rangeStylesTab: arrowSvgHeightTab,
        rangeStylesMobile: arrowSvgHeightMobile,
    } = generateResponsiveRangeStyles({
        controlName: ARROW_SIZE,
        property: "height",
        attributes,
    });

    // range controller Slider Arrow Size
    const {
        rangeStylesDesktop: dotsSizeDesktop,
        rangeStylesTab: dotsSizeTab,
        rangeStylesMobile: dotsSizeMobile,
    } = generateResponsiveRangeStyles({
        controlName: DOTS_SIZE,
        property: "font-size",
        attributes,
    });

    // range controller Slider Slides Gap
    const {
        rangeStylesDesktop: slidesGapDesktop,
        rangeStylesTab: slidesGapTab,
        rangeStylesMobile: slidesGapMobile,
    } = generateResponsiveRangeStyles({
        controlName: SLIDES_GAP,
        property: "padding",
        attributes,
    });

    // range controller Slider Dots Position
    const {
        rangeStylesDesktop: dotsPositionDesktop,
        rangeStylesTab: dotsPositionTab,
        rangeStylesMobile: dotsPositionMobile,
    } = generateResponsiveRangeStyles({
        controlName: DOTS_POSITION,
        property: "bottom",
        attributes,
    });

    //Generate Background
    const {
        backgroundStylesDesktop: wrapperBackgroundStylesDesktop,
        hoverBackgroundStylesDesktop: wrapperHoverBackgroundStylesDesktop,
        backgroundStylesTab: wrapperBackgroundStylesTab,
        hoverBackgroundStylesTab: wrapperHoverBackgroundStylesTab,
        backgroundStylesMobile: wrapperBackgroundStylesMobile,
        hoverBackgroundStylesMobile: wrapperHoverBackgroundStylesMobile,
        bgTransitionStyle: wrapperBgTransitionStyle,
    } = generateBackgroundControlStyles({
        attributes,
        controlName: WRAPPER_BG,
        noOverlay: true,
    });

    // generateBorderShadowStyles for Wrapper ⬇
    const {
        styesDesktop: wrapperBDShadowDesktop,
        styesTab: wrapperBDShadowTab,
        styesMobile: wrapperBDShadowMobile,
        stylesHoverDesktop: wrapperBDShadowHoverDesktop,
        stylesHoverTab: wrapperBDShadowHoverTab,
        stylesHoverMobile: wrapperBDShadowHoverMobile,
        transitionStyle: wrapperBDShadowTransitionStyle,
    } = generateBorderShadowStyles({
        controlName: WRAPPER_BORDER_SHADOW,
        attributes,
        // noShadow: true,
        // noBorder: true,
    });

    // generateBorderShadowStyles for Button ⬇
    const {
        styesDesktop: buttonBDShadowDesktop,
        styesTab: buttonBDShadowTab,
        styesMobile: buttonBDShadowMobile,
        stylesHoverDesktop: buttonBDShadowHoverDesktop,
        stylesHoverTab: buttonBDShadowHoverTab,
        stylesHoverMobile: buttonBDShadowHoverMobile,
        transitionStyle: buttonBDShadowTransitionStyle,
    } = generateBorderShadowStyles({
        controlName: BUTTON_BORDER_SHADOW,
        attributes,
        // noShadow: true,
        // noBorder: true,
    });
    const {
        styesDesktop: button2BDShadowDesktop,
        styesTab: button2BDShadowTab,
        styesMobile: button2BDShadowMobile,
        stylesHoverDesktop: button2BDShadowHoverDesktop,
        stylesHoverTab: button2BDShadowHoverTab,
        stylesHoverMobile: button2BDShadowHoverMobile,
        transitionStyle: button2BDShadowTransitionStyle,
    } = generateBorderShadowStyles({
        controlName: BUTTON2_BORDER_SHADOW,
        attributes,
        // noShadow: true,
        // noBorder: true,
    });

    const {
        styesDesktop: sliderBDShadowDesktop,
        styesTab: sliderBDShadowTab,
        styesMobile: sliderBDShadowMobile,
        stylesHoverDesktop: sliderBDShadowHoverDesktop,
        stylesHoverTab: sliderBDShadowHoverTab,
        stylesHoverMobile: sliderBDShadowHoverMobile,
        transitionStyle: sliderBDShadowTransitionStyle,
    } = generateBorderShadowStyles({
        controlName: SLIDER_BORDER_SHADOW,
        attributes,
        // noShadow: true,
        // noBorder: true,
    });



    // Image masking — per QA report CONCERN A path B (block-level shared mask).
    // Slider doesn't use ImageComponent's `.eb-image-wrapper` markup, so we
    // pull just the mask declarations and splice them onto our own selector.
    const {
        enabled: maskEnabled,
        baseDecls: maskBaseDecls,
        hoverDecls: maskHoverDecls,
        transition: maskTransition,
    } = generateMaskStyles({ attributes });

    const sliderMaskStyles = maskEnabled
        ? `
        .eb-slider-wrapper.${blockId} .eb-slider-item img {
            ${maskBaseDecls}
            ${maskTransition}
        }
        .eb-slider-wrapper.${blockId} .eb-slider-item:hover img {
            ${maskHoverDecls}
        }
    `
        : "";

    // wrapper styles css in strings ⬇
    const wrapperStylesDesktop = `
		.eb-slider-wrapper.${blockId}{
			${wrapperMarginDesktop}
			${wrapperPaddingDesktop}
			${wrapperBDShadowDesktop}
			transition: ${wrapperBDShadowTransitionStyle}, ${wrapperBgTransitionStyle};
			${wrapperBackgroundStylesDesktop}
		}
		.eb-slider-wrapper.${blockId}:hover {
            ${wrapperHoverBackgroundStylesDesktop}
			${wrapperBDShadowHoverDesktop}
		}
        ${sliderMaskStyles}
	`;
    const wrapperStylesTab = `
		.eb-slider-wrapper.${blockId}{
			${wrapperMarginTab}
			${wrapperPaddingTab}
			${wrapperBDShadowTab}
			${wrapperBackgroundStylesTab}
		}
		.eb-slider-wrapper.${blockId}:hover {
            ${wrapperHoverBackgroundStylesTab}
			${wrapperBDShadowHoverTab}
		}
	`;
    const wrapperStylesMobile = `
		.eb-slider-wrapper.${blockId}{
			${wrapperMarginMobile}
			${wrapperPaddingMobile}
			${wrapperBDShadowMobile}
			${wrapperBackgroundStylesMobile}
		}
		.eb-slider-wrapper.${blockId}:hover {
            ${wrapperHoverBackgroundStylesMobile}
			${wrapperBDShadowHoverMobile}
		}
	`;

    const sliderRtlStyles = `
        [dir="rtl"] .eb-slider-wrapper.${blockId} .slick-slide {
            pointer-events: auto;
        }
    `;

    const sliderStylesDesktop = `
		.eb-slider-wrapper.${blockId} .slick-slide > * {
			${slidesGapDesktop}
		}
		.eb-slider-wrapper.${blockId} .eb-slider-type-content .eb-slider-item {
			text-align: ${textAlign};
			align-items: ${verticalAlign};
		}
        .eb-slider-wrapper.${blockId} .slick-slider .eb-slider-item {
			${isCustomHeight ? sliderMinHeightDesktop : ""}
		}
		.eb-slider-wrapper.${blockId} .slick-slider .eb-slider-item img:not(.slick-loading) {
			${isCustomHeight ? sliderHeightDesktop : ""}
            ${sliderBDShadowDesktop}
		}
        .eb-slider-wrapper.${blockId}:not(.default-slider) .eb-slider-item img {
            ${sliderBDShadowDesktop}
        }
		.eb-slider-wrapper.${blockId} .eb-slider-type-content .eb-slider-item.content-1 .eb-slider-content {
			background-color: ${overlayColor};
			justify-content: ${verticalAlign};
            ${sliderBDShadowDesktop}
            width: calc(100% - ${slidesGapRange * 2}px);
            height: calc(100% - ${slidesGapRange * 2}px);
		}
		.eb-slider-wrapper.${blockId} .eb-slider-type-content .eb-slider-item .eb-slider-content .eb-slider-title {
			color: ${titleColor};
			${titleMarginDesktop}
			${titleTypographyDesktop}
		}
		.eb-slider-wrapper.${blockId} .eb-slider-type-content .eb-slider-item .eb-slider-content .eb-slider-subtitle {
			color: ${subtitleColor};
			${subtitleMarginDesktop}
			${subtitleTypographyDesktop}
		}
		.eb-slider-wrapper.${blockId} .eb-slider-type-content .eb-slider-item .eb-slider-content .eb-slider-button {
			color: ${buttonColor};
			background-color: ${buttonBGColor};
			${buttonMarginDesktop}
			${buttonPaddingDesktop}
			${buttonTypographyDesktop}
			${buttonBDShadowDesktop}
			transition: ${buttonBDShadowTransitionStyle};
		}
		.eb-slider-wrapper.${blockId} .eb-slider-type-content .eb-slider-item .eb-slider-content .eb-slider-button:hover {
			color: ${buttonHoverColor};
			background-color: ${buttonHoverBGColor};
			${buttonTypographyDesktop}
			${buttonBDShadowHoverDesktop}
		}

		.eb-slider-wrapper.${blockId} .eb-slider-type-content .eb-slider-item .eb-slider-content .eb-slider-second-button {
			color: ${secondButtonColor};
			background-color: ${secondButtonBGColor};
			${button2MarginDesktop}
			${button2PaddingDesktop}
			${button2TypographyDesktop}
			${button2BDShadowDesktop}
			transition: ${button2BDShadowTransitionStyle};
		}
		.eb-slider-wrapper.${blockId} .eb-slider-type-content .eb-slider-item .eb-slider-content .eb-slider-second-button:hover {
			color: ${secondButtonHoverColor};
			background-color: ${secondButtonHoverBGColor};
			${button2TypographyDesktop}
			${button2BDShadowHoverDesktop}
		}
	`;
    const sliderStylesTab = `
		.eb-slider-wrapper.${blockId} .slick-slide > * {
			${slidesGapTab}
		}
        .eb-slider-wrapper.${blockId} .slick-slider .eb-slider-item {
			${isCustomHeight ? sliderMinHeightTab : ""}
		}
		.eb-slider-wrapper.${blockId} .slick-slider .eb-slider-item img:not(.slick-loading) {
			${isCustomHeight &&
            (sliderType === "image" ||
                (sliderType === "content" &&
                    sliderContentType === "content-1"))
            ? sliderHeightTab
            : ""
        }
        ${sliderBDShadowTab}
		}

        .eb-slider-wrapper.${blockId}:not(.default-slider) .eb-slider-item img {
            ${sliderBDShadowTab}
        }

        .eb-slider-wrapper.${blockId} .eb-slider-type-content .eb-slider-item.content-1 .eb-slider-content {
            ${sliderBDShadowTab}
        }
		.eb-slider-wrapper.${blockId} .eb-slider-type-content .eb-slider-item .eb-slider-content .eb-slider-title {
			${titleMarginTab}
			${titleTypographyTab}
		}
		.eb-slider-wrapper.${blockId} .eb-slider-type-content .eb-slider-item .eb-slider-content .eb-slider-subtitle {
			${subtitleMarginTab}
			${subtitleTypographyTab}
		}
		.eb-slider-wrapper.${blockId} .eb-slider-type-content .eb-slider-item .eb-slider-content .eb-slider-button {
			${buttonMarginTab}
			${buttonPaddingTab}
			${buttonTypographyTab}
			${buttonBDShadowTab}
		}
		.eb-slider-wrapper.${blockId} .eb-slider-type-content .eb-slider-item .eb-slider-content .eb-slider-button:hover {
			${buttonTypographyTab}
			${buttonBDShadowHoverTab}
		}

        .eb-slider-wrapper.${blockId} .eb-slider-type-content .eb-slider-item .eb-slider-content .eb-slider-second-button {
			${button2MarginTab}
			${button2PaddingTab}
			${button2TypographyTab}
			${button2BDShadowTab}
		}
		.eb-slider-wrapper.${blockId} .eb-slider-type-content .eb-slider-item .eb-slider-content .eb-slider-second-button:hover {
			${button2TypographyTab}
			${button2BDShadowHoverTab}
		}

	`;
    const sliderStylesMobile = `
		.eb-slider-wrapper.${blockId} .slick-slide > * {
			${slidesGapMobile}
		}
        .eb-slider-wrapper.${blockId} .slick-slider .eb-slider-item {
			${isCustomHeight ? sliderMinHeightMobile : ""}
		}
		.eb-slider-wrapper.${blockId} .slick-slider .eb-slider-item img:not(.slick-loading) {
			${isCustomHeight &&
            (sliderType === "image" ||
                (sliderType === "content" &&
                    sliderContentType === "content-1"))
            ? sliderHeightMobile
            : ""
        }
        ${sliderBDShadowMobile}
		}

        .eb-slider-wrapper.${blockId}:not(.default-slider) .eb-slider-item img {
            ${sliderBDShadowMobile}
        }
        .eb-slider-wrapper.${blockId} .eb-slider-type-content .eb-slider-item.content-1 .eb-slider-content {
            ${sliderBDShadowMobile}
        }
		.eb-slider-wrapper.${blockId} .eb-slider-type-content .eb-slider-item .eb-slider-content .eb-slider-title {
			${titleMarginMobile}
			${titleTypographyMobile}
		}
		.eb-slider-wrapper.${blockId} .eb-slider-type-content .eb-slider-item .eb-slider-content .eb-slider-subtitle {
			${subtitleMarginMobile}
			${subtitleTypographyMobile}
		}
		.eb-slider-wrapper.${blockId} .eb-slider-type-content .eb-slider-item .eb-slider-content .eb-slider-button {
			${buttonMarginMobile}
			${buttonPaddingMobile}
			${buttonTypographyMobile}
			${buttonBDShadowMobile}
		}
		.eb-slider-wrapper.${blockId} .eb-slider-type-content .eb-slider-item .eb-slider-content .eb-slider-button:hover {
			${buttonTypographyMobile}
			${buttonBDShadowHoverMobile}
		}
        .eb-slider-wrapper.${blockId} .eb-slider-type-content .eb-slider-item .eb-slider-content .eb-slider-second-button {
			${button2MarginMobile}
			${button2PaddingMobile}
			${button2TypographyMobile}
			${button2BDShadowMobile}
		}
		.eb-slider-wrapper.${blockId} .eb-slider-type-content .eb-slider-item .eb-slider-content .eb-slider-second-button:hover {
			${button2TypographyMobile}
			${button2BDShadowHoverMobile}
		}
	`;
    const sliderControlsStylesDesktop = `
        [dir="rtl"] .eb-slider-wrapper.${blockId} .slick-prev {
			${rightArrowPositionDesktop}
            left: auto;
		}
		[dir="rtl"] .eb-slider-wrapper.${blockId} .slick-next {
            ${leftArrowPositionDesktop}
            right: auto;
		}
		.eb-slider-wrapper.${blockId} .slick-prev {
			${!isRTLEnable ? leftArrowPositionDesktop : rightArrowPositionDesktop}
		}
		.eb-slider-wrapper.${blockId} .slick-next {
			${!isRTLEnable ? rightArrowPositionDesktop : leftArrowPositionDesktop}
		}
		.eb-slider-wrapper.${blockId} .slick-prev i,
		.eb-slider-wrapper.${blockId} .slick-next i,
        .eb-slider-wrapper.${blockId} .slick-prev span,
		.eb-slider-wrapper.${blockId} .slick-next span {
			color: ${arrowColor} !important;
			${arrowSizeDesktop}
		}
        .eb-slider-wrapper.${blockId} .slick-prev,
        .eb-slider-wrapper.${blockId} .slick-next {
			${arrowSvgWidthDesktop}
			${arrowSvgHeightDesktop}
		}
        .eb-slider-wrapper.${blockId} .slick-prev svg,
        .eb-slider-wrapper.${blockId} .slick-next svg {
			fill: ${arrowColor} !important;
        }
		.eb-slider-wrapper.${blockId} .slick-prev i:hover,
		.eb-slider-wrapper.${blockId} .slick-next i:hover {
			color: ${arrowHoverColor} !important;
		}
        .eb-slider-wrapper.${blockId} .slick-prev:hover svg,
        .eb-slider-wrapper.${blockId} .slick-next:hover svg {
			fill: ${arrowHoverColor} !important;
        }
		.eb-slider-wrapper.${blockId} .slick-dots {
			${dotsPositionDesktop}
		}
		.eb-slider-wrapper.${blockId} .slick-dots li {
			${dotsGapDesktop}
		}
		.eb-slider-wrapper.${blockId} .slick-dots li button:before {
			color: ${dotsColor} !important;
			${dotsSizeDesktop}
		}
		.eb-slider-wrapper.${blockId} .slick-dots li.slick-active button:before {
			color: ${dotsActiveColor} !important;
		}
	`;
    const sliderControlsStylesTab = `
        [dir="rtl"] .eb-slider-wrapper.${blockId} .slick-prev {
			${rightArrowPositionTab}
            left: auto;
		}
		[dir="rtl"] .eb-slider-wrapper.${blockId} .slick-next {
            ${leftArrowPositionTab}
            right: auto;
		}
		.eb-slider-wrapper.${blockId} .slick-prev {
			${!isRTLEnable ? leftArrowPositionTab : rightArrowPositionTab}
		}
		.eb-slider-wrapper.${blockId} .slick-next {
            ${!isRTLEnable ? rightArrowPositionTab : leftArrowPositionTab}
		}
		.eb-slider-wrapper.${blockId} .slick-prev i,
		.eb-slider-wrapper.${blockId} .slick-next i,
        .eb-slider-wrapper.${blockId} .slick-prev span,
		.eb-slider-wrapper.${blockId} .slick-next span  {
			${arrowSizeTab}
		}
        .eb-slider-wrapper.${blockId} .slick-prev,
        .eb-slider-wrapper.${blockId} .slick-next {
			${arrowSvgWidthTab}
			${arrowSvgHeightTab}
		}
		.eb-slider-wrapper.${blockId} .slick-dots {
			${dotsPositionTab}
		}
		.eb-slider-wrapper.${blockId} .slick-dots li {
			${dotsGapTab}
		}
		.eb-slider-wrapper.${blockId} .slick-dots li button:before {
			${dotsSizeTab}
		}
	`;
    const sliderControlsStylesMobile = `
        [dir="rtl"] .eb-slider-wrapper.${blockId} .slick-prev {
			${rightArrowPositionMobile}
            left: auto;
		}
		[dir="rtl"] .eb-slider-wrapper.${blockId} .slick-next {
            ${leftArrowPositionMobile}
            right: auto;
		}
		.eb-slider-wrapper.${blockId} .slick-prev {
			${!isRTLEnable ? leftArrowPositionMobile : rightArrowPositionMobile}
		}
		.eb-slider-wrapper.${blockId} .slick-next {
            ${!isRTLEnable ? rightArrowPositionMobile : leftArrowPositionMobile}
		}
		.eb-slider-wrapper.${blockId} .slick-prev i,
		.eb-slider-wrapper.${blockId} .slick-next i,
        .eb-slider-wrapper.${blockId} .slick-prev span,
		.eb-slider-wrapper.${blockId} .slick-next span {
			${arrowSizeMobile}
		}
        .eb-slider-wrapper.${blockId} .slick-prev,
        .eb-slider-wrapper.${blockId} .slick-next {
			${arrowSvgWidthMobile}
			${arrowSvgHeightMobile}
		}
		.eb-slider-wrapper.${blockId} .slick-dots {
			${dotsPositionMobile}
		}
		.eb-slider-wrapper.${blockId} .slick-dots li {
			${dotsGapMobile}
		}
		.eb-slider-wrapper.${blockId} .slick-dots li button:before {
			${dotsSizeMobile}
		}
	`;

    // all css styles for large screen width (desktop/laptop) in strings ⬇
    const desktopAllStyles = softMinifyCssStrings(`
		${wrapperStylesDesktop}
		${sliderStylesDesktop}
		${sliderControlsStylesDesktop}
        ${sliderRtlStyles}
	`);

    // all css styles for Tab in strings ⬇
    const tabAllStyles = softMinifyCssStrings(`
		${wrapperStylesTab}
		${sliderStylesTab}
		${sliderControlsStylesTab}
	`);

    // all css styles for Mobile in strings ⬇
    const mobileAllStyles = softMinifyCssStrings(`
		${wrapperStylesMobile}
		${sliderStylesMobile}
		${sliderControlsStylesMobile}
	`);

    return (
        <>
            <StyleComponent
                attributes={attributes}
                setAttributes={setAttributes}
                desktopAllStyles={desktopAllStyles}
                tabAllStyles={tabAllStyles}
                mobileAllStyles={mobileAllStyles}
                blockName={name}
            />
        </>
    );
}
