//  =================
//      Imports
//  =================

@import '../../../base/color_variables';    // Color Variables
@import '../../../base/fonticons';        // Fonticons Variables
@import '../../../base/urls';           // URLS Variables
@import '../../../base/utilities_variables';  // Utilities Variables


[class*="btn-material"] {
	position: $pos-rel;
	display: inline-block;
	border: none;
	border-radius: 2px;
	padding: 10px 24px;
	vertical-align: $v-align-middle;
	text-align: $align-center;
	text-overflow: ellipsis;
	text-transform: $transform-upper;
	color: $white;
	box-shadow: $shadow-21, $shadow-22, $shadow-23;
	font-size: 14px;
	font-weight: 500;
	overflow: hidden;
	outline: none;
	cursor: pointer;
	transition: box-shadow 0.2s;
	&:hover {
		box-shadow: $shadow-24, $shadow-25, $shadow-26;
		&::before {
			opacity: 0.12 !important;
		}
	}
	&:focus {
		box-shadow: $shadow-24, $shadow-25, $shadow-26;
		&::before {
			opacity: 0.2 !important;
		}
	}
	&:active {
		box-shadow: $shadow-27, $shadow-28, $shadow-29;
		&::before {
			opacity: 0.32 !important;
		}
		&::after {
			opacity: 0.4;
			transform: translate(-50%, -50%) scale(0);
			transition: transform 0s;
		}
	}
	&:disabled {
		color: $color_291;
		background-color: $color_292;
		box-shadow: none;
		cursor: initial;
		&::before {
			opacity: 0 !important;
		}
		&::after {
			opacity: 0 !important;
		}
	}
	&::before {
		content: "";
		position: $pos-abs;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background-color: currentColor;
		opacity: 0;
		transition: opacity 0.2s;
	}
	&::after {
		content: "";
		position: $pos-abs;
		left: 50%;
		top: 18px;
		border-radius: 50%;
		padding: 50%;
		width: 32px;
		height: 32px;
		background-color: currentColor;
		opacity: 0;
		transform: translate(-50%, -50%) scale(1);
		transition: opacity 1s, transform 0.5s;
	}
}
.btn-material-primary {
	background-color: $primary;
}
.btn-material-dark {
	background-color: $dark;
}
.btn-material-default {
	color: $dark !important;
	background-color: $light-gray;
}
.btn-material-danger {
	background-color: $danger;
}
.btn-material-info {
	background-color: $info;
}
.btn-material-success {
	background-color: $success;
}
.btn-material-warning {
	background-color: $warning;
}
.btn-material-secondary {
	background-color: $secondary;
}