.tm-button {
	@extend %transit;
	display: inline-block;
	text-align: center;
	white-space: nowrap;
	line-height: 1.2;
	&.tm-button-full-wide {
		width: 100%;
		text-align: center;
	}
	&.style-1 {
		padding: 0 40px;
		height: 56px;
		border-radius: 5px;
		font-size: 14px;
		font-weight: bold;
		line-height: 58px;
		&.tm-button-default,
		&.tm-button-secondary {
			color: #ffffff;
		}
		&.tm-button-primary {
			color: #ffffff;
		}
		&.tm-button-white {
			background-color: #ffffff;
			&:hover {
				color: #ffffff;
			}
		}
		&.tm-button-lg {
			padding: 0 47px;
			height: 66px;
			font-size: 16px;
			line-height: 66px;
		}
		&.tm-button-sm {
			padding: 0 30px;
			height: 46px;
			font-size: 14px;
			line-height: 46px;
		}
		&.tm-button-xs {
			padding: 0 20px;
			height: 36px;
			line-height: 36px;
			font-size: 14px;
		}
		&.tm-button-icon-right {
			i {
				margin-left: 10px;
			}
		}
		&.tm-button-icon-left {
			i {
				margin-right: 10px;
			}
		}
	}
	&.style-2 {
		padding: 0 40px;
		height: 56px;
		border: 2px solid;
		border-radius: 5px;
		letter-spacing: 1.75px;
		font-size: 14px;
		font-weight: bold;
		line-height: 52px;
		&.tm-button-default,
		&.tm-button-primary {
			background-color: transparent;
			border-color: #dddddd;
			&:hover {
				color: #ffffff;
			}
		}
		&.tm-button-secondary {
			background-color: transparent;
			&:hover {
				color: #ffffff;
			}
		}
		&.tm-button-white {
			background-color: transparent;
			color: #ffffff;
			border-color: #ffffff;
			&:hover {
				color: #ffffff;
			}
		}
		&.tm-button-lg {
			padding: 0 47px;
			height: 66px;
			font-size: 16px;
			line-height: 61px;
		}
		&.tm-button-sm {
			padding: 0 30px;
			height: 46px;
			font-size: 14px;
			line-height: 46px;
		}
		&.tm-button-xs {
			padding: 0 20px;
			height: 36px;
			font-size: 14px;
			line-height: 36px;
		}
		&.tm-button-icon-right {
			i {
				margin-left: 10px;
			}
		}
		&.tm-button-icon-left {
			i {
				margin-right: 10px;
			}
		}
	}
	&.style-3 {
		font-size: 14px;
		font-weight: bold;
		i {
			font-size: 10px;
			font-weight: normal;
			@include transit;
		}
		&.tm-button-white {
			color: #ffffff;
		}
		&.tm-button-lg {
			font-size: 16px;
		}
		&.tm-button-sm {
			font-size: 12px;
		}
		&.tm-button-xs {
			font-size: 10px;
		}
		&.tm-button-icon-right {
			i {
				margin-left: 5px;
			}
			&:hover {
				i {
					margin-left: 10px;
				}
			}
		}
		&.tm-button-icon-left {
			i {
				margin-right: 5px;
			}
			&:hover {
				i {
					margin-right: 10px;
				}
			}
		}
	}
}

.rev-btn {
	transition: background-color .5s cubic-bezier(.645, .045, .355, 1), border-color .5s cubic-bezier(.645, .045, .355, 1), color .5s cubic-bezier(.645, .045, .355, 1) !important;
	i {
		@extend %transit;
		margin-left: 8px;
	}
}

.tm-button-2 {
	i {
		color: rgba(255, 255, 255, .5);
	}
	&:hover {
		i {
			color: #989898;
		}
	}
}

.tm-button-1,
.tm-button-4 {
	i {
		opacity: .5;
		transition: none;
	}
}