// Allow Vendor Prefix in mixins.
//scss-lint:disable VendorPrefix

@import 'vars';
@import 'mixins-flex'; // flex layouts.
@import 'mixins-respond'; // responsive design media queries.
@import 'mixins-icon'; // in-built iconography.

/// Style disabled controls. This allows similar styling of elements which are able to be disabled using the disabled
/// attribute and those which require aria-disabled.
///
/// We do not set disabled background here. This is due to the overwheening complexities of overrides and the
/// unfortunate effect of setting background-color on elements which have appearance: button.
@mixin aria-disabled {
	// important to reset menu button etc rules which are VERY specific
	// scss-lint:disable ImportantRule
	color: $wc-ui-color-disabled-fg; // NOTE for your own sanity do not set background-color here!
	cursor: default !important;
	outline: none !important;
	text-decoration: none !important;
}

/// Set simple border styles. Using $width = 0 will unset a border.
/// @param {String} $pos [all] The border to set. one of 'all' or a border gragment 'top', 'right', 'bottom' or 'left'.
///   When set to 'all' a complete border is set, otherwise only the element edge specified by this param.
/// @param {color} $color [$wc-ui-color-border] The color of the border. Ignored if $width is 0. Set to -1 to not set.
/// @param {border-style} $style [$wc-border-style] The style of the border. Ignored if $width is 0.
/// @param {dimension} $width [$wc-border-width] The width of the border. If 0 then the border will be unset and its style set to none.
@mixin border($pos: all, $color: $wc-ui-color-border, $style: $wc-border-style, $width: $wc-border-width) {
	@if ($pos == all) {
		@if ($width == 0) {
			border: 0 none;
		}
		@else if ($color == -1) {
			border-style: $style;
			border-width: $width;
		}
		@else {
			border: $width $style $color;
		}
	}
	@else if ($width == 0) {
		border-#{$pos}: 0 none;
	}
	@else if ($color == -1) {
		border-#{$pos}-style: $style;
		border-#{$pos}-width: $width;
	}
	@else {
		border-#{$pos}: $width $style $color;
	}
}

/// Set an element's box-sizing to border-box.
@mixin border-box {
	// Require -moz-box-sizing for consistency
	// scss-lint:disable VendorPrefix
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

/// Set an element's box-sizing to content-box.
@mixin content-box {
	// Require -moz-box-sizing for consistency
	// scss-lint:disable VendorPrefix
	-moz-box-sizing: content-box;
	box-sizing: content-box;
}

/// Style a button with a (usually) transparent background. Handy for holding iconography!
///
/// @param {color} $background [transparent] Set the button background. Set -1 to ignore this rule.
/// @param {boolean|int} $border [true] If true then the border mixin is called with no params (get a default border).
///   Set false to not include the standard border mixin. Set to any non-negative integer to create a stabdard coloured
///   border of the required width. If you want a non-standard border set false and use the border mixin by itself.
/// @param {dimension} $height [-1] The height of the button. Set -1 to omit this rule.
/// @param {dimension} $padding [-1] 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 [-1] The width of the button. Set -1 to omit this rule.
@mixin button($background: transparent, $border: true, $height: -1, $padding: -1, $text-align: center, $width: -1) {
	@if ($border == true) {
		@include border;
	}
	@else if ($border != false) {
		@include border ($width: $border);
	}
	@if($background != -1) {
		background-color: $background;
	}
	@if ($height != -1) {
		height: $height;
	}
	@if ($padding != -1) {
		padding: $padding;
	}
	@if($text-align != '') {
		text-align: $text-align;
	}
	@if ($width != -1) {
		width: $width;
	}
	@content;
}

// Allow duplicate width declarations
// scss-lint:disable DuplicateProperty
/// Size a container to fit its content.
@mixin fit-content($what: width, $imp: 0, $fallback: auto) {
	@if ($imp == 0) {
		#{$what}: $fallback;
		#{$what}: -webkit-fit-content;
		#{$what}: -moz-fit-content;
		#{$what}: fit-content;
	}
	@else {
		// Important needed for some reason!
		// scss-lint:disable ImportantRule
		#{$what}: $fallback !important;
		#{$what}: -webkit-fit-content !important;
		#{$what}: -moz-fit-content !important;
		#{$what}: fit-content !important;
	}
}
// scss-lint:enable DuplicateProperty



/// Show the mandatory indicator
/// @todo: make the mandatory indicator string into a var.
@mixin mandatory-indicator {
	color: $wc-ui-color-required-marker;
	content: '*';
}

/// Apply a simple margin to an element.
/// @param {String} $pos [all] Where to apply the margin. If 'all' then the margin is placed around all sides of the
/// element; otherwise any one of top, right, bottom, left to set a margin only on that side of the element.
/// @param {dimension} $size [$wc-gap-small] The size of the margin to apply.
@mixin margin ($pos: all, $size: $wc-gap-small) {
	@if ($pos == all) {
		margin: $size;
	}
	@else {
		margin-#{$pos}: $size;
	}
}

// Allow duplicate width declarations
// scss-lint:disable DuplicateProperty
/// Size a container to fit its max-content.
@mixin max-content {
	width: auto;
	width: -webkit-max-content;
	width: -moz-max-content;
	width: max-content;
}

/// Size a container to fit its min-content.
@mixin min-content {
	width: auto;
	width: -webkit-min-content;
	width: -moz-min-content;
	width: min-content;
}
// scss-lint:enable DuplicateProperty

/// Move an element out of viewport.
@mixin offscreen {
	// Require important to ensure we are really off screen
	// scss-lint:disable ImportantRule
	left: -9999px !important;
	max-width: 10px !important; // not zero otherwise the item may appear 'hidden' to dom/shed
	overflow: hidden !important;
	position: absolute !important;
}

/// Set an outline on an element. Outlines may be better than borders for transient effects.
/// The default call will create an outline with the following propoerties:
/// * colour - default border colour;
/// * style - solid;
/// * width - default border width;
/// * offset - 0.
/// @param {color} $color [$wc-ui-color-border] The color of the outline.
/// @param {outline-style} $style [solid] The style of the outline.
/// @param {dimension} $width [$wc-border-width] the width of the outline.
/// @param {int} $offset [0] The outline offset (if any).
@mixin outline($color: $wc-ui-color-border, $style: solid, $width: $wc-border-width, $offset: 0) {
	outline: $width $style $color;
	@if ($offset != 0) {
		outline-offset: $offset;
	}
}

/// Make a container into a simple padded box with a standard border.
/// @param {dimaension} $pad [$wc-gap-normal] The amount of padding.
/// @param {color} $border [$wc-ui-color-border] The border color.
/// @param {color|-1} $color [-1] The foreground color. Set to -1 (default) to not set this rule.
/// @param {color|-1} $bg-color [-1] The background color. Set to -1 (default) to not set this rule.
@mixin padded-box($pad: $wc-gap-normal, $border: $wc-ui-color-border, $color: -1, $bg-color: -1) {
	@include border($color: $border);
	padding: $pad;
	@if ($bg-color != -1) {
		background-color: $bg-color;
	}
	@if ($color != -1) {
		color: $color;
	}
}

/// Set margin and padding to 0.
@mixin tight-box {
	margin: 0;
	padding: 0;
}

/// create a viewport media rule
@mixin viewport() {
	@-ms-viewport {
		@content
	}

	@viewport {
		@content
	}
}
