[data-theme="dark"] {
	--gray-50: #{$gray-50};
	--gray-100: #f7fafc;
	--gray-200: #edf2f7;
	--gray-300: #c9d0d6;
	--gray-400: #7a838c;
	--gray-500: #575e66;
	--gray-600: #434a52;
	--gray-700: #242a30;
	--gray-800: #1c2126;
	--gray-900: #161a1f;

	// Type Colors
	--text-muted: var(--gray-400);
	--text-light: var(--gray-300);
	--text-color: var(--gray-50);
	--heading-color: var(--gray-50);

	// SVG Colors
	--icon-fill: transparent;
	--icon-stroke: var(--gray-300);

	// Error colors
	--error-bg: var(--red-70);
	--error-border: var(--red-400);

	// Layout Colors
	--bg-color: var(--gray-900);
	--fg-color: var(--gray-800);
	--navbar-bg: var(--gray-800);
	--fg-hover-color: var(--gray-700);
	--card-bg: var(--gray-800);
	--disabled-text-color: var(--gray-400);
	--disabled-control-bg: var(--gray-700);
	--control-bg: var(--gray-700);
	--control-bg-on-gray: var(--gray-800);
	--awesomebar-focus-bg: var(--control-bg);
	--awesomplete-hover-bg: var(--gray-700);
	--modal-bg: var(--gray-700);
	--toast-bg: var(--modal-bg);
	--popover-bg: var(--bg-color);

	// Button Colors
	--btn-default-bg: var(--gray-700);
	--btn-default-hover-bg: var(--gray-500);

	// Background Text Color Pairs
	--bg-blue: var(--blue-600);
	--bg-light-blue: var(--blue-600);
	--bg-dark-blue: var(--blue-900);
	--bg-green: var(--green-800);
	--bg-yellow: var(--yellow-700);
	--bg-orange: var(--orange-700);
	--bg-red: var(--red-600);
	--bg-gray: var(--gray-400);
	--bg-grey: var(--gray-400);
	--bg-darkgrey: var(--gray-600);
	--bg-dark-gray: var(--gray-600);
	--bg-light-gray: var(--gray-700);
	--bg-purple: var(--purple-700);
	--bg-pink: var(--pink-700);
	--bg-cyan: var(--cyan-800);

	--text-on-blue: var(--blue-50);
	--text-on-light-blue: var(--blue-50);
	--text-on-dark-blue: var(--blue-300);
	--text-on-green: var(--dark-green-50);
	--text-on-yellow: var(--yellow-50);
	--text-on-orange: var(--orange-100);
	--text-on-red: var(--red-50);
	--text-on-gray: var(--gray-50);
	--text-on-grey: var(--gray-50);
	--text-on-darkgrey: var(--gray-200);
	--text-on-dark-gray: var(--gray-200);
	--text-on-light-gray: var(--gray-100);
	--text-on-purple: var(--purple-100);
	--text-on-pink: var(--pink-100);
	--text-on-cyan: var(--cyan-100);

	// alert colors
	--alert-text-danger: var(--red-300);
	--alert-text-warning: var(--yellow-300);
	--alert-text-info: var(--blue-300);
	--alert-text-success: var(--green-300);
	--alert-bg-danger: var(--red-900);
	--alert-bg-warning: var(--yellow-900);
	--alert-bg-info: var(--blue-900);
	--alert-bg-success: var(--green-900);

	--sidebar-select-color: var(--gray-800);

	--scrollbar-thumb-color: var(--gray-600);
	--scrollbar-track-color: var(--gray-700);

	--shadow-inset: var(--fg-color);
	--border-color: var(--gray-700);
	--dark-border-color: var(--gray-600);
	--table-border-color: var(--gray-600);
	--highlight-color: var(--gray-700);
	--yellow-highlight-color: var(--yellow-700);

	--highlight-shadow: 1px 1px 10px var(--blue-900), 0px 0px 4px var(--blue-500);

	--shadow-base: 0px 4px 8px rgba(114, 176, 233, 0.06), 0px 0px 4px rgba(112, 172, 228, 0.12);

	// "diff" colors
	--diff-added: var(--green-800);
	--diff-removed: var(--red-800);

	// input
	--input-disabled-bg: none;

	// checkbox
	--checkbox-focus-shadow: 0 0 0 2px var(--gray-600);

	color-scheme: dark;

	.xhiveframework-card {
		.btn-default {
			background-color: var(--bg-color);

			&:hover {
				background-color: var(--fg-hover-color);
			}
		}
	}

	.modal,
	.form-in-grid {
		--control-bg: var(--gray-800);
		--border-color: var(--gray-600);
	}

	.print-format {
		--text-color: var(--gray-900);
		--border-color: var(--gray-100);
	}

	.ql-editor {
		color: var(--text-on-gray);
		&.read-mode {
			span:not(.mention),
			p,
			u,
			strong {
				background-color: inherit !important;
				color: inherit !important;
			}
		}
	}
	// --appreciation-color: var(--dark-green-100);
	// --appreciation-bg: var(--dark-green-600);
	// --criticism-color: var(--red-100);
	// --criticism-bg: var(--red-600);

	// XhiveFramework Charts Colors
	.chart-container {
		--charts-label-color: var(--gray-300);
		--charts-axis-line-color: var(--gray-500);

		--charts-stroke-width: 5px;
		--charts-dataset-circle-stroke: #ffffff;
		--charts-dataset-circle-stroke-width: var(--charts-stroke-width);

		--charts-tooltip-title: var(--charts-label-color);
		--charts-tooltip-label: var(--charts-label-color);
		--charts-tooltip-value: white;
		--charts-tooltip-bg: var(--gray-900);

		--charts-legend-label: var(--charts-label-color);
	}

	// find better fix
	.heatmap-chart {
		g > rect[fill="#ebedf0"] {
			fill: var(--gray-700);
		}
	}

	.rating {
		// rating
		--star-fill: var(--gray-500);
		.star-hover {
			--star-fill: var(--gray-400);
		}
	}

	// skeleton
	--skeleton-bg: var(--gray-800);

	--right-arrow-svg: url("data: image/svg+xml;utf8, <svg width='6' height='8' viewBox='0 0 6 8' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M1.25 7.5L4.75 4L1.25 0.5' stroke='white' stroke-linecap='round' stroke-linejoin='round'/></svg>");

	--left-arrow-svg: url("data: image/svg+xml;utf8, <svg width='6' height='8' viewBox='0 0 6 8' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M7.5 9.5L4 6l3.5-3.5' stroke='white' stroke-linecap='round' stroke-linejoin='round'></path></svg>");

	::selection {
		color: var(--text-color);
		background: var(--gray-500);
	}

	$indicator-colors: green, cyan, blue, orange, yellow, gray, grey, red, pink, darkgrey, purple, light-blue;
	@each $color in $indicator-colors {
		.indicator {
			--indicator-dot-#{"" + $color}: var(--bg-#{$color});
		}
	}
}
