input[type="submit"],
.button,
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 48px;
	background: $color2;
	color: #fff;
	padding: 0 40px;
	max-width: 100%;
	font-size: 14px;
	font-weight: 600;
	border: 0;
	outline: 0;
	cursor: pointer;
	border-radius: 3px;
	@include appearance(none);
	@extend .quick-transition;

	&>span {
		z-index: 10;
		position: relative;
		white-space: nowrap;

		&.thb-button-icon {
      margin-right: 10px;
    }
  }
	.form-radius-off & {
	  border-radius: 0;
	}
	&:hover {
		background: darken($color2, 5%);
		color: #fff;
	}
	&.disabled {
		pointer-events: none;
		cursor: not-allowed;
		opacity: 0.6;
	}
	&.mini {
    font-size: 12px;
    height: 32px;
    padding: 0 18px;
  }
  &.small {
		font-size: 12px;
		height: 42px;
		padding: 0 30px;
	}
	&.large {
		font-size: 16px;
		height: 56px;
		padding: 0 45px;
	}
	&.x-large {
		font-size: 24px;
		height: 82px;
		padding: 0 60px;
	}
	&.thb_shadow {
		@include box-shadow(0 6px 20px rgba(0,0,0,0));
		&:hover {
			-moz-transform: translateY(-3px) !important;
	    -ms-transform: translateY(-3px) !important;
	    -webkit-transform: translateY(-3px) !important;
	    transform: translateY(-3px) !important;
			@include box-shadow(0 6px 20px rgba(0,0,0,0.12));
		}
	}

	&.arrow-enabled {
		position: relative;

		&>span {
			@include transition(transform .25s $transition);
		}
		&>svg {
			fill: #fff;
			height: 10px;
			position: absolute;
			right: 20px;
			top: 50%;
			opacity: 0;
			z-index: 1;
			@extend .quick-transition;
			@include translate3d(-5px, -50%, 0);
		}
		&:hover {
			&>span {
				@include translate3d(-13px, 0, 0);
			}
			&>svg {
				opacity: 1;
				@include translate3d(0, -50%, 0);
			}
		}
		&.small {
			&>svg {
				right: 8px;
			}
		}
	}
	&.full {
		width: 100%;
		&>span {
			width: 100%;
			text-align: center;
		}
	}
	&.black,
	&.wc-forward.checkout {
		background: $black;

		&:hover {
			background: $color2;
		}
		&:not(.checkout) {

		}
	}
	&.white {
		background: #fff;
		color: $black;

		&:hover {
			background: $black;
			color: #fff;
		}
	}
	&.gradient {
		position: relative;

		span {
			position: relative;
			z-index: 5;
		}
		&:after {
			content: '';
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			opacity: 0;
			@extend .quick-transition;
		}
		&:hover {
			&:after {
				opacity: 1;
			}
		}
	}
	&.no-radius {
		border-radius: 0;
	}
	&.small-radius {
		border-radius: 3px;

		&:after {
			border-radius: 3px;
		}
		&:before {
			border-radius: 0px;
		}
	}
	&.pill-radius {
		border-radius: 300px;

		&:after,
		&:before {
			border-radius: 300px;
		}
	}
	&.style1 {

	} /* End .style1 */
	&.style2 {
		border: 2px solid $color2;
		background: transparent;
		color: $color2;
		&:hover {
			background: $color2;
			color: #fff;
		}
		&.gradient {
			border: 0;

			&:after {
				opacity: 1;
			}
			&:before {
				content: '';
				display: block;
				position: absolute;
				top: 2px;
				left: 2px;
				width: calc(100% - 4px);
				height: calc(100% - 4px);
				background: #fff;
				z-index: 3;
				@extend .quick-transition;
			}
			&:hover {
				&:before {
					opacity: 0;
				}
			}
		}
		&.black {
			border-color: $black;
			color: $black;
			&:hover {
				color: #fff;
				background: $black !important;
			}
		}
		&.white {
			border-color: #fff;
			color: #fff;
			&:hover {
				color: $black;
				background: #fff;
			}
			&.arrow-enabled {
				&>svg {
					fill: $black;
				}
			}
		}
	} /* End .style2 */
	&.style3 {
		border: 2px solid $color2;
		background: transparent;
		color: $color2;
		position: relative;
		overflow: hidden;
		&>span {
			z-index: 4;
		}
		&.arrow-enabled {
			svg {
				z-index: 10;
			}
		}
		&:before {
			content: '';
			display: block;
			position: absolute;
			top: 0px;
			left: 0px;
			width: 100%;
			height: 100%;
			background: $color2;
			z-index: 3;
			opacity: 1;
			transform-origin: left center;
			@include translateX(-102%);
			@extend .mid-transition;
		}
		&:hover {
			color: #fff;
			background: transparent;
			&:before {
				opacity: 1;
				@include translateX(0%);
			}
		}
		&.gradient {
			border: 0;
			&:before {
				background: #fff;
				top: 2px;
				left: 2px;
				width: calc(100% - 4px);
				height: calc(100% - 4px);
				transform-origin: right center;
				@include translateX(0%);
			}
			&:hover {
				&:before {
					@include translateX(102%);
				}
			}
			&:after {
				opacity: 1;
			}
		}
		&.black {
			border-color: $black;
			color: $black;
			&:before {
				background: $black;
			}
			&:hover {
				background: transparent;
				color: #fff;
			}
		}
		&.white {
			border-color: #fff;
			color: #fff;

			&:hover {
				background: transparent;
				color: $black;
			}
			&:before {
				background: #fff;
			}
		}
	}
	&.style4 {
		background: transparent;
		border: 1px solid $color2;
		color: $color2;
		position: relative;
		span:not(.thb-button-icon) {
			margin-right: 60px;
		}
		&:after,
		&:before {
			content: '';
			display: block;
			width: 16px;
			height: 1px;
			left: auto;
			position: absolute;
			top: 50%;
			right: 30px;
			opacity: 1;
			background: rgba(#000,0.2);
			@include transform-origin(left, center);
			@extend .quick-transition;
		}
		&:after {
			background: $color2;
			@include scale(0,1);
		}
		&:hover {
			background: transparent;
			color: $color2;

			&:after {
				@include scale(1,1);
			}
		}
		&.black {
			border-color: rgba(0,0,0,0.1);
			color: $black;

			&:after {
				background: $black;
			}
		}
		&.white {
			border-color: rgba(255,255,255,0.2);
			color: #fff;
			&:before {
				background: rgba(255,255,255,0.3);
			}
			&:after {
				background: #fff;
			}
		}
		&.gradient {
	    border-image-slice: 1;
		}
	}
} /* End .button */

/* Text Button */
.btn-text {
	display: inline-flex;
	align-items: center;
	&.style-accent-link {
		font-weight: 500;
		color: $accent;
		font-size: 15px;
	}
	&.style1 {
		font-size: 12px;
		text-transform: uppercase;
		font-weight: 600;
		&:before {
			content: '';
			display: inline-block;
			width: 35px;
			height: 1px;
			margin-right: 15px;
			background: rgba(0,0,0,0.15);
			@extend .quick-transition;

			.rtl & {
				margin-right: 0;
				margin-left: 15px;
			}
		}
		&:hover {
			color: $black;
			&:before {
				width: 60px;
				background: $black;
			}
		}
		&.white {
			color: #fff;
			&:before {
				background: rgba(#fff,0.45);
			}
			&:hover {
				color: #fff;
				&:before {
					background: #fff;
				}
			}
		}
	} /* End .style1 */
	&.style2 {
		font-size: 12px;
		text-transform: uppercase;
		font-weight: 500;
		color: $black;
		position: relative;
		&:before,
		&:after {
			content: '';
			display: inline-block;
			width: 100%;
			height: 2px;
			background: rgba(0,0,0,0.4);
			position: absolute;
			bottom: -4px;
			left: 0;
			width: 100%;
			@extend .quick-transition;
		}
		&:after {
			background: $color1;
			transform-origin: left center;
			@include scale(0,1);
		}
		&:hover {
			&:after {
				@include scale(1,1);
			}
		}
	} /* End .style2 */
	&.style3 {
		font-size: 14px;
		font-weight: 600;

		.circle-btn {
			width: 24px;
			height: 24px;
			display: inline-flex;
			background: $color2;
			position: relative;
			border-radius: 12px;
			margin-right: 17px;
			&:before,
			&:after {
				content: '';
				display: block;
				height: 1px;
				width: 4px;
				background: #fff;
				position: absolute;
				top: 50%;
				left: 50%;
				transform-origin: right center;
			}
			.rtl & {
				margin-right: 0;
				margin-left: 17px;
			}
			&:before {
				@include transform(translate3d(-50%,-50%,0) rotateZ(45deg));
			}
			&:after {
				@include transform(translate3d(-50%,-50%,0) rotateZ(-45deg));
			}
		}
		span {
			position: relative;
			line-height: 1;
			&:after {
				content: '';
				display: inline-block;
				width: 100%;
				height: 1px;
				background: $black;
				position: absolute;
				bottom: -3px;
				left: 0;
				width: 100%;
				transform-origin: left center;
				@include scale(0,1);
				@extend .quick-transition;
			}
		}
		&:hover {
			color: $black;
			span:after {
				@include scale(1,1);
			}
		}
	} /* End .style3 */
	&.style4 {
		font-size: 18px;

		.arrow {
			display: inline-flex;
			margin-left: 13px;
			position: relative;
			overflow: hidden;
			width: 15px;
			&>div {
				display: inline-flex;
				flex-direction: row;
				flex-wrap: nowrap;
				width: 32px;
				@include translateX(-17px);
				@extend .quick-transition;
			}
			svg {
				width: 15px;
				height: auto;

				@include ie11() {
					max-height: 18px;
				}
				& + svg {
					margin-left: 2px;
					@include ie11() {
						max-height: 18px;
					}
				}
				&:first-child {
					fill: $color2;
				}
			}
		}
		&:hover {
			.arrow {
				&>div {
					@include translateX(0);
				}
			}
		}
	} /* End .style4 */
	&.style5 {
		font-size: 12px;
		font-weight: 600;
		text-transform: uppercase;
		svg {
			fill: $black;
			height: 10px;
			@include translateX(-4px);
			@include transition(all .15s linear);
			.bar {
				fill: $black;
				@include scale(0,1);
				@include transition(all .15s linear);
			}
		}
		.arrow {
			height: 10px;
			display: flex;
			align-items: center;
		}

		&:hover {
			color: $black;
			svg {
				@include translateX(0px);
				.bar {
					@include scale(1,1);
				}
			}
		}
	} /* End .style5 */
}
/* Block Button */
.btn-block {
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
  color: $color1;

  &:hover {
    color: $color1;
  }

  .cover-bg {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
    img {
      display: block;
      height: 100%;
      width: 100%;
      object-fit: cover;
    }
  }
  >span {
    position: relative;
    line-height: 1;
    z-index: 2;
  }

  &.style1 {
    font-size: 16px;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    font-weight: 600;
    .cover-bg {
      img {
        will-change: transform;
        transform-origin: center center;
        @extend .transition;
      }
    }
    &:hover {
      .cover-bg {
        img {
        	@include scale(1.03);
        }
      }
    }
  } //.style1
}