//
// Mixins
// --------------------------------------------------

// Stylus Extras
// --------------------------------------------------

// Non supported LESS functions
percentage(n1, n2)
	if (n1 == 0)
		0
	else
		unit((n1 / n2) * 100, '%')

// Utilities
// -------------------------

// Clearfix
// Source: 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.
clearfix()
	&:before, &:after
		content: ' ' // 1
		display: table // 2

	&:after
		clear: both

.clearfix
	clearfix()

// Webkit-style focus
tab-focus()
	// Default
	outline: thin dotted
	// Webkit
	outline: 5px auto -webkit-focus-ring-color
	outline-offset: -2px

// Center-align a block level element
center-block()
	display: block
	margin-left: auto
	margin-right: auto

// Sizing shortcutss
size(w, h)
	width: w
	height: h

square(l)
	size(l, l)

// Text overflow
// Requires inline-block or block for proper styling
text-overflow()
	if (arguments)
		text-overflow: arguments
	else
		overflow: hidden
		white-space: nowrap
		text-overflow: ellipsis

// CSS image replacement
//
// Heads up! v3 launched with with only `.hide-text()`, but per our pattern for
// mixins being reused as classes with the same name, this doesn't hold up. As
// of v3.0.1 we have added `.text-hide()` and deprecated `.hide-text()`. Note
// that we cannot chain the mixins together in Less, so they are repeated.
//
// Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757

// Deprecated as of v3.0.1 (will be removed in v4)
hide-text()
	font: unquote('0/0') a
	color: transparent
	text-shadow: none
	background-color: transparent
	border: 0

// New mixin to use as of v3.0.1
text-hide()
	hide-text()

.text-hide
	text-hide()

// CSS3 PROPERTIES
// --------------------------------------------------

// Single side border-radius
border-top-radius(radius)
	border-top-right-radius: radius
	border-top-left-radius: radius

border-right-radius(radius)
	border-bottom-right-radius: radius
	border-top-right-radius: radius

border-bottom-radius(radius)
	border-bottom-right-radius: radius
	border-bottom-left-radius: radius

border-left-radius(radius)
	border-bottom-left-radius: radius
	border-top-left-radius: radius

// // Drop shadows
// box-shadow(shadow...) {
// -webkit-box-shadow: shadow; // iOS <4.3 & Android <4.1
// box-shadow: shadow;
// }

// Transitions
// transition(trans...) {
// -webkit-transition: trans;
// transition: trans;
// }
// transition-property(trans-prop) {
// -webkit-transition-property: trans-prop;
// transition-property: trans-prop;
// }
// transition-delay(trans-delay) {
// -webkit-transition-delay: trans-delay;
// transition-delay: trans-delay;
// }
// transition-duration(trans-dur) {
// -webkit-transition-duration: trans-dur;
// transition-duration: trans-dur;
// }
// transition-transform(trans...) {
// -webkit-transition: -webkit-transform trans;
// -moz-transition: -moz-transform trans;
// -o-transition: -o-transform trans;
// transition: transform trans;
// }

// Transformations
// rotate(degrees) {
// -webkit-transform: s("rotate(%s)", degrees);
// -ms-transform: s("rotate(%s)", degrees); // IE9+
// transform: s("rotate(%s)", degrees);
// }
// scale(ratio) {
// -webkit-transform: s("scale(%s)", ratio);
// -ms-transform: s("scale(%s)", ratio); // IE9+
// transform: s("scale(%s)", ratio);
// }
// translate(x, y) {
// -webkit-transform: s("translate(%s, %s)", x, y);
// -ms-transform: s("translate(%s, %s)", x, y); // IE9+
// transform: s("translate(%s, %s)", x, y);
// }
// skew(x, y) {
// -webkit-transform: s("skew(%s, %s)", x, y);
// -ms-transform: s("skewX(%s) skewY(%s)", x, y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
// transform: s("skew(%s, %s)", x, y);
// }
// translate3d(x, y, z) {
// -webkit-transform: s("translate3d(%s, %s, %s)", x, y, z);
// transform: s("translate3d(%s, %s, %s)", x, y, z);
// }

// rotateX(deg) {
// -webkit-transform: s("rotateX(%s)", deg);
// -ms-transform: s("rotateX(%s)", deg); // IE9 only
// transform: s("rotateX(%s)", deg);
// }
// rotateY(deg) {
// -webkit-transform: s("rotateY(%s)", deg);
// -ms-transform: s("rotateY(%s)", deg); // IE9 only
// transform: s("rotateY(%s)", deg);
// }
// perspective(p) {
// -webkit-perspective: p;
// -moz-perspective: p;
// perspective: p;
// }
// perspective-origin(p) {
// -webkit-perspective-origin: p;
// -moz-perspective-origin: p;
// perspective-origin: p;
// }
// transform-origin(o) {
// -webkit-transform-origin: o;
// -moz-transform-origin: o;
// -ms-transform-origin: o; // IE9 only
// transform-origin: o;
// }

// Animations
// animation(anim) {
// -webkit-animation: anim;
// animation: anim;
// }
// animation-name(name) {
// -webkit-animation-name: name;
// animation-name: name;
// }
// animation-duration(duration) {
// -webkit-animation-duration: duration;
// animation-duration: duration;
// }
// animation-timing-function(timing-function) {
// -webkit-animation-timing-function: timing-function;
// animation-timing-function: timing-function;
// }
// animation-delay(delay) {
// -webkit-animation-delay: delay;
// animation-delay: delay;
// }
// animation-iteration-count(icount) {
// -webkit-animation-iteration-count: icount;
// animation-iteration-count: icount;
// }
// animation-direction(d) {
// -webkit-animation-direction: d;
// animation-direction: d;
// }

// Backface visibility
// Prevent browsers from flickering when using CSS 3D transforms.
// Default value is `visible`, but can be changed to `hidden`
// backface-visibility(visibility){
// -webkit-backface-visibility: visibility;
// -moz-backface-visibility: visibility;
// backface-visibility: visibility;
// }

// Box sizing
// box-sizing(boxmodel) {
// -webkit-box-sizing: boxmodel;
// -moz-box-sizing: boxmodel;
// box-sizing: boxmodel;
// }

// User select
// For selecting text on the page
// user-select(select) {
// -webkit-user-select: select;
// -moz-user-select: select;
// -ms-user-select: select; // IE10+
// -o-user-select: select;
// user-select: select;
// }

// Resize anything
resizable(direction)
	resize: direction // Options: horizontal, vertical, both
	overflow: auto // Safari fix

// CSS3 Content Columns
content-columns(column-count, column-gap = $grid-gutter-width)
	-webkit-column-count: column-count
	-moz-column-count: column-count
	column-count: column-count
	-webkit-column-gap: column-gap
	-moz-column-gap: column-gap
	column-gap: column-gap

// Optional hyphenation
// hyphens(mode = auto) {
// word-wrap: break-word;
// -webkit-hyphens: mode;
// -moz-hyphens: mode;
// -ms-hyphens: mode; // IE10+
// -o-hyphens: mode;
// hyphens: mode;
// }

// Opacity
// opacity(opacity) {
// opacity: opacity;
// // IE8 filter
// opacity-ie = (opacity * 100);
// filter: s("alpha(opacity=%s)", opacity-ie);
// }

// GRADIENTS
// --------------------------------------------------

// Horizontal gradient, from left to right
//
// Creates two color stops, start and end, by specifying a color and position for each color stop.
// Color stops are not available in IE9 and below.
gradient-horizontal(start-color = #555, end-color = #333, start-percent = 0, end-percent = 100%)
	background-image: -webkit-gradient(linear, start-percent top, end-percent top, from(start-color), to(end-color)) // Safari 4+, Chrome 2+
	background-image: -webkit-linear-gradient(left, color-stop(start-color start-percent), color-stop(end-color end-percent)) // Safari 5.1+, Chrome 10+
	background-image: -moz-linear-gradient(left, start-color start-percent, end-color end-percent) // FF 3.6+
	background-image: linear-gradient(to right, start-color start-percent, end-color end-percent) // Standard, IE10
	background-repeat: repeat-x
	filter: s("progid:DXImageTransform.Microsoft.gradient(startColorstr='%s', endColorstr='%s', GradientType=1)", start-color, end-color) // IE9 and down

// Vertical gradient, from top to bottom
//
// Creates two color stops, start and end, by specifying a color and position for each color stop.
// Color stops are not available in IE9 and below.
gradient-vertical(start-color = #555, end-color = #333, start-percent = 0, end-percent = 100%)
	background-image: -webkit-gradient(linear, left start-percent, left end-percent, from(start-color), to(end-color)) // Safari 4+, Chrome 2+
	background-image: -webkit-linear-gradient(top, start-color, start-percent, end-color, end-percent) // Safari 5.1+, Chrome 10+
	background-image: -moz-linear-gradient(top, start-color start-percent, end-color end-percent) // FF 3.6+
	background-image: linear-gradient(to bottom, start-color start-percent, end-color end-percent) // Standard, IE10
	background-repeat: repeat-x
	filter: s("progid:DXImageTransform.Microsoft.gradient(startColorstr='%s', endColorstr='%s', GradientType=0)", start-color, end-color) // IE9 and down

gradient-directional(start-color = #555, end-color = #333, deg = 45deg)
	background-repeat: repeat-x
	background-image: -webkit-linear-gradient(deg, start-color, end-color) // Safari 5.1+, Chrome 10+
	background-image: -moz-linear-gradient(deg, start-color, end-color) // FF 3.6+
	background-image: linear-gradient(deg, start-color, end-color) // Standard, IE10

gradient-horizontal-three-colors(start-color = #00b3ee, mid-color = #7a43b6, color-stop = 50%, end-color = #c3325f)
	background-image: -webkit-gradient(left, linear, 0 0, 0 100%, from(start-color), color-stop(color-stop, mid-color), to(end-color))
	background-image: -webkit-linear-gradient(left, start-color, mid-color color-stop, end-color)
	background-image: -moz-linear-gradient(left, start-color, mid-color color-stop, end-color)
	background-image: linear-gradient(to right, start-color, mid-color color-stop, end-color)
	background-repeat: no-repeat
	filter: s("progid:DXImageTransform.Microsoft.gradient(startColorstr='%s', endColorstr='%s', GradientType=1)", start-color, end-color) // IE9 and down, gets no color-stop at all for proper fallback

gradient-vertical-three-colors(start-color = #00b3ee, mid-color = #7a43b6, color-stop = 50%, end-color = #c3325f)
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(start-color), color-stop(color-stop, mid-color), to(end-color))
	background-image: -webkit-linear-gradient(start-color, mid-color color-stop, end-color)
	background-image: -moz-linear-gradient(top, start-color, mid-color color-stop, end-color)
	background-image: linear-gradient(start-color, mid-color color-stop, end-color)
	background-repeat: no-repeat
	filter: s("progid:DXImageTransform.Microsoft.gradient(startColorstr='%s', endColorstr='%s', GradientType=0)", start-color, end-color) // IE9 and down, gets no color-stop at all for proper fallback

gradient-radial(inner-color = #555, outer-color = #333)
	background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(inner-color), to(outer-color))
	background-image: -webkit-radial-gradient(circle, inner-color, outer-color)
	background-image: -moz-radial-gradient(circle, inner-color, outer-color)
	background-image: radial-gradient(circle, inner-color, outer-color)
	background-repeat: no-repeat

gradient-striped(color = #555, angle = 45deg)
	background-color: color
	background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent))
	background-image: -webkit-linear-gradient(angle, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent)
	background-image: -moz-linear-gradient(angle, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent)
	background-image: linear-gradient(angle, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent)

// Reset filters for IE
//
// When you need to remove a gradient background, do not forget to use this to reset
// the IE filter for IE9 and below.
reset-filter()
	filter: s('progid:DXImageTransform.Microsoft.gradient(enabled = false)')

// Retina images
//
// Short retina mixin for setting background-image and -size
img-retina(file-1x, file-2x, width-1x, height-1x)
	background-image: url(file-1x)

	@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx)
		background-image: url(file-2x)
		background-size: width-1x height-1x

// Responsive image
//
// Keep images from scaling beyond the width of their parents.
img-responsive(display = block)
	display: display
	max-width: 100% // Part 1: Set a maximum relative to the parent
	height: auto // Part 2: Scale the height according to the width, otherwise you get stretching

// COMPONENT MIXINS
// --------------------------------------------------

// Horizontal dividers
// -------------------------
// Dividers (basically an hr) within dropdowns and nav lists
nav-divider(color = #e5e5e5)
	height: $border-width-small
	margin: ($line-height-computed / 2) - 1 0
	overflow: hidden
	background-color: color

// Panels
// -------------------------
panel-variant(border, heading-text-color, heading-bg-color, heading-border)
	border-color: border

	& > .panel-heading
		color: heading-text-color
		background-color: heading-bg-color
		border-color: heading-border

		+ .panel-collapse .panel-body
			border-top-color: border

	& > .panel-footer
		+ .panel-collapse .panel-body
			border-bottom-color: border

// Alerts
// -------------------------
alert-variant(background, border, text-color)
	background-color: background
	border-color: border
	color: text-color

	hr
		border-top-color: darken(border, 5%)

	.alert-link
		color: darken(text-color, 10%)

// List Groups
// -------------------------
list-group-item-variant($state, $background, $color)
	.list-group-item-{$state}
		color: $color
		background-color: $background

		a&
			color: $color

			.list-group-item-heading
				color: inherit

			&:hover, &:focus
				color: $color
				background-color: darken($background, 5%)

			&.active, &.active:hover, &.active:focus
				color: #fff
				background-color: $color
				border-color: $color

// Button variants
// -------------------------
// Easily pump out default styles, as well as :hover, :focus, :active,
// and disabled options for all buttons
button-variant(color, background, border)
	color: color
	background-color: background
	border-color: border

	&:hover, &:focus, &:active, &.active, .open .dropdown-toggle&
		color: color
		background-color: darken(background, 8%)
		border-color: darken(border, 12%)

	&:active, &.active, .open .dropdown-toggle&
		background-image: none

	&.disabled, &[disabled], fieldset[disabled] &
		&, &:hover, &:focus, &:active, &.active
			background-color: background
			border-color: border

	.badge
		color: background
		background-color: color

// Button sizes
// -------------------------
button-size(padding-vertical, padding-horizontal, font-size, line-height, border-radius)
	padding: padding-vertical padding-horizontal
	font-size: font-size
	line-height: line-height
	border-radius: border-radius

// Pagination
// -------------------------
pagination-size(padding-vertical, padding-horizontal, font-size, border-radius)
	> li
		> a, > span
			padding: padding-vertical padding-horizontal
			font-size: font-size

		&:first-child
			> a, > span
				border-left-radius(border-radius)

		&:last-child
			> a, > span
				border-right-radius(border-radius)

// Labels
// -------------------------
label-variant(color)
	background-color: color

	&[href]
		&:hover, &:focus
			background-color: darken(color, 10%)

// Contextual backgrounds
// -------------------------
bg-variant($color)
	background-color: $color

	a&:hover
		background-color: darken($color, 10%)

// Typography
// -------------------------
text-emphasis-variant($color)
	color: $color

	a&:hover
		color: darken($color, 10%)

// Navbar vertical align
// -------------------------
// Vertically center elements in the navbar.
// Example: an element has a height of 30px, so write out `.navbar-vertical-align(30px);` to calculate the appropriate top margin.
navbar-vertical-align(element-height)
	margin-top: (($navbar-height - element-height) / 2)
	margin-bottom: (($navbar-height - element-height) / 2)

// Progress bars
// -------------------------
progress-bar-variant(color)
	background-color: color

	.progress-striped &
		gradient-striped(color)

// Responsive utilities
// -------------------------
// More easily include all the states for responsive-utilities.less.
responsive-visibility()
	display: block !important

	table&
		display: table

	tr&
		display: table-row !important

	th&, td&
		display: table-cell !important

responsive-invisibility()
	display: none !important

// Grid System
// -----------

// Centered container element
container-fixed()
	margin-right: auto
	margin-left: auto
	padding-left: ($grid-gutter-width / 2)
	padding-right: ($grid-gutter-width / 2)
	@extend .clearfix

// Creates a wrapper for a series of columns
make-row(gutter = $grid-gutter-width)
	margin-left: (gutter / -2)
	margin-right: (gutter / -2)
	@extend .clearfix

// Generate the extra small columns
make-xs-column(columns, gutter = $grid-gutter-width)
	position: relative
	float: left
	width: percentage(columns, $grid-columns)
	// Prevent columns from collapsing when empty
	min-height: 1px
	// Inner gutter via padding
	padding-left: (gutter / 2)
	padding-right: (gutter / 2)

make-xs-column-offset(columns)
	@media $media-min-phone
		margin-left: percentage(columns, $grid-columns)

make-xs-column-push(columns)
	@media $media-min-phone
		left: percentage(columns, $grid-columns)

make-xs-column-pull(columns)
	@media $media-min-phone
		right: percentage(columns, $grid-columns)

// Generate the small columns
make-sm-column(columns, gutter = $grid-gutter-width)
	position: relative
	min-height: 1px
	padding-left: (gutter / 2)
	padding-right: (gutter / 2)

	@media $media-min-tablet
		float: left
		width: percentage(columns, $grid-columns)

make-sm-column-offset(columns)
	@media $media-min-tablet
		margin-left: percentage(columns, $grid-columns)

make-sm-column-push(columns)
	media $media-min-tablet
		left: percentage(columns, $grid-columns)

make-sm-column-pull(columns)
	media $media-min-tablet
		right: percentage(columns, $grid-columns)

// Generate the medium columns
make-md-column(columns, gutter = $grid-gutter-width)
	position: relative
	min-height: 1px
	padding-left: (gutter / 2)
	padding-right: (gutter / 2)

	@media $media-min-desktop
		float: left
		width: percentage(columns, $grid-columns)

make-md-column-offset(columns)
	@media $media-min-desktop
		margin-left: percentage(columns, $grid-columns)

make-md-column-push(columns)
	@media $media-min-desktop
		left: percentage(columns, $grid-columns)

make-md-column-pull(columns)
	@media $media-min-desktop
		right: percentage(columns, $grid-columns)

// Generate the large columns
make-lg-column(columns, gutter = $grid-gutter-width)
	position: relative
	min-height: 1px
	padding-left: (gutter / 2)
	padding-right: (gutter / 2)

	@media $media-min-lg-desktop
		float: left
		width: percentage(columns, $grid-columns)

make-lg-column-offset(columns)
	@media $media-min-lg-desktop
		margin-left: percentage(columns, $grid-columns)

make-lg-column-push(columns)
	@media $media-min-lg-desktop
		left: percentage(columns, $grid-columns)

make-lg-column-pull(columns)
	@media $media-min-lg-desktop
		right: percentage(columns, $grid-columns)

// Framework grid generation
//
// Used only by Bootstrap to generate the correct number of grid classes given
// any value of `@grid-columns`.
$column-properties
	position: relative
	min-height: 1px
	padding-left: ($grid-gutter-width / 2)
	padding-right: ($grid-gutter-width / 2)

make-grid-columns()
	for i in 1 .. $grid-columns
		.col-xs-{i}, .col-sm-{i}, .col-md-{i}, .col-lg-{i}
			@extend $column-properties

make-grid-col-float(class)
	$column-floating-{class}
		float: left

	for i in 1 .. $grid-columns
		.col-{class}-{i}
			@extend $column-floating-{class}

calc-grid(index, class, type)
	if (index > 0)
		if (type == width)
			.col-{class}-{index}
				width: percentage(index, $grid-columns)

	if (type == push)
		.col-{class}-push-{index}
			left: percentage(index, $grid-columns)

	if (type == pull)
		.col-{class}-pull-{index}
			right: percentage(index, $grid-columns)

	if (type == offset)
		.col-{class}-offset-{index}
			margin-left: percentage(index, $grid-columns)

// Basic looping in Stylus (not sure if the ordering needs to be reversed, but I still did it this way)
make-grid(columns, class, type)
	for i in columns .. 0
		calc-grid(i, class, type)
