//------------------------------------------------------------------------------------------------
// MEDIA OBJECT
//------------------------------------------------------------------------------------------------

/*
Useful pattern when you need align an image alongside content.

http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/
*/


// BLOCK & ELEMENTS
//------------------------------------------------------------------------------------------------

/*
[1] If a flex-top utility is appled to the media object, push the image down a
notch relative to text size, so top of image and top of text align.
*/

.o-media {
	display: inline-flex;
	align-items: center;
}

.o-media__image {
	img,
	svg {
		display: block;
	}
}

.o-media.u-flex-top .o-media__image {
	margin-top: 0.4em; /* [1] */
}

// Retain inline flex property is flex alignment utilities are added
.o-media[class*='u-flex-'] {
	display: inline-flex !important;
}


// COLLAPSE MODIFIERS
//--------------------------------------------------------------------------------------------------------------------------------------

/*
Breaks the media object until a certan breakpoint so image and text stack vertically. Use when the media
object elements don't fit horizontally on smaller screens. When in collapsed state, any spacing modifers
are converted to vertical spacing between image and text.
*/


@each $bp-name, $bp-value in $mq-breakpoints {
	@include mq($until: #{$bp-name}) {
		.o-media--collapse\@max-#{$bp-name} {
			flex-direction: column;
			.o-media__image {
				margin-top: 0;

				img,
				svg {
					max-width: none;
				}
			}
		}
		.o-media--collapse\@max-#{$bp-name}[class*='o-media--spacing'] > *:first-child {
			padding-right: 0;
		}
	}
	@include mq(#{$bp-name}) {
		.o-media--collapse\@max-#{$bp-name}[class*='o-media--spacing'] > *:first-child {
			padding-bottom: 0;
		}
	}
}