/* FILE: _variables/_theme-options.scss */

/*! Vars: Theme mods: */
:root {

	// `$value + ''` is converting values to string to prevent any issues.
	@each $option, $value in $theme_options {

		// Not WP preset (`theme.json`) CSS variables.
		@if (
			not str-index( $option + '', '--wp--' )
			and not str-index( $value + '', '--wp--' )
		) {
			#{ $option }: #{ $value + '' };
		}
	}
}

#{$root} {

	// `$value + ''` is converting values to string to prevent any issues.
	@each $option, $value in $theme_options {

		// WP preset (`theme.json`) CSS variables need to be defined on root based on WP Global Styles.
		@if (
			str-index( $option + '', '--wp--' )
			or str-index( $value + '', '--wp--' )
		) {
			#{ $option }: #{ $value + '' };
		}

		// Automatic color variables:
		@if (
			str-index( $option, 'color_' )
			and not str-index( $option, 'gradient_' )
			and 1 == str-index( $value + '', '#' )
		) {

			$wp_slug: _str_replace( '--theme--mod--color_', '--wp--preset--color--', $option );
			$wp_slug: _str_replace( '_', '-', $wp_slug );

			// Text color.
			@if _is_dark_color( $value ) {
				#{ $wp_slug }--bg-text: var(--wp--preset--color--white);
				#{ $wp_slug }--bg-border: var(--wp--preset--color--white--border);
			} @else {
				#{ $wp_slug }--bg-text: var(--wp--preset--color--black);
				#{ $wp_slug }--bg-border: var(--wp--preset--color--black--border);
			}

			// Border color.
			// Have to convert to RGB first as SASS `rgba()` does not process variables.
			$rgb: red( $value ), green( $value ), blue( $value );
			#{ $wp_slug }--border: rgba( #{ $rgb }, var(--wp--custom--opacity--border) );
		}
	}
}
