@import "../../../../../../css/_mixins.scss";
@import "../../../../../../css/_trx_addons.vars.scss";
@import "../../../../../../css/_trx_addons.colors.scss";

.trx-addons-ai-helper-image-generator {
	padding: 1em 1.5em;

	#trx-addons-ai-helper-image-generator-header-title {
		h2 {
			margin: 0.5em 0 1em 0;
		}
	}

	#trx-addons-ai-helper-image-generator-body {
		@include flex;
		@include flex-direction(row);
		@include flex-justify-content(space-between);
		@include flex-align-items(flex-start);
	}

	// Settings area
	#trx-addons-ai-helper-image-generator-settings-busy {
		@include abs-cover;
		display: none;

		&.is-busy {
			display: block;
		}
	}
	#trx-addons-ai-helper-image-generator-settings {
		@include flex;
		@include flex-direction(column);
		width: 30%;
		position: relative;

		@media screen and (max-width: 1679px) {
			label, select, input, textarea, button {
				font-size: 12px;
			}
		}
		@media screen and (max-width: 1279px) {
			label, select, input, textarea, button {
				font-size: 11px;
			}
		}
	}
	#trx-addons-ai-helper-image-generator-settings-new,
	#trx-addons-ai-helper-image-generator-settings-selected {
		@include border-box;
		@include border-radius(0.5em);
		padding: 1.6em;
		background-color: $background_light;
	}
	.trx-addons-ai-helper-image-generator-settings-subtitle {
		margin: 1em 0;

		h2, h3 {
			margin: 0;
		}
	}
	.trx-addons-ai-helper-image-generator-settings-item {
		@include flex;
		@include flex-direction(row);
		@include flex-justify-content(space-between);
		@include flex-align-items(center);
		margin-bottom: 1em;

		&:last-child {
			margin-bottom: 0;
		}

		.trx-addons-ai-helper-image-generator-settings-item-title {
			@include flex-basis(30%);
		}
		.trx-addons-ai-helper-image-generator-settings-item-field {
			@include flex-basis(68%);
			@include flex;
			@include flex-direction(row);
			@include flex-justify-content(flex-start);
			@include flex-align-items(center);
	
			input[type="text"], textarea {
				width: 100%;
			}
		}
	}

	hr {
		margin: 1em 0;
	}

	.trx-addons-ai-helper-image-generator-append {
		margin-left: 1em;
	}

	.trx-addons-ai-helper-image-generator-button {
		width: 100%;
		height: 3em;
		@include flex;
		@include flex-direction(row);
		@include flex-justify-content(center);
		@include flex-align-items(center);

		&.is-secondary {
			width: auto;
			height: 2.3em;
			margin-top: 0;
			margin-left: 1em;
			padding: 0 0.5em;
		}
	}
	.trx-addons-ai-helper-image-generator-button-icon {
		font-size: 15px;
		line-height: 20px;

		&:before {
			margin-right: 6px;
			font-size: 15px;
		}
	}
	.trx-addons-ai-helper-image-generator-button.is-busy {
		.trx-addons-ai-helper-image-generator-button-icon:before {
			content: '\f463';
			display: inline-block;
			-webkit-animation: trx-addons-animation-spin 2s infinite linear;
			animation: trx-addons-animation-spin 2s infinite linear;
		}
	}

	@keyframes trx-addons-animation-spin {
		0% {
			transform: rotate( 0deg );
		}
		100% {
			transform: rotate( 360deg );
		}
	}

	// Preview area
	#trx-addons-ai-helper-image-generator-preview {
		@include flex;
		@include flex-direction(row);
		@include flex-wrap(wrap);
		@include border-box;
		@include border-radius(0.5em);
		width: 68%;
		padding: 2em;
		background-color: $background_light;
		max-height: 71vh;
		overflow-y: auto;
		overflow-x: hidden;

		.trx-addons-ai-helper-image-generator-preview-image {
			width: 33.3333%;
			padding: 10px;
			@include border-box;
			position: relative;

			&:focus,
			&:active,
			&.trx-addons-ai-helper-image-generator-preview-image-selected {
				&:before {
					content: '';
					display: block;
					@include abs-cover;
					border: 1px solid $accent_color;
					pointer-events: none;
				}
			}
			&:focus,
			&:active {
				outline: 0;

				&:not(.trx-addons-ai-helper-image-generator-preview-image-selected):before {
					border-color: $border_outline;
				}
			}
			&.trx-addons-ai-helper-image-generator-preview-image-selected {
				&:after {
					content: '\e900';
					font-family: $trx_addons_icons;
					font-size: 10px;
					@include abs-rt(0, 0);
					@include square(20px);
					color: #fff;
					background-color: $accent_color;
				}
			}

			img {
				width: 100%;
				height: auto;
				vertical-align: top;
			}
		}

		.trx-addons-ai-helper-image-generator-preview-image-fetch-info {
			@include abs-pos(auto, 10px, 10px, 10px);
			@include border-box;
			padding: 0 1em 1em;
			@include flex;
			@include flex-direction(column);
			@include flex-justify-content(flex-start);
			@include flex-align-items(center);
		}
		.trx-addons-ai-helper-image-generator-preview-image-fetch-msg {
			display: block;
			text-decoration: none;
			font-size: 1.2em;
			line-height: 1.5em;
			font-weight: bold;
			color: $text_dark;
		}
		.trx-addons-ai-helper-image-generator-preview-image-fetch-progress {
			display: block;
			margin-top: 10px;
			@include box(50%, 3px);
			border: 1px solid $text_light;
			background-color: $text_light;
			overflow: hidden;
		}
		.trx-addons-ai-helper-image-generator-preview-image-fetch-progressbar {
			display: block;
			@include box(50%, 3px);
			background-color: $warning_color;
			@include animation(trx-animation-loading-bar 1.5s linear infinite);
			will-change: transform;
		}
	}
}

@-webkit-keyframes trx-animation-loading-bar { 
	0% {
		@include translateX(-110%);
	}
	100% {
		@include translateX(210%);
	}
}

@keyframes trx-animation-loading-bar { 
	0% {
		@include translateX(-110%);
	}
	100% {
		@include translateX(210%);
	}
}