//
// Utilities
//
// - Animation
// - Clean (reset)
// - Clearfix
// - Colors
// - Overflow & Ellipsis
// - Positioning
// - Text styles
// - Vertical centering
// -------------------------------------------------------------
@import '../variables/colors.less';
@import '../variables/typography.less';

// Animation
// -------------------------------------------------------------
.u-no-animate {
	&.ng-hide-add {
		display: none !important; /* stylelint-disable-line declaration-no-important */
	}

	&.ng-hide-add-active {
		display: none !important; /* stylelint-disable-line declaration-no-important */
	}

	&.ng-hide-remove {
		display: inherit !important; /* stylelint-disable-line declaration-no-important */
	}

	&.ng-hide-remove-active {
		display: inherit !important; /* stylelint-disable-line declaration-no-important */
	}
}

// Clean (reset)
//
// 100% height/width for docs and videos will break in older browsers
// unless every single div up to the body is 100% height width.
// -------------------------------------------------------------
.u-clean {
	height: 100%;
	margin: 0;
	padding: 0;
	width: 100%;

	.iOS.mobile & {
		overflow-y: scroll;
	}
}

// Clearfix
// http://nicolasgallagher.com/micro-clearfix-hack/
// -------------------------------------------------------------
//
// For modern browsers
// 1. The space content is one way to avoid an Opera bug when the
//    contenteditable attribute is included anywhere else in the document.
//    Otherwise it causes space to appear at the top and bottom of elements
//    that are clearfixed.
// 2. The use of `table` rather than `block` is only necessary if using
//    `:before` to contain the top-margins of child elements.
.u-clear-parent {
	&::before,
	&::after {
		content: ' '; // 1
		display: table; // 2
	}

	&::after {
		clear: both;
	}
}

// Colors
//
// Use these utilities to get a UI color or background color
// without having to use an object or set up a rule.
// -------------------------------------------------------------
.u-color-success { color: @color-success; }
.u-color-danger { color: @color-danger; }
.u-color-warning { color: @color-warning; }
.u-color-warning-dark { color: @color-warning-dark; }
.u-color-info { color: @color-info; }

.u-color-gray-xxx-light { color: @color-gray-xxx-light; }
.u-color-gray-xx-light { color: @color-gray-xx-light; }
.u-color-gray-x-light { color: @color-gray-x-light; }
.u-color-gray-light { color: @color-gray-light; }
.u-color-gray-medium { color: @color-gray-medium; }
.u-color-gray-dark { color: @color-gray-dark; }
.u-color-gray-x-dark { color: @color-gray-x-dark; }

.u-bg-color-success { background-color: @color-success; }
.u-bg-color-danger { background-color: @color-danger; }
.u-bg-color-warning { background-color: @color-warning; }
.u-bg-color-info { background-color: @color-info; }

.u-bg-color-success-light { background-color: @color-success-light; }
.u-bg-color-danger-light { background-color: @color-danger-light; }
.u-bg-color-warning-light { background-color: @color-warning-light; }
.u-bg-color-warning-dark { background-color: @color-warning-dark; }
.u-bg-color-info-light { background-color: @color-info-light; }

.u-bg-color-gray-xxx-light { background-color: @color-gray-xxx-light; }
.u-bg-color-gray-xx-light { background-color: @color-gray-xx-light; }
.u-bg-color-gray-x-light { background-color: @color-gray-x-light; }
.u-bg-color-gray-light { background-color: @color-gray-light; }
.u-bg-color-gray-medium { background-color: @color-gray-medium; }
.u-bg-color-gray-dark { background-color: @color-gray-dark; }
.u-bg-color-gray-x-dark { background-color: @color-gray-x-dark; }

// Overflow and ellipsis
// -------------------------------------------------------------
.u-overflow-hidden { overflow: hidden; }
.u-overflow-x-hidden { overflow-x: hidden; }
.u-overflow-y-hidden { overflow-y: hidden; }

.u-overflow-ellipsis {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

// Positioning utilities
// -------------------------------------------------------------
.u-display-none { display: none; }
.u-display-block { display: block; }
.u-display-inline { display: inline; }
.u-display-inline-block { display: inline-block; }

.u-float-left { float: left; }
.u-float-right { float: right; }

// Text styles
// -------------------------------------------------------------
.u-text-bold { font-weight: @font-weight-bold; }
.u-text-capitalize { text-transform: capitalize; }
.u-text-italic { font-style: italic; }
.u-text-underline { text-decoration: underline; }

.u-text-align-left { text-align: left; }
.u-text-align-center { text-align: center; }
.u-text-align-right { text-align: right; }

// Vertical centering
//
// Apply `.u-center-vertical` to the parent, then
// `u-center-vertical__target` to the thing you want to center.
//
// You can also optionally center children horizontally using
// the `.and-horizontal` class.
// -------------------------------------------------------------
.u-center-vertical {
	font-size: 0;

	&.and-horizontal {
		text-align: center;
	}
}

.u-center-vertical::before {
	content: '';
	display: inline-block;
	height: 100%;
	vertical-align: middle;
}

.u-center-vertical__target {
	display: inline-block;
	vertical-align: middle;
}