@import '@themes/assets/assets.less';
@import '@sharedStyles/core.less';

.userThemeName {
	padding-right : 10px;
	padding-left  : 10px;
}

.metadataEditor {
	--bg-clr: white;
	--bg-image: @backgroundImageAlt;
	--h1-clr: black;
	--h2-clr: #007;
	--label-clr: black;
	--input-bg: white;
	--input-bg-hover:#ddd;
	--input-text-clr: black;
	--input-placeholder-clr: grey;

	position         : absolute;
	box-sizing       : border-box;
	width            : 100%;
	height           : calc(100vh - 54px); // 54px is the height of the navbar + snippet bar.  probably a better way to dynamic get this.
	padding          : 25px;
	overflow-y       : auto;
	font-size        : 13px;
	background-color : var(--bg-clr);
	background-image : var(--bg-image);
	background-size  : cover;
	color: var(--label-clr);

	h1 {
		margin         : 0 0 40px;
		font-weight    : bold;
		font-size      : 18px;
		text-transform : uppercase;
		color: var(--h1-clr);
	}
	
	h2 {
		font-size:15px;
		margin        : 16px 0;
		font-weight   : bold;
		color         : var(--h2-clr);
		border-bottom : 2px solid currentColor;
	}

	& > div { margin-bottom : 10px; }

	.field-group {
		display   : flex;
		flex-wrap : wrap;
		gap       : 10px;
		width     : 100%;
	}

	.field-column {
		display        : flex;
		flex           : 5 0 250px;
		flex-direction : column;
		gap            : 10px;
	}

	.field {
		position      : relative;
		display       : flex;
		flex-wrap     : wrap;
		width         : 100%;
		min-width     : 250px;
		padding-left  : 10px;
		& > label {
			width          : 100px;
			font-size      : 1em;
			font-weight    : 800;
			line-height    : 1.8em;
			text-transform : capitalize;
			color:inherit;
		}
		& > .value {
			flex           : 1 1 auto;
			width          : 50px;
			&[data-tooltip-right] { max-width : 380px; }
			&:invalid { background : #FFB9B9; }
			small {
				display     : block;
				font-size   : 0.9em;
				font-style  : italic;
				line-height : 1.4em;
			}
		}
		input[type='text'], textarea {
			background-color: var(--input-bg);
			color:var(--input-text-clr);
			border : 1px solid var(--input-placeholder-clr);
			&:hover, :focus { outline : 1px solid var(--input-placeholder-clr); background-color: var(--input-bg-hover); }
			&::placeholder { color: var(--input-placeholder-clr); }
		}
		
		&.description {
			flex : 1;
			textarea.value {
				height      : auto;
				font-family : 'Open Sans', sans-serif;
				resize      : none;
			}
		}
		&.thumbnail, &.themes {
			label { line-height : 2.0em; }
			.value {
				overflow      : hidden;
				text-overflow : ellipsis;
			}
			button {
				.colorButton();
				padding          : 0px 5px;
				color            : var(--input-text-clr);
				background-color : var(--input-bg);
				border           : 1px solid #999999;
				&:hover { background-color : #777777; }
			}
		}
		&.tags .tagInput-dropdown {
			z-index   : 400;
			max-width : 200px;

			.dropdown-options {
				background-color:var(--input-bg);
				color: var(--input-text-clr);

				.item:hover {
					background-color: var(--input-text-clr);
					color: var(--input-bg);
				}
			}
		}
		&.language .value {
			z-index   : 300;
			max-width : 150px;
		}
		&.themes {
			.value {
				overflow      : visible;
				text-overflow : auto;
			}
			button {
				padding-right : 5px;
				padding-left  : 5px;
			}
		}

		&.invitedAuthors .value {
			z-index   : 100;
			
			.tagInput-dropdown { max-width : 200px; }
		}
	}

	.thumbnail-preview {
		position         : relative;
		flex             : 1 1;
		justify-self     : center;
		width            : 80px;
		height           : min-content;
		max-height       : 115px;
		aspect-ratio     : 1 / 1;
		object-fit       : contain;
		background-color : #AAAAAA;
	}
	.renderers.field .value {
		label {
			display        : inline-flex;
			align-items    : center;
			margin-right   : 15px;
			font-size      : 0.9em;
			font-weight    : 800;
			vertical-align : middle;
			white-space    : nowrap;
			cursor         : pointer;
			user-select    : none;
		}
		input {
			margin         : 3px;
			vertical-align : middle;
			cursor         : pointer;
		}
	}
	.publish.field .value {
		position      : relative;
		margin-bottom : 15px;
		button { width : 100%; }
		button.publish {
			.colorButton(@blueLight);
		}
		button.unpublish {
			.colorButton(@silver);
		}
	}
	.delete.field .value {
		button {
			.colorButton(@red);
		}
	}

	.tag {
		background:var(--input-text-clr);
		color: var(--input-bg);
	}
	.authors.field {
		.tag {
			font-weight:300;
			transition:background-color 0.2s;

			&.owner {
				position: relative;
				background-color:@silverLight;
				min-width:25px;
				display:grid;
				place-items:center;
				font-weight: 900;

				&::after {
					content: "\f521";
					font-family: "Font Awesome 6 Free";
					color:gold;
					position: absolute;
					top: 0;
					left: 0;
					width:15px;
					height:15px;
					rotate:-25deg;
					translate:-30% -50%;
					transform: scaleY(0.7);
				}
			}
			&:has(button) a {
				padding-right:5px;
			}
			&:has(button:hover) {
				background:#d97d7d;
			}

			button {
				color:@red;
			}

		
		}
		a {
			text-underline-offset:0.2em;
		}
	}
	.themes.field {
		& .dropdown-container {
			z-index          : 200;
		}
		& .dropdown-options { overflow-y : visible; }
		.disabled {
			font-style       : italic;
			color            : dimgray;
			background-color : darkgray;
		}
		.item {
			position          : relative;
			overflow          : visible;
			color:inherit;
			background-color  : var(--input-bg);
			border-top        : 1px solid #767676;
			.preview {
				position       : absolute;
				top            : 0;
				right          : 0;
				z-index        : 10;
				display        : flex;
				flex-direction : column;
				width          : 200px;
				overflow       : hidden;
				color          : var(--input-text-clr);
				background     : var(--input-bg);
				border-radius  : 5px;
				box-shadow     : 0 0 5px var(--input-text-clr);
				opacity        : 0;
				transition     : opacity 250ms ease;
				h6 {
					padding-block  : 0.5em;
					padding-inline : 1em;
					font-weight    : 900;
					border-bottom  : 2px solid #666;
				}
			}

			input {
				padding-right: 25px;
			}

			.texture-container {
				position   : absolute;
				top        : 0;
				left       : 0;
				width      : 100%;
				height     : 100%;
				min-height : 100%;
				overflow   : hidden;
				> img {
					position            : absolute;
					top                 : 0;
					right               : 0;
					width               : 50%;
					min-height          : 100%;
					-webkit-mask-image  : linear-gradient(90deg, transparent, black 20%);
					mask-image          : linear-gradient(90deg, transparent, black 20%);
				}
			}

			&:hover > .preview { opacity : 1; }
		}
	}
	.field .list {
		display   : flex;
		flex      : 1 0;
		flex-wrap : wrap;

		> * { flex : 0 0 auto; }

		#groupedIcon {
			#backgroundColors;
			position   : relative;
			top        : -0.3em;
			right      : -0.3em;
			display    : inline-block;
			min-width  : 20px;
			height     : ~'calc(100% + 0.6em)';
			color      : white;
			text-align : center;
			cursor     : pointer;
	
			i {
				position  : relative;
				top       : 50%;
				transform : translateY(-50%);
			}
	
			&:not(:last-child) { border-right : 1px solid black; }
	
			&:last-child { border-radius : 0 0.5em 0.5em 0; }
		}

		.tag {
			padding          : 0.35em;
			margin           : 2px;
			font-size        : 0.95em;
			border-radius    : 0.5em;

			.icon { #groupedIcon; }

			button {
				cursor : pointer;

				&:hover {
					color: @redLight;
				}
			}
		}

		.input-group {
			height : ~'calc(.9em + 4px + .6em)';

			input { border-radius : 0.5em 0 0 0.5em; }

			input:last-child { border-radius : 0.5em; }

			.value {
				width     : 7.5vw;
				min-width : 75px;
				height    : 100%;
			}

			.input-group {
				height : ~'calc(.9em + 4px + .6em)';

				input { border-radius : 0.5em 0 0 0.5em; }

				input:last-child { border-radius : 0.5em; }

				.value {
					width     : 7.5vw;
					min-width : 75px;
					height    : 100%;
				}

				.invalid:focus { background-color : pink; }

				.icon {
					#groupedIcon;
					top       : -0.54em;
					right     : 1px;
					height    : 97%;

					i { font-size : 1.125em; }
				}
			}
		}
	}
}

.editor.darkMode .metadataEditor {
	--bg-clr: #555;
	--bg-image: @backgroundImageAlt;
	--h1-clr: white;
	--h2-clr: #aaf;
	--label-clr: #ddd;
	--input-bg: #333;
	--input-bg-hover: #666;
	--input-text-clr: #eee;
	--input-placeholder-clr: #aaa;

	--bg-image: @backgroundImageAltDark;

	a {
		color: @blueLight;

		&:visited {
			color: #cb8ad8;
		}
	}

	.thumbnail-preview[src="/client/homebrew/thumbnail.png"] {
		filter:invert(.8);
	}
	button.publish {
		.colorButton(#3137de) !important;
	}
}