/*
*
* Buttons
*/

// Button General Styles
.button {
	position: relative;
	overflow: hidden;
	display: inline-block;
	@include btn-size($input-btn-padding-y, $input-btn-padding-x, $input-btn-font-size, $input-btn-line-height);
	border: 2px solid;
	font-family: $btn-font-family;
	font-weight: $btn-font-weight;
	letter-spacing: $btn-letter-spacing;
	text-transform: $btn-text-transform;
	white-space: nowrap;
	text-overflow: ellipsis;
	text-align: center;
	cursor: pointer;
	vertical-align: middle;
	user-select: none;
	transition: 250ms all ease-in-out;
	
}

.button-block {
	display: block;
	width: 100%;
}

//
// Appearance style
// 

.button-default {
	@include btn-variant($gray-300, $gray-700, $gray-700, $white, $primary, $primary);
}

.button-primary {
	@include btn-variant($white, $primary, $primary, $gray-1, $secondary, $secondary);
}

.button-secondary {
	@include btn-variant($gray-1, $secondary, $secondary, $white, $primary, $primary);

	.bg-accent & {
		&:hover {
			color: $gray-1;
			background: $white;
			border-color: $white;
		}
	}
}

.button-primary {
	@include btn-variant($white, $primary, $primary, $gray-1, $secondary, $secondary);
}

// Outline
.button-default-outline {
	@include btn-variant($gray-1, transparent, $gray-1, $white, $primary, $primary);

	%context-dark & {
		@include btn-variant($white, transparent, $white, $gray-1, $secondary, $secondary);
	}
}

.button-secondary-outline {
	@include btn-variant($gray-1, $secondary, $secondary, $secondary, transparent, $secondary);
	
	%context-dark & {
		@include btn-variant($gray-1, $secondary, $secondary, $white, transparent, $white);
	}
}

.button-ghost {
	border: 0;
	background-color: transparent;

	&:hover {
		color: $white;
		background: $primary;
	}
}

// Social
.button-facebook,
.button-twitter,
.button-google {
	font-size: 12px;
	letter-spacing: .12em;
	.icon {
		font-size: 18px;
	}
}
.button-facebook {
	@include btn-variant($white, $facebook, $facebook, $white, $facebook-darken, $facebook-darken);
}

.button-twitter {
	@include btn-variant($white, $twitter, $twitter, $white, $twitter-darken, $twitter-darken);
}

.button-google {
	@include btn-variant($white, $google, $google, $white, $google-darken, $google-darken);
}

// Btn with shadow
.button-shadow {
	&, &:focus, &:active {
		box-shadow: 0px 9px 21px 0px rgba(30, 30, 30, 0.15);
	}
	&:hover {
		box-shadow: 0px 9px 21px 0px rgba(30, 30, 30, 0.15);
	}
}

//
// Button Sizes
// 

.button-xs {
	padding: 8px 17px;
}

.button-sm {
	@include btn-size($input-btn-padding-y-sm, $input-btn-padding-x-sm, 12px, $input-btn-line-height-sm);
	font-weight: 600;
	letter-spacing: .12em;
}

.button-lg {
	@include btn-size($input-btn-padding-y-lg, $input-btn-padding-x-lg, 16px, $input-btn-line-height-lg);
	font-weight: 600;
}

.button-xl {
	@include btn-size(16px, 50px, 16px, 28px);
	font-weight: 600;
	@include media-breakpoint-up(lg) {
		padding: 21px 85px;
		font-size: 18px;
		letter-spacing: 0;
	}
}

//
// Button Shapes
// 

.button-circle {
	border-radius: 30px;
}

.button-round-1 {
	border-radius: 9px;
}

.button-square {
	border-radius: 0;
}

//
// Button Icon styles
//
.button {
	&.button-icon {
		display: flex;
		justify-content: center;
		align-items: center;
		vertical-align: middle;

		.icon {
			position: relative;
			display: inline-block;
			vertical-align: middle;
			color: inherit;
			font-size: 1.55em;
			line-height: 1em;
		}

		&-left {
			.icon {
				padding-right: 11px;
			}
		}

		&-right {
			flex-direction: row-reverse;
			.icon {
				padding-left: 11px;
			}
		}

		&.button-link {
			.icon {
				top: 5px;
				font-size: 1em;
			}
		}

		&.button-xs {
			.icon {
				top: .05em;
				font-size: 1.2em;
				padding-right: 8px;
			}

			.button-icon-right {
				padding-left: 8px;
			}
		}
	}
}

.button-icon.button-icon-only {
	min-width: $form-input-height;
	padding: 8px 10px;
}

//
// Bootstrap buttons
//

.btn-primary {
	border-radius: 3px;
	font-family: $btn-font-family;
	font-weight: $btn-font-weight;
	letter-spacing: .05em;
	text-transform: uppercase;
	transition: .33s;

	&,
	&:active,
	&:focus {
		color: $white;
		background: $primary;
		border-color: $primary;
	}

	&:hover {
		color: $white;
		background: $black;
		border-color: $black;
	}
}


//
// Button Group
//
div.button-group {
	display: flex;
	.button {
		flex-grow: 1;
	}

	.button:not(:first-child) {
		border-top-left-radius: 0;
		border-bottom-left-radius: 0;
	}

	.button:not(:last-child) {
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
	}

	* + .button { margin-top: 0; }
}