.litm.litm--threat {
	background-color: var(--litm-color-primary);
	background-blend-mode: luminosity;
	font-family: var(--litm-font-text);
	font-size: var(--font-size-16);
	outline: 2px solid var(--litm-color);
	outline-offset: -10px;
	padding: 10px;

	& header {
		color: var(--litm-color-primary);
	}

	& form {
		color: var(--litm-color-primary);
		padding: 0px var(--litm-space-2);
	}

	& h2 {
		text-align: center;
		border: none;
		font-family: var(--litm-font-accent);
	}

	& .litm--threat-wrapper {
		display: flex;
		flex-direction: column;
		gap: var(--litm-space-2);
		padding-inline-start: var(--litm-space-3);
		list-style: none;

		& li {
			display: flex;
			gap: var(--litm-space-1);
		}
	}

	& [contenteditable] {
		background-color: transparent;
		padding: var(--litm-space-1);
		border: none;
		border-radius: 4px;
		width: 100%;

		&:focus {
			background-color: rgb(0, 0, 0, 0.2);
			outline: none;
		}
	}

	& [contenteditable]:has(+#threat) {
		font-style: italic;
	}

	& [id^=consequence-] {
		font-weight: 500;
		min-width: 50px;

		&:empty {
			background-color: rgb(0, 0, 0, 0.2);
		}
	}

	& [contenteditable]:has(+[id^=consequence-]) {
		min-height: 20px;
		cursor: pointer;

		span& {
			cursor: text;
		}

		&:empty {
			background-color: rgb(0, 0, 0, 0.2);
		}
	}

	& button[data-click="add-consequence"] {
		margin-inline: 4px 3rem;
		padding-bottom: var(--litm-space-2);
		width: auto;
		border: none;
		border-radius: 0px;
		border-top: 1.5px solid rgb(0, 0, 0, 0.4);
		border-image: url(../../assets/media/tag-divider.webp) 14 / 3;
		background-color: transparent;
		color: var(--litm-color-weakness);
		font-size: var(--font-size-20);
		font-family: var(--litm-font-accent);
		transition: all 0.15s;
		text-align: left;

		&:hover {
			box-shadow: none;
			text-shadow: 0 0 4px rgb(0, 0, 0, 0.5);
		}
	}
}