<?php

blocksy_theme_get_dynamic_styles('page-title', [
	'css' => $css,
	'mobile_css' => $mobile_css,
	'tablet_css' => $tablet_css
]);

blocksy_theme_get_dynamic_styles('posts-listing', [
	'css' => $css,
	'mobile_css' => $mobile_css,
	'tablet_css' => $tablet_css
]);

blocksy_theme_get_dynamic_styles('woocommerce', [
	'css' => $css,
	'mobile_css' => $mobile_css,
	'tablet_css' => $tablet_css
]);

// Color palette
$colorPalette = blocksy_get_colors( get_theme_mod( 'colorPalette',
	[
		'color1' => [ 'color' => '#3eaf7c' ],
		'color2' => [ 'color' => '#33a370' ],
		'color3' => [ 'color' => 'rgba(44, 62, 80, 0.9)' ],
		'color4' => [ 'color' => 'rgba(44, 62, 80, 1)' ],
		'color5' => [ 'color' => '#ffffff' ],
	]
));

$css->put(
	':root',
	"--paletteColor1: {$colorPalette['color1']}"
);

$css->put(
	':root',
	"--paletteColor2: {$colorPalette['color2']}"
);

$css->put(
	':root',
	"--paletteColor3: {$colorPalette['color3']}"
);

$css->put(
	':root',
	"--paletteColor4: {$colorPalette['color4']}"
);

$css->put(
	':root',
	"--paletteColor5: {$colorPalette['color5']}"
);


// Colors
$font_color = blocksy_get_colors( get_theme_mod( 'fontColor',
	[ 'default' => [ 'color' => 'var(--paletteColor3)' ] ]
));

$css->put(
	':root',
	"--fontColor: {$font_color['default']}"
);

$link_color = blocksy_get_colors( get_theme_mod( 'linkColor',
	[
		'default' => [ 'color' => 'var(--paletteColor3)' ],
		'hover' => [ 'color' => 'var(--paletteColor1)' ],
	]
));

$css->put(
	':root',
	"--linkInitialColor: {$link_color['default']}"
);

$css->put(
	':root',
	"--linkHoverColor: {$link_color['hover']}"
);


$button_color = blocksy_get_colors( get_theme_mod( 'buttonColor',
	[
		'default' => [ 'color' => 'var(--paletteColor1)' ],
		'hover' => [ 'color' => 'var(--paletteColor2)' ],
	]
));

$css->put(
	':root',
	"--buttonInitialColor: {$button_color['default']}"
);

$css->put(
	':root',
	"--buttonHoverColor: {$button_color['hover']}"
);

$site_background = blocksy_get_colors( get_theme_mod( 'siteBackground',
	[ 'default' => [ 'color' => '#f8f9fb' ] ]
));

$css->put(
	':root',
	"--siteBackground: {$site_background['default']}"
);


// Layout
$max_site_width = get_theme_mod( 'maxSiteWidth', 1290 );
$css->put( ':root', '--maxSiteWidth: ' . $max_site_width . 'px' );

blocksy_output_responsive(
	$css, $tablet_css, $mobile_css,
	':root', 'contentAreaSpacing',
	get_theme_mod('contentAreaSpacing', [
		'mobile' => '50px',
		'tablet' => '60px',
		'desktop' => '80px',
	]), ''
);

$narrowContainerWidth = get_theme_mod( 'narrowContainerWidth', 60 );
$css->put( ':root', '--narrowContainerWidth: ' . $narrowContainerWidth . '%' );

$wideOffset = get_theme_mod( 'wideOffset', 130 );
$css->put( ':root', '--wideOffset: ' . $wideOffset . 'px' );


// Logo
blocksy_output_responsive(
	$css, $tablet_css, $mobile_css,
	':root', 'logoMaxHeight',
	get_theme_mod('logoMaxHeight', [
		'mobile' => 50,
		'tablet' => 50,
		'desktop' => 50,
	])
);

blocksy_output_responsive(
	$css, $tablet_css, $mobile_css,
	':root', 'headerLogoSpacing',
	get_theme_mod('headerLogoSpacing', [
		'mobile' => '35px',
		'tablet' => '35px',
		'desktop' => '35px',
	]), ''
);


// Header
$headerBackground = blocksy_get_colors( get_theme_mod(
	'headerBackground',
	[ 'default' => [ 'color' => '#ffffff' ] ]
));

$css->put(
	':root',
	"--headerBackground: {$headerBackground['default']}"
);

$headerShadow = blocksy_get_colors( get_theme_mod(
	'headerShadow',
	[ 'default' => [ 'color' => 'rgba(210, 213, 218, 0.15)' ] ]
));

$css->put(
	':root',
	"--headerShadow: {$headerShadow['default']}"
);

blocksy_output_responsive(
	$css, $tablet_css, $mobile_css,
	':root', 'headerSpacing',
	get_theme_mod('headerSpacing', [
		'mobile' => '35px',
		'tablet' => '35px',
		'desktop' => '45px',
	]), ''
);


// main menu
$menuFontColor = blocksy_get_colors( get_theme_mod(
	'menuFontColor',
	[
		'default' => [ 'color' => 'var(--paletteColor3)' ],
		'hover' => [ 'color' => 'var(--paletteColor1)' ],
	]
));

$css->put(
	'.primary-menu',
	"--menuInitialColor: {$menuFontColor['default']}"
);

$css->put(
	'.primary-menu',
	"--menuHoverColor: {$menuFontColor['hover']}"
);

$headerMenuItemsSpacing = get_theme_mod( 'headerMenuItemsSpacing', 25 );
$css->put(
	'.header-desktop',
	'--menuItemsSpacing: ' . $headerMenuItemsSpacing . 'px'
);


$navSectionBorder = blocksy_get_colors( get_theme_mod(
	'navSectionBorder',
	[ 'default' => [ 'color' => '#f4f5f6' ] ]
));

$css->put(
	':root',
	"--navSectionBorder: {$navSectionBorder['default']}"
);


$navSectionBackground = blocksy_get_colors( get_theme_mod(
	'navSectionBackground',
	[ 'default' => [ 'color' => 'rgba(255,255,255, 0)' ] ]
));

$css->put(
	':root',
	"--navSectionBackground: {$navSectionBackground['default']}"
);

$dropdownFontColor = blocksy_get_colors( get_theme_mod(
	'dropdownFontColor',
	[
		'default' => [ 'color' => '#ffffff' ],
		'hover' => [ 'color' => 'var(--paletteColor1)' ],
	]
));

$css->put(
	'.primary-menu .sub-menu',
	"--menuInitialColor: {$dropdownFontColor['default']}"
);

$css->put(
	'.primary-menu .sub-menu',
	"--menuHoverColor: {$dropdownFontColor['hover']}"
);

blocksy_output_responsive(
	$css, $tablet_css, $mobile_css,
	':root', 'navSectionSpacing',
	get_theme_mod('navSectionSpacing', [
		'mobile' => '15px',
		'tablet' => '15px',
		'desktop' => '15px',
	]), ''
);

$dropdownMenuWidth = get_theme_mod( 'dropdownMenuWidth', 200 );
$css->put(
	':root',
	'--dropdownMenuWidth: ' . $dropdownMenuWidth . 'px'
);

$dropDownBackground = blocksy_get_colors( get_theme_mod(
	'dropDownBackground',
	[ 'default' => [ 'color' => '#29333C' ] ]
));

$css->put(
	':root',
	"--dropDownBackground: {$dropDownBackground['default']}"
);


// Top bar
$topBarFontColor = blocksy_get_colors( get_theme_mod(
	'topBarFontColor',
	[ 'default' => [ 'color' => 'rgba(255, 255, 255, 0.8)' ] ]
));

$css->put(
	':root',
	"--topBarFontColor: {$topBarFontColor['default']}"
);

$topBarLinkColor = blocksy_get_colors( get_theme_mod(
	'topBarLinkColor',
	[
		'default' => [ 'color' => 'rgba(255, 255, 255, 0.8)' ],
		'hover' => [ 'color' => 'var(--paletteColor1)' ],
	]
));

$css->put(
	'.header-top-bar',
	"--linkInitialColor: {$topBarLinkColor['default']}"
);

$css->put(
	'.header-top-bar',
	"--linkHoverColor: {$topBarLinkColor['hover']}"
);

$topBarBackground = blocksy_get_colors( get_theme_mod(
	'topBarBackground',
	[ 'default' => [ 'color' => '#29333d' ] ]
));

$css->put(
	':root',
	"--topBarBackground: {$topBarBackground['default']}"
);

blocksy_output_responsive(
	$css, $tablet_css, $mobile_css,
	'.header-top-bar-menu', 'menuItemsSpacing',
	get_theme_mod('topBarMenuItemsSpacing', [
		'mobile' => 20,
		'tablet' => 20,
		'desktop' => 20,
	])
);

blocksy_output_responsive(
	$css, $tablet_css, $mobile_css,
	':root', 'topBarSpacing',
	get_theme_mod( 'topBarSpacing', '13px' ), ''
);

// Mobile header
blocksy_output_responsive(
	$css, $tablet_css, $mobile_css,
	':root', 'mobileHeaderSpacing',
	get_theme_mod('mobileHeaderSpacing', [
		'mobile' => '20px',
		'tablet' => '20px',
		'desktop' => '20px',
	]), ''
);

$mobileHeaderBackground = blocksy_get_colors( get_theme_mod(
	'mobileHeaderBackground',
	[ 'default' => [ 'color' => 'var(--paletteColor5)' ] ]
));

$css->put(
	':root',
	"--mobileHeaderBackground: {$mobileHeaderBackground['default']}"
);


$mobileMenuIconColor = blocksy_get_colors( get_theme_mod(
	'mobileMenuIconColor',
	[
		'default' => [ 'color' => 'var(--paletteColor3)' ],
		'hover' => [ 'color' => 'var(--paletteColor1)' ],
	]
));

$css->put(
	'.mobile-menu-toggle',
	"--linkInitialColor: {$mobileMenuIconColor['default']}"
);

$css->put(
	'.mobile-menu-toggle',
	"--linkHoverColor: {$mobileMenuIconColor['hover']}"
);


$mobileMenuLinkColor = blocksy_get_colors( get_theme_mod(
	'mobileMenuLinkColor',
	[
		'default' => [ 'color' => '#ffffff' ],
		'hover' => [ 'color' => 'var(--paletteColor1)' ],
	]
));

$css->put(
	'.mobile-menu',
	"--menuInitialColor: {$mobileMenuLinkColor['default']}"
);

$css->put(
	'.mobile-menu',
	"--menuHoverColor: {$mobileMenuLinkColor['hover']}"
);

$mobileMenuBackground = blocksy_get_colors( get_theme_mod(
	'mobileMenuBackground',
	[ 'default' => [ 'color' => 'rgba(18, 21, 25, 0.98)' ] ]
));

$css->put(
	'.main-navigation',
	"--modalBackground: {$mobileMenuBackground['default']}"
);


// Header Search Modal
$searchHeaderIconColor = blocksy_get_colors( get_theme_mod(
	'searchHeaderIconColor',
	[
		'default' => [ 'color' => 'var(--paletteColor3)' ],
		'hover' => [ 'color' => 'var(--paletteColor1)' ],
	]
));

$css->put(
	'.search-button',
	"--linkInitialColor: {$searchHeaderIconColor['default']}"
);

$css->put(
	'.search-button',
	"--linkHoverColor: {$searchHeaderIconColor['hover']}"
);


$searchHeaderBackground = blocksy_get_colors( get_theme_mod(
	'searchHeaderBackground',
	[ 'default' => [ 'color' => 'rgba(18, 21, 25, 0.98)' ] ]
));

$css->put(
	'#search-modal',
	"--modalBackground: {$searchHeaderBackground['default']}"
);

$searchHeaderLinkColor = blocksy_get_colors( get_theme_mod(
	'searchHeaderLinkColor',
	[
		'default' => [ 'color' => 'var(--paletteColor5)' ],
		'hover' => [ 'color' => 'var(--paletteColor1)' ],
	]
));

$css->put(
	'#search-modal',
	"--linkInitialColor: {$searchHeaderLinkColor['default']}"
);

$css->put(
	'#search-modal',
	"--linkHoverColor: {$searchHeaderLinkColor['hover']}"
);


// Header Cart
$cartHeaderIconColor = blocksy_get_colors( get_theme_mod(
	'cartHeaderIconColor',
	[
		'default' => [ 'color' => 'var(--paletteColor3)' ],
		'hover' => [ 'color' => 'var(--paletteColor1)' ],
	]
));

$css->put(
	'.ct-cart-icon',
	"--linkInitialColor: {$cartHeaderIconColor['default']}"
);

$css->put(
	'.ct-cart-icon',
	"--linkHoverColor: {$cartHeaderIconColor['hover']}"
);


$cartBadgeColor = blocksy_get_colors( get_theme_mod(
	'cartBadgeColor',
	[
		'background' => [ 'color' => 'var(--paletteColor1)' ],
		'text' => [ 'color' => '#ffffff' ],
	]
));

$css->put(
	'.ct-header-cart',
	"--cartBadgeBackground: {$cartBadgeColor['background']}"
);

$css->put(
	'.ct-header-cart',
	"--cartBadgeText: {$cartBadgeColor['text']}"
);


$cartFontColor = blocksy_get_colors( get_theme_mod(
	'cartFontColor',
	[
		'default' => [ 'color' => '#ffffff' ],
		'hover' => [ 'color' => 'var(--paletteColor1)' ],
	]
));

$css->put(
	'.ct-cart-content',
	"--linkInitialColor: {$cartFontColor['default']}"
);

$css->put(
	'.ct-cart-content',
	"--linkHoverColor: {$cartFontColor['hover']}"
);

$cartDropDownBackground = blocksy_get_colors( get_theme_mod(
	'cartDropDownBackground',
	[ 'default' => [ 'color' => '#29333C' ] ]
));

$css->put(
	'.ct-cart-content',
	"--cartDropDownBackground: {$cartDropDownBackground['default']}"
);


// Sidebar
$sidebar_width = get_theme_mod( 'sidebarWidth', '27' );
$css->put( ':root', '--sidebarWidth: ' . $sidebar_width . '%' );

$css->put( ':root', '--sidebarWidthNoUnit: ' . intval($sidebar_width) );


$sidebarGap = blocksy_get_with_percentage( 'sidebarGap', '4%' );
$css->put( ':root', '--sidebarGap: ' . $sidebarGap );

blocksy_output_responsive(
	$css, $tablet_css, $mobile_css,
	':root', 'sidebarWidgetsTitleSize',
	get_theme_mod('sidebarWidgetsTitleSize', [
		'mobile' => 18,
		'tablet' => 18,
		'desktop' => 18,
	])
);


$sidebar_widgets_title_color = blocksy_get_colors( get_theme_mod(
	'sidebarWidgetsTitleColor',
	[ 'default' => [ 'color' => 'var(--paletteColor4)' ] ]
));

$css->put(
	'.ct-sidebar',
	"--widgetsTitleColor: {$sidebar_widgets_title_color['default']}"
);

$sidebar_widgets_font_color = blocksy_get_colors( get_theme_mod(
	'sidebarWidgetsFontColor',
	[ 'default' => [ 'color' => 'var(--paletteColor3)' ] ]
));

$css->put(
	'.ct-sidebar',
	"--widgetsFontColor: {$sidebar_widgets_font_color['default']}"
);

$sidebar_widgets_link = blocksy_get_colors( get_theme_mod(
	'sidebarWidgetsLink',
	[
		'default' => [ 'color' => 'var(--paletteColor3)' ],
		'hover' => [ 'color' => 'var(--paletteColor1)' ],
	]
));

$css->put(
	'.ct-sidebar',
	"--linkInitialColor: {$sidebar_widgets_link['default']}"
);

$css->put(
	'.ct-sidebar',
	"--linkHoverColor: {$sidebar_widgets_link['hover']}"
);


$sidebar_background_color = blocksy_get_colors( get_theme_mod(
	'sidebarBackgroundColor',
	[ 'default' => [ 'color' => 'var(--paletteColor5)' ] ]
));

$css->put(
	':root',
	"--sidebarBackgroundColor: {$sidebar_background_color['default']}"
);

$sidebarBorderColor = blocksy_get_colors( get_theme_mod(
	'sidebarBorderColor',
	[ 'default' => [ 'color' => 'rgba(224, 229, 235, 0.8)' ] ]
));

$css->put(
	':root',
	"--sidebarBorderColor: {$sidebarBorderColor['default']}"
);

$sidebarBorderSize = get_theme_mod( 'sidebarBorderSize', 0 );
$css->put( ':root', '--sidebarBorderSize: ' . $sidebarBorderSize . 'px' );


$sidebarDividerColor = blocksy_get_colors( get_theme_mod(
	'sidebarDividerColor',
	[ 'default' => [ 'color' => 'rgba(224, 229, 235, 0.8)' ] ]
));

$css->put(
	':root',
	"--sidebarDividerColor: {$sidebarDividerColor['default']}"
);

$sidebarDividerSize = get_theme_mod( 'sidebarDividerSize', 1 );
$css->put( ':root', '--sidebarDividerSize: ' . $sidebarDividerSize . 'px' );


blocksy_output_responsive(
	$css, $tablet_css, $mobile_css,
	':root', 'sidebarWidgetsSpacing',
	get_theme_mod('sidebarWidgetsSpacing', [
		'mobile' => 30,
		'tablet' => 40,
		'desktop' => 60,
	])
);

blocksy_output_responsive(
	$css, $tablet_css, $mobile_css,
	':root', 'sidebarInnerSpacing',
	get_theme_mod('sidebarInnerSpacing', [
		'mobile' => 35,
		'tablet' => 35,
		'desktop' => 35,
	])
);


// Pagination
blocksy_output_responsive(
	$css, $tablet_css, $mobile_css,
	':root', 'paginationSpacing',
	get_theme_mod('paginationSpacing', [
		'mobile' => 50,
		'tablet' => 60,
		'desktop' => 80,
	])
);

$paginationFontColor = blocksy_get_colors( get_theme_mod(
	'paginationFontColor',
	[ 'default' => [ 'color' => 'var(--paletteColor3)' ] ]
));

$css->put(
	':root',
	"--paginationFontColor: {$paginationFontColor['default']}"
);


$paginationAccentColor = blocksy_get_colors( get_theme_mod(
	'paginationAccentColor',
	[
		'default' => [ 'color' => 'var(--paletteColor1)' ],
		'hover' => [ 'color' => 'var(--paletteColor2)' ],
	]
));

$css->put(
	':root',
	"--paginationAccentInitialColor: {$paginationAccentColor['default']}"
);

$css->put(
	':root',
	"--paginationAccentHoverColor: {$paginationAccentColor['hover']}"
);


$paginationBorderColor = blocksy_get_colors( get_theme_mod(
	'paginationBorderColor',
	[ 'default' => [ 'color' => 'rgba(224, 229, 235, 0.5)' ] ]
));

$css->put(
	':root',
	"--paginationBorderColor: {$paginationBorderColor['default']}"
);

// Related Posts
blocksy_output_responsive(
	$css, $tablet_css, $mobile_css,
	':root', 'relatedPostsContainerSpacing',
	get_theme_mod('relatedPostsContainerSpacing', [
		'mobile' => '30px',
		'tablet' => '50px',
		'desktop' => '70px',
	]), ''
);

$related_posts_label_color = blocksy_get_colors( get_theme_mod(
	'relatedPostsLabelColor',
	[ 'default' => [ 'color' => 'var(--paletteColor3)' ] ]
));

$css->put(
	':root',
	"--relatedPostsLabelColor: {$related_posts_label_color['default']}"
);


$related_posts_link_color = blocksy_get_colors( get_theme_mod(
	'relatedPostsLinkColor',
	[
		'default' => [ 'color' => 'var(--paletteColor3)' ],
		'hover' => [ 'color' => 'var(--paletteColor1)' ],
	]
));

$css->put(
	'.ct-related-posts',
	"--linkInitialColor: {$related_posts_link_color['default']}"
);

$css->put(
	'.ct-related-posts',
	"--linkHoverColor: {$related_posts_link_color['hover']}"
);


$related_posts_meta_color = blocksy_get_colors( get_theme_mod(
	'relatedPostsMetaColor',
	[ 'default' => [ 'color' => '#667380' ] ]
));

$css->put(
	':root',
	"--relatedPostsMetaColor: {$related_posts_meta_color['default']}"
);


$related_posts_container_color = blocksy_get_colors( get_theme_mod(
	'relatedPostsContainerColor',
	[ 'default' => [ 'color' => '#eff1f5' ] ]
));

$css->put(
	':root',
	"--relatedPostsContainerColor: {$related_posts_container_color['default']}"
);


// Posts Navigation
blocksy_output_responsive(
	$css, $tablet_css, $mobile_css,
	':root', 'postNavSpacing',
	get_theme_mod('postNavSpacing', [
		'mobile' => '40px',
		'tablet' => '60px',
		'desktop' => '80px',
	]), ''
);


// Share Box
blocksy_output_responsive( $css, $tablet_css, $mobile_css,
	':root', 'topShareBoxSpacing',
	get_theme_mod('topShareBoxSpacing', [
		'mobile' => '30px',
		'tablet' => '50px',
		'desktop' => '70px',
	]), ''
);

blocksy_output_responsive( $css, $tablet_css, $mobile_css,
	':root', 'bottomShareBoxSpacing',
	get_theme_mod('bottomShareBoxSpacing', [
		'mobile' => '30px',
		'tablet' => '50px',
		'desktop' => '70px',
	]), ''
);


// Author Box
blocksy_output_responsive( $css, $tablet_css, $mobile_css,
	':root', 'singleAuthorBoxSpacing',
	get_theme_mod('singleAuthorBoxSpacing', [
		'mobile' => '40px',
		'tablet' => '40px',
		'desktop' => '40px',
	]), ''
);

$singleAuthorBoxBackground = blocksy_get_colors( get_theme_mod(
	'singleAuthorBoxBackground',
	[ 'default' => [ 'color' => Blocksy_Css_Injector::get_skip_rule_keyword() ] ]
));

$css->put(
	':root',
	"--singleAuthorBoxBackground: {$singleAuthorBoxBackground['default']}"
);

$singleAuthorBoxBorder = blocksy_get_colors( get_theme_mod(
	'singleAuthorBoxBorder',
	[ 'default' => [ 'color' => '#e8ebf0' ] ]
));

$css->put(
	':root',
	"--singleAuthorBoxBorder: {$singleAuthorBoxBorder['default']}"
);

$singleAuthorBoxShadow = blocksy_get_colors( get_theme_mod(
	'singleAuthorBoxShadow',
	[ 'default' => [ 'color' => 'rgba(210, 213, 218, 0.4)' ] ]
));

$css->put(
	':root',
	"--singleAuthorBoxShadow: {$singleAuthorBoxShadow['default']}"
);


// Footer
$footer_widgets_title_color = blocksy_get_colors( get_theme_mod(
	'footerWidgetsTitleColor',
	[ 'default' => [ 'color' => 'var(--paletteColor4)' ] ]
));

$css->put(
	'.footer-widgets',
	"--widgetsTitleColor: {$footer_widgets_title_color['default']}"
);

$footer_widgets_font_color = blocksy_get_colors( get_theme_mod(
	'footerWidgetsFontColor',
	[ 'default' => [ 'color' => 'var(--paletteColor3)' ] ]
));

$css->put(
	'.footer-widgets',
	"--widgetsFontColor: {$footer_widgets_font_color['default']}"
);


$footer_widgets_link = blocksy_get_colors( get_theme_mod(
	'footerWidgetsLink',
	[
		'default' => [ 'color' => 'var(--paletteColor3)' ],
		'hover' => [ 'color' => 'var(--paletteColor1)' ],
	]
));

$css->put(
	'.footer-widgets',
	"--linkInitialColor: {$footer_widgets_link['default']}"
);

$css->put(
	'.footer-widgets',
	"--linkHoverColor: {$footer_widgets_link['hover']}"
);


$widgets_area_background = blocksy_get_colors( get_theme_mod(
	'widgetsAreaBackground',
	[ 'default' => [ 'color' => '#f4f5f8' ] ]
));

$css->put(
	':root',
	"--widgetsAreaBackground: {$widgets_area_background['default']}"
);


$widgets_area_divider = blocksy_get_colors( get_theme_mod(
	'widgetsAreaDivider',
	[ 'default' => [ 'color' => '#dddddd' ] ]
));

$css->put(
	':root',
	"--widgetsAreaDivider: {$widgets_area_divider['default']}"
);


blocksy_output_responsive(
	$css, $tablet_css, $mobile_css,
	':root', 'widgetAreaSpacing',
	get_theme_mod('widgetAreaSpacing', [
		'mobile' => '40px',
		'tablet' => '50px',
		'desktop' => '70px',
	]), ''
);


// Footer Primary Bar
blocksy_output_responsive(
	$css, $tablet_css, $mobile_css,
	'.footer-menu', 'menuItemsSpacing',
	get_theme_mod('footerMenuItemsSpacing', [
		'mobile' => 20,
		'tablet' => 20,
		'desktop' => 20,
	])
);


$footer_primary_color = blocksy_get_colors( get_theme_mod(
	'footerPrimaryColor',
	[ 'default' => [ 'color' => 'var(--paletteColor3)' ] ]
));

$css->put(
	':root',
	"--footerPrimaryColor: {$footer_primary_color['default']}"
);


$footer_primary_link = blocksy_get_colors( get_theme_mod(
	'footerPrimaryLink',
	[
		'default' => [ 'color' => 'var(--paletteColor3)' ],
		'hover' => [ 'color' => 'var(--paletteColor1)' ],
	]
));

$css->put(
	'.footer-primary-area',
	"--linkInitialColor: {$footer_primary_link['default']}"
);

$css->put(
	'.footer-primary-area',
	"--linkHoverColor: {$footer_primary_link['hover']}"
);


$footer_primary_background = blocksy_get_colors( get_theme_mod(
	'footerPrimaryBackground',
	[ 'default' => [ 'color' => '#eef0f4' ] ]
));

$css->put(
	':root',
	"--footerPrimaryBackground: {$footer_primary_background['default']}"
);

blocksy_output_responsive(
	$css, $tablet_css, $mobile_css,
	':root', 'footerPrimarySpacing',
	get_theme_mod('footerPrimarySpacing', [
		'mobile' => '30px',
		'tablet' => '30px',
		'desktop' => '30px',
	]), ''
);


// Copyright
$copyright_text = blocksy_get_colors( get_theme_mod(
	'copyrightText',
	[ 'default' => [ 'color' => 'var(--paletteColor3)' ] ]
));

$css->put(
	':root',
	"--copyrightText: {$copyright_text['default']}"
);


$copyright_backgroundn = blocksy_get_colors( get_theme_mod(
	'copyrightBackground',
	[ 'default' => [ 'color' => '#eef0f4' ] ]
));

$css->put(
	':root',
	"--copyrightBackground: {$copyright_backgroundn['default']}"
);

blocksy_output_responsive(
	$css, $tablet_css, $mobile_css,
	':root', 'copyrightSpacing',
	get_theme_mod('copyrightSpacing', [
		'mobile' => '15px',
		'tablet' => '25px',
		'desktop' => '25px',
	]), ''
);


// To top button
$topButtonIconColor = blocksy_get_colors( get_theme_mod(
	'topButtonIconColor',
	[
		'default' => [ 'color' => '#ffffff' ],
		'hover' => [ 'color' => '#ffffff' ],
	]
));

$css->put(
	'.ct-back-to-top',
	"--linkInitialColor: {$topButtonIconColor['default']}"
);

$css->put(
	'.ct-back-to-top',
	"--linkHoverColor: {$topButtonIconColor['hover']}"
);


$topButtonShapeBackground = blocksy_get_colors( get_theme_mod(
	'topButtonShapeBackground',
	[
		'default' => [ 'var(--paletteColor3)' ],
		'hover' => [ 'var(--paletteColor4)' ],
	]
));

$css->put(
	'.ct-back-to-top',
	"--buttonInitialColor: {$topButtonShapeBackground['default']}"
);

$css->put(
	'.ct-back-to-top',
	"--buttonHoverColor: {$topButtonShapeBackground['hover']}"
);


// Forms
$formLabelColor = blocksy_get_colors( get_theme_mod(
	'formLabelColor',
	[ 'default' => [ 'color' => 'var(--paletteColor3)' ] ]
));

$css->put(
	':root',
	"--formLabelColor: {$formLabelColor['default']}"
);

$formBorderColor = blocksy_get_colors( get_theme_mod(
	'formBorderColor',
	[
		'default' => [ 'color' => 'rgba(232, 235, 240, 1)' ],
		'focus' => [ 'color' => 'var(--paletteColor1)' ],
	]
));

$css->put(
	':root',
	"--formBorderInitialColor: {$formBorderColor['default']}"
);

$css->put(
	':root',
	"--formBorderFocusColor: {$formBorderColor['focus']}"
);


$formBackgroundColor = blocksy_get_colors( get_theme_mod(
	'formBackgroundColor',
	[
		'default' => [ 'color' => Blocksy_Css_Injector::get_skip_rule_keyword() ],
		'focus' => [ 'color' => Blocksy_Css_Injector::get_skip_rule_keyword() ],
	]
));

$css->put(
	':root',
	"--formBackgroundInitialColor: {$formBackgroundColor['default']}"
);

$css->put(
	':root',
	"--formBackgroundFocusColor: {$formBackgroundColor['focus']}"
);


$formTextColor = blocksy_get_colors( get_theme_mod(
	'formTextColor',
	[
		'default' => [ 'color' => 'var(--paletteColor3)' ],
		'focus' => [ 'color' => 'var(--paletteColor3)' ],
	]
));

$css->put(
	':root',
	"--formTextInitialColor: {$formTextColor['default']}"
);

$css->put(
	':root',
	"--formTextFocusColor: {$formTextColor['focus']}"
);

$formFontSize = get_theme_mod( 'formFontSize', 15 );
$css->put( ':root', '--formFontSize: ' . $formFontSize . 'px' );


$formBorderSize = get_theme_mod( 'formBorderSize', 2 );
$css->put( ':root', '--formBorderSize: ' . $formBorderSize . 'px' );


$formInputHeight = get_theme_mod( 'formInputHeight', 45 );
$css->put( ':root', '--formInputHeight: ' . $formInputHeight . 'px' );


$formTextAreaHeight = get_theme_mod( 'formTextAreaHeight', 170 );
$css->put( ':root', '--formTextAreaHeight: ' . $formTextAreaHeight . 'px' );


// radio & checkbox
$radioCheckboxColor = blocksy_get_colors( get_theme_mod(
	'radioCheckboxColor',
	[
		'default' => [ 'color' => '#e8ebf0' ],
		'accent' => [ 'color' => 'var(--paletteColor1)' ],
	]
));

$css->put(
	':root',
	"--radioCheckboxInitialColor: {$radioCheckboxColor['default']}"
);

$css->put(
	':root',
	"--radioCheckboxAccentColor: {$radioCheckboxColor['accent']}"
);


// select box
$selectDropdownTextColor = blocksy_get_colors( get_theme_mod(
	'selectDropdownTextColor',
	[
		'default' => [ 'color' => 'var(--paletteColor3)' ],
		'hover' => [ 'color' => 'var(--paletteColor3)' ],
		'active' => [ 'color' => '#ffffff' ],
	]
));

$css->put(
	':root',
	"--selectDropdownTextInitialColor: {$selectDropdownTextColor['default']}"
);

$css->put(
	':root',
	"--selectDropdownTextHoverColor: {$selectDropdownTextColor['hover']}"
);

$css->put(
	':root',
	"--selectDropdownTextActiveColor: {$selectDropdownTextColor['active']}"
);


$selectDropdownItemColor = blocksy_get_colors( get_theme_mod(
	'selectDropdownItemColor',
	[
		'hover' => [ 'color' => 'rgba(232, 235, 240, 0.4)' ],
		'active' => [ 'color' => 'var(--paletteColor1)' ],
	]
));

$css->put(
	':root',
	"--selectDropdownItemHoverColor: {$selectDropdownItemColor['hover']}"
);

$css->put(
	':root',
	"--selectDropdownItemActiveColor: {$selectDropdownItemColor['active']}"
);

$selectDropdownBackground = blocksy_get_colors( get_theme_mod(
	'selectDropdownBackground',
	[ 'default' => [ 'color' => '#ffffff' ] ]
));

$css->put(
	':root',
	"--selectDropdownBackground: {$selectDropdownBackground['default']}"
);


// Passepartout
blocksy_output_responsive(
	$css, $tablet_css, $mobile_css,
	':root', 'passepartoutSize',
	get_theme_mod('passepartoutSize', [
		'mobile' => 0,
		'tablet' => 10,
		'desktop' => 10,
	])
);

$passepartoutColor = blocksy_get_colors( get_theme_mod(
	'passepartoutColor',
	[ 'default' => [ 'color' => 'var(--paletteColor1)' ] ]
));

$css->put(
	':root',
	"--passepartoutColor: {$passepartoutColor['default']}"
);