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


// Dialog in the plugin's options (Blog Generator)
.ai_helper_blog_generator_form_row {
	@include flex;
	@include flex-justify-content(flex-start);
	@include flex-align-items(flex-start);
	gap: 20px;

	&:nth-child(even):not(:last-child) {
		margin-bottom: 2em;
	}

	.ai_helper_blog_generator_form_label {
		@include flex-basis(100%);
		font-weight: bold;
		border-bottom: 1px solid #ccc;
		padding-bottom: 5px;
		margin-bottom: 10px;
	}
	.ai_helper_blog_generator_form_field {
		@include flex-shrink(0);

		&:first-child {
			@include flex-basis(45%);
		}
		// &:last-child {
		// 	@include flex-basis(52%);
		// }
	}
	&.ai_helper_blog_generator_form_row_media {
		margin-top: -1em;
	}
}
.ai_helper_blog_generator_form_field {
	@include flex;
	@include flex-justify-content(flex-start);
	@include flex-align-items(center);

	> label {
		min-width: 88px;
	}
	input[type="number"] {
		width: 60px;
	}

	&.ai_helper_blog_generator_form_field_media {
		@include flex-direction(column);
		@include flex-align-items(flex-start);
		position: relative;

		--trx-addons-media-selector-width: 100px;

		.trx_addons_media_selector_preview {
			display: block;
			margin-bottom: 0;
			max-width: none;
			width: var(--trx-addons-media-selector-width);
			height: var(--trx-addons-media-selector-width);

			.trx_addons_media_selector_preview_image {
				position: relative;
				z-index: 2;
				display: block;
				width: var(--trx-addons-media-selector-width);
				height: var(--trx-addons-media-selector-width);
				overflow: hidden;
				border-radius: 3px;
				border: 1px solid #ccc;
			}

			img {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}
		#ai_helper_blog_generator_content_image_button {
			@include abs-lt;
			display: block;
			width: var(--trx-addons-media-selector-width);
			height: var(--trx-addons-media-selector-width);
			background-image: url(../../../../../../css/images/no-image.jpg);
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;
			border: 1px solid #ccc;
			border-radius: 3px;
			padding: 0;
		}
	}
}