html.dark {
	--el-bg-color: #2c3142;

	.cl-dialog {
		.el-dialog__header,
		.cl-form-tabs {
			border-bottom: 1px solid #222;
		}

		.cl-form-tabs * {
			border-color: #222;
		}
	}

	.cl-crud {
		background-color: transparent;

		.el-table {
			&__header {
				tr {
					th {
						background-color: #222222 !important;
						color: #fff;
					}
				}
			}

			&__body {
				tr {
					&.current-row {
						td {
							background-color: #18222c !important;
						}
					}
				}
			}
		}
	}

	.el-overlay {
		background-size: 4px 4px;
		backdrop-filter: saturate(50%) blur(4px);
	}
}

body.theme {
	&-jihei {
		.app-layout {
			background-color: #3b3f4d;

			.app-slider {
				background-color: #2e313d;
			}

			.a-menu {
				padding: 5px 10px;
				background-color: transparent;
				color: #fff;

				.el-menu-item {
					border-radius: 6px !important;
					color: #fff;
				}

				.arc {
					border-radius: 8px !important;

					.cl-svg {
						display: none;
					}
				}
			}

			.app-topbar {
				background-color: transparent;
				color: #fff;
				border-bottom: 0;

				span {
					color: #fff;
				}

				&__collapse {
					&:hover {
						color: #333;
					}
				}

				.el-breadcrumb {
					span {
						color: #ddd;
					}

					&__item {
						&:last-child {
							span {
								color: #fff;
							}
						}
					}
				}
			}

			.app-process {
				background-color: transparent;
				color: #fff;

				&__item {
					.el-text {
						color: #fff;
					}

					&:not(.active):hover {
						.el-text {
							color: #333;
						}
					}
				}

				&__op {
					.item {
						&:hover {
							color: #333;
						}
					}
				}
			}
		}
	}

	&-guolv {
		.app-layout {
			.app-slider__logo {
				background-color: var(--color-primary);
			}
		}
	}

	&-jiangzi {
		.app-layout {
			.app-slider {
				background-color: var(--color-primary);

				.el-sub-menu__title,
				.el-menu-item {
					color: #fff;
					border-radius: 10px;
					position: relative;

					&::after {
						position: absolute;
						left: 10px;
						top: 0;
						content: '';
						display: block;
						height: 100%;
						width: calc(100% - 20px);
						border-radius: 8px;
					}

					&:hover {
						&::after {
							background-color: rgba(255, 255, 255, 0.2);
						}
					}

					&.is-active {
						&::after {
							background-color: #fff;
						}

						.cl-svg,
						span {
							color: var(--color-primary);
							position: relative;
							z-index: 2;
						}
					}
				}
			}
		}
	}

	&-cangqing {
		.app-layout {
			.app-slider {
				background: linear-gradient(30deg, #7397ab, #75878a);

				.el-sub-menu__title,
				.el-menu-item {
					color: #fff;

					&:hover {
						background-color: rgba(255, 255, 255, 0.2) !important;
					}

					&.is-active {
						background-color: #fff !important;

						.cl-svg,
						span {
							color: var(--color-primary);
						}
					}
				}
			}
		}
	}
}