/* Buttons */
.btn-default {
	color: #333;
    background-color: #fff;
    border-color: #ccc;
    box-shadow: none !important;
	
	&:hover, &:active, &:focus  {
    	color: #333;
    	background-color: #e6e6e6;
    	border-color: #adadad;
    }
}

.btn {
	font-size: 0.9rem;
	padding: 0.47rem 0.75rem;
	cursor: pointer;

	&.btn-xs {
		font-size: 0.7rem;
		padding: 0.2rem 0.5rem;
	}

	&.btn-sm {
		font-size: 0.8rem;
		padding: 0.3rem 0.65rem;
	}

	&.btn-lg {
		font-size: 1rem;
		padding: 0.5rem 1rem;
	}

	&.btn-xl {
		font-size: 1rem;
		padding: 0.8rem 2rem;
	}

	// Paddings
	&.btn-px-1 {
		padding-left: .35rem;
		padding-right: .35rem;
	}

	&.btn-px-2 {
		padding-left: .75rem;
		padding-right: .75rem;
	}

	&.btn-px-3 {
		padding-left: 1.25rem;
		padding-right: 1.25rem;
	}

	&.btn-px-4 {
		padding-left: 1.75rem;
		padding-right: 1.75rem;
	}

	&.btn-px-5 {
		padding-left: 2.4rem;
		padding-right: 2.4rem;
	}

	&.btn-py-1 {
		padding-top: .35rem;
		padding-bottom: .35rem;
	}

	&.btn-py-2 {
		padding-top: .75rem;
		padding-bottom: .75rem;
	}

	&.btn-py-3 {
		padding-top: 1.25rem;
		padding-bottom: 1.25rem;
	}

	&.btn-py-4 {
		padding-top: 1.75rem;
		padding-bottom: 1.75rem;
	}

	&.btn-py-5 {
		padding-top: 2rem;
		padding-bottom: 2rem;
	}
}

/* Rounded */
.btn-rounded {
	border-radius: 35px;
}

/* Modern */
.btn-modern {
    text-transform: uppercase;
	font-size: .8em;
	padding: 0.8rem 1.5rem;
	font-weight: 600;
}

/* Icons  */
.btn-icon i {
	margin-#{$right}: 10px;
}

.btn-icon-right i {
	margin-#{$right}: 0;
	margin-#{$left}: 10px;
}

/* Colors */
@each $state in $states {
	$color: nth($state, 2);
	$textColor: nth($state, 3);

	.btn-#{nth($state,1)} {
		background-color: $color;
		border-color: $color $color darken($color, 10%);
		color: $textColor;

		&:hover,
		&.hover {
			background-color: lighten($color, 7.5%);
			border-color: lighten($color, 10%) lighten($color, 10%) $color;
			color: $textColor;
		}

		&:focus,
		&.focus {
			box-shadow: 0 0 0 3px rgba($color, .5);
			color: $textColor;
		}

		&.disabled,
		&:disabled {
			background-color: $color;
			border-color: $color $color darken($color, 10%);
		}

		&:active,
		&.active,
		.show > &.dropdown-toggle {
			background-color: darken($color, 7.5%);
			background-image: none;
			border-color: darken($color, 10%) darken($color, 10%) darken($color, 20%);
		}
	}

	.show > .btn-#{nth($state,1)}.dropdown-toggle {
		background-color: darken($color, 7.5%);
		background-image: none;
		border-color: darken($color, 10%) darken($color, 10%) darken($color, 20%);
	}
}

/* Gradient */
.btn-gradient:not(.btn-outline) {
	border: 0;

	&:hover,
	&.hover {
		border: 0;
	}

	&:focus,
	&.focus {
		border: 0;
	}

	&.disabled,
	&:disabled {
		border: 0;
	}

	&:active,
	&.active {
		border: 0;
	}
}

.btn-gradient.btn-outline {
	border: 2px solid transparent;
	background: transparent;
	border-image-slice: 1 !important;

	&:hover,
	&.hover {
		border: 2px solid transparent;
	}

	&.disabled,
	&:disabled {
		border: 2px solid transparent;
	}

	&:active,
	&.active {
		border: 2px solid transparent;
	}
}

html {
	// SOCIAL BUTTONS
	// -----------------------------------------------------------------------------
	/* Buttons - Social */
	.btn-facebook,
	.btn-twitter,
	.btn-gplus {
		&,
		&:active,
		&:hover,
		&:focus {
			color: #FFF;
			font-weight: 300;
			padding-left: 30px;
			padding-right: 30px;
			text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
		}
	}

	.btn-facebook {
		&,
		&:focus {
			background: #3B5998;
			border: 1px solid #37538D;
		}

		&:hover {
			background: lighten( #3B5998, 4% );
			border-color: lighten( #37538D, 4% );
		}

		&:active {
			background: darken( #3B5998, 3% );
			border-color: darken( #37538D, 3% );
		}
	}

	.btn-twitter {
		&,
		&:focus {
			background: #55ACEE;
			border: 1px solid #47A5ED;
		}

		&:hover {
			background: lighten( #55ACEE, 3% );
			border-color: lighten( #47A5ED, 3% );
		}

		&:active {
			background: darken( #55ACEE, 3% );
			border-color: darken( #47A5ED, 3% );
		}
	}

	.btn-gplus {
		&,
		&:focus {
			background: #D95232;
			border: 1px solid #D44927;
		}

		&:hover {
			background: lighten( #D95232, 4% );
			border-color: lighten( #D44927, 4% );
		}

		&:active {
			background: darken( #D95232, 4% );
			border-color: darken( #D44927, 4% );
		}
	}

}

/* Buttons Icon */
.btn-icon i {
	margin-right: 10px;
}

.btn-icon-right i {
	margin-right: 0;
	margin-left: 10px;
}

// DARK
// -----------------------------------------------------------------------------
html.dark {
	.btn-default {
		background-color: $dark-color-3;
		border-color: $dark-color-3;
		color: #EEE;

		&:hover {
			background-color: lighten($dark-color-3, 1%);
			border-color: lighten($dark-color-3, 1%);
		}

		&:focus,
		&:active {
			background-color: darken($dark-color-3, 2%);
			border-color: darken($dark-color-3, 2%);
		}
	}

	.btn-default:hover,
	.btn-default:focus,
	.btn-default:active,
	.btn-default.active,
	.show > .dropdown-toggle.btn-default {
		color: #EEE;
		background-color: darken($dark-color-3, 2%);
		border-color: darken($dark-color-3, 2%);
	}
}