@use "./variables";

.ehp-image {
	--ehp-image-height: 100%;
	--ehp-image-min-height: 0;
	--ehp-image-position: center;
	--ehp-image-width: 100%;
	--ehp-image-border-color: #{variables.$global-colors-secondary};
	--ehp-image-border-width: 0;
	--ehp-image-border-radius-block-end:  #{variables.$corners-shape-default};
	--ehp-image-border-radius-block-start:  #{variables.$corners-shape-default};
	--ehp-image-border-radius-inline-end:  #{variables.$corners-shape-default};
	--ehp-image-border-radius-inline-start:  #{variables.$corners-shape-default};

	align-items: center;
	display: flex;
	justify-content: center;
	z-index: variables.$second-layer;

	.elementor & img {
		height: var(--ehp-image-height);
		object-fit: cover;
		object-position: var(--ehp-image-position);
		min-height: var(--ehp-image-min-height);
		width: var(--ehp-image-width);

		&.has-shape-custom {
			--ehp-shapes-border-radius-block-end: var(--ehp-image-border-radius-block-end);
			--ehp-shapes-border-radius-block-start: var(--ehp-image-border-radius-block-start);
			--ehp-shapes-border-radius-inline-end: var(--ehp-image-border-radius-inline-end);
			--ehp-shapes-border-radius-inline-start: var(--ehp-image-border-radius-inline-start);
		}

		&.has-border {
			border-color: var(--ehp-image-border-color);
			border-style: solid;
			border-width: var(--ehp-image-border-width);
		}
	}
}