// ===================================
// ============= Mixins ==============
// ===================================

// Coloring support
// ===================================

@mixin lui_button_coloring($scheme) {

	// Style - regular
	// ====
	&:not(.inverted):not(.flat):not(.filling):not(.wired) {
		background: map-get($scheme, color);
		color: map-get($scheme, text);
		&:hover,
		&:focus { 
			background: lighten(map-get($scheme, color), 5);
		}
		&:active,
		&.active { 
			background: darken(map-get($scheme, color), 5); 
		}
	}

	// Style - inverted
	// ====
	&.inverted:not(.flat) {
		background: transparent;
		&:hover, 
		&:focus {
			background: transparent;
			box-shadow: 0 0 0 luiTheme(element, button, wired, borderWidth) map-get($scheme, color) inset;
			color: map-gets($scheme, color);
		}
		&.filling{
			&:hover,
			&:focus{
				color: map-gets($scheme, text);
			}
		}

		&[class*="with addon"] > .addon {
			border-color: map-get($scheme, color);
		}
	}

	// Style - filling
	// ====
	&.filling {

		&:not(.inverted){
			color: luiPalette(grey, color);
		}

		&:hover, &:focus, &:active, &.active {
			background: map-gets($scheme, color);
			color: map-gets($scheme, text);
		}
	}

	// Style - Wired
	&.wired {
		background: transparent;

		&:not(.inverted){
			color: luiPalette(grey, color);

			&:hover,
			&:focus,
			&:active,
			&.active{
				box-shadow: 0 0 0 luiTheme(element, button, wired, borderWidth) map-get($scheme, color) inset;
				color: map-get($scheme, color);

				&[class*="with addon"] > .addon {
					border-color: map-get($scheme, color);
				}
			}
		}
	}

	// Status icon
	// ====
	&.status.ok,
	&.status.failure {
		&:after, > .addon:after {
			color: map-get($scheme, text) !important;
		}
	}
	@if luiIsLod($scheme) {
		&.status.loading:not([class*="with addon"]),
		&.status.loading[class*="with addon"] > .addon {
			&:before { border-color: rgba(255, 255, 255, 0.25); }
			&:after { border-color: rgba(255, 255, 255, 0.75) transparent transparent transparent; }
		}
	}
};


// ===================================
// ============= Element =============
// ===================================

@if luiTheme(element, button, enabled) {
	@at-root #{$namespace} {
		$vars: luiTheme(element, button);

		// Normalize-css override
		[type=submit], [type=reset], button, [type=button] {
			-webkit-appearance: none;
		}

		%lui_button_sizing {
			line-height: 1;

			display: inline-block;
			vertical-align: middle;
			box-sizing: border-box;

			min-height: map-gets($vars, minHeight);
			min-width: map-gets($vars, minWidth);
			padding: map-gets($vars, verticalPadding) map-gets($vars, horizontalPadding);
			margin: map-gets($vars, verticalMargin) map-gets($vars, horizontalMargin);

			white-space: nowrap;
		}

		%lui_basic_button {
			@extend button#{$prefix}.unstyled;

			@extend %lui_button_sizing;

			text-transform: map-gets($vars, textTransform);
			text-shadow: map-gets($vars, textShadow);
			text-align: center;

			box-shadow: 0 0 0 map-gets($vars, defaultBorderWidth) map-gets($vars, defaultBorderColor) inset;

			border-radius: map-gets($vars, borderRadius);

			@include lui_transition_properties(background, box-shadow, color);
		}

		#{$prefix}.button {
			@extend %lui_basic_button;
		}
		a#{$prefix}.button {
			&:hover, &:focus, &:active, &:visited {
				color: map-gets($vars, defaultColoring, text);
				text-decoration: none;
			}
		}


		// Disabled
		// ===================================

		#{$prefix}.button.disabled, #{$prefix}.button[disabled] {
			opacity: map-gets($vars, disabledOpacity);

			-webkit-filter: grayscale(map-gets($vars, disabledGrayscale));
			filter: grayscale(map-gets($vars, disabledGrayscale));

			cursor: normal;
			pointer-events: none;
		}


		// Button styles
		// ===================================

		#{$prefix}.button:not(.wired) {
			&:hover, &:focus { box-shadow: 0 0 0 map-gets($vars, defaultBorderWidth) map-gets($vars, defaultBorderColor) inset, unquote(map-gets($vars, hoverShadow)); }
			&:active, &.active { box-shadow: 0 0 0 map-gets($vars, defaultBorderWidth) map-gets($vars, defaultBorderColor) inset,; }
		}

		// Style - inverted
		#{$prefix}.button.inverted {
			background: transparent;
			box-shadow: 0 0 0 map-gets($vars, wired, borderWidth) map-gets($vars, inverted, color) inset;
			color: map-gets($vars, inverted, color);
		}

		// Style - wired
		#{$prefix}.button.wired {
			&[class*="with addon"] {
				> .addon {
					background-color: transparent;
				}
				&:hover, &:focus > .addon {
					border-width: map-gets($vars, wired, borderWidth);
				}
			}
		}

		// Style - fake
		#{$prefix}.button.fake {
			@extend %lui_button_sizing;
		}

		// Style - flat
		#{$prefix}.button.flat {
			background-color: map-gets($vars, flat, background);
			color: map-gets($vars, defaultColoring, text);
			text-decoration: map-gets($vars, flat, textDecoration);
			box-shadow: none;

			&:hover, &:focus, &:active, &.active {
				border: none;
				box-shadow: none;
				color: darken(map-gets($vars, defaultColoring, text), 40);
			}

			&:before, &:after { text-decoration: none; }

			&.icon { text-decoration: none; }

			&[class*="with addon"],
			&[class*="with addons"] {
				> .addon { border-right: none !important; background-color: transparent; }
			}

			&.inverted {
				color: map-gets($vars, inverted, color);
				&:hover, &:focus { background: map-gets($vars, flat, invertedHoverBackground); }

				&:active { background: map-gets($vars, flat, invertedActiveBackground); }
			}
		}


		// Coloring
		// ===================================

		#{$prefix}.button {
			// Default coloring scheme
			@include lui_button_coloring(map-gets($vars, defaultColoring));
			// Coloring support
			@each $name, $scheme in luiPalettes() {
				&.#{map-get($scheme, class)} {
					@include lui_button_coloring($scheme);
				}
			}
		}


		// Buttons: button group
		// ===================================

		#{$prefix}.buttons {
			display: inline-block;
			vertical-align: middle;
			margin: map-gets($vars, verticalMargin) 0;

			& + .buttons {
				margin-left: 1em;
			}

			> .button {
				float: left;
				margin: 0; margin-left: -1px;
				@include flex-align-self(stretch !important);

				&.wired{
					&:hover,
					&:focus{
						position: relative;
						z-index: 2;
					}
				}
				border-radius: 0;
				&:first-of-type {
					border-radius: (map-gets($vars, borderRadius)) 0 0 (map-gets($vars, borderRadius));
				}
				&:last-of-type {
					border-radius: 0 (map-gets($vars, borderRadius)) (map-gets($vars, borderRadius)) 0;
				}
			}

			// Buttons inception support
			> .buttons {
				margin: 0;
			}

			// Modern browsers: flex-box model
			@include display-flex(true);

			// Vertical buttons
			&.vertical {
				@include flex-direction(column);
				> .button {
					float: none;
					display: block;
					border-radius: 0;
					margin-top: -(map-get($vars, defaultBorderWidth));
					&:first-child {
						border-radius: (map-gets($vars, borderRadius)) (map-gets($vars, borderRadius)) 0 0;
					}
					&:last-child {
						border-radius: 0 0 (map-gets($vars, borderRadius)) (map-gets($vars, borderRadius));
					}
				}
			}
		}

		// Squared button
		// ===================================

		#{$prefix}.button.squared,
		#{$prefix}.buttons.squared > .button {
			border-radius: 0;
		}


		// Justified buttons
		// ===================================

		#{$prefix}.buttons.justified {
			width: 100%;

			> .button {
				float: none;
				@include flex(1);
			}
		}


		// Icon support
		// ===================================

		#{$prefix}.button.icon:before {
			@extend %luccaIcons_icon_base;
			display: inline-block;
		 }
		#{$prefix}.button #{$prefix}.icon {
			margin-right: 0.5em;
			&[class*="right icon"] {
				margin-left: 0.5em; margin-right: 0;
			}
		}


		// Icon addon
		// ===================================

		#{$prefix}.button[class*="with addon"] {
			position: relative;
			> .addon {
				position: absolute;
				z-index: 1;
				top: 0; bottom: 0;
				width: map-gets($vars, addon, width);
				height: 100%;
				margin: 0;

				background: map-gets($vars, addon, background);

				&.icon:before {
					position: absolute;
					top: 50%; left: 50%;
					-ms-transform: translate(-50%, -50%);
					transform: translate(-50%, -50%);
				}
				@include lui_transition(border);
			}

			&:not(.right) {
				padding-left: map-gets($vars, addon, width) + 1em;
				> .addon {
					left: 0;
					border-right: map-gets($vars, defaultBorderWidth) solid map-gets($vars, defaultBorderColor);
				}
			}

			&.right {
				padding-right: map-gets($vars, addon, width) + 1em;
				> .addon {
					right: 0;
					border-left: map-gets($vars, defaultBorderWidth) map-gets($vars, defaultBorderColor);
				}
			}
		}


		// Status button
		// ====
		#{$prefix}.button.status {
			position: relative;
		}
		#{$prefix}.button.status:not([class*="with addon"]),
		#{$prefix}.button.status[class*="with addon"] > .addon:before {
			color: transparent !important;
		}

		#{$prefix}.button.status[class*="with addon"].loading > .addon,
		#{$prefix}.button.status:not([class*="with addon"]).loading {
			@include lui_loader();
		}
		#{$prefix}.button.status[class*="with addon"].ok > .addon,
		#{$prefix}.button.status:not([class*="with addon"]).ok {
			@include lui_make_icon(check, right);
		}
		#{$prefix}.button.status[class*="with addon"].failure > .addon,
		#{$prefix}.button.status:not([class*="with addon"]).failure {
			@include lui_make_icon(forbidden, right);
		}
		#{$prefix}.button.status[class*="with addon"] > .addon {
			position: absolute !important;
		}
		#{$prefix}.button.status.loading:not([class*="with addon"]):not(.icon):before,
		#{$prefix}.button.status.ok:not([class*="with addon"]):after,
		#{$prefix}.button.status.ok[class*="with addon"]> .addon:after,
		#{$prefix}.button.status.failure:not([class*="with addon"]):after,
		#{$prefix}.button.status.failure[class*="with addon"]> .addon:after {
			position: absolute;
			margin: 0 !important;
			left: 50%; top: 50%;
			-ms-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%);
		}


		// #{$prefix}.button.status:not([class*="with addon"]) {
		// 	&.loading > .addon:before, & .addon:after {
		// 		position: absolute;
		// 		top: 50%; left: 50%;
		// 		-ms-transform: translate(-50%, -150%);
		// 		transform: translate(-50%, -150%);
		// 		width: 1.1em; height: 1.1em; // Chrome fix
		// 	}
		//
		// 	// Transition
		// 	&.loading:after, &.loading:not(.icon):before,
		// 	&.ok:after, &.failure:after {
		// 		-ms-transform: translate(-50%, -50%);
		// 		transform: translate(-50%, -50%);
		// 	}
		// 	// Status
		// 	&.status.loading, &.status.ok, &.status.failure {
		// 		color: transparent;
		// 	}
		// 	&.status.ok:after, &.status.failure:after {
		// 		margin: 0;
		// 	}
		// }


		// Sizing support
		// ===================================

		#{$prefix}.button,
		#{$prefix}.buttons {
			@include lui_supports_sizing();
		}


		// Button inside heading
		// ===================================

		h1 #{$prefix}.button,
		h2 #{$prefix}.button,
		h3 #{$prefix}.button,
		h4 #{$prefix}.button,
		h5 #{$prefix}.button,
		h6 #{$prefix}.button {
			vertical-align: middle;
			margin: 0 0.5em;
		}
	}
}