@import 'vars_all.scss';
@import 'mixins_flex.scss';//flex layouts
@import 'mixins_respond.scss';//responsive design media queries

@mixin align($align: $preferred-alignment) {
	text-align: $align;
}

@mixin border($pos: all, $color: $wc-ui-color-border, $style: $border-style, $width: $border-width) {
	@if ($pos == all) {
		border: $width $style $color;
	}
	@else {
		border-#{$pos}: $width $style $color;
	}
}

@mixin border-box {
	// Require -moz-box-sizing for consistency
	// scss-lint:disable VendorPrefix
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

/// Create a button with a transparent background. Handy for holding iconography!
/// @param {color} $background [transparent] Set the button background. Set -1 to ignore this rule.
/// @param {boolean} $border [true] Set false to not include the standard border mixin. If you want a non-standard border set false and use the border mixin by itself.
/// @param {dimension} $height [$line-size] The height of the button. Set -1 to omit this rule.
/// @param {dimension} $padding [1em] The padding of the button. Set -1 to omit this rule.
/// @param {position} $text-align [center] The text align for your button. Set '' to omit this rule.
/// @param {dimension} $width [$line-size] The width of the button. Set -1 to omit this rule.
@mixin button ($background: transparent, $border: true, $height: $line-size, $padding: $hgap-small, $text-align: center, $width: $line-size, $reset-height: 1em, $reset-width: 1em) {
	@if ($border == true) {
		@include border;
	}
	@else if ($border == 0) {
		border: 0;
	}
	@if($background != -1) {
		background-color: $background;
	}
	// need this for Firefox
	// scss-lint:disable VendorPrefix
	-moz-box-sizing: content-box;
	// scss-lint:enable VendorPrefix
	box-sizing: content-box;
	font: inherit; // we really need this to make icon buttons behave
	@if ($height != -1) {
		height: $height;
	}
	@if ($padding != -1) {
		padding: $padding;
	}
	@if($text-align != '') {
		text-align: $text-align;
	}
	@if ($width != -1) {
		width: $width;
	}

	@if($reset-width != -1 or $reset-height != -1) {
		@include reset-large-screen {
			@if($reset-height != -1) {
				height: $reset-height;
			}
			@if($reset-width != -1) {
				width: $reset-width;
			}
		}
	}
	@content;
}

/// Add a background-image to almost anything.
/// @param {string} $url The URL of your image.
/// @param {dimension} $height [$line-size] The vertical aspect of background-size. Set -1 to omit the background-size rule.
/// @param {repetition} $repeat [no-repeat] The repeat rule for your image.
/// @param {dimension} $width [$line-size] The horizontal aspect of background-size. Set -1 to omit the background-size rule.
/// @param {position|dimension} $x [50%] The x-position aspect of background-position. The background-position rule is
/// omitted if both $x and $y are 0.
/// @param {position|dimension} $y [50%] The y-position aspect of background-position. The background-position rule is
/// omitted if both $x and $y are 0.
/// @param {boolean|position|dimension} $reset-size [-1]. Include a large screen media query to reset background size.
/// If true then reset to 1em x 1em as a shorthand for the default size. Omitted if this is -1 or if background-size is not set.
@mixin background-image ($url, $height: $line-size, $repeat: no-repeat, $width: $line-size, $x: 50%, $y: 50%, $reset-size: -1) {
	background-image: url($url);
	@if ($x != 0 or $y != 0) {
		background-position: $x $y;
	}
	@if($repeat != repeat) {
		background-repeat: $repeat;
	}
	@if($height == contain or $width == contain) {
		background-size: contain;
	}
	@else if($height == cover or $width == cover) {
		background-size: cover;
	}
	@else if($height != -1 and $width != -1) {
		background-size: $width $height;
		@if($reset-size == true) {
			@include reset-large-screen {
				background-size: 1em 1em;
			}
		}
		@else if($reset-size != -1) {
			@include reset-large-screen {
				background-size: $reset-size;
			}
		}
	}
	@content;
}


/// Add a scaled background-image (as an icon).
/// @param {string} $url The URL of your image.
/// @param {position|dimension} $x [50%] The x-position aspect of background-position. The background-position rule is
/// omitted if both $x and $y are 0.
/// @param {position|dimension} $y [50%] The y-position aspect of background-position. The background-position rule is
/// omitted if both $x and $y are 0.
@mixin background-image-icon ($url, $x: 50%, $y: 50%) {
	background-image: url($url);
	@if ($x != 0 or $y != 0) {
		background-position: $x $y;
	}
	background-repeat: no-repeat;
	background-size: $line-size;

	@include reset-large-screen {
		background-size: 1em;
	}
}

// This mixin makes a square box (for exampe to put a 100% scaled SVG in).
/// @param {display} $display [inline-block] How you want your box to display.
/// @param {dimension} $height [$line-size] The height of the box. Set auto to omit this rule.
/// @param {dimension} $width [$line-size] The width of the box. Set auto to omit this rule.
@mixin make-box($display: inline-block, $height: $line-size, $width: $line-size) {
	display: $display;
	@if ($height != auto) {
		height: $height;
	}
	@if ($width != auto) {
		width: $width;
	}
}

@mixin mandatory-indicator {
	color: $wc-ui-color-required-marker;
	content: '*';
}

@mixin offscreen {
	// Require important to ensure we are really off screen
	// scss-lint:disable ImportantRule
	left: -9999px !important;
	overflow: hidden !important;
	position: absolute !important;
}

@mixin outline($color: $wc-ui-color-border, $style: solid, $width: $border-width, $offset: 0) {
	outline: $width $style $color;
	@if ($offset != 0) {
		outline-offset: $offset;
	}
}

@mixin padded-box($pad: $hgap-normal, $border: $wc-ui-color-border) {
	@include border($color: $border);
	padding: $pad;
}

@mixin use-symbol-font {
	font-family: $symbol-font;
}
