.input-wrapper
{
	&, .upload-input-wrapper, .upload-area-wrapper
	{
		border: solid 1px var(--color-lines);
		border-radius: 10px;
		display: flex;
		gap: 10px;
		flex-flow: column nowrap;
		padding: 15px;
	}
	
	& > label
	{
		font-size: calc((16 / 12) * var(--base-fontsize));
		font-weight: var(--font-weight-bold);
	}
	& > em
	{
		opacity: 0.8;
		font-size: var(--base-fontsize);
	}
	& > span
	{
		opacity: 0.48;
		font-size: calc((10 / 12) * var(--base-fontsize));
		
		em + &
		{
			margin-top: 10px;
		}
	}
	.input:is(input:not([type=range]), textarea, select)
	{
		background: var(--color-main-background);
		border: solid 1px var(--color-lines);
		border-radius: 10px;
		color: var(--color-text);
		font-size: var(--base-fontsize);
		padding: 15px;
		
		&:hover, &:focus
		{
			border-color: var(--color-menu-button);
			outline-color: var(--color-menu-button);
		}
	}
	textarea.input
	{
		--rows: 5;
		line-height: 1.15em;
		min-height: calc(32px + (1.15em * var(--rows)));
		resize: vertical;
		
		&.short
		{
			--rows: 3;
		}
	}
	.list-input-wrapper
	{
		display: flex;
		flex-flow: row wrap;
		gap: 15px;
		
		button, a.button
		{
			position: relative;
			
			.select-icon
			{
				--size: 18px;
				align-items: center;
				background: var(--button-background);
				border-radius: 5px;
				border: solid 2px var(--color-main-background);
				color: var(--button-text);
				display: flex;
				justify-content: center;
				height: var(--size);
				position: absolute;
				transition: background-color .36s, border-color .36s, color .36s;
				transform: translate(25%, -25%);
				right: 0;
				top: 0;
				width: var(--size);
				text-align: center;
				z-index: 1;
				
				i
				{
					font-size: calc(var(--size) / 2);
					line-height: 0;
					opacity: 0;
					transition: opacity .36s;
				}
			}
			
			&:hover .select-icon i
			{
				opacity: 1;
			}
			&.selected .select-icon
			{
				background: var(--color-menu-button);
				color: var(--color-menu-button-text);
				
				i
				{
					opacity: 1;
				}
			}
		}
		&.icon-left
		{
			*:is(button, a.button, .group-label) span
			{
				order: 1;
			}
		}
		
		&.unique
		{
			button
			{
				span.select-icon
				{
					border-radius: 100%;
				}
			}
		}
		&.dropdown
		{
			.display:is(button, a.button)
			{
				background: var(--color-main-background);
				border: solid 1px var(--color-lines);
				border-radius: 10px;
				color: var(--color-text);
				width: 100%;
				
				.arrow
				{
					margin-left: auto;
					order: 2;
					rotate: -90deg;
					transition: rotate .36s;
				}
				
				&:hover, &:focus, &:is(.dropdown.open *)
				{
					border-color: var(--color-menu-button);
					outline-color: var(--color-menu-button);
				}
			}
			.display:is(button, a.button):not(.empty)
			{
				color: var(--color-menu-button-background);
			}
			.contents
			{
				background: var(--color-menu-background);
				border: solid 1px var(--button-color);
				border-radius: 5px;
				max-height: 400px;
				padding: 15px;
				overflow-y: auto;
				width: 100%;
				z-index: 7;
				
				button, a.button
				{
					background: none;
					color: var(--color-menu-text);
					justify-content: flex-start;
					width: 100%;
					
					&:not([disabled]):hover
					{
						background-color: var(--color-menu-button);
						color: var(--color-menu-button-text);
					}
					&[disabled]
					{
						font-style: italic;
						opacity: .45;
					}
				}
				&.hidden
				{
					display: none;
				}
				.list-input-group
				{
					.group-label
					{
						color: var(--color-menu-text);
						display: flex;
						font-size: calc((13.5 / 12) * var(--base-fontsize));
						font-weight: var(--font-weight-bold);
						gap: 10px;
						padding: 15px 0;
						opacity: .45;
					}
					.group-contents
					{
						border-left: dotted 1px var(--color-lines);
						margin-left: calc((1em - 1px) / 2);
					}
				}
			}
			&.open .display:is(button, a.button) .arrow, & .display:is(button, a.button):hover .arrow
			{
				rotate: 0deg;
			}
		}
	}
	.upload-input-wrapper, .upload-area-wrapper
	{
		--ratio: 1 / 1;
		--brightness: 50;
		--contrast: 50;
		--saturation: 50;
		--sepia: 0;
		align-items: center;
		flex-flow: row nowrap;
		padding: 15px;
		
		picture
		{
			align-items: center;
			aspect-ratio: var(--ratio);
			background: var(--color-lines);
			border-radius: 10px;
			display: flex;
			height: 72px;
			justify-content: center;
			position: relative;
			
			img
			{
				border-radius: 10px;
				filter: brightness(calc(var(--brightness) / 50)) contrast(calc(var(--contrast) / 50)) saturate(calc(var(--saturation) / 50)) sepia(calc(var(--sepia) / 100));
				height: 100%;
				object-fit: cover;
				object-position: center center;
				width: 100%;
			}
			i
			{
				font-size: calc((20 / 12) * var(--base-fontsize));
			}
			span
			{
				--size: var(--base-fontsize);
				align-items: center;
				background: var(--color-text);
				border-radius: 100%;
				color: var(--color-main-background);
				display: flex;
				height: var(--size);
				justify-content: center;
				position: absolute;
				right: calc((var(--size) / 4) * -1);
				top: calc((var(--size) / 4) * -1);
				width: var(--size);
				text-align: center;
				z-index: 1;
				
				i
				{
					font-size: calc(var(--size) / 2);
					line-height: 0;
				}
			}
		}
		strong
		{
			font-size: var(--base-fontsize);
		}
		
		&.upload-input-wrapper:not(.loading), &.upload-area-wrapper ul li
		{
			cursor: pointer;
		}
		&.upload-input-wrapper.empty + .buttons button[command="upload-input:clear"],
		&.upload-input-wrapper.loading + .buttons,
		&.upload-input-wrapper.loaded + .buttons button:not([command="upload-input:clear"])
		{
			display: none;
		}
	}
	.upload-area-wrapper
	{
		align-items: flex-start;
		flex-flow: column nowrap;
		
		& > .buttons
		{
			align-self: stretch;
		}
		ul
		{
			display: flex;
			flex-flow: row wrap;
			gap: 10px;
			list-style: none;
			margin: 0;
			padding: 0;
			
			&:empty
			{
				display: none;
			}
		}
	}
}
.col-wrapper
{
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
	
	& > *
	{
		flex: 1;
	}
}
.section-wrapper .section
{
	display: flex;
	flex-flow: column nowrap;
	gap: 15px;
	
	&:not(.visible)
	{
		display: none;
	}
}

@media (min-width: 768px) and (orientation: landscape)
{
	.col-wrapper
	{
		grid-template-columns: var(--template, repeat(var(--cols, 2), 1fr));
	}
}