@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                : #000077;
	--label-clr             : black;
	--input-bg              : white;
	--input-bg-hover        : #DDDDDD;
	--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;
	color                   : var(--label-clr);
	background-color        : var(--bg-clr);
	background-image        : var(--bg-image);
	background-size         : cover;

	h1 {
		margin         : 0 0 40px;
		font-size      : 18px;
		font-weight    : bold;
		color          : var(--h1-clr);
		text-transform : uppercase;
	}
	
	h2 {
		margin        : 16px 0;
		font-size     : 15px;
		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;
			color          : inherit;
			text-transform : capitalize;
		}
		& > .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 {
			color            : var(--input-text-clr);
			background-color : var(--input-bg);
			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 {
				color            : var(--input-text-clr);
				background-color : var(--input-bg);

				.item:hover {
					color            : var(--input-bg);
					background-color : var(--input-text-clr);
				}
			}
		}
		&.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 {
		color      : var(--input-bg);
		background : var(--input-text-clr);
	}
	.authors.field {
		.tag {
			font-weight : 300;
			transition  : background-color 0.2s;

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

				&::after {
					position    : absolute;
					top         : 0;
					left        : 0;
					width       : 15px;
					height      : 15px;
					font-family : 'Font Awesome 6 Free';
					color       : gold;
					content     : '\f521';
					transform   : scaleY(0.7);
					rotate      : -25deg;
					translate   : -30% -50%;
				}
			}
			&: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 #666666;
				}
			}

			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                : #555555;
	--bg-image              : @backgroundImageAlt;
	--h1-clr                : white;
	--h2-clr                : #AAAAFF;
	--label-clr             : #DDDDDD;
	--input-bg              : #333333;
	--input-bg-hover        : #666666;
	--input-text-clr        : #EEEEEE;
	--input-placeholder-clr : #AAAAAA;

	--bg-image              : @backgroundImageAltDark;

	a {
		color : @blueLight;

		&:visited { color : #CB8AD8; }
	}

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