$raised-button-color: $white !default;
$raised-button-hover-color: darken($raised-button-color, 10%) !default;
$raised-button-text-color: $body-text-color !default;
$raised-button-ripple-color: rgba(0,0,0,0.1) !default;
$raised-button-focus-ripple-color: rgba($raised-button-ripple-color, 0.7) !default;

$raised-button-primary-color: $accent-1-color !default;
$raised-button-primary-hover-color: darken($accent-1-color, 15%) !default;
$raised-button-primary-text-color: $white !default;
$raised-button-primary-ripple-color: rgba($white, 0.50) !default;
$raised-button-primary-focus-ripple-color: $raised-button-primary-ripple-color !default;

$raised-button-secondary-color: $primary-1-color !default;
$raised-button-secondary-hover-color: darken($primary-1-color, 4%) !default;
$raised-button-secondary-text-color: $white !default;
$raised-button-secondary-ripple-color: rgba($white, 0.50) !default;
$raised-button-secondary-focus-ripple-color: $raised-button-secondary-ripple-color !default;

$raised-button-success-color: $success !default;
$raised-button-success-hover-color: darken($success, 4%) !default;
$raised-button-success-text-color: $success-inverse !default;
$raised-button-success-ripple-color: rgba($success-inverse, 0.50) !default;
$raised-button-success-focus-ripple-color: $raised-button-secondary-ripple-color !default;

$raised-button-alert-color: $alert !default;
$raised-button-alert-hover-color: darken($alert, 4%) !default;
$raised-button-alert-text-color: $alert-inverse !default;
$raised-button-alert-ripple-color: rgba($alert-inverse, 0.50) !default;
$raised-button-alert-focus-ripple-color: $raised-button-secondary-ripple-color !default;

$raised-button-error-color: $error !default;
$raised-button-error-hover-color: darken($error, 4%) !default;
$raised-button-error-text-color: $error-inverse !default;
$raised-button-error-ripple-color: rgba($error-inverse, 0.50) !default;
$raised-button-error-focus-ripple-color: $raised-button-secondary-ripple-color !default;

$raised-button-disabled-color: $grey-200 !default;
$raised-button-disabled-text-color: $grey-400 !default;

.lui-raised-button {
	display: inline-block;
	min-width: $button-min-width;
	height: $button-height;
	@include ease-out();
	//&, * {  }

	.lui-raised-button-container {
		position: relative;
		width: 100%;
		height: 100%;
		padding: 0;
		overflow: hidden;
		border-radius: 2px;
		background-color: $raised-button-color;

		//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-is-keyboard-focused {
			background-color: $raised-button-hover-color;
		}

		&.lui-is-disabled {
			background-color: $raised-button-disabled-color !important;
			pointer-events: none;

			.lui-raised-button-label {
				color: $raised-button-disabled-text-color;
			}

			&:hover {
				background-color: $raised-button-disabled-color;
			}
		}
	}

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

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

	.lui-raised-button-label {
		position: relative;
		@extend %lui-font-style-button;
		margin: 0;
		padding: 0 $desktop-gutter-less;
		user-select: none;
		color: $raised-button-text-color;
	}

	&:hover {
		.lui-raised-button-container {
			background-color: $raised-button-hover-color;
		}
	}

	&.lui-is-primary {

		.lui-raised-button-container {
			background-color: $raised-button-primary-color;

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

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

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

		.lui-raised-button-label {
			color: $raised-button-primary-text-color;
		}

		&:hover {
			.lui-raised-button-container {
				background-color: $raised-button-primary-hover-color;
			}
		}
	}

	&.lui-is-secondary {

		.lui-raised-button-container {
			background-color: $raised-button-secondary-color;

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

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

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

		.lui-raised-button-label {
			color: $raised-button-secondary-text-color;
		}

		&:hover {
			.lui-raised-button-container {
				background-color: $raised-button-secondary-hover-color;
			}
		}
	}

	&.lui-is-success {

		.lui-raised-button-container {
			background-color: $raised-button-success-color;

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

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

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

		.lui-raised-button-label {
			color: $raised-button-success-text-color;
		}

		&:hover {
			.lui-raised-button-container {
				background-color: $raised-button-success-hover-color;
			}
		}
	}

	&.lui-is-alert {

		.lui-raised-button-container {
			background-color: $raised-button-alert-color;

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

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

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

		.lui-raised-button-label {
			color: $raised-button-alert-text-color;
		}

		&:hover {
			.lui-raised-button-container {
				background-color: $raised-button-alert-hover-color;
			}
		}
	}

	&.lui-is-error {

		.lui-raised-button-container {
			background-color: $raised-button-error-color;

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

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

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

		.lui-raised-button-label {
			color: $raised-button-error-text-color;
		}

		&:hover {
			.lui-raised-button-container {
				background-color: $raised-button-error-hover-color;
			}
		}
	}

}