.alert-header {
	background-color: var(--l1-background);
	font-family: inherit;
	color: var(--l1-foreground);
	padding: 12px 16px;

	&__tab-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	/* Tab block visuals */
	&__tab {
		display: flex;
		align-items: center;
		background-color: var(--l1-background);
		height: 32px;
		font-size: 13px;
		color: var(--l1-foreground);
	}

	&__tab::before {
		content: '•';
		margin-right: 6px;
		font-size: 13px;
		color: var(--l3-foreground);
	}

	&__content {
		padding: 8px 0;
		background: var(--l1-background);
		display: flex;
		flex-direction: column;
		gap: 8px;
		min-width: 300px;
		flex: 1;
	}

	&__input.title {
		background-color: transparent;
		color: var(--l1-foreground);
		width: 100%;
		min-width: 300px;
	}

	&__input.description {
		font-size: 13px;
		background-color: transparent;
		color: var(--l2-foreground);
	}

	.ant-btn {
		display: flex;
		gap: 4px;
		align-items: center;
		color: var(--l1-foreground);
		border: 1px solid var(--l1-border);
		margin-right: 16px;
	}
}

.labels-input {
	display: flex;
	flex-direction: column;
	gap: 8px;

	&__add-button {
		width: fit-content;
		font-size: 13px;
		color: var(--l2-foreground);
		border: 1px solid var(--l1-border);
		background-color: transparent;
		cursor: pointer;
		padding: 4px 8px;
		border-radius: 4px;

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

	&__existing-labels {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
	}

	&__label-pill {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		background-color: #ad7f581a;
		color: var(--bg-sienna-400);
		padding: 4px 8px;
		border-radius: 16px;
		font-size: 12px;
		border: 1px solid var(--bg-sienna-500);
		font-family: 'Geist Mono';
	}

	&__remove-button {
		background: none;
		border: none;
		color: var(--bg-sienna-400);
		cursor: pointer;
		padding: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 10px;

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

	&__input-container {
		display: flex;
		align-items: center;
		background-color: transparent;
		border: none;
	}

	&__input {
		flex: 1;
		background-color: transparent;
		border: none;
		outline: none;
		padding: 6px 8px;
		color: var(--l1-foreground);
		font-size: 13px;

		&::placeholder {
			color: var(--l2-foreground);
		}

		&:focus,
		&:active {
			border: none;
			outline: none;
		}
	}
}
