@keyframes form-message {
	from {
		opacity: 0;
		transform: scale(0.5);
	}

	to {
		opacity: 1;
		transform: scale(1);
	}
}

.file-list-item {
	display: flex;
	flex-flow: row;

	form {
		padding-left: 20px;
	}
}

.form-message {
	--color: black;
	border: 1px solid var(--color);
	border-radius: 5px;
	padding: 10px;
	animation: form-message 200ms;
	box-shadow: 3px 3px 0px 0px #00000038;
}

.form-message--error {
	--color: var(--color-basic-red);

	&::before {
		content: "❌";
		margin-right: 8px;
	}
}

.form-message--success {
	--color: var(--color-basic-green);

	&::before {
		content: "✅";
		margin-right: 8px;
	}
}

.form__error {
	color: var(--color-basic-red);
}

.form-input--type-simple-input {
	display: flex;
	align-items: center;
	gap: 8px;
}

.form-input__wrapper--multiple-files--photos {
	ul {
		list-style: none;
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
		grid-gap: 10px;
		margin-bottom: 20px;

		li {
			background-color: white;
			box-shadow: 1px 1px 6px 0px #00000038;
			padding: 10px;
			display: grid;
			grid-template-columns: 1fr 20px;
			grid-template-rows: 20px auto min-content;
			grid-row-gap: 10px;

			a {
				grid-row: 1/3;
				grid-column: 1/3;

				picture,
				img {
					width: 100%;
					height: 150px;
					object-fit: contain;
				}
			}

			.filename {
				grid-row: 3/4;
				grid-column: 1/3;
			}

			form {
				grid-row: 1/2;
				grid-column: 2/3;
				position: relative;
				z-index: 2;
			}
		}
	}
}

.form-container .form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	--column-count: 2;

	@container (max-width: 900px) {
		grid-template-columns: 1fr;
		--column-count: 1;
	}

	grid-auto-flow: dense;
	gap: 8px;
	max-width: 1224px;
	margin: 0 auto;

	label,
	fieldset legend {
		font-weight: bold;
		font-size: 16px;
	}

	& > fieldset legend {
		padding: 0 8px;
	}

	.form-input .form-input label {
		font-weight: normal; /* for labels in checkboxed list */
	}

	fieldset {
		border-radius: 4px;
	}

	.form-messages {
		grid-column: span var(--column-count);
		position: sticky;
		top: 16px;
		z-index: 3;
		display: flex;
		flex-flow: column;
		gap: 8px;

		.form-message {
			display: inline-block;
			align-self: center;
		}
	}

	& > .form-input__wrapper {
		border-radius: 4px;
		padding: 1rem;
		background-color: color-mix(in srgb, var(--color-brand-accent) 20%, transparent);
		border: 1px solid var(--color-brand-accent);
	}

	& > h2 {
		grid-column: span var(--column-count);
		font-family: var(--font-sans-serif);
		color: var(--color-brand-text-fg);
		font-size: 36px;
		margin: 1rem 0;
	}

	input[type="submit"] {
		background-color: var(--color-brand-accent);
		color: white;
		grid-column: span var(--column-count);
		border-radius: 10px;
		height: 40px;
		border: none;
		cursor: pointer;

		&:hover {
			filter: brightness(1.2);
		}
	}

	textarea {
		width: 100%;
		min-height: 120px;
	}

	.form-input--type-checkbox {
		grid-row: span 1;
	}

	.form-input__wrapper--control-type__image {
		grid-row: span 2;
		gap: 8px;
	}

	.form-input__wrapper--text,
	.form-input__wrapper--type__date,
	.form-input__wrapper--type__datetime-local,
	.form-input__wrapper--type__number,
	.form-input__wrapper--enum,
	.form-input--type-simple-input,
	.form-input__wrapper--type__password {
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
		gap: 8px;

		input,
		select {
			font-size: 14px;
			border-radius: 3px;
			border-style: solid;
			border-width: 1px;
			border-color: color-mix(in srgb, var(--color-brand-accent) 50%, transparent);
			box-sizing: border-box;
			height: 50px;
			padding: 8px;
			flex-grow: 1;
			background-color: var(--color-brand-canvas);

			&[disabled] {
				background-color: var(--color-brand-canvas-09);
				cursor: not-allowed;
			}
		}
	}

	.form-input__wrapper--checkbox {
		display: flex;
		flex-flow: row nowrap;
		align-items: center;

		& > input[type="checkbox"] {
			width: 15px;
			height: 15px;

			+ label {
				padding-left: 10px;
			}
		}
	}

	.file_preview__icon {
		display: flex;
		flex-flow: row;
		align-items: center;

		a {
			word-wrap: anywhere;
			text-align: center;
			color: var(--color-brand-text-accent2);
		}

		picture {
			display: grid;
			grid-template-columns: 1fr;
			grid-template-rows: 1.3fr 1fr 1fr;

			img {
				grid-row: 1/4;
				grid-column: 1/2;
			}

			.file_preview__icon__extension {
				text-transform: uppercase;
				color: var(--color-brand-accent2);
				font-weight: bold;
				grid-row: 2/3;
				grid-column: 1/2;
				text-align: center;
				margin: auto;
			}
		}
	}
}