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

.btn-xl, .btn-group-xl > .btn {
    padding: $padding-xl-vertical $padding-xl-horizontal;
    font-size: $font-size-xl;
    line-height: $line-height-xl;
    border-radius: $border-radius-xl;
}


.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-xl > * {
		padding: $padding-xl-vertical $padding-xl-horizontal;
		font-size: $font-size-xl;
        line-height: $line-height-xl;
		&:first-child { @include border-left-radius( $border-radius-xl ); }
		&:last-child { @include border-right-radius( $border-radius-xl ); }
		&.icn { font-size: $font-size-xl * 1.1; @include btn_icn_width($line-height-computed-xl, $padding-xl-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-xs); }
		&:last-child { @include border-right-radius($border-radius-xs); }
		&.icn { font-size: $font-size-xs * 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; }
}




// 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-blank { @include btn-blank-variant($btn-default-color, $btn-default-border, #fff); }
  &.btn-blank-soft { @include btn-blank-variant($btn-default-color, transparentize($btn-default-border, .50), #fff); }
  &.btn-blur { @include btn-blur-variant( $btn-default-color, $btn-default-bg, $btn-default-border ); }
}

$whiteBgButtons: primary success danger brand facebook google twitter paypal one two three;
$darkBgButtons: info warning;

@each $thatBtn in $whiteBgButtons {
    .btn-#{$thatBtn} {
	    @include btn-variant(map-get($appColorz, btn-#{$thatBtn}-color), map-get($appColorz, btn-#{$thatBtn}-bg), map-get($appColorz, btn-#{$thatBtn}-border));
        &.btn-blank { @include btn-blank-variant(map-get($appColorz, btn-#{$thatBtn}-bg), map-get($appColorz, btn-#{$thatBtn}-border), #fff); }
        &.btn-blank-soft { @include btn-blank-variant(map-get($appColorz, btn-#{$thatBtn}-bg), transparentize(map-get($appColorz, btn-#{$thatBtn}-border), .50), #fff); }
        &.btn-blur { @include btn-blur-variant(map-get($appColorz, btn-#{$thatBtn}-color), map-get($appColorz, btn-#{$thatBtn}-bg), map-get($appColorz, btn-#{$thatBtn}-border) ); }
    }
}

@each $thatBtn in $darkBgButtons {
    .btn-#{$thatBtn} {
	    @include btn-variant(map-get($appColorz, btn-#{$thatBtn}-color), map-get($appColorz, btn-#{$thatBtn}-bg), map-get($appColorz, btn-#{$thatBtn}-border));
        &.btn-blank { @include btn-blank-variant(map-get($appColorz, btn-#{$thatBtn}-bg), map-get($appColorz, btn-#{$thatBtn}-border), #444); }
        &.btn-blank-soft { @include btn-blank-variant(map-get($appColorz, btn-#{$thatBtn}-bg), transparentize(map-get($appColorz, btn-#{$thatBtn}-border), .50), #444); }
        &.btn-blur { @include btn-blur-variant(map-get($appColorz, btn-#{$thatBtn}-color), map-get($appColorz, btn-#{$thatBtn}-bg), map-get($appColorz, btn-#{$thatBtn}-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;
    box-shadow: none;
  }
}


.btn-round {
    @include horizontal-padding( 18px );
    -webkit-border-radius: 100px !important;
       -moz-border-radius: 100px !important;
        -ms-border-radius: 100px !important;
         -o-border-radius: 100px !important;
            border-radius: 100px !important;
    &.btn-xs { @include horizontal-padding( 12px ); }
    &.btn-sm { @include horizontal-padding( 15px ); }
    &.btn-lg { @include horizontal-padding( 23px ); }
    &.btn-xl { @include horizontal-padding( 30px ); }
}

.btn-borderless {
    border: none !important;
}

.btn-width {
    @include horizontal-padding( 30px );
    &.btn-xs { @include horizontal-padding( 10px ); }
    &.btn-sm { @include horizontal-padding( 20px ); }
    &.btn-lg { @include horizontal-padding( 40px ); }
    &.btn-xl { @include horizontal-padding( 50px ); }
}



// # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # 
// 
//   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 $general-vertical-spacing-half;
	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; }
}