@import '../setting.less';

#appBody.light {
	// 健康推荐
	.selections {
		.item {
			color: @black;
			background: fade(@black, 20);
			border: 1px solid fade(@black, 20);

			&:hover,
			&.active {
				background: fade(@deepblue, 20);
				border: 1px solid @deepblue;
				color: @deepblue;
			}
		}
	}

	.power-info {
		.info-tab {
			.tab {
				color: @black;
				background: fade(@black, 20);
				border: 1px solid fade(@black, 20);
				i {
					svg use {
						fill: @black;
					}
				}

				&:hover,
				&.active {
					background: fade(@deepblue, 20);
					border: 1px solid @deepblue;
					color: @deepblue;

					i svg use {
						fill: @deepblue;
					}
				}

				&.active::after {
					border-bottom: 9px solid @deepblue;
				}

				&.active::before {
					border-bottom: 9px solid #063319;
				}
			}
		}
	}
	.health-report {
		// 健康报告 按钮样式
		.actions {
			.active {
				border: 1px solid @deepblue;
			}
			.item {
				color: fade(@white, 75);
				&.green {
					background: @deepblue;
				}

				&.purple {
					background: @purple;
				}

				&.gray {
			  background: @black;
				}
			}
		}

		.report-items {
			.item {
				.title {
					background: fade(@black, 40);
					color: @black;
				}

				.info {
					background: fade(@black, 20);
					color: @font-color;
					.actions {
						.success {
					  border-color: @deepblue;
							color: @deepblue;
							background: fade(@deepblue, 20);
						}
					}
				}
			}
		}
	}

	// 健康推荐-已分配任务
	.track-info {
		.form-info {
			.work-flow {
				background: fade(@gray, 20);
				.work-flow-line {
					background: @deepblue;
				}

				.work-flow-item {
					&.active {
				  background: none;
						.work-flow-icon-item {
							.work-flow-icon-o {
								border: 1px solid @deepblue;
							}

							.work-flow-icon-i {
								border: 2px solid @deepblue;
								background: linear-gradient(to bottom, @gray-l 0%, @gray-l 20%, @deepblue 100%);
							}

							.svg-icon {
								svg {
									use {
										fill: @deepblue;
									}
								}
							}
						}

						.work-flow-text {
							color: @deepblue;
						}
					}

					.work-flow-icon-item {
						.work-flow-icon-o {
							border: 1px solid #b3bdc0;
						}

						.work-flow-icon-m {
							border: 4px solid #212b2b;
						}

						.work-flow-icon-i {
							border: 2px solid @gray-l;
							background: linear-gradient(to bottom, @gray 0%, @gray 20%, @gray-l 100%);
						}

						.svg-icon {
							svg {
								use {
									fill: @gray-l;
								}
							}
						}
					}
					.work-flow-text {
						color: @black;
					}
				}
			}
		}

		.evaluate {
			.evaluate-item {
				.evaluate-label,
				.evaluate-unit {
					color: @black;
				}
			}
		}
		.tabs {
			border-left: 1px solid #53626833;
			.tab-box {
				.tab-item {
					&.active {
						color: @deepblue;
						background-image: @deepblueLinearTop;

						&::after {
							border: 1px solid @deepblue;
						}
					}
				}
			}
		}
	}
	.defect-elimination-tracking {
		background: fade(@white, 95);
		border: 1px solid fade(@deepblue, 50);

		.defect-elimination-tracking-close {
			&:hover {
				i {
					color: @blue;
				}
			}
		}

		.header-tile-box {
			.header-tile {
				.info-form-box {
					.info-form {
						.info-form-label {
							color: @gray;
						}
						.info-form-value {
							color: @black;
						}
					}
				}
			}
		}
		.det-chart-title {
			color: @black;
		}

		.det-chart-sub-title {
			color: @black;
		}

		.det-chart-sub-title-big {
			color: @black;
		}
	}
	.health-2 {
		// 电量健康情况
		.power-info {
			.info-tab {
				.tab {
					color: @black;

					&:hover,
					&.active {
						background: fade(@deepblue, 20);
						border: 1px solid @deepblue;
						color: @deepblue;
						i {
							svg use {
								fill: @deepblue;
							}
						}
					}

					&.active::after {
						border-bottom: 9px solid @deepblue;
					}
				}
			}
		}
	}

	.health-3 {
		.com-panel {
			.green {
				color: @green;
				&.lengend {
					background: @blue;
				}
			}
		}
	}
	.health-6 .header-info .selections .item:hover i svg use,
	.health-6 .header-info .selections .item.active i svg use {
		fill: @deepblue;
	}
	.health-matrix {
		.green {
			color: @green;
		}
		.health-matrix-panel {
			.header {
				.svg-icon svg use {
					fill: @black;
				}
				.tools .tool-block .legend-value {
					color: @black;
				}
			}
		}
	}
	
	// /health/health0/MHS_FDC/MG01_02
	.progress-bar {
		.progress-bar-body .progress-bar-box .progress-bar-bar,.progress-bar-header .progress-bar-state{
			&.bg-green{
				background:@deepblue;
			}
		}
	}
	
	.health-0 {
		.com-table tbody tr:nth-child(2n) {
		    background: @white;
		}
		.health-0-right .card-tool{
			background: @white;
			color: @black;
			font-weight: 700;
			.card-tool-item {
				color: @black;
				&:hover{
					color: @black;
				}
			}
		}
	}
}
