//** Number of columns in the grid.
$grid-columns:              12 !default;
//** Padding between columns. Gets divided in half for the left and right.
$grid-gutter-width:         30px !default;

// Creates a wrapper for a series of columns
@mixin make-row($gutter: $grid-gutter-width) {
	//margin-left:  ($gutter / -2);
	//margin-right: ($gutter / -2);

	@include clearfix();
}

@mixin make-grid-columns($i: 1, $list: ".vfb-col-#{$i}") {
  @for $i from (1 + 1) through $grid-columns {
    $list: "#{$list}, .vfb-col-#{$i}";
  }
  #{$list} {
    position: relative;
    // Prevent columns from collapsing when empty
    min-height: 1px;
    // Inner gutter via padding
    padding-left:  ($grid-gutter-width / 2);
    padding-right: ($grid-gutter-width / 2);
  }
}

@mixin grid-columns( $class, $columns ) {
  @for $i from 1 through $columns {
    .vfb-col-#{$i} {
      width: percentage( ( $i / $grid-columns ) );

      @if $class != 'xs' {
	      float: left;
      }
    }
  }
}

// !Box sizing
@mixin box-sizing($boxmodel) {
  -webkit-box-sizing: $boxmodel;
     -moz-box-sizing: $boxmodel;
          box-sizing: $boxmodel;
}

// !Box shadow
@mixin box-shadow($shadow...) {
  -webkit-box-shadow: $shadow; // iOS <4.3 & Android <4.1
          box-shadow: $shadow;
}

// !Transition
@mixin transition($transition...) {
  -webkit-transition: $transition;
       -o-transition: $transition;
          transition: $transition;
}

// !Transform
@mixin transform($transform) {
	-webkit-trasnform: $transform;
	   -moz-transform: $transform;
	   	-ms-transform: $transform;
	     -o-transform: $transform;
            transform: $transform;
}

// !Border Radius
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}


// !Clearfix
//
// For modern browsers
// 1. The space content is one way to avoid an Opera bug when the
//    contenteditable attribute is included anywhere else in the document.
//    Otherwise it causes space to appear at the top and bottom of elements
//    that are clearfixed.
// 2. The use of `table` rather than `block` is only necessary if using
//    `:before` to contain the top-margins of child elements.
//
// Source: http://nicolasgallagher.com/micro-clearfix-hack/

@mixin clearfix() {
  &:before,
  &:after {
    content: " "; // 1
    display: table; // 2
  }
  &:after {
    clear: both;
  }
}

@mixin normalize() {
	line-height: 1.42857143;

	// Forms
	// ==========================================================================

	//
	// Known limitation: by default, Chrome and Safari on OS X allow very limited
	// styling of `select`, unless a `border` property is set.
	//

	//
	// 1. Correct color not being inherited.
	//    Known issue: affects color of disabled elements.
	// 2. Correct font properties not being inherited.
	// 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
	//

	button,
	input,
	optgroup,
	select,
	textarea {
	  color: inherit; // 1
	  font: inherit; // 2
	  margin: 0; // 3
	}

	//
	// Address `overflow` set to `hidden` in IE 8/9/10/11.
	//

	button {
	  overflow: visible;
	}

	//
	// Address inconsistent `text-transform` inheritance for `button` and `select`.
	// All other form control elements do not inherit `text-transform` values.
	// Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
	// Correct `select` style inheritance in Firefox.
	//

	button,
	select {
	  text-transform: none;
	}

	//
	// 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
	//    and `video` controls.
	// 2. Correct inability to style clickable `input` types in iOS.
	// 3. Improve usability and consistency of cursor style between image-type
	//    `input` and others.
	//

	button,
	html input[type="button"], // 1
	input[type="reset"],
	input[type="submit"] {
	  -webkit-appearance: button; // 2
	  cursor: pointer; // 3
	}

	//
	// Re-set default cursor for disabled elements.
	//

	button[disabled],
	html input[disabled] {
	  cursor: default;
	}

	//
	// Remove inner padding and border in Firefox 4+.
	//

	button::-moz-focus-inner,
	input::-moz-focus-inner {
	  border: 0;
	  padding: 0;
	}

	//
	// Address Firefox 4+ setting `line-height` on `input` using `!important` in
	// the UA stylesheet.
	//

	input {
	  line-height: normal;
	}

	//
	// It's recommended that you don't attempt to style these elements.
	// Firefox's implementation doesn't respect box-sizing, padding, or width.
	//
	// 1. Address box sizing set to `content-box` in IE 8/9/10.
	// 2. Remove excess padding in IE 8/9/10.
	//

	input[type="checkbox"],
	input[type="radio"] {
	  box-sizing: border-box; // 1
	  padding: 0; // 2
	}

	//
	// Fix the cursor style for Chrome's increment/decrement buttons. For certain
	// `font-size` values of the `input`, it causes the cursor style of the
	// decrement button to change from `default` to `text`.
	//

	input[type="number"]::-webkit-inner-spin-button,
	input[type="number"]::-webkit-outer-spin-button {
	  height: auto;
	}

	//
	// 1. Address `appearance` set to `searchfield` in Safari and Chrome.
	// 2. Address `box-sizing` set to `border-box` in Safari and Chrome
	//    (include `-moz` to future-proof).
	//

	input[type="search"] {
	  -webkit-appearance: textfield; // 1
	  -moz-box-sizing: content-box;
	  -webkit-box-sizing: content-box; // 2
	  box-sizing: content-box;
	}

	//
	// Remove inner padding and search cancel button in Safari and Chrome on OS X.
	// Safari (but not Chrome) clips the cancel button when the search input has
	// padding (and `textfield` appearance).
	//

	input[type="search"]::-webkit-search-cancel-button,
	input[type="search"]::-webkit-search-decoration {
	  -webkit-appearance: none;
	}

	//
	// Define consistent border, margin, and padding.
	//

	fieldset {
	  border: 1px solid #c0c0c0;
	  margin: 0 2px;
	  padding: 0.35em 0.625em 0.75em;
	}

	//
	// 1. Correct `color` not being inherited in IE 8/9/10/11.
	// 2. Remove padding so people aren't caught out if they zero out fieldsets.
	//

	legend {
	  border: 0; // 1
	  padding: 0; // 2
	}

	//
	// Remove default vertical scrollbar in IE 8/9/10/11.
	//

	textarea {
	  overflow: auto;
	}

	//
	// Don't inherit the `font-weight` (applied by a rule above).
	// NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
	//

	optgroup {
	  font-weight: bold;
	}
}


// Placeholder text
@mixin placeholder($color: $input-color-placeholder) {
  &::-moz-placeholder           { color: $color;   // Firefox
                                  opacity: 1; } // See https://github.com/twbs/bootstrap/pull/11526
  &:-ms-input-placeholder       { color: $color; } // Internet Explorer 10+
  &::-webkit-input-placeholder  { color: $color; } // Safari and Chrome
}


// WebKit-style focus
@mixin tab-focus() {
	// Default
	outline: thin dotted;
	// WebKit
	outline: 5px auto -webkit-focus-ring-color;
	outline-offset: -2px;
}

@mixin form-control-validation($text-color: #555, $border-color: #ccc, $background-color: #f5f5f5) {
	// Color the label and help text
	.vfb-help-block,
	.vfb-control-label,
	.vfb-radio,
	.vfb-checkbox,
	.vfb-radio-inline,
	.vfb-checkbox-inline  {
		color: $text-color;
	}

	// Set the border and box shadow on specific inputs to match
	.vfb-form-control {
		border-color: $border-color;
		@include box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work

		&:focus {
			border-color: darken($border-color, 10%);
			$shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten($border-color, 20%);
			@include box-shadow($shadow);
		}
	}

	// Set validation states also for addons
	.vfb-input-group-addon {
		color: $text-color;
		border-color: $border-color;
		background-color: $background-color;
	}

	// Optional feedback icon
	.vfb-form-control-feedback {
		color: $text-color;
	}
}

@mixin form-control-focus($color: $input-border-focus) {
	$color-rgba: rgba(red($color), green($color), blue($color), .6);
	&:focus {
		border-color: $color;
		outline: 0;
		@include box-shadow(inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px $color-rgba);
	}
}

