Some SCSS helpers

_images.scss

/// Rounded corners on images
/// @author Newton Koumantzelis
/// @since 1.0.0 - The Sith
/// @example html
/// <img src="" class="img-broken" alt="Generic image">
.img-broken {
	position: relative;
	min-height: 3rem;

	&::before,
	&::after {
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	&::before {
		border: map-deep-get($theme, border, width, md) dotted map-deep-get($theme, border, color, light);
		border-radius: map-deep-get($theme, border, radius, md);
		background-color: map-deep-get($theme, colors, gray, dark);
		content: " ";
	}

	&::after {
		color: map-deep-get($theme, general, colors, muted);
		font-style: normal;
		line-height: 3rem; // stylelint-disable-line sh-waqar/declaration-use-variable
		text-align: center;
		content: "Broken image of '" attr(alt) "'";
	}
}

/// Rounded corners on images
/// @author Newton Koumantzelis
/// @since 1.0.0 - The Sith
/// @example html
/// <img src="" class="img-placeholder" alt="Generic image">
.img-placeholder {
	/* stylelint-disable scss/at-function-named-arguments */
	$bg-image: str-replace("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{map-deep-get($theme, colors, gray, lighter)}' viewBox='0 0 20 20'%3E%3Cpath d='M18 3H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1zm-4.75 3.5a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5zM4 14l3.314-7.62 3.77 6.103 3.23-1.605L16 14H4z'/%3E%3C/svg%3E", "#", "%23");
	/* stylelint-enable */
	position: relative;
	min-height: 4rem;

	&::before {
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: map-deep-get($theme, general, bg, body);
		background-image: url($bg-image);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		content: " ";
	}
}

/// Image thumbnails
/// @author Mark Otto
/// @since 0.1.0 - The O.G.
/// @example html
/// <img src="https://unsplash.it/200/200?random" class="img-thumbnail" alt="Generic image">
.img-thumbnail {
	display: inline-block;
	max-width: 100%;
	height: auto;
	border: map-deep-get($theme, border, width, md) solid map-deep-get($theme, border, color, light);
	@include border-radius(map-deep-get($theme, border, radius, md));
	padding: map-deep-get($theme, spacers, qtr);
	background-color: transparent;
	line-height: map-deep-get($theme, typography, "line-height", md);
}

/// Rounded corners on images
/// @author Mark Otto
/// @since 0.1.0 - The O.G.
/// @example html
/// <img src="https://unsplash.it/150/150?random" class="img-rounded" alt="Generic image">
.img-rounded {
	@include border-radius(map-deep-get($theme, border, radius, lg), true);
}

/// Perfect circle on images
/// @author Newton Koumantzelis
/// @since 2.0.0 - The Jedi
/// @example html
/// <img src="https://unsplash.it/100/100?random" class="img-circle" alt="Generic image">
.img-circle {
	@include border-radius(50%, true);
}
	/// Image cover
	/// @since 0.1.0 - The O.G.
	/// @example scss - usage
	///   .img-cover {
	///     @include img-cover();
	///   }
	.img-cover {
		height: auto;

		@supports (object-fit: cover) {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}

	/// Image contain
	/// @since 0.1.0 - The O.G.
	/// @example scss - usage
	///   .img-contain {
	///     @include img-contain();
	///   }
	.img-contain {
		height: auto;

		@supports (object-fit: contain) {
			width: 100%;
			height: 100%;
			object-fit: contain;
		}
	}

/// Rules are directly applied to `<iframe>`, <`embed>`, `<video>`, and `<object>` elements; optionally use an explicit descendant class `.embed-responsive-item` when you want to match the styling for other attributes.
///
/// **Pro-Tip!** You don’t need to include `frameborder="0"` in your `<iframe>`s as we override that for you.
/// @link http://nicolasgallagher.com/ - Nicolas Gallagher
/// @link https://suitcss.github.io/ - SUIT CSS
/// @since 0.1.0 - The O.G.
/// @example html
/// <div class="embed-responsive embed-responsive-16by9">
///   <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
/// </div>
@mixin embed() {
	.embed-responsive {
		display: block;
		position: relative;
		height: 0;
		overflow: hidden;
		padding: 0;

		.embed-responsive-item,
		iframe,
		embed,
		object,
		video {
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 100%;
			border: 0;
		}
	}

	/// Aspect ratios can be customized with modifier classes.
	/// @name .embed-responsive-21by9, .embed-responsive-16by9, .embed-responsive-4by3, .embed-responsive-1by1
	/// @since 0.1.0 - The O.G.
	.embed-responsive-21by9 {
		padding-bottom: percentage(9 / 21) !important;
	}

	.embed-responsive-16by9 {
		padding-bottom: percentage(9 / 16) !important;
	}

	.embed-responsive-4by3 {
		padding-bottom: percentage(3 / 4) !important;
	}

	.embed-responsive-1by1 {
		padding-bottom: percentage(1 / 1) !important;
	}
}