.bg-black,
.bg-black-dark,
.bg-black-gradient,
.bg-violet,
.bg-red,
.bg-green,
.bg-blue,
.bg-blue-dark,
.bg-dark,
.bg-gradient,
.block-bg-image {
	--body-font-color: var(--color-white);

	--front-mono-color: var(--color-white);
	--paragraph-color: var(--color-white);

	--h1-color: var(--color-white);
	--h2-color: var(--color-white);
	--h3-color: var(--color-white);
	--h4-color: var(--color-white);
	--h5-color: var(--color-white);
	--h6-color: var(--color-white);

	--anchor-link-normal-color: var(--color-white);
	--anchor-link-hover-color: rgba(var(--color-rgb-white), 0.8);

	--button-primary-normal-bg-color: #fff;
	--button-primary-normal-text-color: #000;
	--button-primary-hover-text-color: #fff;
	--button-primary-hover-bg-color: #dc150b;

	--button-secondary-normal-text-color: #fff;
	--button-secondary-hover-bg-color: #fff;
	--button-secondary-hover-arrow-color: #000;

	--accordion-plus-icon-color: #fff;

	--media-content-text-color: #fff;

	span.long-text {
		color: var(--color-white);
	}
}

.bg-white {
	--h1-color: var(--color-black);
	--h2-color: var(--color-black);
	--h3-color: var(--color-black);
	--h4-color: var(--color-black);
	--h5-color: var(--color-black);
	--h6-color: var(--color-black);

	--body-font-color: #20222b;
	--paragraph-color: #20222b;
	--front-mono-color: #20222b;
	--anchor-link-normal-color: #20222b;

	--button-primary-normal-bg-color: #000;
	--button-primary-normal-text-color: #fff;

	--button-primary-hover-text-color: #fff;

	--button-primary-disabled-bg-color: rgba(var(--color-rgb-primary), 0.4);
	--button-primary-disabled-text-color: rgba(var(--color-rgb-white), 0.7);

	--button-secondary-normal-text-color: #000;
	--button-secondary-hover-bg-color: #000;
	--button-secondary-hover-arrow-color: #fff;

	--tab-nav-button-secondary-normal-color: var(--color-blue);
	--tab-nav-button-secondary-hover-color: var(--color-blue);
	--tab-nav-button-secondary-hover-text-decoration: none;

	--form-label-color: var(--color-gray-dark);
	--form-checkbox-check-img: url("#{$theme-url-base}/media/images/check-black.png");
	--form-radio-fill-color: #666;

	--form-control-border-color-default: #5d6974;
	--form-control-border-color-focus: #000;
	--form-control-background-color: var(--color-white);
	--form-control-text-color: var(--color-black);
	--form-control-focus-text-color: var(--color-black);
	--form-control-placeholder-color: rgba(var(--color-rgb-gray-dark), 0.4);
	--form-control-icon-color: var(--color-blue);

	--list-bullet-color: rgba(var(--color-rgb-gray-dark), 0.4);

	--color-blockquote-highlight: var(--color-blue);

	--media-content-text-color: #454b51;

	background-color: var(--color-white);
}

.bg-black,
.bg-black-dark,
.bg-black-gradient,
.bg-black-light {
	--paragraph-color: #a2adb9;
	--front-mono-color: #a2adb9;

	--card-background-color: #000;
	--card-border-color: #28333E;
	--form-label-color: var(--color-white);
	--form-select-arrow-img: url("#{$theme-url-base}/media/svg/general/chevron-down-white.svg");
	--form-checkbox-check-img: url("#{$theme-url-base}/media/images/check-white.png");
	--form-radio-fill-color: var(--color-white);
	--form-control-border-color-default: #5d6974;
	--form-control-border-color-focus: #5d6974;
	--form-control-background-color: #000;
	--form-control-text-color: var(--color-white);
	--form-control-focus-text-color: var(--color-white);
	--form-control-placeholder-color: #cbd1d7;
	--form-control-icon-color: var(--color-white);

	p,
	ul {
		font-size: 16px;
		font-weight: 300;
		line-height: 26px;
		color: var(--paragraph-color);
	}
}

.bg-black {
	background-color: #0e0e0e;
}

.bg-black-dark {
	background-color: #000;
}

.bg-black-gradient {
	background: linear-gradient(180deg, #000 0, #06111a 100%);
	&.reverse {
		background: linear-gradient(0, #000 0, #06111a 100%);
	}
}

.bg-black-light {
	background-color: #222731;
}

.bg-violet {
	background-color: #3c174c;
}

.bg-red {
	background-color: #630d09;
}

.bg-green {
	background-color: #093434;
}

.bg-blue-dark {
	background-color: #0d3152;
}

.bg-blue {
	background-color: #0d3152;
}

.bg-blue,
.bg-blue-dark {
	--h1-color: var(--color-white);
	--h2-color: var(--color-white);
	--h3-color: var(--color-white);
	--h4-color: var(--color-white);
	--h5-color: var(--color-white);
	--h6-color: var(--color-white);

	--body-font-color: var(--color-white);

	--button-primary-normal-bg-color: #fff;
	--button-primary-normal-text-color: #000;
	--button-primary-hover-text-color: #fff;

	--button-primary-disabled-bg-color: rgba(var(--color-rgb-black), 0.4);
	--button-primary-disabled-text-color: rgba(var(--color-rgb-white), 0.7);

	--button-secondary-normal-text-color: #fff;
	--button-secondary-hover-bg-color: #fff;
	--button-secondary-hover-arrow-color: #000;

	--button-secondary-disabled-text-color: rgba(var(--color-rgb-black), 0.4);

	--anchor-link-normal-color: var(--color-white);
	--anchor-link-hover-color: var(--color-white);

	--tab-nav-button-secondary-normal-color: var(--color-white);
	--tab-nav-button-secondary-hover-color: var(--color-white);
	--tab-nav-button-secondary-hover-text-decoration: underline;

	--color-blockquote-highlight: var(--color-white);
}

.bg-gray {
	--button-secondary-normal-text-color: #000;
	--button-secondary-hover-bg-color: #000;
	--button-secondary-hover-arrow-color: #fff;

	background-color: var(--color-off-white);
}

.bg-gradient {
	--h1-color: var(--color-white);
	--h2-color: var(--color-white);
	--h3-color: var(--color-white);
	--h4-color: var(--color-blue-light);
	--h5-color: var(--color-white);
	--h6-color: var(--color-white);

	--list-bullet-color: var(--color-white);

	background: radial-gradient(
		75.27% 75.27% at 48.39% 92.48%,
		rgba(14, 91, 70, 0.62) 0%,
		rgba(0, 142, 187, 0.28) 0.01%,
		rgba(5, 140, 116, 0.21) 31.25%,
		rgba(29, 50, 113, 0) 100%
	);
	background-color: #0e0e0e;
}

.bg-color-gradient {
	background: linear-gradient(
		90deg,
		#0ca6f2 -1.46%,
		#0aadc4 7.56%,
		#006fc2 16.61%,
		#0ca6f2 23.05%,
		#01ecb0 91.39%,
		#28ea76 100%
	);

	--button-secondary-normal-text-color: #fff;
	--button-secondary-hover-bg-color: #fff;
	--button-secondary-hover-arrow-color: #000;
}

.block-bg-image {
	background-color: #000;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	background-position: center;

	&.block-bg-overlay {
		&::before {
			z-index: -1;
			content: "";
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			background-image: linear-gradient(
				180deg,
				rgba(0, 0, 0, 0.7) 0%,
				rgba(246, 249, 252, 0) 100%
			);
		}

		.block-inner {
			z-index: 1;
			position: relative;
		}
	}

	.block-section__title-desc::before {
		display: none;
	}
}