.mat-fab.mat-primary,
.mat-flat-button.mat-primary,
.mat-mini-fab.mat-primary,
.mat-raised-button.mat-primary {
	background-color: var(--crm-primary-color-500);
}

.mat-fab.mat-accent,
.mat-flat-button.mat-accent,
.mat-mini-fab.mat-accent,
.mat-raised-button.mat-accent {
	background-color: var(--crm-secondary-color-700);
	color:#ffffff;
}

.mat-button.mat-accent,
.mat-icon-button.mat-accent,
.mat-stroked-button.mat-accent {
	color: var(--crm-secondary-color-700);
}

/*
.crm-basic-stroked-button {
	border-color: rgba(0,0,0,.25) !important;
}

.crm-basic-flat-button {
	background-color: rgba(0,0,0,.05) !important;
}

*/

.mat-stroked-button {
	border-color: rgba(0,0,0,.25);
}

.mat-stroked-button.mat-primary,
.mat-stroked-button.mat-accent,
.mat-stroked-button.mat-warn,
.mat-stroked-button[disabled] {
	border-color: currentColor;
}


.mat-flat-button {
	background-color: rgba(0,0,0,.05) !important;
	color: rgba(0,0,0,.87) !important;
}

.mat-flat-button[color="primary"] {
	background-color: var(--crm-primary-color-500) !important;
	color: rgba(255,255,255,1) !important;
}

.mat-flat-button[color="accent"] {
	background-color: var(--crm-secondary-color-700) !important;
	color: rgba(255,255,255,1) !important;
}


.mat-flat-button[color="warn"] {

	background-color: #f44336 !important;
	color: rgba(255,255,255,1) !important;
}

.mat-flat-button[disabled],
.mat-raised-button[disabled] {
	background-color: rgba(0,0,0,.05) !important;
	color: rgba(0,0,0,.25) !important;
}


.mat-stroked-button[disabled] {
	color: rgba(0,0,0,.25) !important;
	border-color: rgba(0,0,0,.15) !important;
}



/*
.mat-flat-button.mat-primary,
.mat-flat-button.mat-accent,
.mat-flat-button.mat-warn,
.mat-flat-button[disabled] {
	border-color: currentColor;
}
*/

/*
*/

/*
# Adjustments on some states of the buttons
The following code allows us to use the referenced colors from the material color system.
And then apply opacity on the element that creates the over state.

This addresses various unappealing colors that the material system gave us. */


/* Getting a little fancy here. It's needed. */
/* Hover state */
[class="mat-button"]:hover .mat-button-focus-overlay,
[class="mat-stroked-button"]:hover .mat-button-focus-overlay {
	background-color: rgba(0,0,0,.04);
}

/* Targeting the ripple effect to the .mat-button that is not paired with .warn */
.mat-button:not(.mat-warn) .mat-ripple-element {
	/*opacity: .5 !important;*/
	background-color: rgba(0,0,0,.04) !important;
}

	/*
	# Accent */
	.mat-button.mat-accent .mat-button-focus-overlay,
	.mat-icon-button.mat-accent .mat-button-focus-overlay,
	.mat-stroked-button.mat-accent .mat-button-focus-overlay {

		background-color: var(--crm-secondary-color-500);
		/*
		opacity: .1 !important;
		*/
	}
	.mat-button.mat-accent:hover .mat-button-focus-overlay,
	.mat-stroked-button.mat-accent:hover .mat-button-focus-overlay {
		opacity: .09 !important;
	}

		.mat-button.mat-accent .mat-button-ripple.mat-ripple * {
			background-color: var(--crm-secondary-color-500) !important;
			opacity: .09 !important;
		}

	/*
	# Disabled */
	.mat-button[disabled] .mat-button-focus-overlay,
	.mat-icon-button[disabled] .mat-button-focus-overlay,
	.mat-stroked-button[disabled] .mat-button-focus-overlay {
		background-color: transparent;
	}



/* Hmm.... the order of this code is getting a little wonkey ... it's ok though */
/* If we needed to target the over state for the primary stroked button */

[class="mat-stroked-button mat-primary"]:hover .mat-button-focus-overlay {
	background-color: rgba(0,0,0,.04);
}


/*
# Accent for the stroked button */

	.mat-stroked-button.mat-accent .mat-button-ripple.mat-ripple * {
		background-color: var(--crm-secondary-color-500) !important;
		opacity: .09 !important;
	}


/* Flat buttons ... let's work them out */
.mat-flat-button:not(.mat-warn) .mat-ripple-element {
	/*opacity: .5 !important;*/
	/*background-color: rgba(0,0,0,1) !important;*/
}
.mat-flat-button:not(.mat-warn) .mat-ripple-element {
	background-color: rgba(0,0,0,.04) !important;
}

.mat-flat-button.mat-accent .mat-ripple-element {

	background-color: var(--crm-secondary-color-500) !important;
	opacity: .3 !important;

}

/* Jesus ... so wonkey. Keep our text white on press */
.mat-flat-button.mat-accent .mat-button-wrapper {
	z-index: 300;
	position: relative;
}


/* Angular Material ... you funny concoction */
.mat-flat-button.mat-primary[color="primary"] .mat-ripple-element {
	opacity: 1 !important;
	background-color: rgba(255,255,255,.1) !important;
}



/* Fix a couple raise buttons  */

.mat-raised-button.mat-accent .mat-ripple-element {
	background-color: var(--crm-secondary-color-500) !important;
	opacity: .25 !important;
}
.mat-raised-button.mat-accent .mat-button-wrapper {
	z-index: 300;
	position: relative;
}


/* Fix the accent icon press state */
.mat-icon-button.mat-accent .mat-ripple-element {
	background-color: var(--crm-secondary-color-500) !important;
	opacity: .25 !important;
}