.litm.litm--challenge {
	isolation: isolate;
	font-family: var(--litm-font-text);
	font-size: var(--font-size-14);
	background: transparent;
	padding: 0px;
	outline: none;

	& .window-header {
		top: 6px;
		position: relative;
		margin-inline: 6px;
		padding-inline: 10px;
		z-index: 1;
		background: rgb(16 34 44 / 80%);
	}

	& .window-content {
		overflow: hidden;
		position: relative;
		min-height: 100%;
		top: -24px;
	}

	& form {
		position: relative;
		margin: 4px;
		overflow: hidden;
		overflow: clip;
	}

	& .litm--challenge-border {
		position: absolute;
		top: 0px;
		left: 0px;
		height: 100%;
		width: 100%;
		z-index: 2;
		pointer-events: none;
	}

	& .litm--challenge-meta {
		z-index: 1;
		position: absolute;
		top: 26px;
		width: 100%;
		display: grid;
		grid-template-columns: auto 1fr 70px;
		align-items: center;
		gap: var(--litm-space-1);
		padding: var(--litm-space-1) 16px var(--litm-space-3) 12px;
		background-image: linear-gradient(to bottom, rgb(16 34 44 / 80%) 30%, transparent 100%);

		& input {
			margin-inline: 1px;
			padding: 0px;
			font-size: 0.6rem;
			font-family: var(--litm-font-sc);
			color: var(--litm-color-primary-bg);
			text-transform: uppercase;
			background: transparent;
			border: none;
			min-width: 10px;
			max-width: 207px;
			letter-spacing: -0.05em;
			height: auto;

			&::-webkit-calendar-picker-indicator {
				display: none !important;
			}
		}

		&>img {
			object-fit: cover;
			object-position: center;
			filter: grayscale(1) brightness(2);
			height: 10px;
		}

		& .litm--challenge-rating {
			display: flex;
			gap: 2px;
			align-items: center;
			justify-content: start;
			width: 100%;
			margin-inline-start: var(--litm-space-1);

			& span {
				display: none;
				color: var(--litm-color-accent);
				font-size: var(--font-size-11);

				&:first-child {
					display: block;
					visibility: hidden;
				}

				&.checked {
					display: block;
					visibility: visible;
				}

				& img {
					height: 14px;
					object-fit: contain;
					object-position: center;
				}
			}
		}
	}

	& .litm--challenge-avatar {
		position: absolute;
		top: 0px;
		height: 380px;
		width: 100%;
		object-fit: cover;
		object-position: center;
		background: var(--litm-color-accent-2);
	}

	& .litm--challenge-bg {
		background: url("../../assets/media/challenge-bg.webp") no-repeat top center;
		position: absolute;
		top: 150px;
		height: 100%;
		width: 100%;
		background-size: cover;
		pointer-events: none;
	}

	& .editor {
		height: auto;
		min-height: 28px;
		color: var(--litm-color-primary);
		margin-inline: var(--litm-space-2);
		font-size: var(--font-size-12);
		text-align: center;

		&.tinymce {
			min-height: 100px;
			height: 100%;
		}

		& [role="application"] {
			height: 100% !important;
		}
	}

	& .litm--challenge-divider {
		display: grid;
		align-items: center;
		text-transform: uppercase;
		grid-template-columns: 1fr auto 1fr;
		padding: 0px var(--litm-space-3);
		gap: var(--litm-space-2);

		&.grid-4 {
			grid-template-columns: 1fr auto 1fr auto;
		}

		& label {
			font-family: var(--litm-font-sc);
			font-size: 0.6rem;
			color: var(--litm-color-weakness);
			letter-spacing: 1px;
		}

		& img {
			object-fit: cover;
			object-position: left;
			height: 5px;

			&:first-child {
				height: 7px;
			}

		}

		& .litm--challenge-add {
			border: none;
			background: 0;
			align-self: baseline;
			line-height: 1;
			font-size: var(--font-size-16);
			color: var(--litm-color-weakness);
			padding: 0px;
			margin: 0px;

			&:hover,
			&:focus,
			&:active {
				text-shadow: 0px 0px 5px var(--litm-color-weakness);
				box-shadow: none;
			}
		}
	}

	& .litm--challenge-wrapper {
		position: relative;
		top: 290px;
		overflow: auto;
		max-height: 400px;

		& .litm--challenge-name {
			display: block;
			margin-inline: var(--litm-space-2);
			font-family: var(--litm-font-sc);
			font-size: var(--font-size-28);
			color: var(--litm-color-weakness);
			font-weight: 700;
			text-align: center;
			line-height: 1;

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

		& .litm--challenge-limits {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-inline: var(--litm-space-3);
			font-size: var(--font-size-11);
			height: 50px;
			gap: var(--litm-space-2);
			list-style: none;
			padding: 0px 0px var(--litm-space-3);
			overflow: auto hidden;
			scrollbar-width: none;

			& li {
				flex: none;
				display: grid;
				grid-template-columns: 1fr;
				grid-template-areas: "center";
				place-content: center;
				height: 40px;
				position: relative;
				isolation: isolate;
				font-family: var(--litm-font-sc);

				&::before {
					content: "";
					display: block;
					position: absolute;
					background: url("../../assets/media/limit-bg.webp") no-repeat center;
					background-size: cover;
					border-radius: 2px;
					top: 16px;
					width: 100%;
					height: 12px;
				}

				&>* {
					grid-area: center;
				}

				& input {
					background: transparent;
					border: none;
					border-radius: 2px;
					min-width: 10px;
					color: var(--litm-color-accent);
					text-align: center;
					margin-inline: auto;
					padding-inline: 4px;

					&.litm--limit-label {
						z-index: 1;
						position: relative;
						top: 20px;
						background: url("../../assets/media/limit-label.webp") no-repeat center;
						background-size: cover;
						height: var(--font-size-16);
						font-size: 0.6rem;
						margin-inline: auto;
						text-transform: uppercase;
					}

					&.litm--limit-value {
						background: url("../../assets/media/limit-value.webp") no-repeat center;
						background-size: contain;
						position: relative;
						padding-block-end: 6px;
						width: 45px;
						font-size: var(--font-size-16);

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

		& .litm--challenge-tags {
			margin-inline: var(--litm-space-3);
			text-align: center;
			padding-block: var(--litm-space-1) var(--litm-space-2);
			font-size: var(--font-size-12);

			&>* {
				min-height: 20px;
				width: 100%;
				display: block;
			}

			& #tags {
				color: var(--litm-color-weakness);
			}

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

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

			& [contenteditable]:has(+#tags) {
				cursor: pointer;

				span& {
					cursor: text;
				}

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

		& .litm--challenge-threats {
			display: flex;
			flex-direction: column;
			gap: var(--litm-space-3);
			margin-inline: var(--litm-space-3);
			padding: 0px 0px var(--litm-space-3);
			list-style: none;


			& li>div {
				font-size: var(--font-size-12);

				&:first-child {
					font-style: italic;
				}

				&:not(:first-child) {
					font-weight: 600;
					margin-block-start: var(--litm-space-1);
					margin-inline-start: 0.5em;
				}
			}
		}
	}
}