html {
	color-scheme: light;
}

html.dark {
	$line: #666;
	$modal: #444;

	--bg-ui: #333;

	--bs-body-bg: #1e1e1e;
	--bs-body-color: #ccc;
	--bs-link-color: #579bff;
	--bs-link-color-rgb: 87, 155, 255;
	--bs-link-hover-color: #70aaff;
	--bs-link-hover-color-rgb: 112, 170, 255;
	--bs-gradient: linear-gradient(180deg, rgb(255 255 255 / 2%), rgb(255 255 255 / 0%));

	--tab-border: #222;
	--tab-active: var(--bs-body-bg);

	color-scheme: dark;

	.progress {
		--bs-progress-bg: #555;
	}

	.text-muted {
		color: #666 !important;
	}

	.nav-tabs {
		--bs-nav-tabs-link-hover-border-color: #555 #555 #{$line};
		--bs-nav-tabs-link-active-bg: #{$modal};
		--bs-nav-tabs-link-active-border-color: #{$line} #{$line} #{$modal};

		.nav-link.active {
			color: white;
		}
	}

	table {
		--bs-table-bg: unset;
		--bs-table-color-state: var(--bs-body-color);

		border-color: $line;
	}

	th {
		color: #fff;
		background-color: #777;
	}

	.scroll-shadow {
		/* background-image: linear-gradient($modal 30%, rgba(255, 255, 255, 0)),
			linear-gradient(rgba(255, 255, 255, 0), $modal 70%),
			radial-gradient(50% 0, farthest-side, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0)),
			radial-gradient(50% 100%, farthest-side, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0));

		background-image: linear-gradient($modal 30%, rgba(255, 255, 255, 0)),
			linear-gradient(rgba(255, 255, 255, 0), $modal 70%),
			radial-gradient(farthest-side at 50% 0, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0)),
			radial-gradient(farthest-side at 50% 100%, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0)); */

		background-color: $modal;
	}

	.form-check-input:not(:checked) {
		background-color: #999;
	}

	.form-control,
	.form-select {
		border: #222;
		color: #eee;
		background-color: #555;

		&:disabled {
			color: #aaa;
			background-color: #505050;
		}
	}

	.form-select {
		background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
	}

	.form-control::placeholder {
		color: #999;
	}

	.quick-item {
		color: var(--bs-link-color);

		&:hover {
			color: #fff;
			background-color: var(--bs-primary);
		}
	}

	.modal-header {
		border-bottom-color: $line;
	}

	.modal-footer {
		border-top-color: $line;
	}

	.modal-content {
		background-color: $modal;
	}

	aside {
		color: var(--bs-body-color);
	}

	.dropdown-menu {
		border-color: #444;
		background: #333;
	}

	.dropdown-item {
		color: var(--bs-body-color);

		&.disabled {
			color: #777;
		}
	}

	.dropdown-divider {
		border-top-color: #555;
	}

	.tab.active {
		color: #fff;
	}

	.btn-light {
		border-color: #555;
		color: var(--bs-body-color);
		background-color: #555;

		&:hover {
			background-color: #666;
		}
	}

	@media (hover: hover) {
		.tab:not(:hover, .active) {
			color: #777;
		}
	}

	@media (width <= 100vh), (width < 700px) {
		#divShade.show {
			opacity: 0.4;
		}
	}

	@media print {
		& {
			color-scheme: light;
		}

		body {
			background-color: unset;
		}
	}
}

html:not(.dark) {
	/* A utility class for improving contrast  */
	.darken {
		filter: brightness(0.8) saturate(2);
	}
}
