@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 {
		gap: 32px;
		display: flex;
		flex-direction: column;

		@include media-breakpoint-up(lg) {
			flex-direction: row;
		}
	}

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

	&.align {
		&-flex-start {
			#{ $section }__container {
				align-items: flex-start;
			}
		}
		&-center {
			#{ $section }__container {
				align-items: center;
			}
		}
		&-flex-end {
			#{ $section }__container {
				align-items: flex-end;
			}
		}
	}

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

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

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

	&.with-border {
		#{ $section }__container {
			gap: 64px;
		}
		#{ $section }__info {
			position: relative;

			&::before {
				content: "";
				position: absolute;
				top: -33px;
				left: 0;
				width: 100%;
				height: 2px;
				background-color: $ui-border-line-divider-on-light;

				@include media-breakpoint-up(lg) {
					top: 0;
					left: -33px;
					width: 2px;
					height: 100%;
				}
			}
		}

		&.columns {
			&-inverse {
				#{ $section }__info {
					&::before {
						@include media-breakpoint-up(lg) {
							left: auto;
							right: -31px;
						}
					}
				}
			}
		}
	}

	&.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;
	}
}