.ingestion-settings-container {
	color: white;
}

.ingestion-key-container {
	margin-top: 24px;
	display: flex;
	justify-content: center;
	width: 100%;

	.ingestion-key-content {
		width: calc(100% - 30px);
		max-width: 736px;

		.title {
			color: var(--l1-foreground);
			font-size: var(--font-size-lg);
			font-style: normal;
			font-weight: var(--font-weight-normal);
			line-height: 28px;
			letter-spacing: -0.09px;

			width: 72%; // arbitrary number to match input width
			display: flex;
			align-items: center;
			gap: 8px;
			justify-content: space-between;
		}

		.subtitle {
			color: var(--l2-foreground);
			font-size: var(--font-size-sm);
			font-style: normal;
			font-weight: var(--font-weight-normal);
			line-height: 20px;
			/* 142.857% */
			letter-spacing: -0.07px;
		}

		.ingestion-keys-search-add-new {
			display: flex;
			align-items: center;
			gap: 12px;

			padding: 16px 0;

			.add-new-ingestion-key-btn {
				display: flex;
				align-items: center;
				gap: 8px;
			}
		}

		.ant-table-row {
			.ant-table-cell {
				padding: 0;
				border: none;
				background: var(--l1-background);
			}

			.column-render {
				margin: 8px 0 !important;
				border-radius: 6px;
				border: 1px solid var(--l1-border);
				background: var(--l2-background);

				.title-with-action {
					display: flex;
					justify-content: space-between;

					align-items: center;
					padding: 8px;

					.ingestion-key-data {
						display: flex;
						gap: 8px;
						align-items: center;

						.ingestion-key-title {
							display: flex;
							align-items: center;
							gap: 6px;

							.ant-typography {
								color: var(--l2-foreground);
								font-size: var(--font-size-sm);
								font-style: normal;
								font-weight: var(--font-weight-medium);
								line-height: 20px;
								letter-spacing: -0.07px;
							}
						}

						.ingestion-key-value {
							display: flex;
							align-items: center;
							gap: 12px;

							border-radius: 20px;
							padding: 0px 12px;

							background: var(--l3-background);

							.ant-typography {
								color: var(--l2-foreground);
								font-size: var(--font-size-xs);
								font-family: 'Space Mono', monospace;
								font-style: normal;
								font-weight: var(--font-weight-medium);
								line-height: 20px;
								letter-spacing: -0.07px;
							}

							.copy-key-btn {
								cursor: pointer;
							}
						}
					}

					.action-btn {
						display: flex;
						align-items: center;
						gap: 4px;
						cursor: pointer;
					}

					.visibility-btn {
						border: 1px solid color-mix(in srgb, var(--bg-robin-400) 20%, transparent);
						background: color-mix(in srgb, var(--bg-robin-400) 10%, transparent);
					}
				}

				.ant-collapse {
					border: none;

					.ant-collapse-header {
						padding: 0px 8px;

						display: flex;
						align-items: center;
						background-color: var(--card);
					}

					.ant-collapse-content {
						border-top: 1px solid var(--l1-border);
					}

					.ant-collapse-item {
						border-bottom: none;
					}

					.ant-collapse-expand-icon {
						padding-inline-end: 0px;
					}
				}

				.ingestion-key-details {
					display: flex;
					align-items: center;
					justify-content: space-between;
					gap: 8px;
					border-top: 1px solid var(--l1-border);
					padding: 8px;

					.ingestion-key-tag {
						width: 14px;
						height: 14px;
						border-radius: 50px;
						background: var(--l1-border);
						display: flex;
						justify-content: center;
						align-items: center;

						.tag-text {
							color: var(--l2-foreground);
							leading-trim: both;
							text-edge: cap;
							font-size: 10px;
							font-style: normal;
							font-weight: var(--font-weight-normal);
							line-height: normal;
							letter-spacing: -0.05px;
						}
					}

					.ingestion-key-created-by {
						margin-left: 8px;
					}

					.ingestion-key-last-used-at {
						display: flex;
						align-items: center;
						gap: 8px;

						.ant-typography {
							color: var(--l2-foreground);
							font-size: var(--font-size-sm);
							font-style: normal;
							font-weight: var(--font-weight-normal);
							line-height: 18px;
							/* 128.571% */
							letter-spacing: -0.07px;
							font-variant-numeric: lining-nums tabular-nums stacked-fractions
								slashed-zero;
							font-feature-settings:
								'dlig' on,
								'salt' on,
								'cpsp' on,
								'case' on;
						}
					}

					.ingestion-key-expires-in {
						font-style: normal;
						font-weight: 400;
						line-height: 18px;

						display: flex;
						align-items: center;
						gap: 8px;

						.dot {
							height: 6px;
							width: 6px;
							border-radius: 50%;
						}

						&.warning {
							color: var(--bg-amber-400);

							.dot {
								background: var(--bg-amber-400);
								box-shadow: 0px 0px 6px 0px var(--bg-amber-400);
							}
						}

						&.danger {
							color: var(--bg-cherry-400);

							.dot {
								background: var(--bg-cherry-400);
								box-shadow: 0px 0px 6px 0px var(--bg-cherry-400);
							}
						}
					}
				}
			}
		}

		.ant-pagination-item {
			display: flex;
			justify-content: center;
			align-items: center;

			> a {
				color: var(--l2-foreground);
				font-variant-numeric: lining-nums tabular-nums slashed-zero;
				font-feature-settings:
					'dlig' on,
					'salt' on,
					'case' on,
					'cpsp' on;
				font-size: var(--font-size-sm);
				font-style: normal;
				font-weight: var(--font-weight-normal);
				line-height: 20px;
				/* 142.857% */
			}
		}

		.ant-pagination-item-active {
			background-color: var(--primary-background);

			> a {
				color: var(--foreground) !important;
				font-size: var(--font-size-sm);
				font-style: normal;
				font-weight: var(--font-weight-medium);
				line-height: 20px;
			}
		}
	}
}

.ingestion-key-info-container {
	display: flex;
	gap: 12px;
	flex-direction: column;

	.user-info {
		display: flex;
		gap: 8px;
		align-items: center;
		flex-wrap: wrap;

		.user-avatar {
			background-color: lightslategray;
			vertical-align: middle;
		}
	}

	.user-email {
		display: inline-flex;
		align-items: center;
		gap: 12px;
		border-radius: 20px;
		padding: 0px 12px;
		background: var(--l3-background);

		font-family: 'Space Mono', monospace;
	}

	.role {
		display: flex;
		align-items: center;
		gap: 12px;
	}

	.ingestion-key-tags-container {
		display: flex;
		align-items: center;
		gap: 16px;
	}

	.limits-data {
		padding: 16px;
		border: 1px solid var(--l1-border);

		.signals {
			.signal {
				margin-bottom: 24px;

				.header {
					display: flex;
					justify-content: space-between;
					align-items: center;

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

				.signal-name {
					font-size: 12px;
					font-weight: 500;
					text-transform: uppercase;

					color: var(--accent-primary);
				}

				.signal-limit-values {
					display: flex;
					gap: 16px;
					margin-top: 8px;
					margin-bottom: 16px;

					.edit-ingestion-key-limit-form {
						width: 100%;
					}

					.ant-form-item {
						margin-bottom: 12px;
					}

					.daily-limit,
					.second-limit {
						flex: 1;

						.heading {
							margin-bottom: 8px;

							.title {
								font-size: 12px;
							}

							.subtitle {
								font-size: 11px;
							}

							padding: 4px 0px;
						}

						.ant-input-number {
							width: 80%;
						}

						.no-limit {
							display: flex;
							align-items: center;
							gap: 8px;

							margin-bottom: 24px;

							font-weight: 700;
							font-size: 12px;
							color: var(--bg-forest-400);
						}
					}

					.signal-limit-view-mode {
						display: flex;
						width: 100%;
						justify-content: space-between;
						gap: 16px;

						.signal-limit-value {
							display: flex;
							align-items: center;
							gap: 8px;

							flex: 1;

							.limit-type {
								display: flex;
								align-items: center;
								gap: 8px;
							}

							.limit-value {
								display: flex;
								align-items: center;
								gap: 8px;

								font-size: 12px;
								font-weight: 600;
							}

							.set-alert-btn {
								cursor: pointer;
								margin-left: 24px;
							}
						}
					}

					.signal-limit-edit-mode {
						display: flex;
						justify-content: space-between;
						gap: 16px;
					}
				}

				.signal-limit-save-discard {
					display: flex;
					gap: 8px;
				}
			}
		}
	}
}

.ingestion-key-modal {
	.ant-modal-content {
		border-radius: 4px;
		border: 1px solid var(--l1-border);
		background: var(--l2-background);
		box-shadow: 0px -4px 16px 2px rgba(0, 0, 0, 0.2);
		padding: 0;

		.ant-modal-header {
			background: none;
			border-bottom: 1px solid var(--l1-border);
			padding: 16px;
		}

		.ant-modal-close-x {
			font-size: 12px;
		}

		.ant-modal-body {
			padding: 12px 16px;
		}

		.ant-modal-footer {
			padding: 16px;
			margin-top: 0;

			display: flex;
			justify-content: flex-end;
		}
	}
}

.ingestion-key-access-role {
	display: flex;

	.ant-radio-button-wrapper {
		font-size: 12px;
		text-transform: capitalize;

		&.ant-radio-button-wrapper-checked {
			color: var(--l1-foreground);
			background: var(--l1-border);
			border-color: var(--l1-border);

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

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

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

	.tab {
		border: 1px solid var(--l1-border);

		flex: 1;

		display: flex;
		justify-content: center;

		&::before {
			background: var(--l1-border);
		}

		&.selected {
			background: var(--l1-border);
		}
	}

	.role {
		display: flex;
		align-items: center;
		gap: 8px;
	}
}

.delete-ingestion-key-modal {
	width: calc(100% - 30px) !important;
	/* Adjust the 20px as needed */
	max-width: 384px;

	.ant-modal-content {
		padding: 0;
		border-radius: 4px;
		border: 1px solid var(--l1-border);
		background: var(--l2-background);
		box-shadow: 0px -4px 16px 2px rgba(0, 0, 0, 0.2);

		.ant-modal-header {
			padding: 16px;
			background: var(--l2-background);
		}

		.ant-modal-body {
			padding: 0px 16px 28px 16px;

			.ant-typography {
				color: var(--l2-foreground);
				font-size: var(--font-size-sm);
				font-style: normal;
				font-weight: var(--font-weight-normal);
				line-height: 20px;
				letter-spacing: -0.07px;
			}

			.ingestion-key-input {
				margin-top: 8px;
				display: flex;
				gap: 8px;
			}

			.ant-color-picker-trigger {
				padding: 6px;
				border-radius: 2px;
				border: 1px solid var(--l1-border);
				background: var(--l3-background);
				width: 32px;
				height: 32px;

				.ant-color-picker-color-block {
					border-radius: 50px;
					width: 16px;
					height: 16px;
					flex-shrink: 0;

					.ant-color-picker-color-block-inner {
						display: flex;
						justify-content: center;
						align-items: center;
					}
				}
			}
		}

		.ant-modal-footer {
			display: flex;
			justify-content: flex-end;
			padding: 16px 16px;
			margin: 0;

			.cancel-btn {
				display: flex;
				align-items: center;
				border: none;
				border-radius: 2px;
				background: var(--l1-border);
			}

			.delete-btn {
				display: flex;
				align-items: center;
				border: none;
				border-radius: 2px;
				background: var(--danger-background);
				margin-left: 12px;
			}

			.delete-btn:hover {
				color: var(--l1-foreground);
				background: var(--bg-cherry-600);
			}
		}
	}

	.title {
		color: var(--l1-foreground);
		font-size: var(--font-size-sm);
		font-style: normal;
		font-weight: var(--font-weight-medium);
		line-height: 20px;
		/* 142.857% */
	}
}

.expires-at {
	.ant-picker {
		border-color: var(--l1-border) !important;
	}
}

.expiration-selector {
	.ant-select-selector {
		border: 1px solid var(--l1-border) !important;
	}
}

.newAPIKeyDetails {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.copyable-text {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	border-radius: 20px;
	padding: 0px 12px;
	background: var(--l3-background);

	.copy-key-btn {
		cursor: pointer;
	}
}

.ingestion-key-details-edit-drawer-title {
	display: flex;
	gap: 8px;
}

.ingestion-key-details-meta {
	padding: 14px 16px;
	border-radius: 3px;
	border: 1px solid var(--l1-border);
}

#edit-ingestion-key-form {
	.ant-form-item:last-child {
		margin-bottom: 0px;
	}
}

.alert {
	display: flex;
	gap: 12px;

	padding: 8px;
	margin: 16px 0;

	border-radius: 4px;
	background: color-mix(in srgb, var(--bg-robin-400) 10%, transparent);
	color: var(--bg-robin-300);
	font-size: 13px;
	font-style: normal;
	font-weight: 400;
	line-height: 160%;
	letter-spacing: 0.013px;
}

.error {
	color: var(--danger-background);
	margin-bottom: 8px;
}

.save-discard-changes {
	display: flex;
	gap: 8px;
	justify-content: flex-end;
}

.ingestion-details-edit-drawer {
	.ant-drawer-header {
		border-bottom: 1px solid var(--l1-border);
		padding: 8px;
	}

	.ant-drawer-footer {
		border-top: 1px solid var(--l1-border);
		padding: 8px;
	}
}

.ingestion-key-limits {
	margin-top: 48px;
	padding: 16px;
	border-radius: 3px;
	border: 1px solid var(--l1-border);

	.ant-tabs {
		.ant-tabs-nav {
			margin-top: -36px;

			&::before {
				border-bottom: none;
			}

			.ant-tabs-nav-list {
				background: var(--card);
				border-radius: 2px;
				border: 1px solid var(--l1-border);
				background: var(--l2-background);
				box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);

				.ant-tabs-tab {
					display: inline-flex;
					padding: 6px 36px;
					justify-content: center;
					align-items: center;
					margin: 0px;
					border-right: 1px solid var(--l1-border);

					&.ant-tabs-tab-active {
						border-bottom: 0px;
					}

					.tab-name {
						display: flex;
						align-items: center;
						gap: 8px;
					}
				}
			}
		}
	}
}

.ingestion-key-expires-at {
	border-radius: 4px;
	border: 1px solid var(--l1-border);
	background: var(--l2-background);
	box-shadow: 0px -4px 16px 2px rgba(0, 0, 0, 0.2);
}

.mt-8 {
	margin-top: 8px;
}

.mt-12 {
	margin-top: 12px;
}

.mt-24 {
	margin-top: 24px;
}

.mb-24 {
	margin-bottom: 24px;
}

.ingestion-setup-details-links {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 12px;
	padding: 12px;
	border-radius: 4px;
	background: color-mix(in srgb, var(--bg-robin-400) 10%, transparent);
	color: var(--bg-robin-300);

	.ingestion-key-url-container {
		display: flex;
		gap: 8px;
		justify-content: space-between;
		align-items: center;
		width: 100%;

		.ingestion-key-url-label {
			font-size: 13px;
			font-weight: 500;
			color: var(--bg-robin-300);
		}

		.ingestion-key-url-value {
			display: flex;
			gap: 8px;
			align-items: center;
			font-size: 13px;
			font-weight: 500;
			color: var(--bg-robin-300);

			.copy-key-btn {
				cursor: pointer;
			}
		}
	}

	.ingestion-data-region-container {
		display: flex;
		gap: 8px;
		align-items: center;
		justify-content: space-between;

		.ingestion-data-region-label {
			font-size: 13px;
			font-weight: 500;
			color: var(--bg-robin-300);
		}

		.ingestion-data-region-value {
			display: flex;
			gap: 8px;
			align-items: center;
			font-size: 13px;
			font-weight: 500;
			color: var(--bg-robin-300);

			.ingestion-data-region-value-text {
				color: var(--bg-robin-300);
			}

			.copy-key-btn {
				cursor: pointer;
			}
		}
	}

	.learn-more {
		display: inline-flex;
		justify-content: center;
		align-items: center;
		text-decoration: underline;

		color: var(--bg-robin-300);
	}
}

.ingestion-url-error-tooltip {
	.ingestion-url-error-content {
		display: flex;
		flex-direction: column;
		gap: 8px;
	}

	.ingestion-url-error-code {
		font-size: 12px;
		font-weight: 500;
		color: var(--bg-amber-500);
	}

	.ingestion-url-error-message {
		font-size: 12px;
		font-weight: 400;
		color: var(--l2-foreground);
	}
}
