@mixin squareSize( $size ) {
	width: #{ $size }px;
	height: #{ $size }px;
}

@mixin square-size( $size ) {
	width: $size;
	height: $size;
}

@mixin horizontal-padding( $pad: 5px ) {
	padding-left: $pad; padding-right: $pad;
}
@mixin vertical-padding( $pad: 5px ) {
	padding-top: $pad; padding-bottom: $pad;
}
@mixin horizontal-margin( $pad: 5px ) {
	margin-left: $pad; margin-right: $pad;
}
@mixin vertical-margin( $pad: 5px ) {
	margin-top: $pad; margin-bottom: $pad;
}





// Button helper from twbs ..changed
@mixin btn-variant($color, $background, $border) {
  color: $color !important;
  background-color: $background !important;
  border-color: $border !important;

  &:hover,
  &:focus,
  &:active,
  &.active,
  .open > &.dropdown-toggle {
    color: $color !important;
    background-color: darken($background, 7%) !important;
    border-color: darken($border, 12%) !important;
  }
  &:active,
  &.active,
  .open > &.dropdown-toggle {
    background-color: darken($background, 10%) !important;
    background-image: none;
  }
  &.disabled,
  &[disabled],
  fieldset[disabled] & {
    &,
    &:hover,
    &:focus,
    &:active,
    &.active {
      background-color: $background !important;
      border-color: $border !important;
    }
  }

  .badge {
    color: $background;
    background-color: $color;
  }
}

// Button helper for blank buttons
@mixin btn-blank-variant( $color, $border, $badge-color: #fff ) {
  color: $color !important;
  background-color: transparent !important;
  border-color: $border !important;

  &:hover,
  &:focus,
  &:active,
  &.active,
  .open > &.dropdown-toggle {
    color: darken($color, 12%) !important;
    background-color: transparent !important;
    border-color: darken($border, 12%) !important;
  }
  &:active,
  &.active,
  .open > &.dropdown-toggle {
    background-color: transparent !important;
    border-color: darken($border, 10%) !important;
  }
  &:active,
  &.active,
  .open > &.dropdown-toggle {
    background-image: none;
  }
  &.disabled,
  &[disabled],
  fieldset[disabled] & {
    &,
    &:hover,
    &:focus,
    &:active,
    &.active {
      color: lighten($color, 10%) !important;
      background-color: transparent !important;
      border-color: lighten($border, 10%) !important;
    }
  }

  .badge {
    color: #fff;
    background-color: $color;
  }
}

@mixin btn-blur-variant($color, $background, $border) {
    @include btn-variant( $color, transparentize($background, .6), transparentize($border, .6) );
}


// Labels
// -------------------------
@mixin label-variant( $background, $color: $label-color, $color-hover: $label-link-hover-color ) {
  background-color: $background;
  color: $color;
  &[href] {
    &:hover,
    &:focus {
        color: $label-link-hover-color;
        background-color: darken($background, 10%);
    }
  }
}

@mixin label-blank-variant( $color ) {
  background-color: transparent;
  color: $color;
  border: solid 1px $color;
  &[href] {
    &:hover,
    &:focus {
        color: darken($color, 10%);
        border: solid 1px darken($color, 10%);
        background-color: transparent;
    }
  }
}

@mixin label-blank-soft-variant( $color ) {
  background-color: transparent;
  color: $color;
  border: solid 1px transparentize($color, .60);;
  &[href] {
    &:hover,
    &:focus {
        color: darken($color, 10%);
        border: solid 1px transparentize($color, .42);
        background-color: transparent;
    }
  }
}



// Button helper from twbs ..changed
@mixin btn-with-gradient($color, $top-bg, $bottom-bg, $border) {
  color: $color !important;
  @include linear-gradient($top-bg, $bottom-bg);
  border-color: $border !important;
  text-shadow: 0 1px 0 darken($bottom-bg, 20%);

  &:hover,
  &:focus,
  &:active,
  &.active,
  .open > &.dropdown-toggle {
    color: $color !important;
    @include linear-gradient( darken($top-bg, 5%), darken($bottom-bg, 5%));
    border-color: darken($border, 12%) !important;
  }
  &:active,
  &.active,
  .open > &.dropdown-toggle {
    @include linear-gradient( darken($top-bg, 10%), darken($bottom-bg, 10%));
  }
  &:active,
  &.active,
  .open > &.dropdown-toggle {
    background-image: none;
  }
  &.disabled,
  &[disabled],
  fieldset[disabled] & {
    &,
    &:hover,
    &:focus,
    &:active,
    &.active {
      @include linear-gradient($top-bg, $bottom-bg);
      border-color: $border !important;
    }
  }

  .badge {
    color: $bottom-bg;
    background-color: $color;
  }
}
@mixin default-btn-with-gradient($color, $bg, $border) {
    @include btn-with-gradient($color, lighten($bg, 7%), darken($bg, 7%), $border);
}



@mixin sized-navbar( $navHeight: 50px ) {
	$padHorizontal: floor(($navHeight - $line-height-computed) / 2);
	$lineHeight: $navHeight - $padHorizontal * 2;
	
	height: $navHeight + 1;
	min-height: $navHeight + 1;
	
	.navbar-brand {
		padding: $padHorizontal $navbar-padding-horizontal;
		line-height: $lineHeight;
		height: $navHeight;
	}
	.navbar-header { height: #{$navHeight}; }
	
	.navbar-toggle {
		@if ( 16px + 14 ) > ($navHeight - 5) {
			margin: 4px 15px;
			@include vertical-padding( $padHorizontal - 3px );
			line-height: 16px;
		} @else {
			margin: #{$padHorizontal - 6px} 15px;
			@include vertical-padding( 7px );
			line-height: 16px;
		}
	}
	
	.navbar-nav {
		// a:not(.btn) { }
		& > li > a, & > a  {
			padding: $padHorizontal $navbar-padding-horizontal;
			line-height: $lineHeight;
			
			&.btn {
				@if ($lineHeight + 10) > ($navHeight - 5) {
					margin: 4px 5px;
					@include vertical-padding( $padHorizontal - 5px );
					line-height: $lineHeight;
				} @else {
					margin: #{$padHorizontal - 6px} 5px;
					@include vertical-padding( 5px );
					line-height: $lineHeight;
					
					@if ($lineHeight + 16) < ($navHeight - 5) {
						&.btn-lg {
							margin: #{$padHorizontal - 9px} 5px;
							@include vertical-padding( 8px );
						}
					}
					
					&.btn-sm {
						margin: #{$padHorizontal - 4px} 5px;
						@include vertical-padding( 3px );
					}
					&.btn-xs {
						margin: #{$padHorizontal - 2px} 5px;
						@include vertical-padding( 1px );
					}
					
				}
			}
		}
	}
}