/* BUTTONS */
.shapla-button {
	-webkit-appearance: none;
	-webkit-font-smoothing: inherit;
	display: inline-block;
	background: #979797;
	color: #fff;
	font-size: 16px;
	line-height: 1;
	margin: 5px;
	padding: 12px 16px;
	border-radius: 0;
	text-decoration: none;
	text-align: center;
	@include box-sizing(border-box);
	@include transition(all 200ms ease-in-out);
	&:hover {
		color: #fff;
		text-decoration: none;
	}

	&--normal {
		opacity: 0.9;
	    filter: alpha(opacity=90);
	}
	&--medium {
		font-size: 18px;
		padding: 17px 22px;
	}
	&--large {
		font-size: 20px;
		padding: 22px 40px;
	}
}

.shapla-button {
	&--black { background: #000; }
	&--blue { background: #1b93c7; }
	&--green { background: #84c333; }
	&--light-blue { background: #56c3f2; }
	&--orange { background: #fc901d; }
	&--red { background: #d15858; }
	&--purple { background: #c16ad7; }
	&--dark { background: #363f48; }
	&--grey { background: #979797; }
	&--gray { background: #979797; }
	&--white {
		background: #fff;
		color: #000;
		&:hover {
			color: #000;
		}
	}

	&--stroke {
		background: transparent;
		border: 1px solid transparent;

		&.shapla-button {
			&--black {
				color: #000;
				border-color: #000;

				&:hover {
					background: #000;
					color: #fff;
				}
			}

			&--blue {
				color: #1b93c7;
				border-color: #1b93c7;

				&:hover {
					background: #1b93c7;
					color: #fff;
				}
			}

			&--green {
				color: #84c333;
				border-color: #84c333;
				&:hover {
					background: #84c333;
					color: #fff;
				}
			}

			&--grey {
				color: #979797;
				border-color: #979797;

				&:hover {
					background: #979797;
					color: #fff;
				}
			}

			&--light-blue {
				color: #56c3f2;
				border-color: #56c3f2;
				&:hover {
					background: #56c3f2;
					color: #fff;
				}
			}

			&--orange {
				color: #fc901d;
				border-color: #fc901d;
				&:hover {
					background: #fc901d;
					color: #fff;
				}
			}

			&--red {
				color: #d15858;
				border-color: #d15858;
				&:hover {
					background: #d15858;
					color: #fff;
				}
			}

			&--purple {
				color: #c16ad7;
				border-color: #c16ad7;
				&:hover {
					background: #c16ad7;
					color: #fff;
				}
			}

			&--white {
				color: #fff;
				border-color: #fff;
				&:hover {
					background: #fff;
					color: #000;
				}
			}

			&--dark {
				color: #363f48;
				border-color: #363f48;
				&:hover {
					background: #363f48;
					color: #fff;
				}
			}
		}
	}
}