/*----------------------------------------
  13. Buttons
----------------------------------------*/

button {
	outline: none;
	box-shadow: none;
	cursor: pointer;

	&:focus {
		outline: none;
	}

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

	&:active {
		&:focus {
			outline: none;
			box-shadow: none;
		}
	}
	
	&.disabled,
	&:disabled {
		opacity: 0.5;
		cursor: not-allowed;
	}
}

.btn {
	cursor: pointer;
	font-family: $font-primary;
    font-size: 14px;
    padding: 7px 20px;
	margin-right: 5px;
	margin-bottom: 10px;
	@include transition(all 0.3s ease-in-out); 
	
	&.dropdown-toggle {
		margin-bottom: 0px;
	}

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

	&.active {
		&:focus {
			outline: none;
		}
	}

	&:active {
		&:focus {
			outline: none;
		}
	}
}

.btn-default {
	color: $default-dark;
    background-color: transparent;
    border-color: darken($border-color,5%);
	
	&:hover,
	&:focus,
	&:active {
		color: $default-dark;
		background-color: lighten($border-color, 2%);
		border-color: lighten($border-color, 2%);
	}
	
	&:active {
		&:hover,
		&:focus {
			color: $default-dark;
			background-color: lighten($border-color, 2%);
			border-color: lighten($border-color, 2%);
		}
	}
	
	&.active {
		&:hover,
		&:focus {
			color: $default-dark;
			background-color: lighten($border-color, 2%);
			border-color: lighten($border-color, 2%);
		}
	}
}

// Loop for all context buttons
@each $type in $contextual-loop {
    .#{nth($type, 2)} {
		background-color: #{nth($type, 1)};
		border-color: #{nth($type, 1)};
		color: $default-white;
		
		&:hover,
		&:focus {
			color: $default-white;
			background-color: lighten(nth($type, 1),5%);
			border-color: lighten(nth($type, 1),5%);
		}
		
		&:active {
			background-color: darken(nth($type, 1),5%);
			border-color: darken(nth($type, 1),5%);
		}
		
		&.active {
			background-color: darken(nth($type, 1),5%);
			border-color: darken(nth($type, 1),5%);
			
			&:hover,
			&:focus {
				background-color: darken(nth($type, 1),5%);
				border-color: darken(nth($type, 1),5%);
			}
		}
	
		&.disabled,
		&:disabled {
			background-color: #{nth($type, 1)};
			border-color: #{nth($type, 1)};
			opacity: 0.35;
	
			&:hover,
			&:focus {
				background-color: #{nth($type, 1)};
				border-color: #{nth($type, 1)};
			}
		}

		&:not([disabled]):not(.disabled):active,
		&:not([disabled]):not(.disabled).active {
			background-color: #{nth($type, 1)};
			border-color: #{nth($type, 1)};

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

		&.btn-outline {
			background-color: transparent;
			color: #{nth($type, 1)};
			border-color: #{nth($type, 1)};

			&:hover,
			&:focus {
				background-color: #{nth($type, 1)};
				color: $default-white;
			}
		}
	}
}

// Loop for all gradient buttons
@each $type in $gradient-loop {
	.#{nth($type, 3)} {
		color: $default-white;
		background: #{nth($type, 1)};
		border: 0px;
	
		&:hover,
		&:focus {
			opacity: 0.7;
			color: $default-white;
			background: #{nth($type, 1)};
		}
	
		&.active,
		&:active {
			background: #{nth($type, 1)};
			color: $default-white;
		}
	
		&.disabled {
			&:hover,
			&:focus {
				opacity: 0.5;
			}
		}

		&:not([disabled]):not(.disabled):active,
		&:not([disabled]):not(.disabled).active {
			background: #{nth($type, 1)};
		}
	}
}	

//Loop for context buttons dropdown
.show {
	> .dropdown-toggle {
		@each $type in $contextual-loop {
			&.#{nth($type, 2)} {
				background-color: darken(nth($type, 1),5%);
				border-color: darken(nth($type, 1),5%);
				
				&:hover,
				&:focus {
					background-color: darken(nth($type, 1),5%);
					border-color: darken(nth($type, 1),5%);
					box-shadow: none;
				}
			}
		}
	}
}

// Loop for all social button 
@each $type in $social-loop {
	.#{nth($type, 2)} {
		background: #{nth($type, 1)};
		color: $default-white;
		
		&:hover,
		&:focus {
			background-color: lighten(nth($type, 1),12%);
			border-color: lighten(nth($type, 1),12%);
			color: $default-white;
		}

		&.btn-outline {
			border-color: #{nth($type, 1)};
			background: transparent;
			color: #{nth($type, 1)};

			&:hover,
			&:focus {
				background: #{nth($type, 1)};
				color: $default-white;
			}
		}
	}
}	

.btn-group {
	.btn {
		padding: 7px 14px;
		margin-right: 0px;
	}
	
	&.btn-group-vertical {
		.btn {
			margin-bottom: 0px;

			&:first-child:not(:last-child) {
				border-top-right-radius: 0.25rem;
			}

			&:last-child:not(:first-child) {
				border-bottom-left-radius: 0.25rem;
			}
		}
	}

	&.btn-group-round {

		.btn {
			&:first-child {
				border-top-left-radius: 50px;
				border-bottom-left-radius: 50px;
			}

			&:last-child {
				border-top-right-radius: 50px;
				border-bottom-right-radius: 50px;
			}
		}

		&.btn-group-vertical {
			.btn {
				&:first-child {
					border-top-left-radius: 50px;
					border-top-right-radius: 50px;
					border-bottom-left-radius: 0px;
				}
	
				&:last-child {
					border-bottom-left-radius: 50px;
					border-bottom-right-radius: 50px;
					border-top-right-radius: 0px;
				}
			}
		}
	}

	&.btn-group-lg {
		.btn {
			padding: 9px 17px;
		}
	}
}

.btn-icon {
	padding: 10px;
	line-height: 1;

	> i {
		font-size: 15px;
	}
}

.btn-lg,
.btn-group-lg > .btn {
	padding: 10px 30px;
    font-size: 16px;
}

.btn-sm,
.btn-group-sm > .btn {
	padding: 6px 12px;
	font-size: 12px;
}

.btn-xs, 
.btn-group-xs > .btn{
	padding: 5px 10px;
	font-size: 11px;
}

.btn-w-sm {
	padding-left: 12px;
	padding-right: 12px;
}

.btn-w-md {
	padding-left: 20px;
	padding-right: 20px;
}

.btn-w-lg {
	padding-left: 27px;
	padding-right: 27px;
}

.btn-w-xl {
	padding-left: 35px;
	padding-right: 35px;
}

.btn-rounded {
	border-radius: 50px;
}

.btn-float {
	@include box-shadow(0px, 7px, 20px, 2px rgba(9, 4, 25, 0.20)); 
}