/***
 *	Button Module
 *
 *	2019-05-05
 */
.button { position: relative; display: inline-block; padding: 12px 20px; border-radius: 4px; text-transform: uppercase; letter-spacing: .05rem; transition: all .3s linear }
	a.button { text-decoration: none }
	
	.button-icon { display: inline-block; margin-right: 8px }
	
/* TYPES */
.button,
.button.m-default { color: #fff; background: #0095c6; border: 1px solid #0095c6; }
	.button:hover,
	.button.m-default:hover { color: #0095c6; background: #fff; }
	
.button.m-secondary { background: #eee; color: #666 }
	.button.m-secondary:hover { background: #666; color: #eee }

.button.m-info { color: #06c; background: #CCE0F5 }
	.button.m-info:hover { background: #06c; color: #fff }

.button.m-error { color: #d00; background: #F5CCCC }
	.button.m-error:hover { background: #d00; color: #fff }

.button.m-success { color: #008C00; background: #CCE8CC }
	.button.m-success:hover { background: #008C00; color: #fff }

.button.m-warning { color: #FFBF00; background: #FFF2CC }
	.button.m-warning:hover { background: #FFBF00; color: #fff }

.dark .button,
.button.m-inverse { color: #fff; background: #004F6B; border-color: #004F6B; }
	.dark .button:hover,
	.button.m-inverse:hover { color: #004F6B; background: #fff; }
	
	
/***
 *	caret
 */

.button.m-caret { position: relative; padding-right: 40px }
	.button.m-caret:after { content: ''; width: 0; height: 0; border-style: solid; border-width: 5px 5px 0 5px; border-color: #333 transparent transparent transparent; position: absolute; top: 18px; right: 20px }

	.button.m-caret:after,
	.button.m-default.m-caret:after { border-top-color: #333 }
		.button.m-caret:hover:after,
		.button.m-default.m-caret:hover:after { border-top-color: #ccc }
	
	.button.m-secondary.m-caret:after { border-top-color: #666 }
		.button.m-secondary.m-caret:hover:after { border-top-color: #eee }

	.button.m-info.m-caret:after { border-top-color: #06c }
		.button.m-info.m-caret:hover:after { border-top-color: #fff }

	.button.m-error.m-caret:after { border-top-color: #d00 }
		.button.m-error.m-caret:hover:after { border-top-color: #fff }

	.button.m-success.m-caret:after { border-top-color: #008C00 }
		.button.m-success.m-caret:hover:after { border-top-color: #fff }

	.button.m-warning.m-caret:after { border-top-color: #FFBF00 }
		.button.m-warning.m-caret:hover:after { border-top-color: #fff }

	.button.m-inverse.m-caret:after { border-top-color: #fff }
		.button.m-inverse.m-caret:hover:after { border-top-color: #333 }



	
.button.m-dropdown { position: relative; border-right: 50px solid rgba( 0,0,0,.5 ) }
	.button.m-dropdown:hover { border-right-color: rgba( 0,0,0,.5 ) }
	.button.m-dropdown:after { content: ''; width: 0; height: 0; border-style: solid; border-width: 5px 5px 0 5px; border-color: #333 transparent transparent transparent; position: absolute; top: 18px; right: -30px }
	.button.m-dropdown:hover:after { border-top-color: #fff }
	
	.button.m-inverse.m-dropdown { border-right-color: rgba( 255,255,255,.5 ) }
	.button.m-inverse.m-dropdown:hover { border-right-color: rgba( 0,0,0,.5 ) }
	
	/***
	.button.m-dropdown:after,
	.button.m-default.m-dropdown:after { border-top-color: #333 }
		.button.m-dropdown:hover:after,
		.button.m-default.m-dropdown:hover:after { border-top-color: #ccc }
	
	.button.m-secondary.m-dropdown:after { border-top-color: #666 }
		.button.m-secondary.m-dropdown:hover:after { border-top-color: #eee }

	.button.m-info.m-dropdown:after { border-top-color: #06c }
		.button.m-info.m-dropdown:hover:after { border-top-color: #fff }

	.button.m-error.m-dropdown:after { border-top-color: #d00 }
		.button.m-error.m-dropdown:hover:after { border-top-color: #fff }

	.button.m-success.m-dropdown:after { border-top-color: #008C00 }
		.button.m-success.m-dropdown:hover:after { border-top-color: #fff }

	.button.m-warning.m-dropdown:after { border-top-color: #FFBF00 }
		.button.m-warning.m-dropdown:hover:after { border-top-color: #fff }

	.button.m-inverse.m-dropdown:after { border-top-color: #fff }
		.button.m-inverse.m-dropdown:hover:after { border-top-color: #333 }
	*/


/* MODIFIER */

	.button.m-small { font-size: 12px; line-height: 32px; padding: 0 8px }
	
	.button.m-large { font-size: 20px; line-height: 40px }
	
	.button.m-xlarge { font-size: 24px; line-height: 48px; padding: 0 24px }
	
	.button.m-full { display: block; width: 100%; text-align: center; margin-bottom: 0 }

	.button.m-icon {}

	.button.m-rounded { border-radius: 3px }
	
	.button.m-outline { border-style: solid; border-width: 1px }
		.button.m-outline,
		.button.m-outline.m-default { border-color: #333 }
			.button.m-outline:hover,
			.button.m-outline.m-default:hover { border-color: #333 }
			
		.button.m-outline.m-secondary { border-color: #666 }
			.button.m-outline.m-secondary:hover { border-color: #666 }

		.button.m-outline.m-info { border-color: #06c }
			.button.m-outline.m-info:hover { border-color: #06c }

		.button.m-outline.m-error { border-color: #d00 }
			.button.m-outline.m-error:hover { border-color: #d00 }

		.button.m-outline.m-success { border-color: #008C00 }
			.button.m-outline.m-success:hover { border-color: #008C00 }

		.button.m-outline.m-warning { border-color: #FFBF00 }
			.button.m-outline.m-warning:hover { border-color: #FFBF00 }

		.button.m-outline.m-inverse { border-color: #eee }
			.button.m-outline.m-inverse:hover { border-color: #333 }

	
	
	.button.m-disabled { pointer-events: none; cursor: not-allowed; opacity: .5 }


/* PARENT MODYFIER */
.button-group {}

	.button-group > .button { margin-left: -6px; border-left: 1px solid #ccc }
		.button-group > .button:first-child { margin-left: 0; border-left: 0 }
	
	.button-group.m-rounded {}
		.button-group.m-rounded > .button:first-child { border-radius: 3px 0 0 3px }
		.button-group.m-rounded > .button:last-child { border-radius: 0 3px 3px 0 }