/*
# Cool Primary */
.sft-mat-button--cool-primary {
	color: var(--sft-opaque-cool-primary-color-500);
}

.sft-mat-raised-button--cool-primary {
	background-color: var(--sft-opaque-cool-primary-color-500) !important;
	color: #ffffff !important;
}

.sft-mat-flat-button--cool-primary {
	background-color: var(--sft-opaque-cool-primary-color-500) !important;
	color: #ffffff !important;
	box-shadow: none !important;
}


.sft-mat-stroked-button--cool-primary {
	border-color: var(--sft-opaque-cool-primary-color-500) !important;
}

	.sft-mat-stroked-button--cool-primary .mat-button-wrapper {
		color: var(--sft-opaque-cool-primary-color-500);
	}



.sft-mat-icon-button--cool-primary {
	color: var(--sft-opaque-cool-primary-color-500);
}



/*
# Cool Secondary */
.sft-mat-button--cool-secondary {
	color: var(--sft-opaque-cool-secondary-color-500);
}

.sft-mat-raised-button--cool-secondary {
	background-color: var(--sft-opaque-cool-secondary-color-500) !important;
	color: #ffffff !important;
}

.sft-mat-flat-button--cool-secondary {
	background-color: var(--sft-opaque-cool-secondary-color-500) !important;
	color: #ffffff !important;
	box-shadow: none !important;
}


.sft-mat-stroked-button--cool-secondary {
	border-color: var(--sft-opaque-cool-secondary-color-500) !important;
}

	.sft-mat-stroked-button--cool-secondary .mat-button-wrapper {
		color: var(--sft-opaque-cool-secondary-color-500);
	}



.sft-mat-icon-button--cool-secondary {
	color: var(--sft-opaque-cool-secondary-color-500);
}



/*
# Light button */
.sft-mat-button--light {
	color: var(--sft-opaque-black-white-0100);
}

.sft-mat-raised-button--light {
	background-color: var(--sft-opaque-black-white-0100) !important;
}

.sft-mat-flat-button--light {
	background-color: var(--sft-opaque-black-white-0100) !important;
	box-shadow: none !important;
}


.sft-mat-stroked-button--light {
	border-color: var(--sft-opaque-black-white-0100) !important;

	border-color: rgba(255,255,255,.25) !important;
}

	.sft-mat-stroked-button--light .mat-button-wrapper {
		color: var(--sft-opaque-black-white-0100);
	}


/*
.sft-mat-icon-button--light {
	color: var(--sft-opaque-cool-secondary-color-500);
}
*/




/*
# Dark button */
.sft-mat-button--dark {
	color: var(--sft-transparent-black-0093);
}

.sft-mat-raised-button--dark {
	background-color: var(--sft-transparent-black-0093) !important;
	color: #ffffff !important;
}

.sft-mat-flat-button--dark {

	background-color: var(--sft-transparent-black-0093) !important;
	color: #ffffff !important;
	box-shadow: none !important;
}


.sft-mat-stroked-button--dark {
	border-color: var(--sft-transparent-black-0093) !important;

	border-color: rgba(0,0,0,.25) !important;
}

	.sft-mat-stroked-button--dark .mat-button-wrapper {
		color: var(--sft-transparent-black-0093);
	}



.sft-mat-icon-button--dark {
	color: var(--sft-opaque-cool-secondary-color-500);
}



/*
# Size modifiers */

	.sft-mat-button--small {
		padding: .04em;
		line-height: 2.1em;
		padding-right: .6em;
		padding-left: .6em;
	}

	.sft-flat-button--small {
		padding: .04em;
		line-height: 2.1em;
		padding-right: .6em;
		padding-left: .6em;
	}

	.sft-raised-button--small {
		padding: .04em;
		line-height: 2.1em;
		padding-right: .6em;
		padding-left: .6em;
	}

	.sft-stroked-button--small {
		padding: .04em;
		line-height: 2.1em;
		padding-right: .6em;
		padding-left: .6em;
	}


/*
.mat-fab.mat-primary,
.mat-flat-button.mat-primary,
.mat-mini-fab.mat-primary,
.mat-raised-button.mat-primary {
	background-color: var(--sft-opaque-cool-primary-color-600);
}

.mat-fab.mat-accent,
.mat-flat-button.mat-accent,
.mat-mini-fab.mat-accent,
.mat-raised-button.mat-accent {
	background-color: var(--sft-opaque-warm-primary-color-700);
	color:#ffffff;
}

.mat-button.mat-accent,
.mat-icon-button.mat-accent,
.mat-stroked-button.mat-accent {
	color: var(--sft-opaque-warm-primary-color-700);
}

.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(--sft-opaque-cool-primary-color-600) !important;
	color: rgba(255,255,255,1) !important;
}

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


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

	background-color: var(--sft-opaque-warm-secondary-color-600) !important;
	color: rgba(0,0,0,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;
}
*/

/* 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 {
	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(--sft-opaque-warm-primary-color-500);
	}
	.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(--sft-opaque-warm-primary-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(--sft-opaque-warm-primary-color-500) !important;
		opacity: .09 !important;
	}
	*/


/* Flat buttons ... let's work them out */
/*
.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(--sft-opaque-warm-primary-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(--sft-opaque-warm-primary-color-500) !important;
	opacity: .25 !important;
}
.mat-raised-button.mat-accent .mat-button-wrapper {
	z-index: 300;
	position: relative;
}


.mat-raised-button.mat-warn {
    background-color: var(--sft-opaque-warm-secondary-color-600) !important;
    color: rgba(0,0,0,1) !important;
}
*/


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