input[type="submit"],
.button,
.btn {
	display: inline-block;
	align-items: center;
	justify-content: center;
	text-align: center;
	height: 40px;
	line-height: 40px;
	background: $black;
	color: #fff;
	padding: 0 20px;
	max-width: 100%;
	font-size: 14px;
	font-weight: 500;
	border: 0;
	outline: 0;
	position: relative;
	cursor: pointer;
	border-radius: 0;
  white-space: nowrap;
	@include appearance(none);
	@extend .quick-transition;

	&:hover {
		background: $accent;
		color: #fff;
	}
	&:focus {
		color: #fff;
	}
	&.disabled {
		cursor: not-allowed;
	}
	&.no-radius {
		border-radius: 0;
	}
	&.small-radius {
		border-radius: 3px;
	}
	&.pill-radius {
		border-radius: 300px;
	}
	&.white {
		background: #fff;
		color: $black;

		&:hover {
			color: $accent;
		}
	}
	&.white-alt {
		background: rgba(#fff, 0.8);
		color: $black;
		&:hover {
			color: $black;
			background: #fff;
		}
	}
	&.grey {
		background: #b6b6b6;

		&:hover {
			background: $accent;
		}
	}
	&.accent,
	&.alt {
		background: $accent;

		&:hover {
			background: darken($accent, 10%);
		}
	}
	&.full {
		width: 100%;
		text-align: center;
	}
	&.small {
		font-size: 12px;
		height: 34px;
		line-height: 34px;
		padding: 0 17px;
	}
	&.large {
		height: 48px;
		line-height: 48px;
		padding: 0 30px;
		font-size: 14px;
		font-weight: 600;
	}
	&.x-large {
		height: 54px;
		line-height: 54px;
		padding: 0 45px;
		font-size: 14px;
	}
	&.style2 {
		border: 1px solid rgba(#000, 0.2);
		color: $black;
		background: transparent;
		line-height: 38px;
		&:focus {
			color: $black;
		}
		svg {
			fill: $black;
		}
		&.small {
			line-height: 32px;
		}
		&.large {
			line-height: 44px;
		}
		&.x-large {
			line-height: 52px;
		}
		&.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));
			}
		}
		.thb-button-icon {
			margin-right: 5px;
		}
		&:hover {
			background: rgba(#000,0.05);
			color: $black;
		}

		&.white {
			border-color: #fff;
			color: #fff;

			&:focus {
				color: #fff;
			}
			&:hover {
				background: #fff;
				color: $black;
				&:focus {
					color: $black;
				}
			}

		}

		&.accent {
			border-color: $accent;
			&:hover {
				background: rgba($accent,0.1);
			}
		}
	}
}

/* Text Button */
.btn-text {
	display: inline-flex;
	align-items: center;
	&.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;
		}
		&: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: $black;
			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: $accent;
			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;
			}
			&: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 {

		.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;

				& + svg {
					margin-left: 2px;
				}
				&:first-child {
					fill: $accent;
				}
			}
		}
		&: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: $black;

  &:hover {
    color: $black;
  }

  .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
}