/**
 * Helper classes (floats, clears, colors, blah blah)
 * media query specific classes at bottom
*/

/**
 * @desc many many many helper classes for all breakpoints
 * @returns .{breakpoint}-{property}-{direction}-{size}, example: sm-marg-r-big
 */
 // @stylint off
for key, value in ( $directions )
	.{value}
		{value} 0

	.border-{key}
		border-{value} $border-micro

	.border-{key}-big
		border-{value} $border-big

	.marg-{key}-25
		margin-{value} $gutter-25

	.pad-{key}-25
		padding-{value} $gutter-25

	.marg-{key}-50
		margin-{value} $gutter-50

	.pad-{key}-50
		padding-{value} $gutter-50

	for k, v in ( $sizes )
		.{value}-{k}
			{value} v

		.marg-{key}-{k}
			margin-{value} v

		.pad-{key}-{k}
			padding-{value} v

		@media $mob
			+prefix-classes( 'mob-' )
				.marg-{key}-{k}
					margin-{value} v
				.pad-{key}-{k}
					padding-{value} v

		@media $sm
			+prefix-classes( 'sm-' )
				.marg-{key}-{k}
					margin-{value} v
				.pad-{key}-{k}
					padding-{value} v

		@media $med
			+prefix-classes( 'med-' )
				.marg-{key}-{k}
					margin-{value} v
				.pad-{key}-{k}
					padding-{value} v

		@media $big-plus
			+prefix-classes( 'big-' )
				.marg-{key}-{k}
					margin-{value} v
				.pad-{key}-{k}
					padding-{value} v
// @stylint on

// all directions
@media $mob
	+prefix-classes( 'mob-' )
		.marg
			margin $gutter-med
		.pad
			padding $gutter-med

@media $sm
	+prefix-classes( 'sm-' )
		.marg
			margin $gutter-med
		.pad
			padding $gutter-med

@media $med
	+prefix-classes( 'med-' )
		.marg
			margin $gutter-med
		.pad
			padding $gutter-med

@media $big-plus
	+prefix-classes( 'big-' )
		.marg
			margin $gutter-med
		.pad
			padding $gutter-med


/**
 * @desc opacity helperz
 * @returns opacity classes
 */
for $i in ( 0..9 )
	.opacity-{$i}
		opacity $i * .1


/**
 * @desc grayscale helperz
 * @returns gray classes
 */
for $key, $value in $grays
	.bg-gray-{$key}
		background-color $value
	.gray-{$key}
		color $value


/**
 * @desc section color helperz
 * @returns color classes for the 6 section colors
 */
for $key, $value in $section-colors
	.bg-{$key}
		background-color $value
	.color-{$key}
		color $value


// force a thing to be absolute positioned
.absolute
	position absolute


// or have a white bg
.bg-white
	background-color $white


// this is a border. yes, that's what that looks like
.border
	border $border-micro

// another one!
// @TODO this is dumb, was faked up for design, remove
.border-darker
	border 1px solid #ccc


// default box-shadow used on cards, header
.box-shadow
	box-shadow $depth-1


// box-shadow, creates the illusion of depth
.box-shadow-2
	box-shadow $depth-2


// box-shadow, creates the illusion of depth, use only on highest elements
.box-shadow-3
	box-shadow $depth-3


// make a thing a button
.button
	@extends $button-base


// centers an element, doesnt interfere with vertical margin
.center
	@extends $center


// change shape of element into circle
.circle
	border-radius 50%


// clearfix class version, break those floats
.clearfix
	@extends $clearfix


// float an item to the left, only above mobile
.float-l
	float left


// float an item to the right, only above mobile
.float-r
	float right


// force hide
.hide
	display none !important
	opacity 0


// make a thing inline-block
.inline-block
	display inline-block


/**
 * just adds an opacity transition (opacity accelerated by default)
 */
.fade
	transition( opacity, .35s, false )


// fixed position
.fixed
	position fixed


/**
 * used when we want to combine transitions with display none or display block
 * @requires prepareTransition jQuery plugin
*/
.is-transitioning
	display block !important
	visibility visible !important


// Link underline helper class
.link-underline
	a
		@extends $link-underline


// Link underline helper class
.link-underline-sm
	a
		@extends $link-underline-sm


// Dark link underline class
.link-underline-dark
	a
		@extends $link-underline-dark


// Dark link underline class
.link-underline-dark-sm
	a
		@extends $link-underline-dark-sm

// No underline
.no-underline
	a
		@extends $no-underline


// remove list styles from article lists
.list-none
	list-style none !important
	li:before
		content '' !important
		margin 0 !important
		width 0 !important


// marginz all around
.marg
	margin $gutter-med

// sm margins all around
.marg-sm
	margin $gutter-sm


// remove style helpers
.no-border
	border 0 !important


// force no margins
.no-marg
	margin 0 !important


// force no padding
.no-pad
	padding 0 !important


// no scroll (literally, no scrollbar no scrollin)
.no-scroll,
.overflow-hide
	overflow hidden


// padding all around
.pad-sm
	padding $gutter-sm


// padding all around
.pad
	padding $gutter-med


// add relative to a thing
.relative
	position relative


// force show
.show
	display block !important
	opacity 1


// center item, set width to max-width of site
.site-container
	site-container()

// collapse smart card but not on mobile
.squish
	@media $mob-plus
		{squish}


// text align center
.text-c
	text-align center


// text align right
.text-r
	text-align right

// text align left
.text-l
	text-align left

// same with you @TODO
.sm-thumb
	float left
	height 50px
	max-width 50px


// hmmm @TODO could be cleaned up a bit
.thumb
	float left
	height 75px
	max-width 75px
	width calc( 33% - 11.667px )


// class version for applying via js or whatever
.visually-hidden
	@extends $visually-hidden


// force a thing to be white
.white
	color $white


// mobile > small tablet helpers
@media $mob
	.float-l-mob
		float left
	.float-r-mob
		float right
	.hide-mob
		display none !important
	.show-mob
		display block
	.no-float-mob
		float none !important
	.squish-mob
		{squish}


// small tablet only helpers
@media $sm
	.hide-sm
		display none !important
	.show-sm
		display block
	.float-l-sm
		float left
	.float-r-sm
		float right
	.no-float-sm
		float none !important
	.squish-sm
		{squish}


// big tablet only helpers
@media $med
	.hide-med
		display none !important
	.show-med
		display block
	.float-l-med
		float left
	.float-r-med
		float right
	.no-float-med
		float none !important
	.squish-med
		{squish}


// below 800px tall
@media $short
	.hide-short
		display none !important
	.show-short
		display block
	.squish-short
		{squish}


// below 1000px tall
@media $tall
	.hide-tall-tab
		display none !important
	.show-tall-tab
		display block
	.squish-tall-tab
		{squish}


// tablet and below 800px tall
@media $short-tab
	.hide-short-tab
		display none !important
	.show-short-tab
		display block
	.squish-short-tab
		{squish}


// tablet and below 1000px tall
@media $tall-tab
	.hide-tall-tab
		display none !important
	.show-tall-tab
		display block
	.squish-tall-tab
		{squish}


// desktop helpers
@media $big-plus
	.hide-big
		display none !important
	.show-big
		display block
	.float-l-big
		float left
	.float-r-big
		float right
	.no-float-big
		float none !important
	.squish-big
		{squish}