.evaluation-settings-container {
	margin: 16px;

	.evaluate-alert-conditions-container {
		display: flex;
		align-items: center;
		gap: 16px;
		background-color: var(--bg-ink-400);
		padding: 16px;
		border-radius: 4px;
		border: 1px solid var(--bg-slate-500);
		margin-bottom: 16px;

		.ant-typography {
			color: var(--bg-vanilla-400);
			font-size: 14px;
		}

		.evaluate-alert-conditions-separator {
			flex: 1;
			height: 1px;
			border-top: 1px dashed var(--bg-slate-400);
		}

		.ant-btn {
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: var(--bg-ink-300);
			border: 1px solid var(--bg-slate-400);

			.evaluate-alert-conditions-button-left {
				color: var(--bg-vanilla-400);
				font-size: 12px;
				padding-right: 16px;
			}

			.evaluate-alert-conditions-button-right {
				display: flex;
				align-items: center;
				color: var(--bg-vanilla-400);
				gap: 8px;

				.evaluate-alert-conditions-button-right-text {
					font-size: 12px;
					font-weight: 500;
					background-color: var(--bg-slate-400);
					padding: 1px 4px;
				}
			}
		}
	}
}

.advanced-options-container {
	.ant-collapse {
		.ant-collapse-item {
			.ant-collapse-header {
				background-color: var(--bg-ink-400);
				border: 1px solid var(--bg-slate-500);

				.ant-collapse-header-text {
					color: var(--bg-vanilla-400);
					font-family: Inter;
				}
			}

			.ant-collapse-content {
				.ant-collapse-content-box {
					background-color: var(--bg-ink-400);
				}
			}
		}
	}
}

.ant-popover-arrow {
	display: none !important;
}

.ant-popover-content {
	background-color: var(--bg-ink-400);
	border: 1px solid var(--bg-slate-400);
	border-radius: 4px;
	padding: 0;
	margin: 10px;

	.ant-popover-inner {
		background-color: var(--bg-ink-400);
		border: none;
		padding: 0;

		.evaluation-window-popover {
			min-width: 500px;

			.evaluation-window-content {
				display: flex;

				.evaluation-window-content-item {
					display: flex;
					flex-direction: column;
					gap: 8px;
					border-right: 1px solid var(--bg-slate-400);
					padding: 12px 16px;
					min-width: 250px;
					min-height: 300px;

					.evaluation-window-content-item-label {
						color: var(--bg-slate-50);
						font-size: 11px;
						line-height: 18px;
						font-weight: 500;
					}

					.evaluation-window-content-list {
						display: flex;
						flex-direction: column;

						.evaluation-window-content-list-item {
							display: flex;
							align-items: center;
							justify-content: space-between;
							margin: 0 -16px;
							padding: 4px 16px;

							.ant-typography {
								color: var(--bg-vanilla-400);
								font-weight: 400;
							}

							&.active {
								background-color: var(--bg-slate-500);
								border-left: 2px solid var(--bg-robin-500);
								.ant-typography {
									font-weight: 500;
									color: var(--bg-vanilla-100);
								}
							}

							&:hover {
								cursor: pointer;
								background-color: var(--bg-slate-500);
							}
						}
					}
				}

				.selection-content {
					padding: 16px;
					display: flex;
					flex-direction: column;
					gap: 16px;
					width: 400px;

					.ant-typography {
						color: var(--bg-vanilla-400);
					}

					.ant-btn {
						width: fit-content;
					}
				}
			}

			.evaluation-window-footer {
				display: flex;
				justify-content: flex-end;
				gap: 8px;
				background-color: var(--bg-ink-300);
				border-top: 1px solid var(--bg-slate-400);
				padding: 16px;
			}

			.ant-btn {
				background-color: var(--bg-ink-200);
				border: 1px solid var(--bg-slate-200);
				color: var(--bg-vanilla-400);
				font-size: 14px;
			}
		}
	}
}

.evaluation-window-details {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 400px;
	min-height: 300px;
	padding: 16px;

	.select-group {
		display: flex;
		flex-direction: column;
		gap: 2px;

		.ant-typography {
			color: var(--bg-slate-50);
			font-size: 11px;
			line-height: 18px;
			font-weight: 500;
		}
	}

	.time-select-group {
		.ant-input-group {
			flex-direction: row;
			gap: 8px;

			.ant-select {
				width: 40px;
			}
		}
	}

	.ant-typography {
		color: var(--bg-vanilla-400);
		font-size: 13px;
		font-weight: 500;
	}

	.ant-select {
		width: 60%;
		background-color: var(--bg-ink-300);
		border: 1px solid var(--bg-slate-400);
		color: var(--bg-vanilla-100);
		height: 32px;

		.ant-select-selector {
			background-color: var(--bg-ink-300);
			border: 1px solid var(--bg-slate-400);
			color: var(--bg-vanilla-100);
			height: 32px;
		}

		&:hover {
			border-color: var(--bg-ink-400);
		}
	}

	.select-group .ant-input:not(.time-input-field) {
		background-color: var(--bg-ink-300);
		border: 1px solid var(--bg-slate-400);
		color: var(--bg-vanilla-100);
		height: 32px;
		width: 60%;
	}
}

.lightMode {
	.evaluation-settings-container {
		.evaluate-alert-conditions-container {
			background-color: var(--bg-vanilla-200);
			border: 1px solid var(--bg-vanilla-300);

			.ant-typography {
				color: var(--bg-ink-400);
			}

			.evaluate-alert-conditions-separator {
				border-top: 1px dashed var(--bg-vanilla-300);
			}

			.ant-btn {
				background-color: var(--bg-vanilla-300);
				border: 1px solid var(--bg-vanilla-300);

				.evaluate-alert-conditions-button-left {
					color: var(--bg-ink-400);
				}

				.evaluate-alert-conditions-button-right {
					color: var(--bg-ink-400);

					.evaluate-alert-conditions-button-right-text {
						background-color: var(--bg-vanilla-300);
					}
				}
			}
		}
	}

	.advanced-options-container {
		.ant-collapse {
			.ant-collapse-item {
				.ant-collapse-header {
					background-color: var(--bg-vanilla-200);
					border: 1px solid var(--bg-vanilla-300);

					.ant-collapse-header-text {
						color: var(--bg-ink-400);
					}
				}

				.ant-collapse-content {
					.ant-collapse-content-box {
						background-color: var(--bg-vanilla-200);
					}
				}
			}
		}
	}

	.ant-popover-content {
		background-color: var(--bg-vanilla-200);
		border: 1px solid var(--bg-vanilla-300);

		.ant-popover-inner {
			background-color: var(--bg-vanilla-200);

			.evaluation-window-popover {
				.evaluation-window-content {
					.evaluation-window-content-item {
						border-right: 1px solid var(--bg-vanilla-300);

						.evaluation-window-content-item-label {
							color: var(--bg-ink-300);
						}

						.evaluation-window-content-list {
							.evaluation-window-content-list-item {
								.ant-typography {
									color: var(--bg-ink-400);
								}

								&.active {
									background-color: var(--bg-vanilla-300);
									border-left: 2px solid var(--bg-robin-500);
									.ant-typography {
										color: var(--bg-ink-400);
									}
								}

								&:hover {
									background-color: var(--bg-vanilla-300);
								}
							}
						}
					}

					.selection-content {
						.ant-typography {
							color: var(--bg-ink-400);
						}
					}
				}

				.evaluation-window-footer {
					background-color: var(--bg-vanilla-300);
					border-top: 1px solid var(--bg-vanilla-300);
				}

				.ant-btn {
					background-color: var(--bg-vanilla-300);
					border: 1px solid var(--bg-vanilla-300);
					color: var(--bg-ink-400);
				}
			}
		}
	}

	.evaluation-window-details {
		.select-group {
			.ant-typography {
				color: var(--bg-ink-300);
			}
		}

		.ant-typography {
			color: var(--bg-ink-400);
		}

		.ant-select {
			background-color: var(--bg-vanilla-300);
			border: 1px solid var(--bg-vanilla-300);
			color: var(--bg-ink-400);

			.ant-select-selector {
				background-color: var(--bg-vanilla-300);
				border: 1px solid var(--bg-vanilla-300);
				color: var(--bg-ink-400);
			}

			&:hover {
				border-color: var(--bg-vanilla-200);
			}
		}
	}
}
