/* stylelint-disable declaration-no-important */
////
/// @author Mark Otto
////

/// Change the alignment of elements with the vertical-alignment utilities. Please note that vertical-align only affects inline, inline-block, inline-table, and table cell elements.
/// @since 2.0.0 - The Jedi
/// @name .valign-baseline, .valign-top, .valign-middle, .valign-bottom, .valign-text-bottom, .valign-text-top
/// @example html
/// <span class="valign-baseline">baseline</span>
/// <span class="valign-top">top</span>
/// <span class="valign-middle">middle</span>
/// <span class="valign-bottom">bottom</span>
/// <span class="valign-text-top">text-top</span>
/// <span class="valign-text-bottom">text-bottom</span>
@mixin valign() {
	.valign {
		@each $prop in (baseline, top, middle, bottom, text-top, text-bottom) {
			&-#{$prop} {
				vertical-align: #{$prop} !important;
			}
		}
	}
}

/// Adding an icon next to a piece of text? Nesting a button within a button?  Add the this helper class to the icon to ensure it lines up appropriately.
/// @example html
/// Sample text <svg class="icon icon-star align-middle"><use xlink:href="/svg/legion.svg#icon-star"></use></svg>
@mixin align-middle($top: 2px, $line-height: 1) {
	.align-middle {
		position: relative !important; // for use with the top property below
		top: ($top * -1) !important; // magic number to offset the badge not lining up in the middle with the text;
		line-height: $line-height !important; // badge would be a perfect round circle without this, forces it to look like a smaller badge, not a circle
		vertical-align: middle !important; // force alignment to be middle since most things will be inline-block
	}
}