$flat-button-color: transparent !default;
$flat-button-hover-background-color: darken($flat-button-color, 10%) !default;
$flat-button-text-color: $body-text-color !default;
$flat-button-ripple-color: rgba(0,0,0,0.1) !default;
$flat-button-focus-ripple-color: rgba($flat-button-ripple-color, 0.07) !default;

$flat-button-primary-hover-background-color: lighten($accent-1-color, 25%) !default;
$flat-button-primary-text-color: $accent-1-color !default;
$flat-button-primary-ripple-color: rgba($flat-button-primary-text-color, 0.2) !default;
$flat-button-primary-focus-ripple-color: rgba($flat-button-primary-ripple-color, 0.2) !default;

$flat-button-secondary-hover-background-color: lighten($primary-1-color, 42%) !default;
$flat-button-secondary-text-color: $primary-1-color !default;
$flat-button-secondary-ripple-color: rgba($flat-button-secondary-text-color, 0.2) !default;
$flat-button-secondary-focus-ripple-color: rgba($flat-button-secondary-ripple-color, 0.2) !default;

$flat-button-success-hover-background-color: rgba($success, 0.2) !default;
$flat-button-success-hover-text-color: $success !default;
$flat-button-success-text-color: $success !default;
$flat-button-success-ripple-color: rgba($flat-button-success-text-color, 0.2) !default;
$flat-button-success-focus-ripple-color: rgba($flat-button-success-ripple-color, 0.2) !default;

$flat-button-alert-hover-background-color: rgba($alert, 0.2);
$flat-button-alert-hover-text-color: $alert !default;
$flat-button-alert-text-color: $alert !default;
$flat-button-alert-ripple-color: rgba($flat-button-alert-text-color, 0.2) !default;
$flat-button-alert-focus-ripple-color: rgba($flat-button-alert-ripple-color, 0.2) !default;

$flat-button-error-hover-background-color: rgba($error, 0.2) !default !default;
$flat-button-error-hover-text-color: $error !default;
$flat-button-error-text-color: $error !default;
$flat-button-error-ripple-color: rgba($flat-button-error-text-color, 0.2) !default;
$flat-button-error-focus-ripple-color: rgba($flat-button-error-ripple-color, 0.2) !default;

$flat-button-disabled-text-color: rgba($flat-button-text-color, 0.3) !default;

.lui-flat-button {

	@include ease-out();
	@extend %lui-font-style-button;
	border-radius: 2px;
	user-select: none;

	position: relative;
	overflow: hidden;
	background-color: $flat-button-color;
	color: $flat-button-text-color;
	line-height: $button-height;
	min-width: $button-min-width;
	padding: 0;
	margin: 0;

	//This is need so that ripples do not bleed
	//past border radius.
	//See: http://stackoverflow.com/questions/17298739/css-overflow-hidden-not-working-in-chrome-when-parent-has-border-radius-and-chil
	@include transform (translate3d(0, 0, 0));


	.lui-touch-ripple {
		.lui-ripple-circle-inner {
			background-color: $flat-button-ripple-color;
		}
	}

	.lui-focus-ripple {
		.lui-focus-ripple-inner {
			background-color: $flat-button-focus-ripple-color;
		}
	}

	.lui-flat-button-label {
		position: relative;
		padding: 0 $desktop-gutter-less;
	}

	&:hover,
	&.lui-is-keyboard-focused {
		background-color: $flat-button-hover-background-color;
	}

	&.lui-is-disabled {
		color: $flat-button-disabled-text-color !important;

		&:hover {
			background-color: inherit !important;
		}
	}

	&.lui-is-primary {
		color: $flat-button-primary-text-color;

		&:hover,
		&.lui-is-keyboard-focused {
			background-color: $flat-button-primary-hover-background-color;
		}

		.lui-touch-ripple {
			.lui-ripple-circle-inner {
				background-color: $flat-button-primary-ripple-color;
			}
		}

		.lui-focus-ripple {
			.lui-focus-ripple-inner {
				background-color: $flat-button-primary-focus-ripple-color;
			}
		}
	}

	&.lui-is-secondary {
		color: $flat-button-secondary-text-color;

		&:hover,
		&.lui-is-keyboard-focused {
			background-color: $flat-button-secondary-hover-background-color;
		}

		.lui-touch-ripple {
			.lui-ripple-circle-inner {
				background-color: $flat-button-secondary-ripple-color;
			}
		}

		.lui-focus-ripple {
			.lui-focus-ripple-inner {
				background-color: $flat-button-secondary-focus-ripple-color;
			}
		}
	}

	&.lui-is-success {
		color: $flat-button-success-text-color;

		&:hover,
		&.lui-is-keyboard-focused {
			color: $flat-button-success-hover-text-color;
			background-color: $flat-button-success-hover-background-color;
		}

		.lui-touch-ripple {
			.lui-ripple-circle-inner {
				background-color: $flat-button-success-ripple-color;
			}
		}

		.lui-focus-ripple {
			.lui-focus-ripple-inner {
				background-color: $flat-button-success-focus-ripple-color;
			}
		}
	}	

	&.lui-is-alert {
		color: $flat-button-alert-text-color;

		&:hover,
		&.lui-is-keyboard-focused {
			color: $flat-button-alert-hover-text-color;
			background-color: $flat-button-alert-hover-background-color;
		}

		.lui-touch-ripple {
			.lui-ripple-circle-inner {
				background-color: $flat-button-alert-ripple-color;
			}
		}

		.lui-focus-ripple {
			.lui-focus-ripple-inner {
				background-color: $flat-button-alert-focus-ripple-color;
			}
		}
	}

	&.lui-is-error {
		color: $flat-button-error-text-color;

		&:hover,
		&.lui-is-keyboard-focused {
			color: $flat-button-error-hover-text-color;
			background-color: $flat-button-error-hover-background-color;
		}

		.lui-touch-ripple {
			.lui-ripple-circle-inner {
				background-color: $flat-button-error-ripple-color;
			}
		}

		.lui-focus-ripple {
			.lui-focus-ripple-inner {
				background-color: $flat-button-error-focus-ripple-color;
			}
		}
	}
}