@mixin flex-center {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.alert-details-tabs {
	.top-level-tab.periscope-tab {
		padding: 2px 0;
	}

	.ant-tabs {
		&-nav {
			margin-bottom: 0 !important;
			&::before {
				border-bottom: 1px solid var(--l1-border) !important;
			}
		}
		&-tab {
			&[data-node-key='TriggeredAlerts'] {
				margin-left: 16px;
			}
			&:not(:first-of-type) {
				margin-left: 24px !important;
			}

			[aria-selected='false'] {
				.periscope-tab {
					color: var(--l2-foreground);
				}
			}
		}
	}
}

.alert-empty-card {
	margin-top: 50px;
	.ant-empty-description {
		color: var(--l2-foreground);
	}
}

.alert-details {
	margin-top: 10px;
	.divider {
		border-color: var(--l1-border);
		margin: 16px 0;
	}
	.breadcrumb-divider {
		margin-top: 10px;
	}
	&__breadcrumb {
		ol {
			align-items: center;
		}
		padding-left: 16px;
		.breadcrumb-item {
			color: var(--l2-foreground);
			font-size: 14px;
			line-height: 20px;
			letter-spacing: 0.25px;
			padding: 0;
		}

		.ant-breadcrumb-separator,
		.breadcrumb-item--last {
			color: var(--muted-foreground);
			font-family: 'Geist Mono';
		}
	}
	.tabs-and-filters {
		margin: 1rem 0;

		.ant-tabs {
			&-ink-bar {
				background-color: transparent;
			}
			&-nav {
				&-wrap {
					padding: 0 16px 16px 16px;
				}
				&::before {
					border-bottom: none !important;
				}
			}
			&-tab {
				margin-left: 0 !important;
				padding: 0;

				&-btn {
					padding: 6px 17px;
					color: var(--l2-foreground) !important;
					letter-spacing: -0.07px;
					font-size: 14px;

					&[aria-selected='true'] {
						color: var(--l1-foreground) !important;
					}
				}
				&-active {
					background: var(--l2-background);
				}
			}
			&-extra-content {
				padding: 0 16px 16px;
			}
			&-nav-list {
				border: 1px solid var(--l1-border);
				background: var(--l2-background);
				border-radius: 2px;
			}
		}

		.tab-item {
			display: flex;
			justify-content: center;
			align-items: center;
			gap: 8px;
		}
		.filters {
			@include flex-center;
			gap: 16px;
			.reset-button {
				@include flex-center;
			}
		}
	}
}

.alert-details-v2 {
	.alert-details__breadcrumb {
		padding-left: 32px;
		.breadcrumb-item {
			font-size: 13px;
		}
	}

	.alert-info {
		margin-right: 16px;

		.alert-info__action-buttons {
			.alert-action-buttons {
				.ant-btn {
					font-size: 13px;
				}
			}
		}
	}

	.divider {
		display: none;
	}

	.tabs-and-filters {
		.ant-tabs {
			.ant-tabs-nav {
				margin: 0 8px;
			}

			.ant-tabs-tab {
				.ant-tabs-tab-btn {
					border-radius: 2px;
					border: 1px solid var(--l1-border);
					background: var(--l2-background);
					font-size: 13px;

					&[aria-selected='true'] {
						background: var(--l1-background);
					}
				}
			}

			.ant-tabs-content-holder {
				.ant-tabs-content {
					.ant-tabs-tabpane {
						.alert-history {
							margin: 0 16px;
						}
					}
				}
			}
		}
	}
}
