h1.dashboard-title {
	margin: var(--basic-gap) 0px;
	svg {
		width: 30px;
		height: auto;
		position: relative;
		top: 5px;
		opacity: 0.5;
		transition: opacity 0.2s ease-in-out;
		&:hover {
			opacity: 1;
		}
	}
}
@media (prefers-color-scheme: light) {
	h1.dashboard-title svg {
		filter: invert(1);
	}
}

main > .tabs {
	margin-top: var(--basic-gap);
}

main.asset-creator, div.form-container {
	position: relative;

	label {
		margin-bottom: 5px;
		display: block;
		margin-top: 15px;
	}
	label.inline {
		display: inline-block;
	}
	label.info {
		opacity: 0.6;
	}

	section {
		padding: 16px;
		margin: var(--basic-gap) 0px;
	}

	.col-2 {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 10px;
	}
	@media (max-width: 768px) {
		.col-2.responsive {
			grid-template-columns: 1fr;
		}
	}

	input, select, textarea {
		width: 100%;
		padding: 10px;
		margin-top: 5px;
		font-family: inherit;
		border-radius: 5px;
		border: 1px solid;
		border-color: light-dark(#e1e1e1,#606060);
		margin-bottom: 9px;
		background-color: light-dark(#f8f8f8,#2b2a33);
	}

	input[type="checkbox"] {
		width: auto;
		display: inline;
		margin-bottom: 5px;
		margin-top: 15px;
	}

	.radio-label {
		margin-left: var(--basic-gap);
		input {
			width: auto;
			display: inline-block;
			cursor: pointer;
		}
		label {
			margin: calc( var(--basic-gap) / 8 ) 0px;
			cursor: pointer;
		}
	}
	
	span.required, p.error {
		color: #f65994;
	}

	textarea {
		resize: vertical;
		min-height: 100px;
		&[name="body"] {
			height: 400px;
			@media (max-width: 768px) {
				height: 200px;
			}
		}
	}

	p.info {
		opacity: 0.6;
		margin-bottom: 20px;
	}

	.publisher-fields {
		display: none;
	}

	img {
		max-width: 100%;
	}

	button span {
		font-weight: bold;
	}

	hr {
		margin: calc( var(--basic-gap) * 1.5 ) 0px;
	}

	.save-indicator {
		margin: 0px calc( var(--basic-gap) / 2 );
		font-weight: bold;
		color: rgb(1, 151, 88);
		@media (prefers-color-scheme: dark) {
			color: rgb(134, 206, 94);
		}
		&.hidden {
			display: none;
		}
	}
}

.media-manager {
	display: flex;
	flex-wrap: wrap;
	row-gap: calc( var(--basic-gap) / 2.0 );
	padding-top: calc( var(--basic-gap) / 4.0 );
	padding-bottom: var(--basic-gap);
	-webkit-user-select: none;
	user-select: none;

	#media_cursor {
		position: relative;
		width: 0px;
		height: 110px;

		.vertical-bar {
			position: absolute;
			right: -1px;
			top: 0px;
			width: 2px;
			height: 100%;
			background-color: rgb(255, 146, 146);
		}

		&.hidden {
			display: none;
		}
	}

	.media-item {
		position: relative;
		height: 110px;
		border: 1px solid #606060;
		border-radius: 8px;
		overflow: hidden;
		margin: 0px calc( var(--basic-gap) / 4.0 );

		.hidden {
			display: none;
		}

		&.dragging {
			opacity: 0.5;
		}

		img {
			max-width: 100%;
			max-height: 100%;
			object-fit: contain;
		}

		button {
			position: absolute;
			right: -1px;
			top: -1px;
			width: 30px;
			height: 30px;
			background-color: var(--background-color);
			border-radius: 0px 8px 0px 5px;
			border: 1px solid #606060;
			color: rgb(255, 146, 146);
			font-size: larger;
		}
	}
}

.media-item.drop-area {
	position: relative;
	height: 110px;
	border-radius: 8px;
	overflow: hidden;
	margin: 0px calc( var(--basic-gap) / 4.0 );
	border: 3px #575757 dashed;
	background: #00000047;
	width: 180px;
	background-color: var(--background-color);
	text-align: center;
	input {
		display: none;
	}
	label {
		width: 100%;
		height: 100%;
		margin: 0px;
		padding: 7px;
		cursor: pointer;

		.icon {
			font-size: 38px;
			line-height: 38px;
		}
	}
}

.tabs {
	display: flex;
	z-index: 2;
	position: relative;
	.tab:first-child {
		border-top-left-radius: 5px;
	}
	.tab:last-child {
		border-top-right-radius: 5px;
	}
	.tab:not(:first-child) {
		border-left: none;
	}
	.tab {
		padding: 10px 20px;
		border: 1px solid #606060;
		cursor: pointer;
		background-color: #242424;
		@media (prefers-color-scheme: light) {
			background-color: #f1f1f1;
			border-color: rgb(225, 225, 225);
		}
		&.active {
			border-bottom: none;
			background-color: var(--panel-background);
		}
		&.input-themed.active {
			background-color: #2b2a33;
			@media (prefers-color-scheme: light) {
				background-color: white;
			}
		}
	}
}

.tab-content {
	display: none;
	border: 1px solid #606060;
	z-index: 1;
	padding: var(--basic-gap);
	border-radius: 0px 5px 5px 5px !important; /* Override form style */
	margin-top: -1px !important; /* Override form style */
	background-color: var(--panel-background);
	@media (prefers-color-scheme: light) {
		border-color: rgb(225, 225, 225);
	}

	&.active {
		display: block;
	}
}

.thumbnail-selector {
	display: grid;
	gap: 20px;
	@media (min-width: 768px) {
		grid-template-columns: 220px 1fr;
	}
	img.thumbnail-preview {
		cursor: pointer;
	}
	label {
		margin: 0 !important;
	}
	input {
		margin-top: 0 !important;
	}
}

#form-body-editor-wrapper {
	background-color: light-dark(white,#2b2a33);
	border-color: light-dark(#e1e1e1,#606060);
	padding: 6px;
}
#form-body-editor {
	background: var(--panel-background);
	position: relative;
	margin: 0;
	@media (prefers-color-scheme: light) {
		background: #f8f8f8;
	}
}

/* Add margins to paragraphs and line breaks */
#form-body-preview {
	min-height: 100px;
	margin-top: -1px;
	p {
		margin: 1em 0;
	}
	br {
		display: block;
		margin: 0.5em 0;
	}
}

/* Properly indent list elements */
#form-body-preview ul, #form-body-preview ol {
	padding-left: 2em;
}

#form-body-preview li {
	margin-bottom: 0.5em;
}