@mixin section_white{
	background: $body-bg;
	color: #{color-contrast($body-bg)} !important;
	--icon-block-background: #{$primary};
	--icon-block-color: #{color-contrast($primary)};
	--icon-block-background-hover: #{lighten($primary, 10%)};
	--icon-block-color-hover: #{color-contrast(lighten($primary, 10%))};
	--counter-color: #{color-contrast($body-bg)};
	--contrast-color: #{lighten($dark, 5%)};
	--background: #{$body-bg};
	.rich-text a{
		color: color-contrast($body-bg);
	}
}

@mixin section_dark{
	background: $dark;
	color: #{color-contrast($dark)} !important;
	--icon-block-background: #{$body-bg};
	--icon-block-color: #{color-contrast($body-bg)};
	@if $primary == $dark{
		--icon-block-background-hover: #{lighten($dark, 15%)};
		--icon-block-color-hover: #{color-contrast(lighten($dark, 15%))};
	} @else{
		--icon-block-background-hover: #{$primary};
		--icon-block-color-hover: #{color-contrast($primary)};
	}
	@if $body-bg == $dark{
		--icon-block-background: #{$primary};
		--icon-block-color: #{color-contrast($primary)};
		--icon-block-background-hover: #{lighten($primary, 10%)};
		--icon-block-color-hover: #{color-contrast(lighten($primary, 10%))};
	}
	--counter-color: #{color-contrast($dark)};
	--background: #{$dark};
	--contrast-color: #{$light};
	.rich-text a{
		color: color-contrast($dark);
	}
}

@mixin section_light{
	background: $gray-200;
	color: #{color-contrast($gray-200)} !important;
	--icon-block-background: #{$primary};
	--icon-block-color: #{color-contrast($primary)};
	--icon-block-background-hover: #{lighten($primary, 10%)};
	--icon-block-color-hover: #{color-contrast(lighten($primary, 10%))};
	--counter-color: #{color-contrast($gray-200)};
	--background: #{$gray-200};
	--contrast-color: #{darken($dark, 5%)};
	.rich-text a{
		color: color-contrast($gray-200);
	}
}