/*
 * Generate styles for button
 */

import { hexToRgba, hexToRgb } from '../utilities/general-utils';

export const generateButtonStyles = ( {
	// Block Button Spacing Panel
	blockButtonMinHeightDesktop, blockButtonMinHeightTablet, blockButtonMinHeightMobile,
	buttonContentVerticalAlignDesktop, buttonContentVerticalAlignTablet, buttonContentVerticalAlignMobile,
	buttonContentHorizontalAlignDesktop, buttonContentHorizontalAlignTablet, buttonContentHorizontalAlignMobile,
	blockButtonWidthDesktop, blockButtonWidthTablet, blockButtonWidthMobile,

	blockButtonPaddingTopDesktop, blockButtonPaddingTopTablet, blockButtonPaddingTopMobile,
	blockButtonPaddingRightDesktop, blockButtonPaddingRightTablet, blockButtonPaddingRightMobile,
	blockButtonPaddingBottomDesktop, blockButtonPaddingBottomTablet, blockButtonPaddingBottomMobile,
	blockButtonPaddingLeftDesktop, blockButtonPaddingLeftTablet, blockButtonPaddingLeftMobile,

	blockButtonMarginTopDesktop, blockButtonMarginTopTablet, blockButtonMarginTopMobile,
	blockButtonMarginRightDesktop, blockButtonMarginRightTablet, blockButtonMarginRightMobile,
	blockButtonMarginBottomDesktop, blockButtonMarginBottomTablet, blockButtonMarginBottomMobile,
	blockButtonMarginLeftDesktop, blockButtonMarginLeftTablet, blockButtonMarginLeftMobile,

	// Block Background Panel
	blockButtonBackgroundMode, blockButtonBackgroundColor, blockButtonBackgroundOpacity, blockButtonBackgroundGradient,
	hoverBlockButtonBackgroundColor, hoverBlockButtonBackgroundOpacity,

	blockButtonBackgroundImageDesktop, blockButtonBackgroundImageTablet, blockButtonBackgroundImageMobile,
	blockButtonBackgroundImageURLDesktop, blockButtonBackgroundImageURLTablet, blockButtonBackgroundImageURLMobile,

	blockButtonBackgroundFixed, blockButtonBackgroundPosition,
	blockButtonBackgroundSize,
	blockButtonBackgroundCustomSizeDesktop, blockButtonBackgroundCustomSizeTablet, blockButtonBackgroundCustomSizeMobile,
	blockButtonBackgroundRepeat, blockButtonBackgroundTint, blockButtonBackgroundBlendMode,

	// Button Spacing Panel
	buttonMinHeightDesktop, buttonMinHeightTablet, buttonMinHeightMobile,
	buttonWidthDesktop, buttonWidthTablet, buttonWidthMobile,

	buttonPaddingTopDesktop, buttonPaddingTopTablet, buttonPaddingTopMobile,
	buttonPaddingRightDesktop, buttonPaddingRightTablet, buttonPaddingRightMobile,
	buttonPaddingBottomDesktop, buttonPaddingBottomTablet, buttonPaddingBottomMobile,
	buttonPaddingLeftDesktop, buttonPaddingLeftTablet, buttonPaddingLeftMobile,

	// Button Color Panel
	buttonBackgroundMode, buttonBackgroundColor, buttonBackgroundOpacity, buttonBackgroundGradient,
	hoverButtonBackgroundColor, hoverButtonBackgroundOpacity,

	// Button Icon Panel
	buttonIconColor, buttonIconOpacity,
	buttonIconSizeDesktop, buttonIconSizeTablet, buttonIconSizeMobile,
	buttonIconRotation, buttonIconGapDesktop, buttonIconGapTablet, buttonIconGapMobile,
	hoverButtonIconRotation, hoverButtonIconColor, hoverButtonIconOpacity,

	// Button Borders & Shadows Panel
	buttonBorderTopWidthDesktop, buttonBorderTopWidthTablet, buttonBorderTopWidthMobile,
	buttonBorderRightWidthDesktop, buttonBorderRightWidthTablet, buttonBorderRightWidthMobile,
	buttonBorderBottomWidthDesktop, buttonBorderBottomWidthTablet, buttonBorderBottomWidthMobile,
	buttonBorderLeftWidthDesktop, buttonBorderLeftWidthTablet, buttonBorderLeftWidthMobile,

	buttonBorderColor, buttonBorderOpacity,
	buttonBoxShadowHOffset, buttonBoxShadowVOffset, buttonBoxShadowBlur, buttonBoxShadowSpread, buttonBoxShadowColor, buttonBoxShadowOpacity,

	topLeftButtonRadiusDesktop, topRightButtonRadiusDesktop, bottomLeftButtonRadiusDesktop, bottomRightButtonRadiusDesktop,
	topLeftButtonRadiusTablet, topRightButtonRadiusTablet, bottomLeftButtonRadiusTablet, bottomRightButtonRadiusTablet,
	topLeftButtonRadiusMobile, topRightButtonRadiusMobile, bottomLeftButtonRadiusMobile, bottomRightButtonRadiusMobile,
	hoverButtonBorderColor, hoverButtonBorderOpacity,

	hoverButtonBorderTopWidthDesktop, hoverButtonBorderTopWidthTablet, hoverButtonBorderTopWidthMobile,
	hoverButtonBorderRightWidthDesktop, hoverButtonBorderRightWidthTablet, hoverButtonBorderRightWidthMobile,
	hoverButtonBorderBottomWidthDesktop, hoverButtonBorderBottomWidthTablet, hoverButtonBorderBottomWidthMobile,
	hoverButtonBorderLeftWidthDesktop, hoverButtonBorderLeftWidthTablet, hoverButtonBorderLeftWidthMobile,

	hoverButtonBoxShadowHOffset, hoverButtonBoxShadowVOffset, hoverButtonBoxShadowBlur, hoverButtonBoxShadowSpread, hoverButtonBoxShadowColor, hoverButtonBoxShadowOpacity,

	// Block Borders & Shadows Panel
	blockButtonBorderTopWidthDesktop, blockButtonBorderTopWidthTablet, blockButtonBorderTopWidthMobile,
	blockButtonBorderRightWidthDesktop, blockButtonBorderRightWidthTablet, blockButtonBorderRightWidthMobile,
	blockButtonBorderBottomWidthDesktop, blockButtonBorderBottomWidthTablet, blockButtonBorderBottomWidthMobile,
	blockButtonBorderLeftWidthDesktop, blockButtonBorderLeftWidthTablet, blockButtonBorderLeftWidthMobile,

	blockButtonBorderColor, blockButtonBorderOpacity,
	blockButtonBoxShadowHOffset, blockButtonBoxShadowVOffset, blockButtonBoxShadowBlur, blockButtonBoxShadowSpread, blockButtonBoxShadowColor, blockButtonBoxShadowOpacity,

	topLeftBlockButtonRadiusDesktop, topLeftBlockButtonRadiusTablet, topLeftBlockButtonRadiusMobile,
	topRightBlockButtonRadiusDesktop, topRightBlockButtonRadiusTablet, topRightBlockButtonRadiusMobile,
	bottomLeftBlockButtonRadiusDesktop, bottomLeftBlockButtonRadiusTablet, bottomLeftBlockButtonRadiusMobile,
	bottomRightBlockButtonRadiusDesktop, bottomRightBlockButtonRadiusTablet, bottomRightBlockButtonRadiusMobile,

	hoverBlockButtonBorderColor, hoverBlockButtonBorderOpacity,

	hoverBlockButtonBorderTopWidthDesktop, hoverBlockButtonBorderTopWidthTablet, hoverBlockButtonBorderTopWidthMobile,
	hoverBlockButtonBorderRightWidthDesktop, hoverBlockButtonBorderRightWidthTablet, hoverBlockButtonBorderRightWidthMobile,
	hoverBlockButtonBorderBottomWidthDesktop, hoverBlockButtonBorderBottomWidthTablet, hoverBlockButtonBorderBottomWidthMobile,
	hoverBlockButtonBorderLeftWidthDesktop, hoverBlockButtonBorderLeftWidthTablet, hoverBlockButtonBorderLeftWidthMobile,

	hoverBlockButtonBoxShadowHOffset, hoverBlockButtonBoxShadowVOffset, hoverBlockButtonBoxShadowBlur, hoverBlockButtonBoxShadowSpread, hoverBlockButtonBoxShadowColor, hoverBlockButtonBoxShadowOpacity,
} ) => {

	// Ensure color setting is a valid hex color string before using .slice()
	const isValidHexColor = ( color ) => typeof color === 'string' && color.startsWith( '#' ) && color.length === 7;

	// Block Background Color and Opacity
	const parsedBlockButtonBackgroundColor = isValidHexColor( blockButtonBackgroundColor )
		? hexToRgba( blockButtonBackgroundColor, blockButtonBackgroundOpacity )
		: 'transparent';

	const parsedHoverBlockButtonBackgroundColor = ( hoverBlockButtonBackgroundColor && hoverBlockButtonBackgroundColor !== null )
		? hexToRgba( hoverBlockButtonBackgroundColor, hoverBlockButtonBackgroundOpacity )
		: parsedBlockButtonBackgroundColor;

	// Calculate the Custom Background Size based on device type
	const calculatedblockButtonBackgroundSizeDesktop = blockButtonBackgroundSize === 'custom' && blockButtonBackgroundCustomSizeDesktop
		? `${blockButtonBackgroundCustomSizeDesktop}%`
		: blockButtonBackgroundSize || '';

	// Tablet inherits from Desktop if not set
	const calculatedblockButtonBackgroundSizeTablet = blockButtonBackgroundSize === 'custom' && blockButtonBackgroundCustomSizeTablet
		? `${blockButtonBackgroundCustomSizeTablet}%`
		: calculatedblockButtonBackgroundSizeDesktop;

	// Mobile inherits from Tablet if not set
	const calculatedblockButtonBackgroundSizeMobile = blockButtonBackgroundSize === 'custom' && blockButtonBackgroundCustomSizeMobile
		? `${blockButtonBackgroundCustomSizeMobile}%`
		: calculatedblockButtonBackgroundSizeTablet;

	const buttonOverlayStyles = {
		'--ssmb-block-overlay-background-color': parsedBlockButtonBackgroundColor,
		'--ssmb-block-overlay-background-color-hover': parsedHoverBlockButtonBackgroundColor,
		'--ssmb-block-button-background-gradient': blockButtonBackgroundMode === 'gradient' ? blockButtonBackgroundGradient : '',
		'--ssmb-block-button-background-blend-mode': blockButtonBackgroundBlendMode || 'normal',
	};

	// Parse Button Background Color and Opacity
	const parsedButtonBackgroundColor = isValidHexColor( buttonBackgroundColor )
		? hexToRgba( buttonBackgroundColor, buttonBackgroundOpacity )
		: 'transparent';

	const parsedHoverButtonBackgroundColor = ( hoverButtonBackgroundColor && hoverButtonBackgroundColor !== null )
		? hexToRgba( hoverButtonBackgroundColor, hoverButtonBackgroundOpacity )
		: parsedButtonBackgroundColor;

	// Parse Icon Background Color and Opacity
	const parsedIconColor = ( isValidHexColor( buttonIconColor ) )
		? hexToRgba( buttonIconColor, buttonIconOpacity )
		: 'rgba(255, 255, 255, 1)';

	const parsedHoverIconColor = ( hoverButtonIconColor && hoverButtonIconColor !== null )
		? hexToRgba( hoverButtonIconColor, hoverButtonIconOpacity )
		: parsedIconColor;

	// Parse Border Color and Opacity
	const parsedButtonBorderColor = ( buttonBorderColor && isValidHexColor( buttonBorderColor ) )
		? hexToRgba( buttonBorderColor, buttonBorderOpacity || 1 )
		: 'transparent';

	const parsedHoverButtonBorderColor = ( hoverButtonBorderColor && isValidHexColor( hoverButtonBorderColor ) )
		? hexToRgba( hoverButtonBorderColor, hoverButtonBorderOpacity || 1 )
		: parsedButtonBorderColor;

	// Parse border colors and opacity
	const parsedBlockButtonBorderColor = ( blockButtonBorderColor && isValidHexColor( blockButtonBorderColor ) )
		? hexToRgba( blockButtonBorderColor, blockButtonBorderOpacity || 1 )
		: 'transparent';

	const parsedHoverBlockButtonBorderColor = ( hoverBlockButtonBorderColor && isValidHexColor( hoverBlockButtonBorderColor ) )
		? hexToRgba( hoverBlockButtonBorderColor, hoverBlockButtonBorderOpacity || 1 )
		: parsedBlockButtonBorderColor;

	// Parse Block Box Shadow Color Hover
	const parsedHoverBlockButtonBoxShadowColor = hoverBlockButtonBoxShadowColor
		? hexToRgb( hoverBlockButtonBoxShadowColor )
		: hexToRgb( blockButtonBoxShadowColor );

	// Parse Box Shadow Color Hover
	const parsedHoverBoxShadowColor = hoverButtonBoxShadowColor
		? hexToRgb( hoverButtonBoxShadowColor )
		: hexToRgb( buttonBoxShadowColor );

	// Wrapper Styles
	const blockButtonStyles = {
		// Min Height
		'--ssmb-block-button-min-height-size': `${blockButtonMinHeightDesktop}px`,
		'--ssmb-block-button-min-height-size-tablet': `${blockButtonMinHeightTablet || blockButtonMinHeightDesktop}px`,
		'--ssmb-block-button-min-height-size-mobile': `${blockButtonMinHeightMobile || blockButtonMinHeightTablet || blockButtonMinHeightDesktop}px`,

		// Vertical Alignment
		'--ssmb-block-button-content-vertical-align': buttonContentVerticalAlignDesktop || 'flex-start',
		'--ssmb-block-button-content-vertical-align-tablet': buttonContentVerticalAlignTablet || buttonContentVerticalAlignDesktop || 'flex-start',
		'--ssmb-block-button-content-vertical-align-mobile': buttonContentVerticalAlignMobile || buttonContentVerticalAlignTablet || buttonContentVerticalAlignDesktop || 'flex-start',

		// Width
		'--ssmb-block-button-width-size': `${blockButtonWidthDesktop}px`,
		'--ssmb-block-button-width-size-tablet': `${blockButtonWidthTablet || blockButtonWidthDesktop}px`,
		'--ssmb-block-button-width-size-mobile': `${blockButtonWidthMobile || blockButtonWidthTablet || blockButtonWidthDesktop}px`,

		// Horizontal Alignment
		'--ssmb-block-button-content-horizontal-align': buttonContentHorizontalAlignDesktop || 'flex-start',
		'--ssmb-block-button-content-horizontal-align-tablet': buttonContentHorizontalAlignTablet || buttonContentHorizontalAlignDesktop || 'flex-start',
		'--ssmb-block-button-content-horizontal-align-mobile': buttonContentHorizontalAlignMobile || buttonContentHorizontalAlignTablet || buttonContentHorizontalAlignDesktop || 'flex-start',

		// Padding
		'--ssmb-block-button-padding-top-size': `${blockButtonPaddingTopDesktop}px`,
		'--ssmb-block-button-padding-right-size': `${blockButtonPaddingRightDesktop}px`,
		'--ssmb-block-button-padding-bottom-size': `${blockButtonPaddingBottomDesktop}px`,
		'--ssmb-block-button-padding-left-size': `${blockButtonPaddingLeftDesktop}px`,

		'--ssmb-block-button-padding-top-size-tablet': `${blockButtonPaddingTopTablet || blockButtonPaddingTopDesktop}px`,
		'--ssmb-block-button-padding-right-size-tablet': `${blockButtonPaddingRightTablet || blockButtonPaddingRightDesktop}px`,
		'--ssmb-block-button-padding-bottom-size-tablet': `${blockButtonPaddingBottomTablet || blockButtonPaddingBottomDesktop}px`,
		'--ssmb-block-button-padding-left-size-tablet': `${blockButtonPaddingLeftTablet || blockButtonPaddingLeftDesktop}px`,

		'--ssmb-block-button-padding-top-size-mobile': `${blockButtonPaddingTopMobile || blockButtonPaddingTopTablet || blockButtonPaddingTopDesktop}px`,
		'--ssmb-block-button-padding-right-size-mobile': `${blockButtonPaddingRightMobile || blockButtonPaddingRightTablet || blockButtonPaddingRightDesktop}px`,
		'--ssmb-block-button-padding-bottom-size-mobile': `${blockButtonPaddingBottomMobile || blockButtonPaddingBottomTablet || blockButtonPaddingBottomDesktop}px`,
		'--ssmb-block-button-padding-left-size-mobile': `${blockButtonPaddingLeftMobile || blockButtonPaddingLeftTablet || blockButtonPaddingLeftDesktop}px`,

		// Margin
		'--ssmb-block-button-margin-top-size': `${blockButtonMarginTopDesktop}px`,
		'--ssmb-block-button-margin-right-size': `${blockButtonMarginRightDesktop}px`,
		'--ssmb-block-button-margin-bottom-size': `${blockButtonMarginBottomDesktop}px`,
		'--ssmb-block-button-margin-left-size': `${blockButtonMarginLeftDesktop}px`,

		'--ssmb-block-button-margin-top-size-tablet': `${blockButtonMarginTopTablet || blockButtonMarginTopDesktop}px`,
		'--ssmb-block-button-margin-right-size-tablet': `${blockButtonMarginRightTablet || blockButtonMarginRightDesktop}px`,
		'--ssmb-block-button-margin-bottom-size-tablet': `${blockButtonMarginBottomTablet || blockButtonMarginBottomDesktop}px`,
		'--ssmb-block-button-margin-left-size-tablet': `${blockButtonMarginLeftTablet || blockButtonMarginLeftDesktop}px`,

		'--ssmb-block-button-margin-top-size-mobile': `${blockButtonMarginTopMobile || blockButtonMarginTopTablet || blockButtonMarginTopDesktop}px`,
		'--ssmb-block-button-margin-right-size-mobile': `${blockButtonMarginRightMobile || blockButtonMarginRightTablet || blockButtonMarginRightDesktop}px`,
		'--ssmb-block-button-margin-bottom-size-mobile': `${blockButtonMarginBottomMobile || blockButtonMarginBottomTablet || blockButtonMarginBottomDesktop}px`,
		'--ssmb-block-button-margin-left-size-mobile': `${blockButtonMarginLeftMobile || blockButtonMarginLeftTablet || blockButtonMarginLeftDesktop}px`,

		'--ssmb-block-button-background-color':
            ( !blockButtonBackgroundImageDesktop && !blockButtonBackgroundImageTablet && !blockButtonBackgroundImageMobile
            && !blockButtonBackgroundImageURLDesktop && !blockButtonBackgroundImageURLTablet && !blockButtonBackgroundImageURLMobile
            && blockButtonBackgroundMode === 'solid' && blockButtonBackgroundColor && isValidHexColor( blockButtonBackgroundColor ) )
            	? hexToRgba( blockButtonBackgroundColor, blockButtonBackgroundOpacity )
            	: ( blockButtonBackgroundMode === 'gradient' && !blockButtonBackgroundGradient && blockButtonBackgroundColor && isValidHexColor( blockButtonBackgroundColor ) )
            	// Fallback to solid color if no gradient is set but solid color is defined
            		? hexToRgba( blockButtonBackgroundColor, blockButtonBackgroundOpacity )
            		: 'transparent', // Default fallback to transparent if no solid color is set

		'--ssmb-block-button-background-color-hover': parsedHoverBlockButtonBackgroundColor || 'transparent',

		'--ssmb-block-button-background-gradient':
            ( blockButtonBackgroundGradient !== null && !blockButtonBackgroundImageDesktop && !blockButtonBackgroundImageTablet && !blockButtonBackgroundImageMobile
            && !blockButtonBackgroundImageURLDesktop && !blockButtonBackgroundImageURLTablet && !blockButtonBackgroundImageURLMobile
            && blockButtonBackgroundMode === 'gradient' && blockButtonBackgroundGradient )
            	? blockButtonBackgroundGradient
            	: ( blockButtonBackgroundMode === 'gradient' && !blockButtonBackgroundGradient )
            	// Fallback to empty string if gradient mode is selected but no gradient is set
            		? ''
            		: '', // Default to an empty string when no gradient is set

		// Background Image or Custom URL
		'--ssmb-block-button-background-image': blockButtonBackgroundImageURLDesktop
			? ( blockButtonBackgroundImageDesktop ? '' : `url(${blockButtonBackgroundImageURLDesktop})` )
			: ( blockButtonBackgroundImageDesktop ? `url(${blockButtonBackgroundImageDesktop})` : 'none' ),

		'--ssmb-block-button-background-image-tablet': blockButtonBackgroundImageURLTablet
			? ( blockButtonBackgroundImageTablet ? '' : `url(${blockButtonBackgroundImageURLTablet})` )
			: ( blockButtonBackgroundImageTablet
				? `url(${blockButtonBackgroundImageTablet})`
				: ( blockButtonBackgroundImageURLDesktop
					? ( blockButtonBackgroundImageDesktop ? '' : `url(${blockButtonBackgroundImageURLDesktop})` )
					: ( blockButtonBackgroundImageDesktop ? `url(${blockButtonBackgroundImageDesktop})` : 'none' ) ) ),

		'--ssmb-block-button-background-image-mobile': blockButtonBackgroundImageURLMobile
			? ( blockButtonBackgroundImageMobile ? '' : `url(${blockButtonBackgroundImageURLMobile})` )
			: ( blockButtonBackgroundImageMobile
				? `url(${blockButtonBackgroundImageMobile})`
				: ( blockButtonBackgroundImageURLDesktop
					? ( blockButtonBackgroundImageDesktop ? '' : `url(${blockButtonBackgroundImageURLDesktop})` )
					: ( blockButtonBackgroundImageDesktop ? `url(${blockButtonBackgroundImageDesktop})` : 'none' ) ) ),

		// Background Size
		'--ssmb-block-button-background-size': calculatedblockButtonBackgroundSizeDesktop || 'cover',
		'--ssmb-block-button-background-size-tablet': calculatedblockButtonBackgroundSizeTablet || calculatedblockButtonBackgroundSizeDesktop || 'cover',
		'--ssmb-block-button-background-size-mobile': calculatedblockButtonBackgroundSizeMobile || calculatedblockButtonBackgroundSizeTablet || calculatedblockButtonBackgroundSizeDesktop || 'cover',

		'--ssmb-block-button-background-position': blockButtonBackgroundPosition || 'center center',
		'--ssmb-block-button-background-repeat': blockButtonBackgroundRepeat || 'no-repeat',
		'--ssmb-block-button-background-attachment': blockButtonBackgroundFixed ? 'fixed' : 'scroll',

		'--ssmb-block-button-background-tint': blockButtonBackgroundTint ? blockButtonBackgroundTint.toString() : '0',
		'--ssmb-block-button-background-blend-mode': blockButtonBackgroundBlendMode || '',

		// Border
		'--ssmb-block-button-border-top-width': `${blockButtonBorderTopWidthDesktop}px`,
		'--ssmb-block-button-border-right-width': `${blockButtonBorderRightWidthDesktop}px`,
		'--ssmb-block-button-border-bottom-width': `${blockButtonBorderBottomWidthDesktop}px`,
		'--ssmb-block-button-border-left-width': `${blockButtonBorderLeftWidthDesktop}px`,

		'--ssmb-block-button-border-top-width-tablet': `${blockButtonBorderTopWidthTablet || blockButtonBorderTopWidthDesktop}px`,
		'--ssmb-block-button-border-right-width-tablet': `${blockButtonBorderRightWidthTablet || blockButtonBorderRightWidthDesktop}px`,
		'--ssmb-block-button-border-bottom-width-tablet': `${blockButtonBorderBottomWidthTablet || blockButtonBorderBottomWidthDesktop}px`,
		'--ssmb-block-button-border-left-width-tablet': `${blockButtonBorderLeftWidthTablet || blockButtonBorderLeftWidthDesktop}px`,

		'--ssmb-block-button-border-top-width-mobile': `${blockButtonBorderTopWidthMobile || blockButtonBorderTopWidthTablet || blockButtonBorderTopWidthDesktop}px`,
		'--ssmb-block-button-border-right-width-mobile': `${blockButtonBorderRightWidthMobile || blockButtonBorderRightWidthTablet || blockButtonBorderRightWidthDesktop}px`,
		'--ssmb-block-button-border-bottom-width-mobile': `${blockButtonBorderBottomWidthMobile || blockButtonBorderBottomWidthTablet || blockButtonBorderBottomWidthDesktop}px`,
		'--ssmb-block-button-border-left-width-mobile': `${blockButtonBorderLeftWidthMobile || blockButtonBorderLeftWidthTablet || blockButtonBorderLeftWidthDesktop}px`,

		// Border Hover
		'--ssmb-block-button-border-top-width-hover': `${hoverBlockButtonBorderTopWidthDesktop || blockButtonBorderTopWidthDesktop}px`,
		'--ssmb-block-button-border-right-width-hover': `${hoverBlockButtonBorderRightWidthDesktop || blockButtonBorderRightWidthDesktop}px`,
		'--ssmb-block-button-border-bottom-width-hover': `${hoverBlockButtonBorderBottomWidthDesktop || blockButtonBorderBottomWidthDesktop}px`,
		'--ssmb-block-button-border-left-width-hover': `${hoverBlockButtonBorderLeftWidthDesktop || blockButtonBorderLeftWidthDesktop}px`,

		'--ssmb-block-button-border-top-width-hover-tablet': `${hoverBlockButtonBorderTopWidthTablet || hoverBlockButtonBorderTopWidthDesktop || blockButtonBorderTopWidthTablet || blockButtonBorderTopWidthDesktop}px`, // Tablet Hover inherits from normal or Desktop if not set
		'--ssmb-block-button-border-right-width-hover-tablet': `${hoverBlockButtonBorderRightWidthTablet || hoverBlockButtonBorderRightWidthDesktop || blockButtonBorderRightWidthTablet || blockButtonBorderRightWidthDesktop}px`,
		'--ssmb-block-button-border-bottom-width-hover-tablet': `${hoverBlockButtonBorderBottomWidthTablet || hoverBlockButtonBorderBottomWidthDesktop || blockButtonBorderBottomWidthTablet || blockButtonBorderBottomWidthDesktop}px`,
		'--ssmb-block-button-border-left-width-hover-tablet': `${hoverBlockButtonBorderLeftWidthTablet || hoverBlockButtonBorderLeftWidthDesktop || blockButtonBorderLeftWidthTablet || blockButtonBorderLeftWidthDesktop}px`,

		'--ssmb-block-button-border-top-width-hover-mobile': `${hoverBlockButtonBorderTopWidthMobile || hoverBlockButtonBorderTopWidthTablet || hoverBlockButtonBorderTopWidthDesktop || blockButtonBorderTopWidthMobile || blockButtonBorderTopWidthTablet || blockButtonBorderTopWidthDesktop}px`, // Mobile Hover inherits from Tablet or Desktop if not set
		'--ssmb-block-button-border-right-width-hover-mobile': `${hoverBlockButtonBorderRightWidthMobile || hoverBlockButtonBorderRightWidthTablet || hoverBlockButtonBorderRightWidthDesktop || blockButtonBorderRightWidthMobile || blockButtonBorderRightWidthTablet || blockButtonBorderRightWidthDesktop}px`,
		'--ssmb-block-button-border-bottom-width-hover-mobile': `${hoverBlockButtonBorderBottomWidthMobile || hoverBlockButtonBorderBottomWidthTablet || hoverBlockButtonBorderBottomWidthDesktop || blockButtonBorderBottomWidthMobile || blockButtonBorderBottomWidthTablet || blockButtonBorderBottomWidthDesktop}px`,
		'--ssmb-block-button-border-left-width-hover-mobile': `${hoverBlockButtonBorderLeftWidthMobile || hoverBlockButtonBorderLeftWidthTablet || hoverBlockButtonBorderLeftWidthDesktop || blockButtonBorderLeftWidthMobile || blockButtonBorderLeftWidthTablet || blockButtonBorderLeftWidthDesktop}px`,

		'--ssmb-block-button-border-color': parsedBlockButtonBorderColor,
		'--ssmb-block-button-border-color-hover': parsedHoverBlockButtonBorderColor || parsedBlockButtonBorderColor,

		// Box Shadow
		'--ssmb-block-button-box-shadow':
            `${blockButtonBoxShadowHOffset}px 
            ${blockButtonBoxShadowVOffset}px 
            ${blockButtonBoxShadowBlur}px 
            ${blockButtonBoxShadowSpread}px 
            rgba(${hexToRgb( blockButtonBoxShadowColor )}, ${blockButtonBoxShadowOpacity})`,

		'--ssmb-block-button-box-shadow-hover':
            `${hoverBlockButtonBoxShadowHOffset || blockButtonBoxShadowHOffset}px
            ${hoverBlockButtonBoxShadowVOffset || blockButtonBoxShadowVOffset}px
            ${hoverBlockButtonBoxShadowBlur || blockButtonBoxShadowBlur}px
            ${hoverBlockButtonBoxShadowSpread || blockButtonBoxShadowSpread}px
            rgba(${parsedHoverBlockButtonBoxShadowColor}, 
            ${hoverBlockButtonBoxShadowOpacity || blockButtonBoxShadowOpacity})`,

		// Radius
		'--ssmb-top-left-block-button-radius': `${topLeftBlockButtonRadiusDesktop}px`,
		'--ssmb-top-right-block-button-radius': `${topRightBlockButtonRadiusDesktop}px`,
		'--ssmb-bottom-left-block-button-radius': `${bottomLeftBlockButtonRadiusDesktop}px`,
		'--ssmb-bottom-right-block-button-radius': `${bottomRightBlockButtonRadiusDesktop}px`,

		'--ssmb-top-left-block-button-radius-tablet': `${topLeftBlockButtonRadiusTablet || topLeftBlockButtonRadiusDesktop}px`,
		'--ssmb-top-right-block-button-radius-tablet': `${topRightBlockButtonRadiusTablet || topRightBlockButtonRadiusDesktop}px`,
		'--ssmb-bottom-left-block-button-radius-tablet': `${bottomLeftBlockButtonRadiusTablet || bottomLeftBlockButtonRadiusDesktop}px`,
		'--ssmb-bottom-right-block-button-radius-tablet': `${bottomRightBlockButtonRadiusTablet || bottomRightBlockButtonRadiusDesktop}px`,

		'--ssmb-top-left-block-button-radius-mobile': `${topLeftBlockButtonRadiusMobile || topLeftBlockButtonRadiusTablet || topLeftBlockButtonRadiusDesktop}px`,
		'--ssmb-top-right-block-button-radius-mobile': `${topRightBlockButtonRadiusMobile || topRightBlockButtonRadiusTablet || topRightBlockButtonRadiusDesktop}px`,
		'--ssmb-bottom-left-block-button-radius-mobile': `${bottomLeftBlockButtonRadiusMobile || bottomLeftBlockButtonRadiusTablet || bottomLeftBlockButtonRadiusDesktop}px`,
		'--ssmb-bottom-right-block-button-radius-mobile': `${bottomRightBlockButtonRadiusMobile || bottomRightBlockButtonRadiusTablet || bottomRightBlockButtonRadiusDesktop}px`,
	};

	// Button Styles
	const buttonStyles = {
		// Min Height
		// '--ssmb-button-min-height-size': buttonMinHeightDesktop ? `${buttonMinHeightDesktop}px` : 'auto',
		// '--ssmb-button-min-height-size-tablet': buttonMinHeightTablet ? `${buttonMinHeightTablet}px` : `${buttonMinHeightDesktop}px`,
		// '--ssmb-button-min-height-size-mobile': buttonMinHeightMobile ? `${buttonMinHeightMobile}px` : ( buttonMinHeightTablet ? `${buttonMinHeightTablet}px` : `${buttonMinHeightDesktop}px` ),
		'--ssmb-button-min-height-size': buttonMinHeightDesktop ? `${buttonMinHeightDesktop}px` : 'auto',
		'--ssmb-button-min-height-size-tablet': buttonMinHeightTablet ? `${buttonMinHeightTablet}px` : `${buttonMinHeightDesktop}px`,
		'--ssmb-button-min-height-size-mobile': buttonMinHeightMobile ? `${buttonMinHeightMobile}px` : (buttonMinHeightTablet ? `${buttonMinHeightTablet}px` : `${buttonMinHeightDesktop}px`),

		// Width
		'--ssmb-button-width-size': `${buttonWidthDesktop}px`,
		'--ssmb-button-width-size-tablet': `${buttonWidthTablet || buttonWidthDesktop}px`,
		'--ssmb-button-width-size-mobile': `${buttonWidthMobile || buttonWidthTablet || buttonWidthDesktop}px`,

		// Rotation
		'--ssmb-button-icon-rotation': `${buttonIconRotation}deg`,
		'--ssmb-button-icon-rotation-hover': `${hoverButtonIconRotation}deg`,

		// Padding
		'--ssmb-button-padding-top-size': `${buttonPaddingTopDesktop}px`,
		'--ssmb-button-padding-right-size': `${buttonPaddingRightDesktop}px`,
		'--ssmb-button-padding-bottom-size': `${buttonPaddingBottomDesktop}px`,
		'--ssmb-button-padding-left-size': `${buttonPaddingLeftDesktop}px`,

		'--ssmb-button-padding-top-size-tablet': `${buttonPaddingTopTablet || buttonPaddingTopDesktop}px`,
		'--ssmb-button-padding-right-size-tablet': `${buttonPaddingRightTablet || buttonPaddingRightDesktop}px`,
		'--ssmb-button-padding-bottom-size-tablet': `${buttonPaddingBottomTablet || buttonPaddingBottomDesktop}px`,
		'--ssmb-button-padding-left-size-tablet': `${buttonPaddingLeftTablet || buttonPaddingLeftDesktop}px`,

		'--ssmb-button-padding-top-size-mobile': `${buttonPaddingTopMobile || buttonPaddingTopTablet || buttonPaddingTopDesktop}px`,
		'--ssmb-button-padding-right-size-mobile': `${buttonPaddingRightMobile || buttonPaddingRightTablet || buttonPaddingRightDesktop}px`,
		'--ssmb-button-padding-bottom-size-mobile': `${buttonPaddingBottomMobile || buttonPaddingBottomTablet || buttonPaddingBottomDesktop}px`,
		'--ssmb-button-padding-left-size-mobile': `${buttonPaddingLeftMobile || buttonPaddingLeftTablet || buttonPaddingLeftDesktop}px`,

		// Background styles
		'--ssmb-button-background-color': ( buttonBackgroundMode === 'solid' && isValidHexColor( buttonBackgroundColor ) )
			? hexToRgba( buttonBackgroundColor, buttonBackgroundOpacity )
			: ( buttonBackgroundMode === 'gradient' && !buttonBackgroundGradient )
				? hexToRgba( buttonBackgroundColor, buttonBackgroundOpacity ) // Keep solid color when gradient isn't defined
				: 'rgba(79, 78, 215, 1)', // Default fallback solid color if invalid or empty

		'--ssmb-button-background-color-hover': parsedHoverButtonBackgroundColor || hexToRgba( buttonBackgroundColor, buttonBackgroundOpacity ),

		'--ssmb-button-background-gradient': ( buttonBackgroundMode === 'gradient' && buttonBackgroundGradient )
			? buttonBackgroundGradient // Apply gradient only if it’s defined
			: '', // Empty string if no gradient is defined or gradient is reset

		'--ssmb-button-icon-color': parsedIconColor,
		'--ssmb-button-icon-color-hover': parsedHoverIconColor,

		// Icon Size
		'--ssmb-button-icon-size': `${buttonIconSizeDesktop}px`,
		'--ssmb-button-icon-size-tablet': `${buttonIconSizeTablet || buttonIconSizeDesktop}px`,
		'--ssmb-button-icon-size-mobile': `${buttonIconSizeMobile || buttonIconSizeTablet || buttonIconSizeDesktop}px`,

		'--ssmb-button-icon-gap': `${buttonIconGapDesktop}px`,
		'--ssmb-button-icon-gap-tablet': `${buttonIconGapTablet || buttonIconGapDesktop}px`,
		'--ssmb-button-icon-gap-mobile': `${buttonIconGapMobile || buttonIconGapTablet || buttonIconGapDesktop}px`,

		// Border
		'--ssmb-button-border-top-width': `${buttonBorderTopWidthDesktop}px`,
		'--ssmb-button-border-right-width': `${buttonBorderRightWidthDesktop}px`,
		'--ssmb-button-border-bottom-width': `${buttonBorderBottomWidthDesktop}px`,
		'--ssmb-button-border-left-width': `${buttonBorderLeftWidthDesktop}px`,

		'--ssmb-button-border-top-width-tablet': `${buttonBorderTopWidthTablet || buttonBorderTopWidthDesktop}px`,
		'--ssmb-button-border-right-width-tablet': `${buttonBorderRightWidthTablet || buttonBorderRightWidthDesktop}px`,
		'--ssmb-button-border-bottom-width-tablet': `${buttonBorderBottomWidthTablet || buttonBorderBottomWidthDesktop}px`,
		'--ssmb-button-border-left-width-tablet': `${buttonBorderLeftWidthTablet || buttonBorderLeftWidthDesktop}px`,

		'--ssmb-button-border-top-width-mobile': `${buttonBorderTopWidthMobile || buttonBorderTopWidthTablet || buttonBorderTopWidthDesktop}px`,
		'--ssmb-button-border-right-width-mobile': `${buttonBorderRightWidthMobile || buttonBorderRightWidthTablet || buttonBorderRightWidthDesktop}px`,
		'--ssmb-button-border-bottom-width-mobile': `${buttonBorderBottomWidthMobile || buttonBorderBottomWidthTablet || buttonBorderBottomWidthDesktop}px`,
		'--ssmb-button-border-left-width-mobile': `${buttonBorderLeftWidthMobile || buttonBorderLeftWidthTablet || buttonBorderLeftWidthDesktop}px`,

		// Border Hover
		'--ssmb-button-border-top-width-hover': `${hoverButtonBorderTopWidthDesktop || buttonBorderTopWidthDesktop}px`,
		'--ssmb-button-border-right-width-hover': `${hoverButtonBorderRightWidthDesktop || buttonBorderRightWidthDesktop}px`,
		'--ssmb-button-border-bottom-width-hover': `${hoverButtonBorderBottomWidthDesktop || buttonBorderBottomWidthDesktop}px`,
		'--ssmb-button-border-left-width-hover': `${hoverButtonBorderLeftWidthDesktop || buttonBorderLeftWidthDesktop}px`,

		'--ssmb-button-border-top-width-hover-tablet': `${hoverButtonBorderTopWidthTablet || buttonBorderTopWidthTablet || hoverButtonBorderTopWidthDesktop || buttonBorderTopWidthDesktop}px`,
		'--ssmb-button-border-right-width-hover-tablet': `${hoverButtonBorderRightWidthTablet || buttonBorderRightWidthTablet || hoverButtonBorderRightWidthDesktop || buttonBorderRightWidthDesktop}px`,
		'--ssmb-button-border-bottom-width-hover-tablet': `${hoverButtonBorderBottomWidthTablet || buttonBorderBottomWidthTablet || hoverButtonBorderBottomWidthDesktop || buttonBorderBottomWidthDesktop}px`,
		'--ssmb-button-border-left-width-hover-tablet': `${hoverButtonBorderLeftWidthTablet || buttonBorderLeftWidthTablet || hoverButtonBorderLeftWidthDesktop || buttonBorderLeftWidthDesktop}px`,

		'--ssmb-button-border-top-width-hover-mobile': `${hoverButtonBorderTopWidthMobile || buttonBorderTopWidthMobile || hoverButtonBorderTopWidthTablet || buttonBorderTopWidthTablet || hoverButtonBorderTopWidthDesktop || buttonBorderTopWidthDesktop}px`,
		'--ssmb-button-border-right-width-hover-mobile': `${hoverButtonBorderRightWidthMobile || buttonBorderRightWidthMobile || hoverButtonBorderRightWidthTablet || buttonBorderRightWidthTablet || hoverButtonBorderRightWidthDesktop || buttonBorderRightWidthDesktop}px`,
		'--ssmb-button-border-bottom-width-hover-mobile': `${hoverButtonBorderBottomWidthMobile || buttonBorderBottomWidthMobile || hoverButtonBorderBottomWidthTablet || buttonBorderBottomWidthTablet || hoverButtonBorderBottomWidthDesktop || buttonBorderBottomWidthDesktop}px`,
		'--ssmb-button-border-left-width-hover-mobile': `${hoverButtonBorderLeftWidthMobile || buttonBorderLeftWidthMobile || hoverButtonBorderLeftWidthTablet || buttonBorderLeftWidthTablet || hoverButtonBorderLeftWidthDesktop || buttonBorderLeftWidthDesktop}px`,

		'--ssmb-button-border-color': parsedButtonBorderColor,
		'--ssmb-button-border-color-hover': parsedHoverButtonBorderColor,

		// Box Shadow
		'--ssmb-button-box-shadow': `${buttonBoxShadowHOffset}px ${buttonBoxShadowVOffset}px ${buttonBoxShadowBlur}px ${buttonBoxShadowSpread}px rgba(${hexToRgb( buttonBoxShadowColor )}, ${buttonBoxShadowOpacity})`,
		'--ssmb-button-box-shadow-hover':
            `${hoverButtonBoxShadowHOffset || buttonBoxShadowHOffset}px
             ${hoverButtonBoxShadowVOffset || buttonBoxShadowVOffset}px
             ${hoverButtonBoxShadowBlur || buttonBoxShadowBlur}px
             ${hoverButtonBoxShadowSpread || buttonBoxShadowSpread}px
             rgba(${parsedHoverBoxShadowColor}, ${hoverButtonBoxShadowOpacity || buttonBoxShadowOpacity})`,

		// Radius
		'--ssmb-top-left-button-radius': `${topLeftButtonRadiusDesktop}px`,
		'--ssmb-top-right-button-radius': `${topRightButtonRadiusDesktop}px`,
		'--ssmb-bottom-left-button-radius': `${bottomLeftButtonRadiusDesktop}px`,
		'--ssmb-bottom-right-button-radius': `${bottomRightButtonRadiusDesktop}px`,

		'--ssmb-top-left-button-radius-tablet': `${topLeftButtonRadiusTablet || topLeftButtonRadiusDesktop}px`,
		'--ssmb-top-right-button-radius-tablet': `${topRightButtonRadiusTablet || topRightButtonRadiusDesktop}px`,
		'--ssmb-bottom-left-button-radius-tablet': `${bottomLeftButtonRadiusTablet || bottomLeftButtonRadiusDesktop}px`,
		'--ssmb-bottom-right-button-radius-tablet': `${bottomRightButtonRadiusTablet || bottomRightButtonRadiusDesktop}px`,

		'--ssmb-top-left-button-radius-mobile': `${topLeftButtonRadiusMobile || topLeftButtonRadiusTablet || topLeftButtonRadiusDesktop}px`,
		'--ssmb-top-right-button-radius-mobile': `${topRightButtonRadiusMobile || topRightButtonRadiusTablet || topRightButtonRadiusDesktop}px`,
		'--ssmb-bottom-left-button-radius-mobile': `${bottomLeftButtonRadiusMobile || bottomLeftButtonRadiusTablet || bottomLeftButtonRadiusDesktop}px`,
		'--ssmb-bottom-right-button-radius-mobile': `${bottomRightButtonRadiusMobile || bottomRightButtonRadiusTablet || bottomRightButtonRadiusDesktop}px`,
	};

	return { buttonOverlayStyles, blockButtonStyles, buttonStyles };
};
