@import "_mixins.css";

/*--------------------------------------------------------------
# img-container
--------------------------------------------------------------*/
.ui-img-container {
	overflow: hidden;
}

.ui-img-container {

	&.img-container-square {
		@mixin aspect-ratio-portrait 1, 1;

		&.img-landscape > .inner-content > img {
			max-width: none;
			width: auto;
			height: 100%;
		}

		&.img-portrait > .inner-content > img {
			max-width: initial;
			width: 100%;
        	height: auto;
		}
	}

	&.img-container-wide {
		@mixin aspect-ratio-landscape 4, 3;
	}

	&.img-container-softlandscape {
		@mixin aspect-ratio-landscape 16, 9;
	}

	&.img-container-landscape {
		@mixin aspect-ratio-landscape 16, 9;
	}

	&.img-container-portrait {
		@mixin aspect-ratio-portrait 3, 4;
	}
}

@each $size in sm, md, lg {
@media (--$(size)) {
	.ui-img-container {
		
		&.img-container-square-$(size) {
			@mixin aspect-ratio-portrait 1, 1;

			&.img-landscape > .inner-content > img {
				max-width: initial;
				width: auto;
				height: 100%;
			}

			&.img-portrait > .inner-content > img {
				max-width: initial;
				width: 100%;
				height: auto;
			}
		}

		&.img-container-wide-$(size)-$(size) {
			@mixin aspect-ratio-landscape 4, 3;
		}

		&.img-container-softlandscape-$(size) {
			@mixin aspect-ratio-landscape 16, 9;
		}

		&.img-container-landscape-$(size) {
			@mixin aspect-ratio-landscape 16, 9;
		}

		&.img-container-portrait-$(size) {
			@mixin aspect-ratio-portrait 3, 4;
		}
	}
}
}

.img-rounded {
	border-radius: var(--rounded-radius);
}

.img-circle {
	border-radius: var(--circle-radius);
}