/// Icon Button
///
/// Outputs the CSS properties for an icon button for the given icon, theme and
/// size
///
/// @param {String} $icon-name, any icon name found in the fticons image set
/// http://registry.origami.ft.com/components/fticons
/// @param {String} $size, "big" or "default"
/// @param {String | Map} $theme, any theme name as defined in $o-buttons-themes
/// (primary, secondary, etc) or a Map defining a custom theme.
/// @param {Boolean} $is-icon-only, if this icon has text accompaniment or is an
/// icon only.
///
@mixin oButtonsIconButton($icon-name, $size: "default", $theme: "secondary", $is-icon-only: false) {
	@include oButtonsIconBaseStyles;
	@include _oButtonsIconSize($size);

	@if $is-icon-only {
		@include _oButtonsIconIconOnly;
	}

	@include _oButtonsIconBackgroundImage($icon-name, $theme);
}

/// Generate concrete classes icon buttons
///
/// Outputs background-image property for all icons in all themes except custom
/// themes.
/// This mixin will iterate through every theme in $o-buttons-themes and every
/// icon in $o-buttons-icons and create background images for each with the
/// following class structure:
/// ```
/// .o-buttons-icon.o-buttons--primary.o-buttons-icon--warning {...}
/// .o-buttons-icon.o-buttons--secondary.o-buttons-icon--warning {...}
/// .o-buttons-icon.o-buttons--inverse.o-buttons-icon--warning {...}
/// ... and so on...
/// ```
/// This mixin also styles for icon buttons where the .o-buttons--big class is present:
/// ```
/// .o-buttons-icon.o-buttons-big {...}
/// ```
@mixin _oButtonsGenerateIconButtons($o-buttons-class: $o-buttons-class) {

	// Browserhack to only apply these styles for IE7 and up. IE6 will get the
	// text fallback. Hack documented here: http://browserhacks.com/#hack-da690292d4fddd94dc7bdd50e38b5713
	html > body .#{$o-buttons-class}-icon {
		@include oButtonsIconBaseStyles;
		@include _oButtonsIconSize('default');

		&.#{$o-buttons-class}--big {
			@include _oButtonsIconSize('big');
		}

		&.#{$o-buttons-class}-icon--icon-only {
			@include _oButtonsIconIconOnly;
		}

		@each $theme, $properties in $o-buttons-themes {

			$theme-selector: null;
			@if $theme == 'secondary' {
				$theme-selector: '&';
			} @else {
				$theme-selector: '&.#{$o-buttons-class}--#{$theme}';
			}

			#{$theme-selector} {

				@each $icon-name in $o-buttons-icons {
					&.#{$o-buttons-class}-icon--#{$icon-name} {
						@include _oButtonsIconBackgroundImage($icon-name, $theme);
					}
				}
			}
		}
	}
}

@mixin _oButtonsIconSize ($size) {
	@if $size == big {
		padding-left: 40px;
	} @else {
		padding-left: 22px;
	}
}

@mixin _oButtonsIconIconOnly {
	padding-left: 0;
	background-position: 50%;
	min-width: 40px;
}

/// oButtonsIconBackgroundImage
///
/// Outputs background image properties for icons in the different button states
/// for the set theme.
///
/// @param {String} $icon-name, any icon name found in o-ft-icons
/// @param {String} $theme, any theme name as defined in $o-buttons-themes (primary, secondary, etc). Custom themes not supported.
///
@mixin _oButtonsIconBackgroundImage($icon-name, $theme) {
	@include _oButtonsGetIconForThemeAndState($icon-name, $theme, normal);
	// http://www.w3.org/TR/wai-aria/states_and_properties#aria-selected
	// http://www.w3.org/TR/wai-aria/states_and_properties#aria-pressed
	&[aria-selected=true], // e.g. A selected tab or page number in pagination
	&[aria-pressed=true] { // e.g. A "follow" button that is pressed
		@include _oButtonsGetIconForThemeAndState($icon-name, $theme, pressedselected);

	}

	&[disabled] {
		@include _oButtonsGetIconForThemeAndState($icon-name, $theme, normal);
	}

	&:not([disabled]) {
		&:hover {
			@include _oButtonsGetIconForThemeAndState($icon-name, $theme, hover);
		}
		&:active {
			@include _oButtonsGetIconForThemeAndState($icon-name, $theme, active);
		}
	}

	// Hack to get the active state colour svg to download to prevent FOIC
	&:after {
		@include _oButtonsGetIconForThemeAndState($icon-name, $theme, active);
		content: '';
	}
}

/// Base styling for buttons
///
/// @param {String} $button-class, defaults to o-buttons ($o-buttons-class' default value)
@mixin oButtonsIconBaseStyles($buttonClass: $o-buttons-class) {
	display: inline-block;
	background-repeat: no-repeat;
	background-position: 3px;

	.#{$buttonClass}-icon__label {
		@include oButtonsIconButtonLabel;
	}
}

/// Request an icon from o-icons with color based on the o-buttons theme and state
///
/// @param {String} $icon-name, icon to request
/// @param {String} $theme, one of $o-colors-theme
/// @param {String} $state - One of normal, hover, focus, selected, disabled, pressed
@mixin _oButtonsGetIconForThemeAndState($icon-name, $theme, $state) {
	$icon-color: 'paper';
	@if type-of($theme) == 'map' {
		@if map-get($theme, colorizer) == 'secondary' {
			$icon-color: oColorsGetPaletteColor(map-get($theme, 'accent'));
		} @else {
			@if ($state == 'hover') {
				$icon-color: oColorsGetPaletteColor(map-get($theme, 'accent'));
			} @else {
				$icon-color: oColorsGetPaletteColor(map-get($theme, 'background'));
			}
		}
	} @else {
		$state-color: 'o-buttons-#{$theme}-#{$state}';
		$icon-color: oColorsGetColorFor($state-color, text);
	}

	@if $icon-color != null {
		@include oIconsGetIcon($icon-name: $icon-name, $apply-base-styles: false, $apply-width-height: false, $color: $icon-color, $iconset-version: 1);
	}
}

/// Icon Button Label
///
/// Where an icon button is used, a span with an informative text label in should
/// be included so that if the styles don't load, the button will fallback to a text
/// label. This solution also works well for screen readers.
/// This mixin outputs the styles for visually hiding the label
///
@mixin oButtonsIconButtonLabel() {
	font-size: 0;
	height: 1px;
	overflow: hidden;
	display: block;
}