@import "ui-kit/variables";
@import "ui-kit/mixins";

.ui-button{
	padding: 16px 30px;
	display: inline-block;
	background-color: $grey_color_1;
	font-weight: 900;
	text-transform: uppercase;
	color: #fff;
	box-shadow: 0px 0px 13px rgba(0, 0, 0, 0.2);
	cursor: pointer;
	border-radius: 4px;
	border: none;
	transition: background 300ms ease-in-out;
		&:hover{
			background-color: $grey_color_4;
		}
		&:focus{
			outline: none;
		}
		&.ui-button-normal-style{
			background-color: $normal_color;
			&:hover{
				background-color: $normal_color_h;
			}
		}
		&.ui-button-success-style{
			background-color: $green_color;
			&:hover{
				background-color: $green_color_h;
			}
		}
		&.ui-button-primary-style{
			background-color: $blue_color;
			&:hover{
				background-color: $blue_color_h;
			}
		}
		&.ui-button-danger-style{
			background-color: $red_color;
			&:hover{
				background-color: $red_color_h;
			}
		}
		&.ui-button-warning-style{
			background-color: $orange_color;
			&:hover{
				background-color: $orange_color_h;
			}
		}
}