.notification-settings-container {
	display: flex;
	flex-direction: column;
	margin: 0 16px;

	.notification-message-container {
		display: flex;
		flex-direction: column;
		gap: 16px;
		margin-top: -8px;
		background-color: var(--l2-background);
		border: 1px solid var(--l1-border);
		padding: 16px;

		.notification-message-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			gap: 16px;

			.notification-message-header-content {
				display: flex;
				flex-direction: column;
				gap: 8px;

				.notification-message-header-title {
					display: flex;
					gap: 8px;
					align-items: center;
					color: var(--l1-foreground);
					font-family: Inter;
					font-size: 13px;
					font-weight: 500;
				}

				.notification-message-header-description {
					color: var(--l2-foreground);
					font-family: Inter;
					font-size: 13px;
					font-weight: 400;
				}
			}

			.notification-message-header-actions {
				.ant-btn {
					display: flex;
					align-items: center;
					justify-content: center;
					gap: 2px;
					color: var(--bg-robin-400);
				}
			}
		}

		textarea {
			height: 150px;
			background: var(--l2-background);
			border: 1px solid var(--l1-border);
			border-radius: 4px;
			color: var(--l2-foreground) !important;
			font-family: Inter;
			font-size: 13px;
		}
	}

	.notification-settings-content {
		display: flex;
		flex-direction: column;
		background-color: var(--l2-background);
		border: 1px solid var(--l1-border);
		padding: 16px;
		margin-top: 16px;

		.repeat-notifications-input {
			display: flex;
			align-items: center;
			gap: 8px;

			.ant-input {
				width: 120px;
				border: 1px solid var(--l1-border);
			}

			.ant-select {
				.ant-select-selector {
					width: 120px;

					&:hover {
						border-color: var(--l1-border);
					}

					&:focus {
						border-color: var(--l1-border);
					}
				}
			}

			.ant-select-multiple {
				.ant-select-selector {
					width: 200px;

					&:hover {
						border-color: var(--l1-border);
					}

					&:focus {
						border-color: var(--l1-border);
					}
				}
			}
		}

		.multiple-notifications-container {
			display: flex;
			padding: 4px 16px 16px 16px;
			border-bottom: 1px solid var(--l1-border);
			justify-content: space-between;

			.multiple-notifications-header {
				display: flex;
				flex-direction: column;
				gap: 8px;

				.ant-typography {
					display: flex;
					gap: 4px;
					align-items: center;
				}

				.multiple-notifications-header-title {
					color: var(--l1-foreground);
					font-family: Inter;
					font-size: 13px;
					font-weight: 500;
					display: flex;
					align-items: center;
					gap: 8px;
				}

				.multiple-notifications-header-description {
					color: var(--l2-foreground);
					font-family: Inter;
					font-size: 13px;
					font-weight: 400;
				}
			}

			.ant-select {
				width: 300px;
			}

			.multiple-notifications-select-description {
				font-size: 10px;
				color: var(--l2-foreground);
				margin-top: 4px;
			}
		}

		.re-notification-container {
			display: flex;
			flex-direction: column;
			gap: 16px;
			background-color: var(--l2-background);
			border: 1px solid var(--l1-border);
			padding: 16px;
			margin-top: 16px;

			.advanced-option-item {
				display: flex;
				justify-content: space-between;
				align-items: flex-start;
				gap: 16px;

				.advanced-option-item-left-content {
					display: flex;
					flex-direction: column;
					gap: 6px;

					.advanced-option-item-title {
						color: var(--l2-foreground);
						font-family: Inter;
						font-size: 13px;
						font-weight: 500;
					}

					.advanced-option-item-description {
						color: var(--muted-foreground);
						font-family: Inter;
						font-size: 13px;
						font-weight: 400;
					}
				}
			}

			.border-bottom {
				border-bottom: 1px solid var(--l1-border);
				width: 100%;
				margin-left: -16px;
				margin-right: -32px;
			}

			.re-notification-condition {
				display: flex;
				align-items: center;
				gap: 8px;
				flex-wrap: nowrap;

				.ant-typography {
					font-size: 13px;
					font-weight: 400;
					color: var(--l2-foreground);
					white-space: nowrap;
				}

				.ant-select {
					width: 200px;
					height: 32px;
					flex-shrink: 0;
					.ant-select-selector {
						border: 1px solid var(--l1-border);

						&:hover {
							border-color: var(--l1-border);
						}

						&:focus {
							border-color: var(--l1-border);
							box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
						}
					}
				}

				.ant-input {
					width: 200px;
					flex-shrink: 0;
					border: 1px solid var(--l1-border);
				}
			}
		}
	}
}

.template-variable-content {
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 2px;

	.template-variable-content-item {
		display: flex;
		gap: 8px;
		align-items: center;

		code {
			background-color: var(--l1-background);
			color: var(--l2-foreground);
			padding: 2px 4px;
		}
	}
}
