@mixin btn_icn_width( $lineHeight: 20px, $verticalPadding: 10px ) {
	$wdth: 5 + $lineHeight + $verticalPadding * 2;
	min-width: $wdth;
	max-width: $wdth;
}


.btn-splited, .btn-divided {
	display: table;
    width: auto;
	width: 100%;
	// margin: 0 0 10px; 
	margin: 0; padding: 0;
	& > * {
		display: table-cell; position: relative;
		padding: $padding-base-vertical $padding-base-horizontal;
		font-size: inherit;
		line-height: inherit;
		text-shadow: inherit;
		color: inherit;
		width: auto;
		width: 98%;
		@include border-left-radius(0);
		vertical-align: middle;
		&:first-child { @include border-left-radius($border-radius-base); }
		&:last-child { @include border-right-radius($border-radius-base); }
		&.icn { 
			width: 2%;
			font-size: $font-size-base * 1.1;
			@include horizontal-padding(2px);
			text-align: center;
			@include btn_icn_width( $line-height-computed, $padding-base-vertical );
		}
	}
	
	&.btn-lg > * {
		padding: $padding-large-vertical $padding-large-horizontal;
		// font-size: $font-size-large;
		// line-height: $line-height-large;
		&:first-child { @include border-left-radius($border-radius-large); }
		&:last-child { @include border-right-radius($border-radius-large); }
		&.icn { font-size: $font-size-large * 1.1; @include btn_icn_width($line-height-computed-lg, $padding-large-vertical);}
	}
	&.btn-sm > * {
		padding: $padding-small-vertical $padding-small-horizontal;
		// font-size: $font-size-small;
		// line-height: $line-height-small;
		&:first-child { @include border-left-radius($border-radius-small); }
		&:last-child { @include border-right-radius($border-radius-small); }
		&.icn { font-size: $font-size-small * 1.1; @include btn_icn_width($line-height-computed-sm, $padding-small-vertical);}
	}
	&.btn-xs > * {
		padding: $padding-xs-vertical $padding-xs-horizontal;
		// font-size: $font-size-small;
		// line-height: $line-height-small;
		&:first-child { @include border-left-radius($border-radius-small); }
		&:last-child { @include border-right-radius($border-radius-small); }
		&.icn { font-size: $font-size-small * 1.1; @include btn_icn_width($line-height-computed-xs, $padding-xs-vertical); }
	}
	
	& > .icn {
		width: 2%;
		@include horizontal-padding(2px);
		text-align: center;
	}
	
}
.btn-divided {
	& > * {
		border-right-style: solid;
		border-right-width: 1px;
		border-right-color: inherit;
		@include box-shadow( inset -1px 0 1px 0 rgba(255,255,255,.32) );
		&:last-child {
			@include box-shadow( none );
			border-right: none;
		}
	}
}

// Vertically space out multiple block buttons
.btn-block + .btn-block {
  margin-top: 10px;
}
.btn-splited + .btn-splited, .btn-splited + .btn-divided, .btn-divided + .btn-splited, .btn-divided + .btn-divided {
  margin-top: 10px;
}


// 
//   Social - Buttons
// 
.btn-app, .btn-google, .btn-facebook, .btn-twitter, .btn-paypal,
.btn-app-nice, .btn-google-nice, .btn-facebook-nice, .btn-twitter-nice, .btn-paypal-nice {
    color: #fff;
	vertical-align: middle;
    &:hover, &:active { color: #fff; }
}

//.btn-socials {
//	padding: 5px 22px !important;
//}

// Flat Colors
$facebook-color: 	#3b5998;
$google-color: 		#dd4b39;
$twitter-color: 	#00aced;
$paypal-color: 		#12398c;
$paypal-color: 		#1784cb;
// Gradient Colors
$facebook-nice-top:       lighten($facebook-color, 7%);
$facebook-nice-bottom:    darken($facebook-color, 7%);
$google-nice-top:         lighten($google-color, 7%);
$google-nice-bottom:      darken($google-color, 7%);
$twitter-nice-top:        lighten($twitter-color, 7%);
$twitter-nice-bottom:     darken($twitter-color, 7%);
$paypal-nice-top:         #52b9f4;
$paypal-nice-bottom:      darken(#1784cb, 5%);



// Alternate buttons .. again with important color (to stay btn in navbar)
// --------------------------------------------------
.btn-default {
  @include btn-variant($btn-default-color, $btn-default-bg, $btn-default-border);
}
.btn-primary {
  @include btn-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
}
// Success appears as green
.btn-success {
  @include btn-variant($btn-success-color, $btn-success-bg, $btn-success-border);
}
// Info appears as blue-green
.btn-info {
  @include btn-variant($btn-info-color, $btn-info-bg, $btn-info-border);
}
// Warning appears as orange
.btn-warning {
  @include btn-variant($btn-warning-color, $btn-warning-bg, $btn-warning-border);
}
// Danger and error appear as red
.btn-danger {
  @include btn-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border);
}

.btn-brand {
  @include btn-variant($btn-brand-color, $btn-brand-bg, $btn-brand-border);
}


// Socials
.btn-facebook {
  @include btn-variant($btn-facebook-color, $btn-facebook-bg, $btn-facebook-border);
}
.btn-google {
  @include btn-variant($btn-google-color, $btn-google-bg, $btn-google-border);
}
.btn-twitter {
  @include btn-variant($btn-twitter-color, $btn-twitter-bg, $btn-twitter-border);
}
.btn-paypal {
  @include btn-variant($btn-paypal-color, $btn-paypal-bg, $btn-paypal-border);
}


// Nice Buttons
.btn-facebook-nice, .btn-google-nice, .btn-twitter-nice, .btn-paypal-nice {
	color: #fff;
	@include box-shadow( inset 0 1px 0 0 rgba(255,255,255,.42), 0 1px 1px 0 rgba(0,0,0,.42) );
	&.btn-icn, & > .btn-icn {
		@include box-shadow( inset 0 1px 0 0 rgba(255,255,255,.42), 0 1px 1px 0 rgba(0,0,0,.42), inset -1px 0 1px 0 rgba(255,255,255,.32) );
	}
	&:hover { color: #fff; }
}

.btn-facebook-nice {
  @include btn-with-gradient($btn-facebook-color, $facebook-gradient-top, $facebook-gradient-bottom, $btn-facebook-border);
}
.btn-google-nice {
  @include btn-with-gradient($btn-google-color, $google-gradient-top, $google-gradient-bottom, $btn-google-border);
}
.btn-twitter-nice {
  @include btn-with-gradient($btn-twitter-color, $twitter-gradient-top, $twitter-gradient-bottom, $btn-twitter-border);
}
.btn-paypal-nice {
  @include btn-with-gradient($btn-paypal-color, $paypal-gradient-top, $paypal-gradient-bottom, $btn-paypal-border);
}

.btn-link {
  color: $link-color !important;
  background-color: transparent !important;
  border-color: transparent !important;
  &:hover,
  &:focus,
  &:active,
  &.active,
  .open > &.dropdown-toggle {
    color: $link-hover-color !important;
    background-color: transparent !important;
    border-color: transparent !important;
    background-image: none;
  }
}




// # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # 
// 
//   D E P R E A C A T E D   . . .   will be removed soon !
// 
// # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # 


.btn-group-block.input-group {
	.btn {
		text-align: left;
		padding: 10px;
		&.icn {
			text-align: center;
		}
	}
}

.btn-group-block {
	@include box-sizing(border-box);
	display: table;
    width: 100%;
    margin: 0 0 10px;
	text-decoration: none;
    .btn {
		display: table-cell;
		width: auto;
		width: 95%;
		&.btn-icn {
			width: 5%;
			font-size: 18px;
			@include box-shadow( inset -1px 0 1px 0 rgba(255,255,255,.32) );
			min-width: 42px;
			max-width: 44px;
			text-align: center;
			@include horizontal-padding(5px);
		}
		border-collapse: separate;
        border-spacing: 0;
		@include border-radius(0);
		
		&:first-child { @include border-left-radius(5px); }
        &:last-child { @include border-right-radius(5px); }
    }
	.btn + .btn {
		border-left: none;
	}
	
	&.lineless {
		.btn {
			border-left-width: 0;
			border-right-width: 0;
			@include box-shadow( none );
			&:first-child { border-left-width: 0; }
			&:last-child { border-right-width: 0; }
		}
	}
	
	&.half { width: 50%; margin-left: auto; margin-right: auto; }
	&:hover { text-decoration: none !important; }
}