// _preboot.scss

// Variables
// --------------------------------------------------

//Vars
$content-width: 970px !default;
$menu-width: 330px;

//Descriptive colors
$bg-light: #fefefe;
$bg-lightgray: #f3f4f5;
$accent: #53b38c;
$detail-lightgray: #b1b7ba;
$detail-black: #13171a;
$detail-basegray: #484b50;
$detail-washedgray: #859093;

//Fonts
$sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;
$mono: 'Andale Mono', AndaleMono, Consolas, Monaco, monospace;

//Baseline
$base: 20px;

//Break points
$one: 600px;
$two: 800px;
$grid-breakpoint: 650px;

//Element
$indent: 1.5em;
$rule: 1px solid $bg-lightgray;

//Headings
$heading-size-1: 30px !default;
$heading-size-2: 27px !default;
$heading-size-3: 23px !default;
$heading-size-4: 20px !default;
$heading-size-5: 17px !default;
$heading-size-6: 14px !default;

$baseline-px: 16px !default;
$base-line-height: 24px !default;
$base-spacing-unit: $base-line-height;

// Mixins
// --------------------------------------------------
@mixin no-select {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

@mixin for($media) {
	@if $media == small-screens {
		@media screen and (min-width: $one) {
			@content;
		}
	} @else if $media == medium-screens {
		@media screen and (min-width: $two) {
			@content;
		}
	}
}

@mixin rem($property, $px-values, $important: false) {
	// Convert the baseline into rems
	$baseline-rem: $baseline-px / 1rem;

	@if $important == true {
		$important: ' !important';
	} @else {
		$important: '';
	}

	// Print the first line in pixel values
	#{$property}: unquote($px-values + $important);
	// If there is only one (numeric) value, return the property/value line for it.
	@if type-of($px-values) == 'number' {
		#{$property}: unquote($px-values / $baseline-rem + $important);
	} @else {
		// Create an empty list that we can dump values into
		$rem-values: unquote('');
		@each $value in $px-values {
			// If the value is zero, return 0
			@if $value == 0 {
				$rem-values: append($rem-values, $value);
			} @else {
				$rem-values: append($rem-values, $value / $baseline-rem);
			}
		}
		// Return the property and its list of converted values
		#{$property}: unquote($rem-values + $important);
	}
}

$default-feature: min-width; // Default @media feature for the breakpoint() mixin

// Usage:
// @include media(500px){ …css stuff… }, will output - (min-width: 500px)
// @include media(max-width 500px){ …css stuff… }, will output - (max-width: 500px)
// @include media(max-width 500px min-width 800px){ …css stuff… }, will output - (max-width: 500px) and (min-width: 800px)
@mixin media($query: $feature $value) {
	@if length($query) == 1 {
		@media screen and ($default-feature: nth($query, 1)) {
			@content;
		}
	} @else if length($query) == 2 {
		@media screen and (nth($query, 1): nth($query, 2)) {
			@content;
		}
	} @else if length($query) == 4 {
		@media screen and (nth($query, 1): nth($query, 2)) and (nth($query, 3): nth($query, 4)) {
			@content;
		}
	} @else {
		@warn 'Wrong number of arguments for breakpoint(). Read the documentation for more details.';
	}
}

// Extends
// --------------------------------------------------
%cf {
	zoom: 1;
	&:before,
	&:after {
		display: table;
		content: '';
	}
	&:after {
		clear: both;
	}
}

@mixin no-select {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

%break-word {
	word-break: break-word;
	word-wrap: break-word;
}

%vertical-align {
	position: relative;
	top: 50%;
	@include transform(translateY(-50%));
}

%inside {
	max-width: $content-width;
	margin: {
		left: auto;
		right: auto;
	}
	@include media(max-width $content-width) {
		padding: {
			left: 20px;
			right: 20px;
		}
	}
}

%site-width {
	max-width: $content-width;
	margin: {
		left: auto;
		right: auto;
	}
	@include media(max-width $content-width) {
		padding: {
			left: $base;
			right: $base;
		}
	}
}

// Functions
// ---------------------------------------------------

// Maths helpers.
// Halve and double numbers, returning rounded integers. E.g.:
//
// 	.foo {
//     padding: halve(3.2px);
// 	}
//
@function quarter($number) {
	@return round($number / 4);
}

@function halve($number) {
	@return round($number / 2);
}

@function double($number) {
	@return round($number * 2);
}

@function strip-units($val) {
	@return ($val / ($val * 0 + 1));
}

// Convert pixels to ems
// eg. for a relational value of 12px write em(12) when the parent is 16px
// if the parent is another value say 24px write em(12, 24)
@function em($pxval, $base: 16px) {
	@if not unitless($pxval) {
		$pxval: strip-units($pxval);
	}
	@if not unitless($base) {
		$base: strip-units($base);
	}
	@return ($pxval / $base) * 1em;
}
