/* 2.6 - Button - Start
================================================== */
.btn_wrap {
	padding: 44px 0;
}

// Button Default - Start
.btn {
	border: none;
	line-height: 1;
	padding: 0 40px;
	overflow: hidden;
	position: relative;
	color: $color_white;
	transition: $transition;
	border: 2px solid transparent;
	border-radius: $border_radius;

	span {
		position: relative;
		display: inline-block;
		transition: $transition;
		small {
			display: block;
			padding: 16px 0;
			font-size: 18px;
			font-weight: 600;
			line-height: 24px;
			transition: $transition;
			&:nth-child(2) {
				left: 50%;
				top: 100%;
				opacity: 0;
				width: 100%;
				position: absolute;
				transform: translateX(-50%);
			}
		}
	}

	&:focus {
		outline: none;
		box-shadow: none;
	}

	&:hover {
		z-index: 1;
		color: $color_white;
		transform: translateY(-4px);
		box-shadow: 0 8px 24px 0 rgba(16, 18, 19, 0.4);
		span {
			small {
				color: $color_white;
				&:nth-child(1) {
					opacity: 0;
					transform: translateY(-100%);
				}
				&:nth-child(2) {
					top: 50%;
					opacity: 1;
					transform: translate(-50%, -50%);
				}
			}
		}
	}
}
// Button Default - End

// Button Small - Start
.btn.btn_small {
	padding: 0 28px;
	span small {
		padding: 9px 0;
	}
}
// Button Small - End

// Button Fill - Start
.btn_primary {
	color: $color_dark;
	border-color: $color_primary;
	background-color: $color_primary;
	&:hover {
		color: $color_dark;
		box-shadow: 0 8px 24px 0 rgba(247, 255, 98, 0.4);
		span {
			small {
				color: $color_dark;
			}
		}
	}
}

.btn_dark {
	color: $color_white;
	border-color: $color_dark;
	background-color: $color_dark;
	&:hover {
		color: $color_white;
		span {
			small {
				color: $color_white;
			}
		}
	}
}

.btn_warning {
	color: $color_dark;
	border-color: $color_warning;
	background-color: $color_warning;
	&:hover {
		color: $color_dark;
		box-shadow: 0 8px 24px 0 rgba(255, 211, 43, 0.5);
		span {
			small {
				color: $color_dark;
			}
		}
	}
}
// Button Fill - End

// Button Border - Start
.btn.border_dark {
	color: $color_dark;
	border-color: $color_dark;
	&:hover {
		color: $color_white;
		background-color: $color_dark;
		span {
			small {
				color: $color_white;
			}
		}
	}
}
// Button Border - End

// Button Unfill - Start
.btn_unfill {
	font-size: 18px;
	font-weight: 600;
	line-height: 24px;
	color: $color_dark;
	align-items: center;
	display: inline-flex;
	font-family: $font_heading;
	.btn_icon {
		width: 24px;
		height: 24px;
		overflow: hidden;
		margin-left: 10px;
		position: relative;
		border-radius: 100%;
		transition: $transition;
		background-color: $color_dark;
		i {
			top: 50%;
			font-size: 14px;
			position: absolute;
			color: $color_primary;
			transition: $transition;
			&:nth-child(1) {
				left: 50%;
				transform: translate(-50%, -50%);
			}
			&:nth-child(2) {
				left: -100%;
				transform: translateY(-50%);
			}
		}
	}
	&:hover {
		color: $color_dark;
		span {
			text-decoration: underline;
		}
		.btn_icon {
			transform: translateX(2px);
			i {
				&:nth-child(1) {
					left: 100%;
					transform: translateY(-50%);
				}
				&:nth-child(2) {
					left: 50%;
					transform: translate(-50%, -50%);
				}
			}
		}
	}
}
// Button Unfill - End

/* 2.6 - Button - End
================================================== */