:root {
	// Custom variable values only support SassScript inside `#{}`.
	@each $color, $value in $grays {
		--gray-#{$color}: #{$value};
		--gray-#{$color}-hover: #{rgba($value,0.6)};
		--gray-#{$color}-shadow: #{rgba($value, 0.2)};
	}
	
	@each $color, $value in $colors {
		--#{$color}: #{$value};
		--#{$color}-hover: #{rgba($value,0.6)};
		--#{$color}-shadow: #{rgba($value, 0.2)};
	}
	
	@each $color, $value in $theme-colors {
		--#{$color}: #{$value};
		--#{$color}-hover: #{rgba($value,0.6)};
		--#{$color}-shadow: #{rgba($value, 0.2)};
		--#{$color}-hover-border: none;
	}
	
	@each $color, $value in $wp-colors {
		--#{$color}: #{$value};
		--#{$color}-hover: #{rgba($value,0.6)};
		--#{$color}-shadow: #{rgba($value, 0.2)};
	}
	
	@each $color, $value in $wc-colors {
		--#{$color}: #{$value};
		--#{$color}-hover: #{rgba($value,0.6)};
		--#{$color}-shadow: #{rgba($value, 0.2)};
	}
	
	--secondary: #{$secondary};
	--secondary-var: #{$orange};
	--secondary-light: #{$orange-light-2};
	--secondary-dark: #{$orange-light};
	--orange-dark-light: #{$orange-dark-light};
	--secondary-hover: #{rgba($warning, 0.6)};
	--black-shadow-light: #{rgba($black, 0.04)};
	--atum-table-bg: #{$white};
	--atum-table-bg2: #{$light};
	--atum-bg-white: #{$white};
	--atum-text-white: #{$white};
	--wp-yiq-text-dark: #{$yiq-text-dark};
	--wp-yiq-text-light: #{$yiq-text-light};
	--wp-pink-darken-expanded: #{$wp-pink-darken};
	--wc-purple-expanded: #{$wc-purple};
	--blue-light-expanded: #{$blue-light};
	--green-light-expanded: #{$green-light};
	--tertiary-var: #{$tertiary};
	--tertiary-light: #{$green-light-2};
	--tertiary-hover-text: #{$green};
	--tertiary-hover-border: none;
	--main-border: #{rgba($white, 0.2)};
	--main-dropdown-border: #{$gray-300};
	--atum-border-expanded: #{$gray-500};
	--atum-text-color-var1: #{$gray-500};
	--atum-text-color-var2: #{$gray-500};
	--atum-text-color-var3: #{$gray-600};
	--atum-text-color-dark2: #{$gray-600};
	--atum-table-views-tabs: #{$gray-500};
	--atum-table-views-tabs-active: #{$blue};
	--atum-table-views-tabs-active-text: #{$white};
	--atum-menu-text: #{$primary};
	--atum-menu-text-highlight: #{$primary};
	--primary-var-dark: #{$blue};
	--primary-var-text2: #{$blue};
	--atum-table-link-text: #{$gray-600};
	--atum-dropdown-toggle-bg: #{$gray-100};
	--atum-select2-border: #{$gray-200};
	--atum-pagination-bg: #{$gray-200};
	--atum-pagination-border: transparent;
	--atum-pagination-border-disabled: transparent;
	--order-green-light: #{$green-light};
	--main-text: #{$dark};
	--atum-row-shadow: #{rgba($black, 0.04)};
	--atum-expanded-bg: #{$white};
	--overflow-opacity-rigth: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,0.9));
	--overflow-opacity-left: linear-gradient(to left, rgba(255,255,255,0), rgba(255,255,255,0.9));
	--atum-column-groups-bg: #{$gray-200};
	--primary-dark: #{$blue-light};
	--atum-table-row-variation-text: #{$white};
	--primary-light: #{$blue-light-2};
	--main-text-expanded: #{$white};
	--atum-table-search-text-disabled: #{$white};
	--atum-dark-bg: #{$blue-dark-lighten};
	--popover-black-shadow: #{rgba($black, 0.2)};
	--atum-settings-nav-bg: #{$white};
	--atum-settings-heads-bg: #{$blue};
	--atum-settings-section-general-bg: #{$blue-dark-lighten};
	--atum-settings-section-bg: #{$white};
	--atum-settings-nav-link: #{$blue};
	--main-title: #{$blue-dark};
	--atum-settings-text-logo: #{$blue-dark};
	--atum-settings-input-border: #{$gray-200};
	--atum-settings-btn-save: #{$white};
	--atum-settings-btn-save-hover: #{$blue-light};
	--atum-settings-wp-color-bg: transparent;
	--wp-nth-child: #{$gray-100};
	--dash-card-text: #{$gray-500};
	--dash-atum-version: #{transparentize($black, 0.9)};
	--dash-subscription-input: #{rgba($white, 0.7)};
	--dash-nice-select-bg: #{$white};
	--dash-nice-select-list-bg: #{$white};
	--dash-nice-select-hover: #{darken($gray-200, 10%)};
	--dash-nice-select-disabled: #{lighten($gray-200, 2%)};
	--dash-nice-select-disabled-after: #{lighten($gray-500, 20%)};
	--dash-nice-select-option-hover-bg: #{$gray-100};
	--dash-nice-select-option-selected-bg: #{$blue-light};
	--dash-widget-list-border: #{transparentize($light, 0.5)};
	--dash-stats-data-widget-primary: #{$widget-primary};
	--dash-stats-data-widget-success: #{$widget-success};
	--dash-widget-current-stock-value-bg: #{$red-light};
	--dash-widget-current-stock-value-text: #{$red};
	--dash-add-widget-color: #{$gray-500};
	--dash-card-bg: #{$white};
	--dash-blue-trans: #{$blue-trans};
	--dash-green-trans: #{$green-trans};
	--dash-green-light: #{$green-light};
	--dash-green-blue: #{$green-blue};
	--dash-input-group-bg: #{transparentize($white, 0.34)};
	--dash-input-group-shadow: #{transparentize($white, 0.8)};
	--dash-statistics-ticks: #{$blue-dark};
	--dash-statistics-grid-lines: #{$gray-200};
	--dash-statistics-chart-type-bg: #{transparentize($light, 0.8)};
	--atum-border-var: #{$gray-200};
	--dash-widget-icon: #{$gray-500};
	--dash-statistics-chart-type-selected-bg: transparent;
	--dash-statistics-chart-type-selected-text: #{$warning};
	--dash-statistics-legend-switch-bg: #{transparentize($light, 0.8)};
	--dash-next-text:  #{$gray-200};
	--dash-video-title: #{$dark};
	--dash-video-subs-text: #{$gray-500};
	--dash-add-widget-color-dark: #{$blue};
	--atum-add-widget-title: #{$dark};
	--atum-add-widget-separator: #{$light};
	--atum-version: #{$white};
	--atum-version-bg: #{rgba($black, 0.2)};
	--atum-table-search-submit-bg: #{$gray-500};
	--atum-table-filter-dropdown: #{$gray-500};
	--atum-footer-title: #{$blue-dark};
	--atum-footer-link: #{$wp-link};
	--atum-footer-text: #{$gray-700};
	--primary-hover-text: #{$blue};
	--primary-hover-border: none;
	--secondary-hover-text: #EFAF00;
	--secondary-hover-border: none;
	--danger-hover-text: #{$white};
	--danger-hover-border: 1px solid transparent;
	--success-hover-border: 1px solid transparent;
	--warning-hover-border: 1px solid transparent;
	--info-hover-border: 1px solid transparent;
	--wp-link-hover: #{$primary};
}