@import "../../../assets/styles/scss/utilities/functions";
@import "../../../assets/styles/scss/utilities/variables";
@import "../../../assets/styles/scss/utilities/mixins";
@import "../../../assets/styles/scss/utilities/default-variables"; // check

$section: ".text-block-default-image";
#{ $section } {
	opacity: 1;
	position: relative;

	&__container {
		& > .block-editor-inner-blocks > .block-editor-block-list__layout {
			gap: 32px;
			display: flex;
			flex-direction: column;

			@include media-breakpoint-up(lg) {
				flex-direction: row;
			}
		}
	}
	&.with-border {
		#{ $section }__container {
			& > .block-editor-inner-blocks > .block-editor-block-list__layout {
				gap: 64px;
			}
		}
	}

	&.columns {
		&-inverse {
			#{ $section }__container {
				&
					> .block-editor-inner-blocks
					> .block-editor-block-list__layout {
					@include media-breakpoint-up(lg) {
						flex-direction: row-reverse;
					}
				}
			}
		}
	}

	&.align {
		&-flex-start {
			#{ $section }__container {
				&
					> .block-editor-inner-blocks
					> .block-editor-block-list__layout {
					align-items: flex-start;
				}
			}
		}
		&-center {
			#{ $section }__container {
				&
					> .block-editor-inner-blocks
					> .block-editor-block-list__layout {
					align-items: center;
				}
			}
		}
		&-flex-end {
			#{ $section }__container {
				&
					> .block-editor-inner-blocks
					> .block-editor-block-list__layout {
					align-items: flex-end;
				}
			}
		}
	}

	&__image {
		margin: 0 auto;
		width: 100%;

		img {
			width: 100%;
			height: auto;
		}
	}

	&.crop-image {
		#{ $section }__container {
			& > .block-editor-inner-blocks > .block-editor-block-list__layout {
				align-items: stretch !important;
			}
		}
		#{ $section }__image {
			position: relative;
			& > .block-editor-inner-blocks > .block-editor-block-list__layout {
				@include media-breakpoint-up(lg) {
					object-fit: cover;
					object-position: center;
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
				}
			}

			.image-with-srcset,
			img {
				@include media-breakpoint-up(lg) {
					object-fit: cover;
					object-position: center;
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	&.image {
		&-small {
			#{ $section }__image {
				@include media-breakpoint-up(sm) {
					width: 193px;
				}
			}
		}
		&-medium {
			#{ $section }__image {
				@include media-breakpoint-up(sm) {
					width: 418px;
				}
			}
		}
		&-large {
			#{ $section }__image {
				@include media-breakpoint-up(sm) {
					width: 50%;
				}
			}
		}
	}

	&__info {
		flex: 1;
	}
}