/*
 * Shortcode: button.scss
 * -----------------------------------------------
*/


// Alternate buttons

@each $color, $value in $tm-btn-colors {
	.btn-#{$color} {
		@include button-variant($value, $value);
	}
}

@each $color, $value in $tm-btn-colors {
	.btn-outline-#{$color} {
		@include button-outline-variant($value);
	}
}



// Custom Button Styles
.btn-xs {
  @include button-size($btn-padding-y-xs, $btn-padding-x-xs, $font-size-xs, $btn-line-height-xs, $btn-border-radius-sm);
}


.btn {
	border-width: 3px;
	letter-spacing: .05rem;
	padding: 0.8rem 2.5rem;
	overflow: hidden;
	&.focus, &:focus {
		box-shadow: none !important;
	}
}
.btn-group-xs > .btn, .btn-xs {
	padding: 0.75rem 1rem;
}
.btn-group-sm > .btn, .btn-sm {
	padding: 0.50rem 1.5rem;
}
.btn-group-lg > .btn, .btn-lg {
	padding: 1.1rem 3.00rem;
}
.btn-gray {
	box-shadow: none;
}
//btn hover
.btn-dark:hover {
	color: $dark;
	background-color: transparent;
}
.btn-gray:hover {
	color: $btn-gray-color;
	border-color: $btn-gray-color;
	background-color: transparent;
}
/* button 3D */
.btn-3d {
	@include box-shadow( 0 4px 1px darken(#ccc, 20%) );
	margin-bottom: 4px;
}
.btn-round {
	border-radius: 3rem;
}
.btn-flat {
	border-radius: 0;
}

/* btn-plain-text*/
.btn-plain-text {
	color: #aaa;
	font-size: 1rem;
	padding: 0;
	border: 0;
	padding-bottom: 3px;
	vertical-align: initial;
	&:after {
		content: '';
		display: block;
		width: 0;
		height: 2px;
		background: #000;
		transition: width .3s;
	}
	&:hover:after {
		width: 100%;
	}
	&.focus, &:focus {
		box-shadow: none;
	}
}
.btn-plain-text-with-arrow {
	color: #2f3241;
	font-size: 1rem;
	padding: 0;
	border: 0;
	vertical-align: initial;
	&:after {
		display: inline-block;
		content: "\f178";
		font-family: fontawesome;
		font-size: 16px;
		font-variant: normal;
		font-weight: normal;
		line-height: 1;
		margin-left: 7px;
		position: relative;
		text-shadow: none;
		text-transform: none;
		top: 2px;
		@include transition(all 0.3s ease 0s);
	}

	&:focus, &:hover {
		&:after {
			-webkit-animation: moveArrow 1s;
			-moz-animation: moveArrow 1s;
			animation: moveArrow 1s
		}
	}
	&.focus, &:focus {
		box-shadow: none;
	}
	&.text-white {
		&:after {
			color: #fff !important;
		}
	}
}
@keyframes moveArrow {
	0%, 55% {
		opacity:1;
		-webkit-transform:translateX(0) scale(1);
		-moz-transform:translateX(0) scale(1);
		transform:translateX(0) scale(1)
	}
	25% {
		opacity:0;
		-webkit-transform:translateX(13px) scale(.9);
		-moz-transform:translateX(13px) scale(.9);
		transform:translateX(13px) scale(.9)
	}
	26% {
		opacity:0;
		-webkit-transform:translateX(-13px) scale(.9);
		-moz-transform:translateX(-13px) scale(.9);
		transform:translateX(-13px) scale(.9)
	}
}
.btn-modern-white {
	position: relative;
	overflow: hidden;
	border-width: 2px;
	color: #333;
	border-color: #eeeeee;
	background-color: transparent;
	&:after {
		content: "";
		background-color: #111;
		width: 0;
		height: 100%;
		top: 0;
		position: absolute;
		left: auto;
		right: 0;
		z-index: -1;
		-webkit-transition: width .6s cubic-bezier(.30,.8,.30,1) 0s;
		transition: width .6s cubic-bezier(.30,.8,.30,1) 0s;
	}
	&:hover {
		color: #ffffff;
		border-color: #111;
		&:after {
			width: 100%;
			left: 0;
			right: auto;
		}
	}
}

.btn-modern-theme-colored {
	position: relative;
	overflow: hidden;
	border-width: 2px;
	color: #333;
	border-color: #eeeeee;
	background-color: transparent;
	z-index: 0;
	&:after {
		content: "";
		background-color: #fff;
		width: 0;
		height: 100%;
		top: 0;
		position: absolute;
		left: auto;
		right: 0;
		z-index: -1;
		-webkit-transition: width .6s cubic-bezier(.30,.8,.30,1) 0s;
		transition: width .6s cubic-bezier(.30,.8,.30,1) 0s;
	}
	&:hover {
		border-color: #eee;
		&:after {
			width: 100%;
			left: 0;
			right: auto;
		}
	}
}



/* Sweep To Right */
.hvr-sweep-to-right {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	position: relative;
	@include prefixed(transition-property, color);
	@include prefixed(transition-duration, $mediumDuration);
	&:before {
		content: "";
		position: absolute;
		z-index: -1;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: #fff;
		@include prefixed(transform, scaleX(0));
		@include prefixed(transform-origin, 0 50%);
		@include prefixed(transition-property, transform);
		@include prefixed(transition-duration, $mediumDuration);
		@include prefixed(transition-timing-function, ease-out);
	}
	&:hover, &:focus, &:active {
		&:before {
			@include prefixed(transform, scaleX(1));
		}
	}
}
/* Bounce To Right */
.hvr-bounce-to-right {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	position: relative;
	@include prefixed(transition-property, color);
	@include prefixed(transition-duration, $slowDuration);
	&:before {
		content: "";
		position: absolute;
		z-index: -1;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: #fff;
		@include prefixed(transform, scaleX(0));
		@include prefixed(transform-origin, 0 50%);
		@include prefixed(transition-property, transform);
		@include prefixed(transition-duration, $slowDuration);
		@include prefixed(transition-timing-function, ease-out);
	}
	&:hover, &:focus, &:active {
		&:before {
			@include prefixed(transform, scaleX(1));
			@include prefixed(transition-timing-function, cubic-bezier(.52,1.64,.37,.66));
		}
	}
}
/* Shutter Out Horizontal */
.hvr-shutter-out-horizontal {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	position: relative;
	@include prefixed(transition-property, color);
	@include prefixed(transition-duration, $mediumDuration);
	&:before {
		content: "";
		position: absolute;
		z-index: -1;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background: #fff;
		@include prefixed(transform, scaleX(0));
		@include prefixed(transform-origin, 50%);
		@include prefixed(transition-property, transform);
		@include prefixed(transition-duration, $mediumDuration);
		@include prefixed(transition-timing-function, ease-out);
	}
	&:hover, &:focus, &:active {
		&:before {
			@include prefixed(transform, scaleX(1));
		}
	}
}


.hvr-sweep-to-right,
.hvr-bounce-to-right,
.hvr-shutter-out-horizontal {
	&[class^="btn-outline-"], &[class*=" btn-outline-"] {
		&:hover, &:focus, &:active {
			background-color: transparent;
		}
		@each $color, $value in $tm-btn-colors {
			&.btn-outline-#{$color} {
				&:before {
					background: $color;
				}
			}
		}
		@each $color, $value in $theme-colors {
			&.btn-outline-#{$color} {
				&:before {
					background: $value;
				}
			}
		}
	}
}
.hvr-sweep-to-right,
.hvr-bounce-to-right,
.hvr-shutter-out-horizontal {
	&:not(.btn-outline) {
		&:hover, &:focus, &:active {
			color: #222;
		}
	}
}