<?php
/**
 * Customizer settings in css variables
 *
 * @package Multi
 */

if ( ! defined( 'ABSPATH' ) ) {
	die;
}

/**
 * Creates a style containig all the variables
 */
function multimagazine_css_vars() {
	$css = '';

	$font_display = get_theme_mod( 'multi_font_display', MULTIMAGAZINE_FONT_DISPLAY );

	$css .= ":root {\n";

	/* Buttons */

	$button_color = get_theme_mod( 'multi_button_color', MULTIMAGAZINE_BUTTON_COLOR );
	$button_color = empty( $button_color ) ? 'transparent' : $button_color;

	$css .= '--button-color: ' . esc_attr( $button_color ) . ";\n";

	$button_color_hover = get_theme_mod( 'multi_button_color_hover', MULTIMAGAZINE_BUTTON_COLOR_HOVER );
	$button_color_hover = empty( $button_color_hover ) ? 'transparent' : $button_color_hover;

	$css .= '--button-color-hover: ' . esc_attr( $button_color_hover ) . ";\n";

	$button_color2 = get_theme_mod( 'multi_button_color2', MULTIMAGAZINE_BUTTON_COLOR2 );
	$button_color2 = empty( $button_color2 ) ? 'transparent' : $button_color2;

	$css .= '--button-color2: ' . esc_attr( $button_color2 ) . ";\n";

	$button_color2_hover = get_theme_mod( 'multi_button_color2_hover', MULTIMAGAZINE_BUTTON_COLOR2_HOVER );
	$button_color2_hover = empty( $button_color2_hover ) ? 'transparent' : $button_color2_hover;

	$css .= '--button-color2-hover: ' . esc_attr( $button_color2_hover ) . ";\n";

	$button_gradient_direction       = get_theme_mod( 'multi_button_gradient_direction', MULTIMAGAZINE_BUTTON_GRADIENT_DIRECTION );
	$button_gradient_hover_direction = get_theme_mod( 'multi_button_gradient_hover_direction', MULTIMAGAZINE_BUTTON_GRADIENT_HOVER_DIRECTION );

	$css .= '--button-gradient-direction: ' . esc_attr( $button_gradient_direction ) . ";\n";
	$css .= '--button-gradient-direction-hover: ' . esc_attr( $button_gradient_hover_direction ) . ";\n";
	$css .= "--button-gradient: linear-gradient(var(--button-gradient-direction ), var(--button-color ), var(--button-color2) );\n";
	$css .= "--button-gradient-hover: linear-gradient(var(--button-gradient-direction-hover ), var(--button-color-hover ), var(--button-color2-hover ) );\n";

	$button_border_radius = get_theme_mod( 'multi_button_border_radius', MULTIMAGAZINE_BUTTON_BORDER_RADIUS );

	if ( '' === $button_border_radius ) {
		$button_border_radius = 100;
	}
	$css .= '--button-border-radius: ' . esc_attr( $button_border_radius ) . "px;\n";

	$button_size = get_theme_mod( 'multi_buttons_size', MULTIMAGAZINE_BUTTONS_SIZE );
	switch ( $button_size ) {
		case 'small':
			$def_button_padding_v = '3px';
			$def_button_padding_h = '11px';
			$css                 .= "--button-font-size: 12px;\n";
			break;
		case 'normal':
			$def_button_padding_v = '4px';
			$def_button_padding_h = '16px';
			$css                 .= "--button-font-size: 14px;\n";
			break;
		case 'large':
			$def_button_padding_v = '5px';
			$def_button_padding_h = '23px';
			$css                 .= "--button-font-size: 16px;\n";
			break;
		case 'x-large':
			$def_button_padding_v = '6px';
			$def_button_padding_h = '30px';
			$css                 .= "--button-font-size: 18px;\n";
			break;
		case 'xx-large':
			$def_button_padding_v = '7px';
			$def_button_padding_h = '36px';
			$css                 .= "--button-font-size: 20px;\n";
			break;
	}

	$css .= '--button-padding: ' . esc_attr( multimagazine_button_padding( $def_button_padding_v, $def_button_padding_h ) ) . ";\n";

	$button_border_top_width    = absint( get_theme_mod( 'multi_button_border_top_width', MULTIMAGAZINE_BUTTON_BORDER_TOP_WIDTH ) );
	$button_border_right_width  = absint( get_theme_mod( 'multi_button_border_right_width', MULTIMAGAZINE_BUTTON_BORDER_RIGHT_WIDTH ) );
	$button_border_bottom_width = absint( get_theme_mod( 'multi_button_border_bottom_width', MULTIMAGAZINE_BUTTON_BORDER_BOTTOM_WIDTH ) );
	$button_border_left_width   = absint( get_theme_mod( 'multi_button_border_left_width', MULTIMAGAZINE_BUTTON_BORDER_LEFT_WIDTH ) );

	$css .= '--button-border-top-width: ' . esc_attr( $button_border_top_width ) . "px;\n";
	$css .= '--button-border-right-width: ' . esc_attr( $button_border_right_width ) . "px;\n";
	$css .= '--button-border-bottom-width: ' . esc_attr( $button_border_bottom_width ) . "px;\n";
	$css .= '--button-border-left-width: ' . esc_attr( $button_border_left_width ) . "px;\n";
	$css .= "--button-border-width: var(--button-border-top-width) var(--button-border-right-width) var(--button-border-bottom-width) var(--button-border-left-width);\n";

	$header_button_border_top_width    = absint( get_theme_mod( 'multi_header_button_border_top_width', MULTIMAGAZINE_HEADER_BUTTON_BORDER_TOP_WIDTH ) );
	$header_button_border_right_width  = absint( get_theme_mod( 'multi_header_button_border_right_width', MULTIMAGAZINE_HEADER_BUTTON_BORDER_RIGHT_WIDTH ) );
	$header_button_border_bottom_width = absint( get_theme_mod( 'multi_header_button_border_bottom_width', MULTIMAGAZINE_HEADER_BUTTON_BORDER_BOTTOM_WIDTH ) );
	$header_button_border_left_width   = absint( get_theme_mod( 'multi_header_button_border_left_width', MULTIMAGAZINE_HEADER_BUTTON_BORDER_LEFT_WIDTH ) );

	$css .= '--header-button-border-top-width: ' . esc_attr( $header_button_border_top_width ) . "px;\n";
	$css .= '--header-button-border-right-width: ' . esc_attr( $header_button_border_right_width ) . "px;\n";
	$css .= '--header-button-border-bottom-width: ' . esc_attr( $header_button_border_bottom_width ) . "px;\n";
	$css .= '--header-button-border-left-width: ' . esc_attr( $header_button_border_left_width ) . "px;\n";
	$css .= "--header-button-border-width: var(--header-button-border-top-width) var(--header-button-border-right-width) var(--header-button-border-bottom-width) var(--header-button-border-left-width);\n";

	$header_button_size = get_theme_mod( 'multi_header_button_size', MULTIMAGAZINE_HEADER_BUTTON_SIZE );
	if ( empty( $header_button_size ) ) {
		$header_button_size = get_theme_mod( 'multi_buttons_size', MULTIMAGAZINE_BUTTONS_SIZE );
	}
	switch ( $header_button_size ) {
		case 'small':
			$css .= '--header-button-padding: ' . esc_attr( multimagazine_header_button_padding( '3px', '11px' ) ) . ";\n";
			break;
		case 'normal':
			$css .= '--header-button-padding: ' . esc_attr( multimagazine_header_button_padding( '4px', '16px' ) ) . ";\n";
			break;
		case 'large':
			$css .= '--header-button-padding: ' . esc_attr( multimagazine_header_button_padding( '5px', '23px' ) ) . ";\n";
			break;
		case 'x-large':
			$css .= '--header-button-padding: ' . esc_attr( multimagazine_header_button_padding( '6px', '30px' ) ) . ";\n";
			break;
		case 'xx-large':
			$css .= '--header-button-padding: ' . esc_attr( multimagazine_header_button_padding( '7px', '36px' ) ) . ";\n";
			break;
	}

	$button_border_color = get_theme_mod( 'multi_button_border_color', MULTIMAGAZINE_BUTTON_BORDER_COLOR );
	if ( empty( $button_border_color ) ) {
		$button_border_color = 'transparent';
	}
	$css .= '--button-border-color: ' . esc_attr( $button_border_color ) . ";\n";

	$button_border_hover_color = get_theme_mod( 'multi_button_border_hover_color', MULTIMAGAZINE_BUTTON_BORDER_HOVER_COLOR );
	$button_border_hover_color = empty( $button_border_hover_color ) ? 'transparent' : $button_border_hover_color;

	$css .= '--button-border-hover-color: ' . esc_attr( $button_border_hover_color ) . ";\n";

	$button_text_color = get_theme_mod( 'multi_button_text_color', MULTIMAGAZINE_BUTTON_TEXT_COLOR );
	$button_text_color = empty( $button_text_color ) ? '#ffffff' : $button_text_color;

	$css .= '--button-text-color: ' . esc_attr( $button_text_color ) . ";\n";

	$button_text_hover_color = get_theme_mod( 'multi_button_text_hover_color', MULTIMAGAZINE_BUTTON_TEXT_HOVER_COLOR );
	$button_text_hover_color = empty( $button_text_hover_color ) ? '#ffffff' : $button_text_hover_color;

	$css .= '--button-text-hover-color: ' . esc_attr( $button_text_hover_color ) . ";\n";

	/* secondary buttons */

	$sec_button_color = get_theme_mod( 'multi_sec_button_color', MULTIMAGAZINE_SEC_BUTTON_COLOR );
	$sec_button_color = empty( $sec_button_color ) ? 'transparent' : $sec_button_color;

	$css .= '--secondary-button-color: ' . esc_attr( $sec_button_color ) . ";\n";

	$sec_button_color_hover = get_theme_mod( 'multi_sec_button_color_hover', MULTIMAGAZINE_SEC_BUTTON_COLOR_HOVER );
	$sec_button_color_hover = empty( $sec_button_color_hover ) ? 'transparent' : $sec_button_color_hover;

	$css .= '--secondary-button-color-hover: ' . esc_attr( $sec_button_color_hover ) . ";\n";

	$sec_button_color2 = get_theme_mod( 'multi_sec_button_color2', MULTIMAGAZINE_SEC_BUTTON_COLOR2 );
	$sec_button_color2 = empty( $sec_button_color2 ) ? 'transparent' : $sec_button_color2;

	$css .= '--secondary-button-color2: ' . esc_attr( $sec_button_color2 ) . ";\n";

	$sec_button_color2_hover = get_theme_mod( 'multi_sec_button_color2_hover', MULTIMAGAZINE_SEC_BUTTON_COLOR2_HOVER );
	$sec_button_color2_hover = empty( $sec_button_color2_hover ) ? 'transparent' : $sec_button_color2_hover;

	$css .= '--secondary-button-color2-hover: ' . esc_attr( $sec_button_color2_hover ) . ";\n";

	$css .= "--secondary-button-gradient: linear-gradient(var(--button-gradient-direction ), var(--secondary-button-color ), var(--secondary-button-color2) );\n";
	$css .= "--secondary-button-gradient-hover: linear-gradient(var(--button-gradient-direction-hover), var(--secondary-button-color-hover), var(--secondary-button-color2-hover) );\n";

	$sec_button_border_color = get_theme_mod( 'multi_sec_button_border_color', MULTIMAGAZINE_SEC_BUTTON_BORDER_COLOR );
	if ( empty( $sec_button_border_color ) ) {
		$sec_button_border_color = 'var(--text-color-base)';
	}
	$css .= '--secondary-button-border-color: ' . esc_attr( $sec_button_border_color ) . ";\n";

	$sec_button_border_hover_color = get_theme_mod( 'multi_sec_button_border_color_hover', MULTIMAGAZINE_SEC_BUTTON_BORDER_COLOR_HOVER );
	$sec_button_border_hover_color = empty( $sec_button_border_hover_color ) ? 'var(--text-color-base)' : $sec_button_border_hover_color;

	$css .= '--secondary-button-border-hover-color: ' . esc_attr( $sec_button_border_hover_color ) . ";\n";

	$sec_button_border_top_width    = absint( get_theme_mod( 'multi_sec_button_border_top_width', MULTIMAGAZINE_SEC_BUTTON_BORDER_TOP_WIDTH ) );
	$sec_button_border_right_width  = absint( get_theme_mod( 'multi_sec_button_border_right_width', MULTIMAGAZINE_SEC_BUTTON_BORDER_RIGHT_WIDTH ) );
	$sec_button_border_bottom_width = absint( get_theme_mod( 'multi_sec_button_border_bottom_width', MULTIMAGAZINE_SEC_BUTTON_BORDER_BOTTOM_WIDTH ) );
	$sec_button_border_left_width   = absint( get_theme_mod( 'multi_sec_button_border_left_width', MULTIMAGAZINE_SEC_BUTTON_BORDER_LEFT_WIDTH ) );

	$css .= '--secondary-button-border-top-width: ' . esc_attr( $sec_button_border_top_width ) . "px;\n";
	$css .= '--secondary-button-border-right-width: ' . esc_attr( $sec_button_border_right_width ) . "px;\n";
	$css .= '--secondary-button-border-bottom-width: ' . esc_attr( $sec_button_border_bottom_width ) . "px;\n";
	$css .= '--secondary-button-border-left-width: ' . esc_attr( $sec_button_border_left_width ) . "px;\n";
	$css .= "--secondary-button-border-width: var(--secondary-button-border-top-width) var(--secondary-button-border-right-width) var(--secondary-button-border-bottom-width) var(--secondary-button-border-left-width);\n";

	$sec_button_text_color = get_theme_mod( 'multi_sec_button_text_color', MULTIMAGAZINE_SEC_BUTTON_TEXT_COLOR );
	$sec_button_text_color = empty( $sec_button_text_color ) ? 'var(--text-color-base)' : $sec_button_text_color;

	$css .= '--secondary-button-text-color: ' . esc_attr( $sec_button_text_color ) . ";\n";

	$sec_button_text_hover_color = get_theme_mod( 'multi_sec_button_text_color_hover', MULTIMAGAZINE_SEC_BUTTON_TEXT_COLOR_HOVER );
	$sec_button_text_hover_color = empty( $sec_button_text_hover_color ) ? 'var(--text-color-base)' : $sec_button_text_hover_color;

	$css .= '--secondary-button-text-hover-color: ' . esc_attr( $sec_button_text_hover_color ) . ";\n";

	/* button shadows */
	$button_shadow_color = get_theme_mod( 'multi_button_shadow_color', MULTIMAGAZINE_BUTTON_SHADOW_COLOR );
	if ( ! empty( $button_shadow_color ) ) {
		$button_shadow_blur     = absint( get_theme_mod( 'multi_button_shadow_blur', MULTIMAGAZINE_BUTTON_SHADOW_BLUR ) );
		$button_shadow_x_offset = absint( get_theme_mod( 'multi_button_shadow_x_offset', MULTIMAGAZINE_BUTTON_SHADOW_X_OFFSET ) );
		$button_shadow_y_offset = absint( get_theme_mod( 'multi_button_shadow_y_offset', MULTIMAGAZINE_BUTTON_SHADOW_Y_OFFSET ) );

		$css .= '--button-shadow-blur: ' . esc_attr( $button_shadow_blur ) . "px;\n";
		$css .= '--button-shadow-x-offset: ' . esc_attr( $button_shadow_x_offset ) . "px;\n";
		$css .= '--button-shadow-y-offset: ' . esc_attr( $button_shadow_y_offset ) . "px;\n";
		$css .= '--button-shadow-color: ' . esc_attr( $button_shadow_color ) . ";\n";
	} else {
		$css .= "--button-shadow: none;\n";
	}
	$css .= "--button-shadow: var(--button-shadow-x-offset ) var(--button-shadow-y-offset ) var(--button-shadow-blur ) var(--button-shadow-color );\n";

	$button_shadow_color_hover = get_theme_mod( 'multi_button_shadow_color_hover', MULTIMAGAZINE_BUTTON_SHADOW_COLOR_HOVER );
	if ( ! empty( $button_shadow_color_hover ) ) {
		$button_shadow_blur_hover     = absint( get_theme_mod( 'multi_button_shadow_blur_hover', MULTIMAGAZINE_BUTTON_SHADOW_BLUR_HOVER ) );
		$button_shadow_x_offset_hover = absint( get_theme_mod( 'multi_button_shadow_x_offset_hover', MULTIMAGAZINE_BUTTON_SHADOW_X_OFFSET_HOVER ) );
		$button_shadow_y_offset_hover = absint( get_theme_mod( 'multi_button_shadow_y_offset_hover', MULTIMAGAZINE_BUTTON_SHADOW_Y_OFFSET_HOVER ) );

		$css .= '--button-shadow-blur-hover: ' . esc_attr( $button_shadow_blur_hover ) . "px;\n";
		$css .= '--button-shadow-x-offset-hover: ' . esc_attr( $button_shadow_x_offset_hover ) . "px;\n";
		$css .= '--button-shadow-y-offset-hover: ' . esc_attr( $button_shadow_y_offset_hover ) . "px;\n";
		$css .= '--button-shadow-color-hover: ' . esc_attr( $button_shadow_color_hover ) . ";\n";
		$css .= "--button-shadow-hover: var(--button-shadow-x-offset-hover ) var(--button-shadow-y-offset-hover ) var(--button-shadow-blur-hover ) var(--button-shadow-color-hover );\n";
	} else {
		$css .= "--button-shadow-hover: none;\n";
	}

	$button_lift = absint( get_theme_mod( 'multi_button_lift', MULTIMAGAZINE_BUTTON_LIFT ) );

	$css .= '--button-lift: -' . esc_attr( $button_lift ) . "px;\n";

	/* header button color */
	$header_button_color = get_theme_mod( 'multi_header_button_color', MULTIMAGAZINE_HEADER_BUTTON_COLOR );
	if ( empty( $header_button_color ) ) {
		$header_button_color = 'transparent';
	}
	$css .= '--header-button-color: ' . esc_attr( $header_button_color ) . ";\n";

	$header_button_color_hover = get_theme_mod( 'multi_header_button_color_hover', MULTIMAGAZINE_HEADER_BUTTON_COLOR_HOVER );
	if ( empty( $header_button_color_hover ) ) {
		$header_button_color_hover = 'transparent';
	}
	$css .= '--header-button-color-hover: ' . esc_attr( $header_button_color_hover ) . ";\n";

	$header_button_color2 = get_theme_mod( 'multi_header_button_color2', MULTIMAGAZINE_HEADER_BUTTON_COLOR2 );
	if ( ! empty( $header_button_color2 ) ) {
		$css .= '--header-button-color2: ' . esc_attr( $header_button_color2 ) . ";\n";
		$css .= "--header-button-gradient: linear-gradient(var(--button-gradient-direction ), var(--header-button-color ), var(--header-button-color2) );\n";
	}
	$header_button_color2_hover = get_theme_mod( 'multi_header_button_color2_hover', MULTIMAGAZINE_HEADER_BUTTON_COLOR2_HOVER );
	if ( ! empty( $header_button_color2_hover ) ) {
		$css .= '--header-button-color2-hover: ' . esc_attr( $header_button_color2_hover ) . ";\n";
		$css .= "--header-button-gradient-hover: linear-gradient(var(--button-gradient-direction-hover ), var(--header-button-color-hover ), var(--header-button-color2-hover ) );\n";
	}
	$header_button_text_color = get_theme_mod( 'multi_header_button_text_color', MULTIMAGAZINE_HEADER_BUTTON_TEXT_COLOR );
	if ( empty( $header_button_text_color ) ) {
		$header_button_text_color = 'inherit';
	}
	$css .= '--header-button-text-color: ' . esc_attr( $header_button_text_color ) . ";\n";

	$header_button_text_color_hover = get_theme_mod( 'multi_header_button_text_hover_color', MULTIMAGAZINE_HEADER_BUTTON_TEXT_HOVER_COLOR );
	if ( empty( $header_button_text_color_hover ) ) {
		$header_button_text_color_hover = 'inherit';
	}
	$css .= '--header-button-text-color-hover: ' . esc_attr( $header_button_text_color_hover ) . ";\n";

	$header_button_border_color = get_theme_mod( 'multi_header_button_border_color', MULTIMAGAZINE_HEADER_BUTTON_BORDER_COLOR );
	if ( empty( $header_button_border_color ) ) {
		$header_button_border_color = 'transparent';
	}
	$css .= '--header-button-border-color: ' . esc_attr( $header_button_border_color ) . ";\n";

	$header_button_border_hover_color = get_theme_mod( 'multi_header_button_border_color_hover', MULTIMAGAZINE_HEADER_BUTTON_BORDER_COLOR_HOVER );
	if ( empty( $header_button_border_hover_color ) ) {
		$header_button_border_hover_color = 'transparent';
	}
	$css .= '--header-button-border-color-hover: ' . esc_attr( $header_button_border_hover_color ) . ";\n";

	/*
	Colors
	 */

	/* main colors */

	$main_color = get_theme_mod( 'multi_main_color', MULTIMAGAZINE_MAIN_COLOR );
	$main_color = empty( $main_color ) ? '#ff6000' : $main_color;

	$css .= '--main-color: ' . esc_attr( $main_color ) . ";\n";

	$accent_color = get_theme_mod( 'multi_accent_color', MULTIMAGAZINE_ACCENT_COLOR );
	$accent_color = empty( $accent_color ) ? '#31d49c' : $accent_color;

	$css .= '--accent-color: ' . esc_attr( $accent_color ) . ";\n";

	$border_color = get_theme_mod( 'multi_border_color', MULTIMAGAZINE_BORDER_COLOR );
	$border_color = empty( $border_color ) ? '#e7e7e7' : $border_color;

	$css .= '--border-color: ' . esc_attr( $border_color ) . ";\n";

	/* selection */

	$selection_bg_color   = get_theme_mod( 'multi_selection_color', $main_color );
	$selection_text_color = get_theme_mod( 'multi_selection_textcolor', MULTIMAGAZINE_SELECTION_TEXTCOLOR );

	$css .= "--selection-color: $selection_bg_color;\n";
	$css .= "--selection-text-color: $selection_text_color;\n";

	/* text */

	$text_color = get_theme_mod( 'multi_text_color', MULTIMAGAZINE_TEXT_COLOR );
	$text_color = empty( $text_color ) ? '#747474' : $text_color;

	$css .= '--text-color-base: ' . esc_attr( $text_color ) . ";\n";

	$secondary_text_color = get_theme_mod( 'multi_secondary_text_color', MULTIMAGAZINE_SECONDARY_TEXT_COLOR );
	$secondary_text_color = empty( $secondary_text_color ) ? $text_color : $secondary_text_color;

	$css .= '--text-color-secondary: ' . esc_attr( $secondary_text_color ) . ";\n";

	$main_headings_color = get_theme_mod( 'multi_content_main_headings_color', MULTIMAGAZINE_CONTENT_MAIN_HEADINGS_COLOR );
	$main_headings_color = empty( $main_headings_color ) ? MULTIMAGAZINE_CONTENT_MAIN_HEADINGS_COLOR : $main_headings_color;

	$css .= '--text-color-headings: ' . esc_attr( $main_headings_color ) . ";\n";

	$main_subheadings_color = get_theme_mod( 'multi_content_subheadings_color', MULTIMAGAZINE_CONTENT_SUBHEADINGS_COLOR );
	$main_subheadings_color = empty( $main_subheadings_color ) ? $main_headings_color : $main_subheadings_color;

	$css .= '--text-color-subheadings: ' . esc_attr( $main_subheadings_color ) . ";\n";

	$special_headings_color = get_theme_mod( 'multi_content_special_headings_color', MULTIMAGAZINE_CONTENT_SPECIAL_HEADINGS_COLOR );
	$special_headings_color = empty( $special_headings_color ) ? $main_headings_color : $special_headings_color;

	$css .= '--text-color-special-headings: ' . esc_attr( $special_headings_color ) . ";\n";

	$quote_text_color = get_theme_mod( 'multi_quote_text_color', MULTIMAGAZINE_QUOTE_TEXT_COLOR );
	$quote_text_color = empty( $quote_text_color ) ? 'var(--text-color-base )' : $quote_text_color;

	$css .= '--text-color-quote: ' . esc_attr( $quote_text_color ) . ";\n";

	$heading_weight = get_theme_mod( 'multi_headings_font_weight', MULTIMAGAZINE_HEADINGS_FONT_WEIGHT );

	$css .= '--headings-font-weight: ' . esc_attr( $heading_weight ) . ";\n";

	/* links */

	$link_color = get_theme_mod( 'multi_link_color', MULTIMAGAZINE_LINK_COLOR );
	$link_color = empty( $link_color ) ? MULTIMAGAZINE_LINK_COLOR : $link_color;

	$css .= '--link-color-base: ' . esc_attr( $link_color ) . ";\n";

	$link_hover_color = get_theme_mod( 'multi_link_hover_color', MULTIMAGAZINE_LINK_HOVER_COLOR );
	$link_hover_color = empty( $link_hover_color ) ? $main_color : $link_hover_color;

	$css .= '--link-color-hover: ' . esc_attr( $link_hover_color ) . ";\n";

	$content_link_color = get_theme_mod( 'multi_content_link_color', MULTIMAGAZINE_CONTENT_LINK_COLOR );
	$content_link_color = empty( $content_link_color ) ? $link_color : $content_link_color;

	$css .= '--content-link-color: ' . esc_attr( $content_link_color ) . ";\n";

	$content_link_color_hover = get_theme_mod( 'multi_content_link_hover_color', MULTIMAGAZINE_CONTENT_LINK_HOVER_COLOR );
	$content_link_color_hover = empty( $content_link_color_hover ) ? $link_hover_color : $content_link_color_hover;

	$css .= '--content-link-color-hover: ' . esc_attr( $content_link_color_hover ) . ";\n";

	/* page background */
	$background_color = get_theme_mod( 'background_color', '#ededed' );
	$background_color = empty( $background_color ) ? '#ededed' : $background_color;

	$css .= '--body-background-color: ' . esc_attr( $background_color ) . ";\n";

	$content_background_color = get_theme_mod( 'multi_content_bg_color', MULTIMAGAZINE_CONTENT_BG_COLOR );
	$content_background_color = empty( $content_background_color ) ? '#ffffff' : $content_background_color;

	$css .= '--content-background-color: ' . esc_attr( $content_background_color ) . ";\n";

	$content_background_image = get_theme_mod( 'multi_content_bg_image', MULTIMAGAZINE_CONTENT_BG_IMAGE );
	if ( empty( $content_background_image ) ) {
		$content_background_image = 'none';
	}
	if ( 'none' !== $content_background_image ) {
		$content_background_image = 'url( ' . $content_background_image . ' )';
	}
	$css .= '--content-background-image: ' . esc_attr( $content_background_image ) . ";\n";

	$css .= multimagazine_css_vars_header();

	/* footer */
	$footer_bg_color = get_theme_mod( 'multi_footer_bg_color', MULTIMAGAZINE_FOOTER_BG_COLOR );

	$css .= '--footer-background-color: ' . esc_attr( $footer_bg_color ) . ";\n";

	$footer_bg_image = get_theme_mod( 'multi_footer_bg_image', MULTIMAGAZINE_FOOTER_BG_IMAGE );
	if ( empty( $footer_bg_image ) ) {
		$footer_bg_image = 'none';
	}
	if ( 'none' !== $footer_bg_image ) {
		$footer_bg_image = 'url( ' . $footer_bg_image . ' )';
	}
	$css .= '--footer-background-image: ' . esc_attr( $footer_bg_image ) . ";\n";

	$footer_bg_size = get_theme_mod( 'multi_footer_bg_size', MULTIMAGAZINE_FOOTER_BG_SIZE );
	$css           .= '--footer-background-size: ' . esc_attr( $footer_bg_size ) . ";\n";

	$footer_bg_repeat = get_theme_mod( 'multi_footer_bg_repeat', MULTIMAGAZINE_FOOTER_BG_REPEAT );
	$css             .= '--footer-background-repeat: ' . esc_attr( $footer_bg_repeat ) . ";\n";

	$footer_text_color = get_theme_mod( 'multi_footer_text_color', MULTIMAGAZINE_FOOTER_TEXT_COLOR );
	$footer_text_color = empty( $footer_text_color ) ? MULTIMAGAZINE_FOOTER_TEXT_COLOR : $footer_text_color;
	$css              .= '--footer-text-color: ' . esc_attr( $footer_text_color ) . ";\n";

	$footer_headings_color = get_theme_mod( 'multi_footer_headings_color', MULTIMAGAZINE_FOOTER_HEADINGS_COLOR );
	$footer_headings_color = empty( $footer_headings_color ) ? MULTIMAGAZINE_FOOTER_HEADINGS_COLOR : $footer_headings_color;
	$css                  .= '--footer-headings-color: ' . esc_attr( $footer_headings_color ) . ";\n";

	$footer_border_color = get_theme_mod( 'multi_footer_border_color', MULTIMAGAZINE_FOOTER_BORDER_COLOR );
	$footer_border_color = empty( $footer_border_color ) ? MULTIMAGAZINE_FOOTER_BORDER_COLOR : $footer_border_color;
	$css                .= '--footer-border-color: ' . esc_attr( $footer_border_color ) . ";\n";

	$footer_widget_divider_color = get_theme_mod( 'multi_footer_widget_divider_color', '' );
	$footer_widget_divider_color = empty( $footer_widget_divider_color ) ? $border_color : $footer_widget_divider_color;
	$css                        .= '--footer-widget-divider-color: ' . esc_attr( $footer_widget_divider_color ) . ";\n";

	$footer_widgets_padding_top = absint( get_theme_mod( 'multi_footer_widgets_padding_top', MULTIMAGAZINE_FOOTER_WIDGETS_PADDING_TOP ) );
	$css                       .= '--footer-widgets-padding-top: ' . esc_attr( $footer_widgets_padding_top ) . "px;\n";

	$footer_widgets_padding_bottom = absint( get_theme_mod( 'multi_footer_widgets_padding_bottom', MULTIMAGAZINE_FOOTER_WIDGETS_PADDING_BOTTOM ) );
	$css                          .= '--footer-widgets-padding-bottom: ' . esc_attr( $footer_widgets_padding_bottom ) . "px;\n";

	$footer_link_color = get_theme_mod( 'multi_footer_link_color', MULTIMAGAZINE_FOOTER_LINK_COLOR );
	$footer_link_color = empty( $footer_link_color ) ? MULTIMAGAZINE_FOOTER_LINK_COLOR : $footer_link_color;
	$css              .= '--footer-link-color: ' . esc_attr( $footer_link_color ) . ";\n";

	$footer_link_hover_color = get_theme_mod( 'multi_footer_link_hover_color', MULTIMAGAZINE_FOOTER_LINK_HOVER_COLOR );
	$footer_link_hover_color = empty( $footer_link_hover_color ) ? MULTIMAGAZINE_FOOTER_LINK_HOVER_COLOR : $footer_link_hover_color;
	$css                    .= '--footer-link-hover-color: ' . esc_attr( $footer_link_hover_color ) . ";\n";

	$footer_bottom_bg_color = get_theme_mod( 'multi_footer_bottom_bg_color', MULTIMAGAZINE_FOOTER_BOTTOM_BG_COLOR );
	$footer_bottom_bg_color = empty( $footer_bottom_bg_color ) ? 'transparent' : $footer_bottom_bg_color;
	$css                   .= '--footer-bottom-background-color: ' . esc_attr( $footer_bottom_bg_color ) . ";\n";

	$footer_bottom_text_color = get_theme_mod( 'multi_footer_bottom_text_color', MULTIMAGAZINE_FOOTER_BOTTOM_TEXT_COLOR );
	$footer_bottom_text_color = empty( $footer_bottom_text_color ) ? $footer_text_color : $footer_bottom_text_color;
	$css                     .= '--footer-bottom-text-color: ' . esc_attr( $footer_bottom_text_color ) . ";\n";

	$footer_bottom_link_color = get_theme_mod( 'multi_footer_bottom_link_color', MULTIMAGAZINE_FOOTER_BOTTOM_LINK_COLOR );
	$footer_bottom_link_color = empty( $footer_bottom_link_color ) ? $footer_link_color : $footer_bottom_link_color;
	$css                     .= '--footer-bottom-link-color: ' . esc_attr( $footer_bottom_link_color ) . ";\n";

	$footer_bottom_link_hover_color = get_theme_mod( 'multi_footer_bottom_link_hover_color', MULTIMAGAZINE_FOOTER_BOTTOM_LINK_HOVER_COLOR );
	$footer_bottom_link_hover_color = empty( $footer_bottom_link_hover_color ) ? $footer_link_hover_color : $footer_bottom_link_hover_color;
	$css                           .= '--footer-bottom-link-hover-color: ' . esc_attr( $footer_bottom_link_hover_color ) . ";\n";

	$footer_bottom_padding_top = get_theme_mod( 'multi_footer_bottom_padding_top', MULTIMAGAZINE_FOOTER_BOTTOM_PADDING_TOP );
	if ( 0 !== $footer_bottom_padding_top && empty( $footer_bottom_padding_top ) ) {
		$footer_bottom_padding_top = MULTIMAGAZINE_FOOTER_BOTTOM_PADDING_TOP;
	}
	$css .= '--footer-bottom-padding-top: ' . esc_attr( $footer_bottom_padding_top ) . "px;\n";

	$footer_bottom_padding_bottom = get_theme_mod( 'multi_footer_bottom_padding_bottom', MULTIMAGAZINE_FOOTER_BOTTOM_PADDING_BOTTOM );
	if ( 0 !== $footer_bottom_padding_bottom && empty( $footer_bottom_padding_bottom ) ) {
		$footer_bottom_padding_bottom = MULTIMAGAZINE_FOOTER_BOTTOM_PADDING_BOTTOM;
	}

	$footer_middle_ratio = get_theme_mod( 'multi_footer_middle_ratio', MULTIMAGAZINE_FOOTER_MIDDLE_RATIO );
	$css                .= "--footer-middle-ratio: $footer_middle_ratio;\n";

	$css .= '--footer-bottom-padding-bottom: ' . esc_attr( $footer_bottom_padding_bottom ) . "px;\n";

	/* go top link */

	$gotop_offset_x = absint( get_theme_mod( 'multi_go_top_horizontal_offset', MULTIMAGAZINE_GO_TOP_HORIZONTAL_OFFSET ) );
	$css           .= '--gotop-offset-x: ' . $gotop_offset_x . "px;\n";
	$gotop_offset_y = absint( get_theme_mod( 'multi_go_top_vertical_offset', MULTIMAGAZINE_GO_TOP_VERTICAL_OFFSET ) );
	$css           .= '--gotop-offset-y: ' . $gotop_offset_y . "px;\n";

	$gotop_color = get_theme_mod( 'multi_go_top_color', MULTIMAGAZINE_GO_TOP_COLOR );
	if ( empty( $gotop_color ) ) {
		$gotop_color = $main_color;
	}
	$css .= '--gotop-color: ' . esc_attr( $gotop_color ) . ";\n";

	$gotop_hover_color = get_theme_mod( 'multi_go_top_hover_color', MULTIMAGAZINE_GO_TOP_HOVER_COLOR );
	if ( empty( $gotop_hover_color ) ) {
		$gotop_hover_color = $link_hover_color;
	}
	$css .= '--gotop-hover-color: ' . esc_attr( $gotop_hover_color ) . ";\n";

	$gotop_icon_size = absint( get_theme_mod( 'multi_go_top_icon_size', MULTIMAGAZINE_GO_TOP_ICON_SIZE ) );
	$css            .= '--gotop-icon-size: ' . esc_attr( $gotop_icon_size ) . "px;\n";

	$gotop_box_size = absint( get_theme_mod( 'multi_go_top_box_size', MULTIMAGAZINE_GO_TOP_BOX_SIZE ) );
	$css           .= '--gotop-box-size: ' . esc_attr( $gotop_box_size ) . "px;\n";

	$gotop_bg_color = get_theme_mod( 'multi_go_top_background_color', MULTIMAGAZINE_GO_TOP_BACKGROUND_COLOR );
	if ( ! empty( $gotop_bg_color ) ) {
		$css .= '--gotop-background-color: ' . esc_attr( $gotop_bg_color ) . ";\n";
	}

	$gotop_bg_hover_color = get_theme_mod( 'multi_go_top_background_hover_color', MULTIMAGAZINE_GO_TOP_BACKGROUND_HOVER_COLOR );
	if ( ! empty( $gotop_bg_hover_color ) ) {
		$css .= '--gotop-background-hover-color: ' . esc_attr( $gotop_bg_hover_color ) . ";\n";
	}

	$gotop_border_width = absint( get_theme_mod( 'multi_go_top_border_width', MULTIMAGAZINE_GO_TOP_BORDER_WIDTH ) );
	$css               .= '--gotop-border-width: ' . esc_attr( $gotop_border_width ) . "px;\n";

	$gotop_border_color = get_theme_mod( 'multi_go_top_border_color', MULTIMAGAZINE_GO_TOP_BORDER_COLOR );
	if ( empty( $gotop_border_color ) ) {
		$gotop_border_color = 'var(--border-color)';
	}
	$css .= '--gotop-border-color: ' . esc_attr( $gotop_border_color ) . ";\n";

	$gotop_border_hover_color = get_theme_mod( 'multi_go_top_border_hover_color', MULTIMAGAZINE_GO_TOP_BORDER_HOVER_COLOR );
	if ( ! empty( $gotop_border_hover_color ) ) {
		$css .= '--gotop-border-hover-color: ' . esc_attr( $gotop_border_hover_color ) . ";\n";
	}

	$gotop_radius_nw = absint( get_theme_mod( 'multi_go_top_border_radius_nw', MULTIMAGAZINE_GO_TOP_BORDER_RADIUS_NW ) );
	$css            .= '--gotop-border-radius-nw: ' . esc_attr( $gotop_radius_nw ) . "%;\n";
	$gotop_radius_ne = absint( get_theme_mod( 'multi_go_top_border_radius_ne', MULTIMAGAZINE_GO_TOP_BORDER_RADIUS_NE ) );
	$css            .= '--gotop-border-radius-ne: ' . esc_attr( $gotop_radius_ne ) . "%;\n";
	$gotop_radius_se = absint( get_theme_mod( 'multi_go_top_border_radius_se', MULTIMAGAZINE_GO_TOP_BORDER_RADIUS_SE ) );
	$css            .= '--gotop-border-radius-se: ' . esc_attr( $gotop_radius_se ) . "%;\n";
	$gotop_radius_sw = absint( get_theme_mod( 'multi_go_top_border_radius_sw', MULTIMAGAZINE_GO_TOP_BORDER_RADIUS_SW ) );
	$css            .= '--gotop-border-radius-sw: ' . esc_attr( $gotop_radius_sw ) . "%;\n";
	$css            .= "--gotop-border-radius: var(--gotop-border-radius-nw) var(--gotop-border-radius-ne ) var(--gotop-border-radius-se ) var(--gotop-border-radius-sw);\n";

	/* forms */

	$form_label_color = get_theme_mod( 'multi_form_label_color', MULTIMAGAZINE_FORM_LABEL_COLOR );
	$form_label_color = empty( $form_label_color ) ? 'var(--text-color-headings )' : $form_label_color;
	$css             .= '--form-label-color: ' . esc_attr( $form_label_color ) . ";\n";

	$form_label_background_color = get_theme_mod( 'multi_form_label_background_color', MULTIMAGAZINE_FORM_LABEL_BACKGROUND_COLOR );
	$form_label_background_color = empty( $form_label_background_color ) ? 'transparent' : $form_label_background_color;
	$css                        .= '--form-label-background-color: ' . esc_attr( $form_label_background_color ) . ";\n";

	$form_label_font_size = absint( get_theme_mod( 'multi_form_label_font_size', MULTIMAGAZINE_FORM_LABEL_FONT_SIZE ) );
	$css                 .= '--form-label-font-size: ' . esc_attr( $form_label_font_size ) . "px;\n";

	$form_label_line_height = absint( get_theme_mod( 'multi_form_label_line_height', MULTIMAGAZINE_FORM_LABEL_LINE_HEIGHT ) );
	$css                   .= '--form-label-line-height: ' . esc_attr( $form_label_line_height ) . "px;\n";

	$form_input_height = get_theme_mod( 'multi_input_height', MULTIMAGAZINE_INPUT_HEIGHT );
	$css              .= '--form-field-height: ' . esc_attr( $form_input_height ) . "px;\n";

	/* border width */
	$form_border_top_width    = absint( get_theme_mod( 'multi_form_border_top_width', MULTIMAGAZINE_FORM_BORDER_TOP_WIDTH ) );
	$form_border_right_width  = absint( get_theme_mod( 'multi_form_border_right_width', MULTIMAGAZINE_FORM_BORDER_RIGHT_WIDTH ) );
	$form_border_bottom_width = absint( get_theme_mod( 'multi_form_border_bottom_width', MULTIMAGAZINE_FORM_BORDER_BOTTOM_WIDTH ) );
	$form_border_left_width   = absint( get_theme_mod( 'multi_form_border_left_width', MULTIMAGAZINE_FORM_BORDER_LEFT_WIDTH ) );

	$css .= '--form-border-top-width: ' . esc_attr( $form_border_top_width ) . "px;\n";
	$css .= '--form-border-right-width: ' . esc_attr( $form_border_right_width ) . "px;\n";
	$css .= '--form-border-bottom-width: ' . esc_attr( $form_border_bottom_width ) . "px;\n";
	$css .= '--form-border-left-width: ' . esc_attr( $form_border_left_width ) . "px;\n";
	$css .= "--form-border-width: var(--form-border-top-width) var(--form-border-right-width) var(--form-border-bottom-width) var(--form-border-left-width);\n";

	/* border color */
	$form_border_top_color = get_theme_mod( 'multi_form_border_top_color', MULTIMAGAZINE_FORM_BORDER_TOP_COLOR );
	$form_border_top_color = empty( $form_border_top_color ) ? MULTIMAGAZINE_FORM_BORDER_TOP_COLOR : $form_border_top_color;

	$css .= '--form-border-top-color: ' . esc_attr( $form_border_top_color ) . ";\n";

	$form_border_right_color = get_theme_mod( 'multi_form_border_right_color', MULTIMAGAZINE_FORM_BORDER_RIGHT_COLOR );
	$form_border_right_color = empty( $form_border_right_color ) ? MULTIMAGAZINE_FORM_BORDER_RIGHT_COLOR : $form_border_right_color;

	$css .= '--form-border-right-color: ' . esc_attr( $form_border_right_color ) . ";\n";

	$form_border_bottom_color = get_theme_mod( 'multi_form_border_bottom_color', MULTIMAGAZINE_FORM_BORDER_BOTTOM_COLOR );
	$form_border_bottom_color = empty( $form_border_bottom_color ) ? MULTIMAGAZINE_FORM_BORDER_BOTTOM_COLOR : $form_border_bottom_color;

	$css .= '--form-border-bottom-color: ' . esc_attr( $form_border_bottom_color ) . ";\n";

	$form_border_left_color = get_theme_mod( 'multi_form_border_left_color', MULTIMAGAZINE_FORM_BORDER_LEFT_COLOR );
	$form_border_left_color = empty( $form_border_left_color ) ? MULTIMAGAZINE_FORM_BORDER_LEFT_COLOR : $form_border_left_color;

	$css .= '--form-border-left-color: ' . esc_attr( $form_border_left_color ) . ";\n";

	$css .= "--form-border-color: var(--form-border-top-color ) var(--form-border-right-color ) var(--form-border-bottom-color ) var(--form-border-left-color );\n";

	$form_border_color_focus = get_theme_mod( 'multi_form_border_color_focus', MULTIMAGAZINE_FORM_BORDER_COLOR_FOCUS );
	$form_border_color_focus = empty( $form_border_color_focus ) ? 'var(--form-border-color )' : $form_border_color_focus;

	$css .= '--form-border-color-focus: ' . esc_attr( $form_border_color_focus ) . ";\n";

	$form_border_radius = get_theme_mod( 'multi_form_border_radius', MULTIMAGAZINE_FORM_BORDER_RADIUS );

	$css .= '--form-border-radius: ' . esc_attr( $form_border_radius ) . "px;\n";

	$form_bg_color = get_theme_mod( 'multi_form_bg_color', '#f8f6f6' );
	$form_bg_color = empty( $form_bg_color ) ? '#f8f6f6' : $form_bg_color;

	$css .= '--form-background-color: ' . esc_attr( $form_bg_color ) . ";\n";

	$form_text_color = get_theme_mod( 'multi_form_text_color', MULTIMAGAZINE_FORM_TEXT_COLOR );
	$form_text_color = empty( $form_text_color ) ? 'var(--text-color-headings )' : $form_text_color;

	$css .= '--form-text-color: ' . esc_attr( $form_text_color ) . ";\n";

	$form_placeholder_color = get_theme_mod( 'multi_form_placeholder_color', MULTIMAGAZINE_FORM_PLACEHOLDER_COLOR );
	$form_placeholder_color = empty( $form_placeholder_color ) ? 'var(--text-color-base )' : $form_placeholder_color;

	$css .= '--form-placeholder-color: ' . esc_attr( $form_placeholder_color ) . ";\n";

	$search_bg_color = get_theme_mod( 'multi_mainmenu_searchform_background_color', MULTIMAGAZINE_MAINMENU_SEARCHFORM_BACKGROUND_COLOR );
	$search_bg_color = empty( $search_bg_color ) ? MULTIMAGAZINE_MAINMENU_SEARCHFORM_BACKGROUND_COLOR : $search_bg_color;

	$css .= '--search-background-color: ' . esc_attr( $search_bg_color ) . ";\n";

	$search_input_bg_color = get_theme_mod( 'multi_mainmenu_searchform_input_background_color', MULTIMAGAZINE_MAINMENU_SEARCHFORM_INPUT_BACKGROUND_COLOR );
	$search_input_bg_color = empty( $search_input_bg_color ) ? MULTIMAGAZINE_MAINMENU_SEARCHFORM_INPUT_BACKGROUND_COLOR : $search_input_bg_color;

	$css .= '--search-input-background-color: ' . esc_attr( $search_input_bg_color ) . ";\n";

	$search_border_radius = get_theme_mod( 'multi_search_border_radius', MULTIMAGAZINE_SEARCH_BORDER_RADIUS );

	$css .= '--search-border-radius: ' . esc_attr( $search_border_radius ) . "px;\n";

	/* messages */
	$msg_color_info    = get_theme_mod( 'multi_msg_type_info_color', MULTIMAGAZINE_MSG_TYPE_INFO_COLOR );
	$msg_color_success = get_theme_mod( 'multi_msg_type_success_color', MULTIMAGAZINE_MSG_TYPE_SUCCESS_COLOR );
	$msg_color_notice  = get_theme_mod( 'multi_msg_type_notice_color', MULTIMAGAZINE_MSG_TYPE_NOTICE_COLOR );
	$msg_color_error   = get_theme_mod( 'multi_msg_type_error_color', MULTIMAGAZINE_MSG_TYPE_ERROR_COLOR );

	$css .= '--msg-color-info: ' . esc_attr( $msg_color_info ) . ";\n";
	$css .= '--msg-color-success: ' . esc_attr( $msg_color_success ) . ";\n";
	$css .= '--msg-color-notice: ' . esc_attr( $msg_color_notice ) . ";\n";
	$css .= '--msg-color-error: ' . esc_attr( $msg_color_error ) . ";\n";

	$msg_border_width = absint( get_theme_mod( 'multi_msg_border_width', MULTIMAGAZINE_MSG_BORDER_WIDTH ) );

	$css .= '--msg-border-width: ' . esc_attr( $msg_border_width ) . "px;\n";

	$msg_border_radius = absint( get_theme_mod( 'multi_msg_border_radius', MULTIMAGAZINE_MSG_BORDER_RADIUS ) );

	$css .= '--msg-border-radius: ' . esc_attr( $msg_border_radius ) . "px;\n";

	$msg_shadow = get_theme_mod( 'multi_msg_shadow', MULTIMAGAZINE_MSG_SHADOW );
	$msg_shadow = $msg_shadow ? '4px 4px 0 0 #d2dcdf' : 'none';

	$css .= '--msg-box-shadow: ' . esc_attr( $msg_shadow ) . ";\n";

	$msg_type_color_border = get_theme_mod( 'multi_msg_type_color_border', MULTIMAGAZINE_MSG_TYPE_COLOR_BORDER );
	$msg_type_color_bg     = get_theme_mod( 'multi_msg_type_color_bg', MULTIMAGAZINE_MSG_TYPE_COLOR_BG );
	$msg_type_color_text   = get_theme_mod( 'multi_msg_type_color_text', MULTIMAGAZINE_MSG_TYPE_COLOR_TEXT );
	$msg_type_color_icon   = get_theme_mod( 'multi_msg_type_color_icon', MULTIMAGAZINE_MSG_TYPE_COLOR_ICON );

	$msg_border_color = get_theme_mod( 'multi_msg_border_color', MULTIMAGAZINE_MSG_BORDER_COLOR );
	$msg_bg_color     = get_theme_mod( 'multi_msg_bg_color', MULTIMAGAZINE_MSG_BG_COLOR );
	$msg_text_color   = get_theme_mod( 'multi_msg_text_color', MULTIMAGAZINE_MSG_TEXT_COLOR );
	$msg_icon_color   = get_theme_mod( 'multi_msg_icon_color', MULTIMAGAZINE_MSG_ICON_COLOR );

	$css .= '--msg-border-color: ' . esc_attr( $msg_border_color ) . ";\n";
	$css .= '--msg-bg-color: ' . esc_attr( $msg_bg_color ) . ";\n";
	$css .= '--msg-text-color: ' . esc_attr( $msg_text_color ) . ";\n";
	$css .= '--msg-icon-color: ' . esc_attr( $msg_icon_color ) . ";\n";

	$msg_info_border_color = $msg_type_color_border ? 'var(--msg-color-info)' : $msg_border_color;
	$msg_info_bg_color     = $msg_type_color_bg ? 'var(--msg-color-info)' : $msg_bg_color;
	$msg_info_text_color   = $msg_type_color_text ? 'var(--msg-color-info)' : $msg_text_color;
	$msg_info_icon_color   = $msg_type_color_icon ? 'var(--msg-color-info)' : $msg_icon_color;

	$msg_success_border_color = $msg_type_color_border ? 'var(--msg-color-success )' : $msg_border_color;
	$msg_success_bg_color     = $msg_type_color_bg ? 'var(--msg-color-success )' : $msg_bg_color;
	$msg_success_text_color   = $msg_type_color_text ? 'var(--msg-color-success )' : $msg_text_color;
	$msg_success_icon_color   = $msg_type_color_icon ? 'var(--msg-color-success )' : $msg_icon_color;

	$msg_notice_border_color = $msg_type_color_border ? 'var(--msg-color-notice )' : $msg_border_color;
	$msg_notice_bg_color     = $msg_type_color_bg ? 'var(--msg-color-notice )' : $msg_bg_color;
	$msg_notice_text_color   = $msg_type_color_text ? 'var(--msg-color-notice )' : $msg_text_color;
	$msg_notice_icon_color   = $msg_type_color_icon ? 'var(--msg-color-notice )' : $msg_icon_color;

	$msg_error_border_color = $msg_type_color_border ? 'var(--msg-color-error )' : $msg_border_color;
	$msg_error_bg_color     = $msg_type_color_bg ? 'var(--msg-color-error )' : $msg_bg_color;
	$msg_error_text_color   = $msg_type_color_text ? 'var(--msg-color-error )' : $msg_text_color;
	$msg_error_icon_color   = $msg_type_color_icon ? 'var(--msg-color-error )' : $msg_icon_color;

	$css .= '--msg-info-border-color: ' . esc_attr( $msg_type_color_border ? $msg_info_border_color : 'var(--msg-border-color)' ) . ";\n";
	$css .= '--msg-info-bg-color: ' . esc_attr( $msg_type_color_bg ? $msg_info_bg_color : 'var(--msg-bg-color)' ) . ";\n";
	$css .= '--msg-info-text-color: ' . esc_attr( $msg_type_color_text ? $msg_info_text_color : 'var(--msg-text-color)' ) . ";\n";
	$css .= '--msg-info-icon-color: ' . esc_attr( $msg_type_color_icon ? $msg_info_icon_color : 'var(--msg-icon-color)' ) . ";\n";

	$css .= '--msg-success-border-color: ' . esc_attr( $msg_type_color_border ? $msg_success_border_color : 'var(--msg-border-color)' ) . ";\n";
	$css .= '--msg-success-bg-color: ' . esc_attr( $msg_type_color_bg ? $msg_success_bg_color : 'var(--msg-bg-color)' ) . ";\n";
	$css .= '--msg-success-text-color: ' . esc_attr( $msg_type_color_text ? $msg_success_text_color : 'var(--msg-text-color)' ) . ";\n";
	$css .= '--msg-success-icon-color: ' . esc_attr( $msg_type_color_icon ? $msg_success_icon_color : 'var(--msg-icon-color)' ) . ";\n";

	$css .= '--msg-notice-border-color: ' . esc_attr( $msg_type_color_border ? $msg_notice_border_color : 'var(--msg-border-color)' ) . ";\n";
	$css .= '--msg-notice-bg-color: ' . esc_attr( $msg_type_color_bg ? $msg_notice_bg_color : 'var(--msg-bg-color)' ) . ";\n";
	$css .= '--msg-notice-text-color: ' . esc_attr( $msg_type_color_text ? $msg_notice_text_color : 'var(--msg-text-color)' ) . ";\n";
	$css .= '--msg-notice-icon-color: ' . esc_attr( $msg_type_color_icon ? $msg_notice_icon_color : 'var(--msg-icon-color)' ) . ";\n";

	$css .= '--msg-error-border-color: ' . esc_attr( $msg_type_color_border ? $msg_error_border_color : 'var(--msg-border-color)' ) . ";\n";
	$css .= '--msg-error-bg-color: ' . esc_attr( $msg_type_color_bg ? $msg_error_bg_color : 'var(--msg-bg-color)' ) . ";\n";
	$css .= '--msg-error-text-color: ' . esc_attr( $msg_type_color_text ? $msg_error_text_color : 'var(--msg-text-color)' ) . ";\n";
	$css .= '--msg-error-icon-color: ' . esc_attr( $msg_type_color_icon ? $msg_error_icon_color : 'var(--msg-icon-color)' ) . ";\n";

	/* social links */
	$social_icon_color = get_theme_mod( 'multi_social_icons_color', MULTIMAGAZINE_SOCIAL_ICONS_COLOR );
	$social_icon_color = empty( $social_icon_color ) ? MULTIMAGAZINE_SOCIAL_ICONS_COLOR : $social_icon_color;

	$css .= '--social-icon-color: ' . esc_attr( $social_icon_color ) . ";\n";

	$social_icon_hover_color = get_theme_mod( 'multi_social_icons_hover_color', MULTIMAGAZINE_SOCIAL_ICONS_HOVER_COLOR );
	$social_icon_hover_color = empty( $social_icon_hover_color ) ? MULTIMAGAZINE_SOCIAL_ICONS_HOVER_COLOR : $social_icon_hover_color;

	$css .= '--social-icon-hover-color: ' . esc_attr( $social_icon_hover_color ) . ";\n";

	$social_icon_background_color = get_theme_mod( 'multi_social_icons_background_color', MULTIMAGAZINE_SOCIAL_ICONS_BACKGROUND_COLOR );
	$social_icon_background_color = empty( $social_icon_background_color ) ? 'transparent' : $social_icon_background_color;

	$css .= '--social-icon-background-color: ' . esc_attr( $social_icon_background_color ) . ";\n";

	$social_icon_background_hover_color = get_theme_mod( 'multi_social_icons_background_hover_color', MULTIMAGAZINE_SOCIAL_ICONS_BACKGROUND_HOVER_COLOR );
	$social_icon_background_hover_color = empty( $social_icon_background_hover_color ) ? 'transparent' : $social_icon_background_hover_color;

	$css .= '--social-icon-background-hover-color: ' . esc_attr( $social_icon_background_hover_color ) . ";\n";

	$social_icon_border_color = get_theme_mod( 'multi_social_icons_border_color', MULTIMAGAZINE_SOCIAL_ICONS_BORDER_COLOR );
	$social_icon_border_color = empty( $social_icon_border_color ) ? 'var(--social-icon-color )' : $social_icon_border_color;

	$css .= '--social-icon-border-color: ' . esc_attr( $social_icon_border_color ) . ";\n";

	$social_icon_border_hover_color = get_theme_mod( 'multi_social_icons_border_hover_color', MULTIMAGAZINE_SOCIAL_ICONS_BORDER_HOVER_COLOR );
	$social_icon_border_hover_color = empty( $social_icon_border_hover_color ) ? 'var(--social-icon-hover-color )' : $social_icon_border_hover_color;

	$css .= '--social-icon-border-hover-color: ' . esc_attr( $social_icon_border_hover_color ) . ";\n";

	$social_icon_border_width = absint( get_theme_mod( 'multi_social_icons_border_width', MULTIMAGAZINE_SOCIAL_ICONS_BORDER_WIDTH ) );

	$css .= '--social-icon-border-width: ' . esc_attr( $social_icon_border_width ) . "px;\n";

	$social_spacing = get_theme_mod( 'multi_social_links_spacing', MULTIMAGAZINE_SOCIAL_LINKS_SPACING );

	$css .= '--social-links-spacing: ' . esc_attr( $social_spacing ) . "px;\n";
	$css .= "--social-links-padding: calc(var(--social-links-spacing ) / 2);\n";
	$css .= "--social-links-margin: calc(0px - var(--social-links-padding ));\n";

	$social_lift = absint( get_theme_mod( 'multi_social_lift', MULTIMAGAZINE_SOCIAL_LIFT ) );
	if ( 0 === $social_lift ) {
		$css .= "--social-lift: none;\n";
	} else {
		$css .= '--social-lift: translateY(-' . esc_attr( $social_lift ) . "px);\n";
	}

	/* header social icons colors */
	$header_social_color = get_theme_mod( 'multi_header_social_icons_color', MULTIMAGAZINE_HEADER_SOCIAL_ICONS_COLOR );
	$header_social_color = empty( $header_social_color ) ? 'var(--social-icon-color )' : $header_social_color;

	$css .= '--header-social-icons-color: ' . esc_attr( $header_social_color ) . ";\n";

	$header_social_hover_color = get_theme_mod( 'multi_header_social_icons_hover_color', MULTIMAGAZINE_HEADER_SOCIAL_ICONS_HOVER_COLOR );
	$header_social_hover_color = empty( $header_social_hover_color ) ? 'var(--social-icon-hover-color )' : $header_social_hover_color;

	$css .= '--header-social-icons-hover-color: ' . esc_attr( $header_social_hover_color ) . ";\n";

	$header_social_background_color = get_theme_mod( 'multi_header_social_icons_background_color', MULTIMAGAZINE_HEADER_SOCIAL_ICONS_BACKGROUND_COLOR );
	$header_social_background_color = empty( $header_social_background_color ) ? 'var(--social-icon-background-color )' : $header_social_background_color;

	$css .= '--header-social-icons-background-color: ' . esc_attr( $header_social_background_color ) . ";\n";

	$header_social_background_hover_color = get_theme_mod( 'multi_header_social_icons_background_hover_color', MULTIMAGAZINE_HEADER_SOCIAL_ICONS_BACKGROUND_HOVER_COLOR );
	$header_social_background_hover_color = empty( $header_social_background_hover_color ) ? 'var(--social-icon-background-hover-color )' : $header_social_background_hover_color;

	$css .= '--header-social-icons-background-hover-color: ' . esc_attr( $header_social_background_hover_color ) . ";\n";

	$header_social_border_color = get_theme_mod( 'multi_header_social_icons_border_color', MULTIMAGAZINE_HEADER_SOCIAL_ICONS_BORDER_COLOR );
	$header_social_border_color = empty( $header_social_border_color ) ? 'var(--social-icon-border-color )' : $header_social_border_color;

	$css .= '--header-social-icons-border-color: ' . esc_attr( $header_social_border_color ) . ";\n";

	$header_social_border_hover_color = get_theme_mod( 'multi_header_social_icons_border_hover_color', MULTIMAGAZINE_HEADER_SOCIAL_ICONS_BORDER_HOVER_COLOR );
	$header_social_border_hover_color = empty( $header_social_border_hover_color ) ? 'var(--social-icon-border-hover-color )' : $header_social_border_hover_color;

	$css .= '--header-social-icons-border-hover-color: ' . esc_attr( $header_social_border_hover_color ) . ";\n";

	/* footer social icons colors */
	$footer_social_color = get_theme_mod( 'multi_footer_social_icons_color', MULTIMAGAZINE_FOOTER_SOCIAL_ICONS_COLOR );
	$footer_social_color = empty( $footer_social_color ) ? 'var(--social-icon-color )' : $footer_social_color;

	$css .= '--footer-social-icons-color: ' . esc_attr( $footer_social_color ) . ";\n";

	$footer_social_hover_color = get_theme_mod( 'multi_footer_social_icons_hover_color', MULTIMAGAZINE_FOOTER_SOCIAL_ICONS_HOVER_COLOR );
	$footer_social_hover_color = empty( $footer_social_hover_color ) ? 'var(--social-icon-hover-color )' : $footer_social_hover_color;

	$css .= '--footer-social-icons-hover-color: ' . esc_attr( $footer_social_hover_color ) . ";\n";

	$footer_social_background_color = get_theme_mod( 'multi_footer_social_icons_background_color', MULTIMAGAZINE_FOOTER_SOCIAL_ICONS_BACKGROUND_COLOR );
	$footer_social_background_color = empty( $footer_social_background_color ) ? 'var(--social-icon-background-color )' : $footer_social_background_color;

	$css .= '--footer-social-icons-background-color: ' . esc_attr( $footer_social_background_color ) . ";\n";

	$footer_social_background_hover_color = get_theme_mod( 'multi_footer_social_icons_background_hover_color', MULTIMAGAZINE_FOOTER_SOCIAL_ICONS_BACKGROUND_HOVER_COLOR );
	$footer_social_background_hover_color = empty( $footer_social_background_hover_color ) ? 'var(--social-icon-background-hover-color )' : $footer_social_background_hover_color;

	$css .= '--footer-social-icons-background-hover-color: ' . esc_attr( $footer_social_background_hover_color ) . ";\n";

	$footer_social_border_color = get_theme_mod( 'multi_footer_social_icons_border_color', MULTIMAGAZINE_FOOTER_SOCIAL_ICONS_BORDER_COLOR );
	$footer_social_border_color = empty( $footer_social_border_color ) ? 'var(--social-icon-border-color )' : $footer_social_border_color;

	$css .= '--footer-social-icons-border-color: ' . esc_attr( $footer_social_border_color ) . ";\n";

	$footer_social_border_hover_color = get_theme_mod( 'multi_footer_social_icons_border_hover_color', MULTIMAGAZINE_FOOTER_SOCIAL_ICONS_BORDER_HOVER_COLOR );
	$footer_social_border_hover_color = empty( $footer_social_border_hover_color ) ? 'var(--social-icon-border-hover-color )' : $footer_social_border_hover_color;

	$css .= '--footer-social-icons-border-hover-color: ' . esc_attr( $footer_social_border_hover_color ) . ";\n";

	$social_border_radius = absint( get_theme_mod( 'multi_social_link_border_radius', MULTIMAGAZINE_SOCIAL_LINK_BORDER_RADIUS ) );

	$css .= '--social-icon-border-radius: ' . esc_attr( $social_border_radius ) . "px;\n";

	$social_icon_size = absint( get_theme_mod( 'multi_social_links_icon_size', MULTIMAGAZINE_SOCIAL_LINKS_ICON_SIZE ) );

	$css .= '--social-links-icon-size: ' . $social_icon_size . "px;\n";

	$social_box_size = absint( get_theme_mod( 'multi_social_links_box_size', MULTIMAGAZINE_SOCIAL_LINKS_BOX_SIZE ) );

	$css .= '--social-links-box-size: ' . $social_box_size . "px;\n";

	if ( absint( $social_icon_border_width ) !== 0 ) {
		$social_icon_line_height = absint( $social_box_size ) - 2 * absint( $social_icon_border_width );
	} else {
		$social_icon_line_height = absint( $social_box_size );
	}
	$css .= '--social-icon-line-height: ' . esc_attr( $social_icon_line_height ) . "px;\n";

	/* Layout sizes */

	$css .= "--body-width: 100vw;\n";
	$css .= "--fullwidth-margin: -50vw;\n";

	$max_layout_width = get_theme_mod( 'multi_layout_width', MULTIMAGAZINE_LAYOUT_WIDTH );

	$css .= '--layout-width: ' . esc_attr( $max_layout_width ) . "px;\n";

	$max_layout_width_half = $max_layout_width / 2;

	$css .= '--layout-width-half: ' . esc_attr( $max_layout_width_half ) . "px;\n";

	$max_width_with_margins = $max_layout_width + 40;

	$css .= '--layout-width-with-margins: ' . esc_attr( $max_width_with_margins ) . "px;\n";

	$sidebar_width = get_theme_mod( 'multi_sidebar_width', MULTIMAGAZINE_SIDEBAR_WIDTH );

	$css .= '--sidebar-width: ' . esc_attr( $sidebar_width ) . "px;\n";

	$column_gap = get_theme_mod( 'multi_column_gap', MULTIMAGAZINE_COLUMN_GAP );

	$css .= '--column-gap: ' . esc_attr( $column_gap ) . "px;\n";
	$css .= "--column-padding: calc(var(--column-gap) / 2);\n";
	$css .= "--column-padding-negative: calc(0px - var(--column-padding ) );\n";

	$content_bottom_margin = absint( get_theme_mod( 'multi_content_bottom_margin', MULTIMAGAZINE_CONTENT_BOTTOM_MARGIN ) );
	if ( is_single() || is_page() ) {
		$local_bottom_margin = get_post_meta( get_the_id(), 'multi_content_bottom_margin', true );
		if ( '' !== $local_bottom_margin ) {
			$content_bottom_margin = absint( $local_bottom_margin );
		}
	}
	$css .= '--content-bottom-margin: ' . esc_attr( $content_bottom_margin ) . "px;\n";

	/* Fonts */
	$fonts = multimagazine_custom_typography();

	$css .= '--primary-font: ' . esc_attr( $fonts['primary'] ) . ";\n";
	$css .= '--secondary-font: ' . esc_attr( $fonts['secondary'] ) . ";\n";

	$h1_font = get_theme_mod( 'multi_h1_font', MULTIMAGAZINE_H1_FONT );
	$h2_font = get_theme_mod( 'multi_h2_font', MULTIMAGAZINE_H2_FONT );
	$h3_font = get_theme_mod( 'multi_h3_font', MULTIMAGAZINE_H3_FONT );
	$h4_font = get_theme_mod( 'multi_h4_font', MULTIMAGAZINE_H4_FONT );
	$h5_font = get_theme_mod( 'multi_h5_font', MULTIMAGAZINE_H5_FONT );
	$h6_font = get_theme_mod( 'multi_h6_font', MULTIMAGAZINE_H6_FONT );

	$css .= '--h1-font-family: var(--' . esc_attr( $h1_font ) . "-font );\n";
	$css .= '--h2-font-family: var(--' . esc_attr( $h2_font ) . "-font );\n";
	$css .= '--h3-font-family: var(--' . esc_attr( $h3_font ) . "-font );\n";
	$css .= '--h4-font-family: var(--' . esc_attr( $h4_font ) . "-font );\n";
	$css .= '--h5-font-family: var(--' . esc_attr( $h5_font ) . "-font );\n";
	$css .= '--h6-font-family: var(--' . esc_attr( $h6_font ) . "-font );\n";

	$h1_font_size = get_theme_mod( 'multi_h1_font_size', MULTIMAGAZINE_H1_FONT_SIZE );
	$h2_font_size = get_theme_mod( 'multi_h2_font_size', MULTIMAGAZINE_H2_FONT_SIZE );
	$h3_font_size = get_theme_mod( 'multi_h3_font_size', MULTIMAGAZINE_H3_FONT_SIZE );
	$h4_font_size = get_theme_mod( 'multi_h4_font_size', MULTIMAGAZINE_H4_FONT_SIZE );
	$h5_font_size = get_theme_mod( 'multi_h5_font_size', MULTIMAGAZINE_H5_FONT_SIZE );
	$h6_font_size = get_theme_mod( 'multi_h6_font_size', MULTIMAGAZINE_H6_FONT_SIZE );

	$css .= '--h1-font-size: ' . esc_attr( $h1_font_size ) . "px;\n";
	$css .= '--h2-font-size: ' . esc_attr( $h2_font_size ) . "px;\n";
	$css .= '--h3-font-size: ' . esc_attr( $h3_font_size ) . "px;\n";
	$css .= '--h4-font-size: ' . esc_attr( $h4_font_size ) . "px;\n";
	$css .= '--h5-font-size: ' . esc_attr( $h5_font_size ) . "px;\n";
	$css .= '--h6-font-size: ' . esc_attr( $h6_font_size ) . "px;\n";

	$quote_font_size = get_theme_mod( 'multi_blockquote_font_size', MULTIMAGAZINE_BLOCKQUOTE_FONT_SIZE );
	$quote_font_size = empty( $quote_font_size ) ? 19 : $quote_font_size;
	$css            .= '--blockquote-font-size: ' . esc_attr( $quote_font_size ) . "px;\n";

	$quote_font = get_theme_mod( 'multi_quote_font', MULTIMAGAZINE_QUOTE_FONT );
	$css       .= '--blockquote-font: var(--' . esc_attr( $quote_font ) . "-font );\n";

	$spec_headings_font      = get_theme_mod( 'multi_special_headings_font', MULTIMAGAZINE_SPECIAL_HEADINGS_FONT );
	$spec_headings_font_size = get_theme_mod( 'multi_special_headings_font_size', MULTIMAGAZINE_SPECIAL_HEADINGS_FONT_SIZE );

	$css .= '--special-headings-font-family: var(--' . esc_attr( $spec_headings_font ) . "-font );\n";
	$css .= '--special-headings-font-size: ' . esc_attr( $spec_headings_font_size ) . "px;\n";

	$widget_title_font = get_theme_mod( 'multi_widget_title_font', MULTIMAGAZINE_WIDGET_TITLE_FONT );
	$css              .= '--widget-title-font-family: var(--' . esc_attr( $widget_title_font ) . "-font );\n";

	$widget_title_font_size = get_theme_mod( 'multi_widget_title_font_size', MULTIMAGAZINE_WIDGET_TITLE_FONT_SIZE );
	$css                   .= '--widget-title-font-size: ' . esc_attr( $widget_title_font_size ) . "px;\n";

	$widget_text_font_size = get_theme_mod( 'multi_widget_text_font_size', MULTIMAGAZINE_WIDGET_TEXT_FONT_SIZE );
	$css                  .= '--widget-text-font-size: ' . esc_attr( $widget_text_font_size ) . "px;\n";

	$body_font_size = get_theme_mod( 'multi_body_font_size', MULTIMAGAZINE_BODY_FONT_SIZE );
	if ( empty( $body_font_size ) ) {
		$body_font_size = MULTIMAGAZINE_BODY_FONT_SIZE;
	}
	$css .= '--body-font-size: ' . esc_attr( $body_font_size ) . "px;\n";

	$body_font_weight = get_theme_mod( 'multi_body_font_weight', MULTIMAGAZINE_BODY_FONT_WEIGHT );

	$css .= '--body-font-weight: ' . esc_attr( $body_font_weight ) . ";\n";

	$body_letter_spacing = get_theme_mod( 'multi_body_letter_spacing', MULTIMAGAZINE_BODY_LETTER_SPACING );
	if ( '' === $body_letter_spacing || 0 === intval( $body_letter_spacing ) ) {
		$body_letter_spacing = 0;
	} else {
		$body_letter_spacing = str_replace( ',', '.', $body_letter_spacing );
	}
	$css .= '--body-letter-spacing: ' . esc_attr( $body_letter_spacing ) . "px;\n";

	$body_line_height = get_theme_mod( 'multi_body_line_height', MULTIMAGAZINE_BODY_LINE_HEIGHT );
	if ( empty( $body_line_height ) ) {
		$body_line_height = MULTIMAGAZINE_BODY_LINE_HEIGHT;
	}
	$body_line_height_unit = get_theme_mod( 'multi_body_line_height_unit', MULTIMAGAZINE_BODY_LINE_HEIGHT_UNIT );

	$css .= '--body-line-height: ' . esc_attr( str_replace( ',', '.', $body_line_height ) ) . esc_attr( $body_line_height_unit ) . ";\n";

	$post_content_font_size = get_theme_mod( 'multi_post_content_font_size', MULTIMAGAZINE_POST_CONTENT_FONT_SIZE );
	if ( empty( $post_content_font_size ) ) {
		$post_content_font_size = MULTIMAGAZINE_POST_CONTENT_FONT_SIZE;
	}
	$css .= '--post-content-font-size: ' . esc_attr( $post_content_font_size ) . "px;\n";

	$post_content_line_height = get_theme_mod( 'multi_post_content_line_height', MULTIMAGAZINE_POST_CONTENT_LINE_HEIGHT );
	if ( empty( $post_content_line_height ) ) {
		$post_content_line_height = MULTIMAGAZINE_POST_CONTENT_LINE_HEIGHT;
	}
	$post_content_line_height_unit = get_theme_mod( 'multi_post_content_line_height_unit', MULTIMAGAZINE_POST_CONTENT_LINE_HEIGHT_UNIT );

	$css .= '--post-content-line-height: ' . esc_attr( str_replace( ',', '.', $post_content_line_height ) ) . esc_attr( $post_content_line_height_unit ) . ";\n";

	$footer_menu_font_size = get_theme_mod( 'multi_footer_menu_font_size', MULTIMAGAZINE_FOOTER_MENU_FONT_SIZE );
	if ( empty( $footer_menu_font_size ) ) {
		$footer_menu_font_size = MULTIMAGAZINE_FOOTER_MENU_FONT_SIZE;
	}
	$css .= '--footer-menu-font-size: ' . esc_attr( $footer_menu_font_size ) . "px;\n";

	$footer_content_font_size = get_theme_mod( 'multi_footer_content_font_size', MULTIMAGAZINE_FOOTER_CONTENT_FONT_SIZE );
	if ( empty( $footer_content_font_size ) ) {
		$footer_content_font_size = MULTIMAGAZINE_FOOTER_CONTENT_FONT_SIZE;
	}
	$css .= '--footer-content-font-size: ' . esc_attr( $footer_content_font_size ) . "px;\n";

	$button_font = get_theme_mod( 'multi_button_font', MULTIMAGAZINE_BUTTON_FONT );
	$css        .= '--button-font-family: var(--' . esc_attr( $button_font ) . "-font );\n";

	$related_post_title_font_size = get_theme_mod( 'multi_related_post_title_font_size', MULTIMAGAZINE_RELATED_POST_TITLE_FONT_SIZE );
	$css                         .= '--related-post-title-font-size: ' . esc_attr( $related_post_title_font_size ) . "px;\n";

	/* search form in main menu */
	$mm_search_bg = get_theme_mod( 'multi_mainmenu_searchform_background_color', MULTIMAGAZINE_MAINMENU_SEARCHFORM_BACKGROUND_COLOR );
	$mm_search_bg = empty( $mm_search_bg ) ? MULTIMAGAZINE_MAINMENU_SEARCHFORM_BACKGROUND_COLOR : $mm_search_bg;

	$css .= '--mainmenu-searchform-bg: ' . esc_attr( $mm_search_bg ) . ";\n";

	$mm_search_input_bg = get_theme_mod( 'multi_mainmenu_searchform_input_background_color', MULTIMAGAZINE_MAINMENU_SEARCHFORM_INPUT_BACKGROUND_COLOR );
	$mm_search_input_bg = empty( $mm_search_bg ) ? MULTIMAGAZINE_MAINMENU_SEARCHFORM_INPUT_BACKGROUND_COLOR : $mm_search_input_bg;

	$css .= '--mainmenu-searchform-input-bg: ' . esc_attr( $mm_search_input_bg ) . ";\n";

	/* pagination */
	$pagination_current_color = get_theme_mod( 'multi_pagination_current_page_color', MULTIMAGAZINE_PAGINATION_CURRENT_PAGE_COLOR );
	if ( ! empty( $pagination_current_color ) ) {
		$css .= '--pagination-current-color: ' . esc_attr( $pagination_current_color ) . ";\n";
	}

	$pagination_dot_valign = get_theme_mod( 'pagination_dot_valign', MULTIMAGAZINE_PAGINATION_DOT_VALIGN );
	if ( ! empty( $pagination_dot_valign ) ) {
		$css .= '--pagination-dot-vertical-align: ' . esc_attr( $pagination_dot_valign ) . ";\n";
	}
	switch ( $pagination_dot_valign ) {
		case 'top':
			$dot_flex_align = 'flex-start';
			break;
		case 'bottom':
			$dot_flex_align = 'flex-end';
			break;
		default:
			$dot_flex_align = 'center';
	}
	$css .= '--pagination-dot-align-items: ' . esc_attr( $dot_flex_align ) . ";\n";

	$pagination_dot_spacing = absint( get_theme_mod( 'pagination_dot_spacing', MULTIMAGAZINE_PAGINATION_DOT_SPACING ) );
	$css                   .= '--pagination-dot-spacing: ' . esc_attr( $pagination_dot_spacing ) . "px;\n";

	$pagination_line_width = absint( get_theme_mod( 'pagination_line_width', MULTIMAGAZINE_PAGINATION_LINE_WIDTH ) );
	$css                  .= '--pagination-line-width: ' . esc_attr( $pagination_line_width ) . "px;\n";

	$pagination_line_color = get_theme_mod( 'pagination_line_color', MULTIMAGAZINE_PAGINATION_LINE_COLOR );
	$pagination_line_color = empty( $pagination_line_color ) ? 'transparent' : $pagination_line_color;
	$css                  .= '--pagination-line-color: ' . esc_attr( $pagination_line_color ) . ";\n";

	$dots_width = absint( get_theme_mod( 'pagination_dot_width', MULTIMAGAZINE_PAGINATION_DOT_WIDTH ) );
	$css       .= '--pagination-dot-width: ' . esc_attr( $dots_width ) . "px;\n";

	$dots_height = absint( get_theme_mod( 'pagination_dot_height', MULTIMAGAZINE_PAGINATION_DOT_HEIGHT ) );
	$css        .= '--pagination-dot-height: ' . esc_attr( $dots_height ) . "px;\n";

	$dots_color = get_theme_mod( 'pagination_dot_color', MULTIMAGAZINE_PAGINATION_DOT_COLOR );
	$dots_color = empty( $dots_color ) ? '#e0e0e0' : $dots_color;
	$css       .= '--pagination-dot-color: ' . esc_attr( $dots_color ) . ";\n";

	$dots_border_color = get_theme_mod( 'pagination_dot_border_color', MULTIMAGAZINE_PAGINATION_DOT_BORDER_COLOR );
	$dots_border_color = empty( $dots_border_color ) ? 'var(--border-color)' : $dots_border_color;
	$dots_border_width = absint( get_theme_mod( 'pagination_dot_border_width', MULTIMAGAZINE_PAGINATION_DOT_BORDER_WIDTH ) );
	$css              .= '--pagination-dot-border-width: ' . esc_attr( $dots_border_width ) . "px;\n";
	$css              .= '--pagination-dot-border-color: ' . esc_attr( $dots_border_color ) . ";\n";
	$css              .= "--pagination-dot-border: var(--pagination-dot-border-width) solid var(--pagination-dot-border-color);\n";

	$dots_border_radius = get_theme_mod( 'pagination_dot_border_radius', MULTIMAGAZINE_PAGINATION_DOT_BORDER_RADIUS );
	$css               .= '--pagination-dot-border-radius: ' . esc_attr( $dots_border_radius ) . "px;\n";

	$dots_active_width = absint( get_theme_mod( 'pagination_dot_active_width', MULTIMAGAZINE_PAGINATION_DOT_ACTIVE_WIDTH ) );
	$css              .= '--pagination-dot-active-width: ' . esc_attr( $dots_active_width ) . "px;\n";

	$dots_active_height = absint( get_theme_mod( 'pagination_dot_active_height', MULTIMAGAZINE_PAGINATION_DOT_ACTIVE_HEIGHT ) );
	$css               .= '--pagination-dot-active-height: ' . esc_attr( $dots_active_height ) . "px;\n";

	$dots_active_color = get_theme_mod( 'pagination_dot_active_color', MULTIMAGAZINE_PAGINATION_DOT_ACTIVE_COLOR );
	$dots_active_color = empty( $dots_active_color ) ? 'var(--main-color)' : $dots_active_color;
	$css              .= '--pagination-dot-active-color: ' . esc_attr( $dots_active_color ) . ";\n";

	$dots_active_border_color = get_theme_mod( 'pagination_dot_active_border_color', MULTIMAGAZINE_PAGINATION_DOT_ACTIVE_BORDER_COLOR );
	$dots_active_border_color = empty( $dots_active_border_color ) ? 'var(--border-color)' : $dots_active_border_color;
	$dots_active_border_width = absint( get_theme_mod( 'pagination_dot_active_border_width', MULTIMAGAZINE_PAGINATION_DOT_ACTIVE_BORDER_WIDTH ) );
	$css                     .= '--pagination-dot-active-border-width: ' . esc_attr( $dots_active_border_width ) . "px;\n";
	$css                     .= '--pagination-dot-active-border-color: ' . esc_attr( $dots_active_border_color ) . ";\n";
	$css                     .= "--pagination-dot-active-border: var(--pagination-dot-active-border-width) solid var(--pagination-dot-active-border-color);\n";

	$dots_active_border_radius = absint( get_theme_mod( 'pagination_dot_active_border_radius', MULTIMAGAZINE_PAGINATION_DOT_ACTIVE_BORDER_RADIUS ) );
	$css                      .= '--pagination-dot-active-border-radius: ' . esc_attr( $dots_active_border_radius ) . "px;\n";

	$dots_hover_color = get_theme_mod( 'pagination_dot_hover_color', MULTIMAGAZINE_PAGINATION_DOT_HOVER_COLOR );
	$dots_hover_color = empty( $dots_hover_color ) ? $main_color : $dots_hover_color;
	$css             .= '--pagination-dot-hover-color: ' . esc_attr( $dots_hover_color ) . ";\n";

	$dots_hover_border_color = get_theme_mod( 'pagination_dot_hover_border_color', MULTIMAGAZINE_PAGINATION_DOT_HOVER_BORDER_COLOR );
	$dots_hover_border_color = empty( $dots_hover_border_color ) ? 'var(--border-color)' : $dots_hover_border_color;
	$dots_hover_border_width = absint( get_theme_mod( 'pagination_dot_hover_border_width', MULTIMAGAZINE_PAGINATION_DOT_HOVER_BORDER_WIDTH ) );
	$css                    .= '--pagination-dot-hover-border-width: ' . esc_attr( $dots_hover_border_width ) . "px;\n";
	$css                    .= '--pagination-dot-hover-border-color: ' . esc_attr( $dots_hover_border_color ) . ";\n";
	$css                    .= "--pagination-dot-hover-border: var(--pagination-dot-hover-border-width) solid var(--pagination-dot-hover-border-color);\n";

	/* Top bar */

	$topbar_height = absint( get_theme_mod( 'multi_topbar_height', 40 ) );
	$topbar_height = empty( $topbar_height ) ? 40 : $topbar_height;

	$css .= '--topbar-height: ' . esc_attr( $topbar_height ) . "px;\n";

	$topbar_text = get_theme_mod( 'multi_topbar_text_color', MULTIMAGAZINE_TOPBAR_TEXT_COLOR );
	$topbar_text = empty( $topbar_text ) ? '#ffffff' : $topbar_text;

	$css .= '--top-color-text: ' . esc_attr( $topbar_text ) . ";\n";

	$topbar_bg = get_theme_mod( 'multi_topbar_bg_color', MULTIMAGAZINE_TOPBAR_BG_COLOR );
	$topbar_bg = empty( $topbar_bg ) ? '#768994' : $topbar_bg;

	$css .= '--top-color-background: ' . esc_attr( $topbar_bg ) . ";\n";

	$topbar_bg_sticky = get_theme_mod( 'multi_topbar_bg_color_sticky', '#768994' );
	$topbar_bg_sticky = empty( $topbar_bg_sticky ) ? '#768994' : $topbar_bg_sticky;

	$css .= '--top-color-background-sticky: ' . esc_attr( $topbar_bg_sticky ) . ";\n";

	$topbar_link = get_theme_mod( 'multi_topbar_link_color', MULTIMAGAZINE_TOPBAR_LINK_COLOR );
	$topbar_link = empty( $topbar_link ) ? '#ffffff' : $topbar_link;

	$css .= '--top-color-link: ' . esc_attr( $topbar_link ) . ";\n";

	$topbar_link_hover = get_theme_mod( 'multi_topbar_link_hover_color', MULTIMAGAZINE_TOPBAR_LINK_HOVER_COLOR );
	$topbar_link_hover = empty( $topbar_link_hover ) ? '#ffffff' : $topbar_link_hover;

	$topbar_middle_ratio = get_theme_mod( 'multi_topbar_middle_ratio', MULTIMAGAZINE_TOPBAR_MIDDLE_RATIO );
	$css                .= "--top-bar-middle-ratio: $topbar_middle_ratio;\n";

	$css .= '--top-color-link-hover: ' . esc_attr( $topbar_link_hover ) . ";\n";

	/* Subheader */
	$css .= multimagazine_css_vars_subheader();

	/* Preloader */
	$css .= multimagazine_css_vars_preloader();

	/* Other settings */

	$max_logo_height = absint( get_theme_mod( 'multi_logo_height', 45 ) );
	if ( ! empty( $max_logo_height ) ) {
		$css .= '--max-logo-height: ' . esc_attr( $max_logo_height ) . "px;\n";
	} else {
		$css .= "--max-logo-height: none;\n";
	}

	/* sticky header logo height */
	$sticky_logo_height = get_theme_mod( 'multi_sticky_header_logo_height', MULTIMAGAZINE_STICKY_HEADER_LOGO_HEIGHT );
	$sticky_logo_height = absint( $sticky_logo_height ) === 0 ? $max_logo_height : $sticky_logo_height;

	$css .= '--max-logo-height-sticky: ' . esc_attr( $sticky_logo_height ) . "px;\n";

	/* logo height on mobile */
	$max_logo_height_mobile = absint( get_theme_mod( 'multi_logo_height_mobile', $max_logo_height ) );
	$max_logo_height_mobile = empty( $max_logo_height_mobile ) ? 'var(--max-logo-height )' : $max_logo_height_mobile . 'px';

	$css .= '--max-logo-height-mobile: ' . esc_attr( $max_logo_height_mobile ) . ";\n";

	$max_logo_height_mobile_sticky = get_theme_mod( 'multi_sticky_header_logo_height_mobile', MULTIMAGAZINE_STICKY_HEADER_LOGO_HEIGHT_MOBILE );
	$max_logo_height_mobile_sticky = empty( $max_logo_height_mobile_sticky ) ? 'var(--max-logo-height-mobile )' : $max_logo_height_mobile_sticky . 'px';

	$css .= '--max-logo-height-mobile-sticky: ' . esc_attr( $max_logo_height_mobile_sticky ) . ";\n";

	/* logo vertical offset */
	$logo_offset = absint( get_theme_mod( 'multi_logo_v_offset', MULTIMAGAZINE_LOGO_V_OFFSET ) );

	$css .= '--logo-v-offset: -' . esc_attr( $logo_offset ) . "px;\n";

	$logo_offset_mobile = absint( get_theme_mod( 'multi_logo_v_offset_mobile', MULTIMAGAZINE_LOGO_V_OFFSET_MOBILE ) );

	$css .= '--logo-v-offset-mobile: -' . esc_attr( $logo_offset_mobile ) . "px;\n";

	$button_text_transform = get_theme_mod( 'multi_button_text_transform', MULTIMAGAZINE_BUTTON_TEXT_TRANSFORM );

	$css .= '--button-text-transform: ' . esc_attr( $button_text_transform ) . ";\n";

	/* font display */
	$font_display = get_theme_mod( 'multi_font_display', MULTIMAGAZINE_FONT_DISPLAY );

	$css .= '--font-display: ' . esc_attr( $font_display ) . ";\n";

	/* slider options */
	$slider_arrow_color = get_theme_mod( 'multi_slider_arrow_color', MULTIMAGAZINE_SLIDER_ARROW_COLOR );
	$slider_arrow_color = empty( $slider_arrow_color ) ? 'var(--text-color-secondary)' : $slider_arrow_color;
	$css               .= '--slider-arrow-color: ' . esc_attr( $slider_arrow_color ) . ";\n";

	$slider_arrow_color_hover = get_theme_mod( 'multi_slider_arrow_hover_color', MULTIMAGAZINE_SLIDER_ARROW_HOVER_COLOR );
	$slider_arrow_color_hover = empty( $slider_arrow_color_hover ) ? 'var(--text-color-base )' : $slider_arrow_color_hover;
	$css                     .= '--slider-arrow-hover-color: ' . esc_attr( $slider_arrow_color_hover ) . ";\n";

	/* sticky header */
	if ( get_theme_mod( 'multi_show_topbar', MULTIMAGAZINE_SHOW_TOPBAR ) ) {
		$css .= '--sticky-header-pos: var(--topbar-height);';
	} else {
		$css .= '--sticky-header-pos: 0px;';
	}

	/* sticky widget */

	$css .= "--sticky-widget-stop: 50px;\n";

	$css .= multimagazine_css_vars_cursor();
	$css .= multimagazine_css_vars_scrollbar();

	/* icons */

	$check_color  = str_replace( '#', '', $selection_text_color );
	$select_color = str_replace( '#', '', $form_text_color );

	$css .= "--checkbox-tick: url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10.3\" height=\"8\" viewBox=\"8.9 0.3 10.3 8\" enable-background=\"new 8.9 0.3 10.3 8\"><path fill=\"%23$check_color\" d=\"M12.6 8.1l-3.7-3.8 1-1.1 2.7 2.7 5.5-5.4 1 1z\" /></svg>');";
	$css .= "--select-arrow: url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path d=\"M16.293 9.293 12 13.586 7.707 9.293l-1.414 1.414L12 16.414l5.707-5.707z\" fill=\"%23$select_color\"></path></svg>');";

	/* css end */
	$css .= '}';

	if ( function_exists( 'add_inline_style' ) ) {
		add_inline_style( 'multimagazine-css-vars', $css );
	} else {
		wp_styles()->add_inline_style( 'multimagazine-css-vars', $css );
	}

	return $css;
}

/* Helper functions */

/**
 * Prepares padding for buttons
 *
 * @param integer $def_v Default vertical padding.
 * @param integer $def_h Default horizontal padding.
 */
function multimagazine_button_padding( $def_v, $def_h ) {
	$padding = array(
		get_theme_mod( 'multi_button_padding_top', MULTIMAGAZINE_BUTTON_PADDING_TOP ) !== '' ? get_theme_mod( 'multi_button_padding_top', MULTIMAGAZINE_BUTTON_PADDING_TOP ) : $def_v,
		get_theme_mod( 'multi_button_padding_right', MULTIMAGAZINE_BUTTON_PADDING_RIGHT ) !== '' ? get_theme_mod( 'multi_button_padding_right', MULTIMAGAZINE_BUTTON_PADDING_RIGHT ) : $def_h,
		get_theme_mod( 'multi_button_padding_bottom', MULTIMAGAZINE_BUTTON_PADDING_BOTTOM ) !== '' ? get_theme_mod( 'multi_button_padding_bottom', MULTIMAGAZINE_BUTTON_PADDING_BOTTOM ) : $def_v,
		get_theme_mod( 'multi_button_padding_left', MULTIMAGAZINE_BUTTON_PADDING_LEFT ) !== '' ? get_theme_mod( 'multi_button_padding_left', MULTIMAGAZINE_BUTTON_PADDING_LEFT ) : $def_h,
	);

	$border = array(
		absint( get_theme_mod( 'multi_button_border_top_width', MULTIMAGAZINE_BUTTON_BORDER_TOP_WIDTH ) ) . 'px',
		absint( get_theme_mod( 'multi_button_border_right_width', MULTIMAGAZINE_BUTTON_BORDER_RIGHT_WIDTH ) ) . 'px',
		absint( get_theme_mod( 'multi_button_border_bottom_width', MULTIMAGAZINE_BUTTON_BORDER_BOTTOM_WIDTH ) ) . 'px',
		absint( get_theme_mod( 'multi_button_border_left_width', MULTIMAGAZINE_BUTTON_BORDER_LEFT_WIDTH ) ) . 'px',
	);

	$padding[0] = 'calc(' . $padding[0] . ' - ' . $border[0] . ')';
	$padding[1] = 'calc(' . $padding[1] . ' - ' . $border[1] . ')';
	$padding[2] = 'calc(' . $padding[2] . ' - ' . $border[2] . ')';
	$padding[3] = 'calc(' . $padding[3] . ' - ' . $border[3] . ')';

	return implode( ' ', $padding );
}

/**
 * Prepares padding for button in header
 *
 * @param integer $def_v Default vertical padding.
 * @param integer $def_h Default horizontal padding.
 */
function multimagazine_header_button_padding( $def_v, $def_h ) {
	$padding = array(
		get_theme_mod( 'multi_header_button_padding_top', MULTIMAGAZINE_HEADER_BUTTON_PADDING_TOP ) !== '' ? get_theme_mod( 'multi_header_button_padding_top', MULTIMAGAZINE_HEADER_BUTTON_PADDING_TOP ) : $def_v,
		get_theme_mod( 'multi_header_button_padding_right', MULTIMAGAZINE_HEADER_BUTTON_PADDING_RIGHT ) !== '' ? get_theme_mod( 'multi_header_button_padding_right', MULTIMAGAZINE_HEADER_BUTTON_PADDING_RIGHT ) : $def_h,
		get_theme_mod( 'multi_header_button_padding_bottom', MULTIMAGAZINE_HEADER_BUTTON_PADDING_BOTTOM ) !== '' ? get_theme_mod( 'multi_header_button_padding_bottom', MULTIMAGAZINE_HEADER_BUTTON_PADDING_BOTTOM ) : $def_v,
		get_theme_mod( 'multi_header_button_padding_left', MULTIMAGAZINE_HEADER_BUTTON_PADDING_LEFT ) !== '' ? get_theme_mod( 'multi_header_button_padding_left', MULTIMAGAZINE_HEADER_BUTTON_PADDING_LEFT ) : $def_h,
	);

	$border = array(
		absint( get_theme_mod( 'multi_header_button_border_top_width', MULTIMAGAZINE_HEADER_BUTTON_BORDER_TOP_WIDTH ) ) . 'px',
		absint( get_theme_mod( 'multi_header_button_border_right_width', MULTIMAGAZINE_HEADER_BUTTON_BORDER_RIGHT_WIDTH ) ) . 'px',
		absint( get_theme_mod( 'multi_header_button_border_bottom_width', MULTIMAGAZINE_HEADER_BUTTON_BORDER_BOTTOM_WIDTH ) ) . 'px',
		absint( get_theme_mod( 'multi_header_button_border_left_width', MULTIMAGAZINE_HEADER_BUTTON_BORDER_LEFT_WIDTH ) ) . 'px',
	);

	$padding[0] = 'calc(' . $padding[0] . ' - ' . $border[0] . ')';
	$padding[1] = 'calc(' . $padding[1] . ' - ' . $border[1] . ')';
	$padding[2] = 'calc(' . $padding[2] . ' - ' . $border[2] . ')';
	$padding[3] = 'calc(' . $padding[3] . ' - ' . $border[3] . ')';

	return implode( ' ', $padding );
}
