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

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

.btn[class*="btn-c-gradient-"] {
	padding: $p-10 24px;
	text-shadow: none;
	font-size: 14px;
	color: $white;
	font-weight: normal;
	white-space: normal;
	word-wrap: break-word;
	transition: .2s ease-out;
	touch-action: manipulation;
	cursor: pointer;
	text-transform: $transform-upper;
	background-color: $light-gray;
	box-shadow: 0px 5px 20px 0 rgba(0, 0, 0, 0.1);
	will-change: opacity, transform;
	transition: all 0.3s ease-out;
	-webkit-transition: all 0.3s ease-out;
}
.btn-c-gradient-1 {
	background-image: $additional-gradient-color-53;
	&:hover {
		background-image: $additional-gradient-color-54;
	}
}
.btn.btn-c-gradient-1 {
	&:not(:disabled) {
		&:not(.disabled) {
			&:active {
				background-image: $additional-gradient-color-54;
			}
		}
	}
}
.btn-c-gradient-2 {
	background-image: $additional-gradient-color-34;
	&:hover {
		background-image: $additional-gradient-color-35;
	}
}
.btn.btn-c-gradient-2 {
	&:not(:disabled) {
		&:not(.disabled) {
			&:active {
				background-image: $additional-gradient-color-35;
			}
		}
	}
}
.btn-c-gradient-3 {
	background-image: $additional-gradient-color-55;
	&:hover {
		background-image: $additional-gradient-color-56;
	}
}
.btn.btn-c-gradient-3 {
	&:not(:disabled) {
		&:not(.disabled) {
			&:active {
				background-image: $additional-gradient-color-56;
			}
		}
	}
}
.btn-c-gradient-4 {
	background-image: $additional-gradient-color-57;
	&:hover {
		background-image: $additional-gradient-color-58;
	}
}
.btn.btn-c-gradient-4 {
	&:not(:disabled) {
		&:not(.disabled) {
			&:active {
				background-image: $additional-gradient-color-58;
			}
		}
	}
}
.btn-c-gradient-5 {
	background-image: $additional-gradient-color-40;
	&:hover {
		background-image: $additional-gradient-color-59;
	}
}
.btn.btn-c-gradient-5 {
	&:not(:disabled) {
		&:not(.disabled) {
			&:active {
				background-image: $additional-gradient-color-59;
			}
		}
	}
}
.btn-c-gradient-6 {
	background-image: $additional-gradient-color-60;
	&:hover {
		background-image: $additional-gradient-color-61;
	}
}
.btn.btn-c-gradient-6 {
	&:not(:disabled) {
		&:not(.disabled) {
			&:active {
				background-image: $additional-gradient-color-61;
			}
		}
	}
}