// This document is not to be edited as it will be versioned
// -----------------------------------------------------------------


// This document is to house Toadstools dynamic mixins with arguments
// These mixins are not intended to be application specific


// required default value to for vendor prefix support
// -----------------------------------------------------
$prefix_defaults: -moz- -webkit- -o- -ms- '' !default;
$webkit_support: -webkit- !default;
$moz_support: -moz- !default;
$ms_support: -ms- !default; 
$moz_webkit_support: -moz- -webkit- !default;
$moz_ms_support: -moz- -ms- !default;
$webkit_ms_support: -webkit- -ms- !default;




/////// shadow arguments /////////
// -------------------------------
// Config values for all default shadows
// -----------------------------------------------------------------------------
$h-shadow:                             0 !default;                // horizontal shadow settings
$v-shadow:                             2 !default;                // vertical shaddow settings
$blur:                                 3 !default;                // blur settings

$inset_color:                          $shadow_color !default;    // for use with ``dual_box_shadow`` mixin
$ih-shadow:                            0 !default;                // inset horizontal shadow settings
$iv-shadow:                            2 !default;                // inset vertical shaddow settings
$is-shadow:                            2 !default;                // inset spread shaddow settings
$iblur:                                3 !default;                // inset blur settings


$shadow: em($h-shadow) em($v-shadow) em($blur);
$inset_shadow: em($ih-shadow) em($iv-shadow) em($iblur) em($is-shadow);

@mixin box_shadow ($shadow_color, $shadow, $prefixes: $prefix_defaults) {
  @each $prefix in $prefixes {
    #{$prefix}box-shadow: $shadow_color $shadow;
  }
}

@mixin dual_box_shadow ($shadow_color, $shadow, $inset_color, $inset_shadow, $prefixes: $prefix_defaults) {
  @each $prefix in $prefixes {
    #{$prefix}box-shadow: $shadow_color $shadow, inset $inset_color $inset_shadow;
  }
}

@mixin text_shadow ($shadow_color, $shadow, $prefixes: $prefix_defaults) {
  @each $prefix in $prefixes {
    #{$prefix}text-shadow: $shadow_color $shadow;
  }
}
/////// shadow arguments /////////



/////// border-radius arguments /////////
// --------------------------------------
@mixin border_radius ($border_radius, $prefixes: $webkit_support) {
  @each $prefix in $prefixes {
    #{$prefix}border-radius: $border_radius;
  }
}
/////// border-radius arguments /////////



/////// box-sizing arguments  /////////
// --------------------------------------
@mixin box_sizing ($box_sizing: border-box, $prefixes: $prefix_defaults) {
  @each $prefix in $prefixes {
    #{$prefix}box-sizing: $box_sizing;
  }
}
/////// box-sizing arguments  /////////



/////// input_placeholder arguments /////////
// --------------------------------------
@mixin input_placeholder ($placeholder_color: $placeholder_color) {
  &::-webkit-input-placeholder {
    color: $placeholder_color;
  }
  &:-moz-placeholder {
    color: $placeholder_color;
  }
  &:-ms-input-placeholder {
    color: $placeholder_color;
  }
}
/////// input_placeholder arguments /////////




/////////// image with gradient background ////////////
// ------------------------------------------------- //

// This tool is pretty crazy and a little complex. Purpose is to simplify the creation of dual background assets that consist of an image and a gradient background. 
// This tool also requires that a gradient object be created as variables. 
// Known restrictions ... images must be .png, position of background is currently hard-coded
@mixin icon_gradient_background($icon_image, $fallback_color, $w3c_color_spec, $safari_color_spec, $ie_start, $ie_stop) {
  // w3c //: 
  @include linear_gradient_bkgimage ('#{$imgDir}#{$icon_image}.png',5% 50%, $fallback_color, $w3c_color_spec);
  // legacy safari //
  @include linear_gradient_bkgimage_legacy_safari ('#{$imgDir}#{$icon_image}.png', 5% 50%, $safari_color_spec);
  // IE suck
  @include linear_gradient_legacy_ie ($ie_start, $ie_stop);
}

// Example using this mixin
// .your_new_class {
//  @include icon_gradient_background(
//    $icon_image: play_icon, 
//    $fallback_color: $echo_color_bravo, 
//    $w3c_color_spec: $alpha_color_gradient_var_w3c, 
//    $safari_color_spec: $alpha_color_gradient_var_legacy_safari, 
//    $ie_start: $echo_color_delta, 
//    $ie_stop: $echo_color_delta);
//  }
// }



/////// column count arguments  /////////
// --------------------------------------
@mixin column_count($col_count, $col_gap, $prefixes: $prefix_defaults) {
  @each $prefix in $prefixes {
    #{$prefix}column-count: $col_count;
    #{$prefix}column-gap: $col_gap;
  }
}
/////// column count arguments  /////////



///////// flexbox arguments /////////
// -----------------------------------
@mixin flexbox (
$width, 
$height, 
$orient: horizontal,
$direction: row, 
$pack: center, 
$align: center, 
$wrap: none,
$prefixes: $prefix_defaults,
$legacyPrefixes: $moz_webkit_support) {
  @each $prefix in $legacyPrefixes {
    .flexboxlegacy & {
      display: #{$prefix}box;
      #{$prefix}box-orient: $orient;
      #{$prefix}box-pack: $pack;
      #{$prefix}box-align: $align;
    } 
  }
  // As of 15.0.1 Mozilla does not support the new Flexbox spec
  @each $prefix in $webkit_ms_support {
    .flexbox & {
      display: -ms-flexbox;
      display: -webkit-flex;
      #{$prefix}flex-direction: $direction;
      #{$prefix}flex-align: $align;
      #{$prefix}flex-pack: $pack;
      #{$prefix}flex-wrap: $wrap;
    }
  }
  .no-flexbox & {
    width: 100%;
    float: left;
  }
  height: $height;
  width: $width;
}

  
@mixin flex (
$value, 
$prefixes: $prefix_defaults,
$legacyPrefixes: $moz_webkit_support) {
  @each $prefix in $legacyPrefixes {
    .flexboxlegacy & {
      #{$prefix}box-flex: $value;
    } 
  }
  @each $prefix in $prefixes {
    .flexbox & {
      #{$prefix}flex: $value;
    }
  }
  .no-flexbox & {
    float: left;
  }
}
///////// flexbox arguments /////////



/////// transition arguments //////////
// http://www.w3schools.com/css3/css3_pr_transition.asp
@mixin transition ($property, $duration, $timing_function, $delay, $prefixes: $prefix_defaults) {
  @each $prefix in $prefixes {
    #{$prefix}transition: $property $duration $timing_function $delay;
  }
}
/////// transition arguments //////////



/////// transform arguments //////////
// http://www.w3schools.com/css3/css3_pr_transform.asp
@mixin transform ($function, $prefixes: $prefix_defaults) {
  @each $prefix in $prefixes {
    #{$prefix}transform: $function;
  }
}
/////// transform arguments //////////



////////// style placeholder text //////////
@mixin placeholder_styles ($color) {
  color: $color;
}

@mixin placeholder ($color) {
  &::-webkit-input-placeholder {
    @include placeholder_styles ($color);
  }
  &:-moz-placeholder {
    @include placeholder_styles ($color);
  }
  &:-ms-input-placeholder {
    @include placeholder_styles ($color);
  }
}
////////// style placeholder text //////////



////////////// hide text ////////////
// Kellum Method
// http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/
@mixin hide_text {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  display: none;
}
////////////// hide text ////////////



/////// clearfix //////////
@mixin clearfix () {
  zoom: 1;
  &:before {
    content: "\0020";
    display: block;
    height: 0;
    overflow: hidden;
  }
  &:after {
    content: "\0020";
    display: block;
    height: 0;
    overflow: hidden;
    clear: both;
  }
}
/////// clearfix //////////



///////// inset border /////////
@mixin inset_border () {
  @include box_shadow(inset 0 0 1px, $alpha_gray);
}
///////// inset border /////////



/////// center text trick /////////
// ---------------------------------
// By setting the height of the block element and the line-height to the same value
// this will typically center the text in the block.
// If for some reason this needs adjustment, set a new value for the $line_height.
//
//
@mixin center_text ($block_height, $line_height: $block_height) {
  height: $block_height;
  line-height: $line-height;
}
/////// center text trick /////////



// a standardized border radius
// ----------------------------
@mixin standard_rounded_border ($standard_round_corner, $standard_border_style, $standard_corner_width, $standard_border_color) {
  @include border_radius(#{$standard_round_corner / $em}rem);
  border: $standard_corner_width $standard_border_style $standard_border_color;
}



// This mixin is used for a linear layout of LIs versus using floats
// Build off of the ``flexbox`` mixin, this tool allows for quick 
// development of a ul/li layout using flexbox
// -----------------------------------------------------------------
@mixin ul_flexbox ($width :100%, $height: auto, $text_align :center) {
  ul {
    @include flexbox (horizontal, center, stretch, $width, $height);
  }
  li {
    @include flex(1);
    text-align: $text_align;
    height: $height;
    line-height: $height;
  }
}


// Standard block clear and default spacing
// This tool is designed to be a standard spacing element between markup blocks.
// The only value to be adjusted is the margin-bottom spacing.  This is an argument addressed 
// in the ``_config.scss`` file
@mixin standard_block_spacing ($default_block_spacing) {
  @include clearfix;
  margin-bottom: #{$default_block_spacing / $em}em;
}



// This mixin allows for quick application of a UI to the <hr> tag
// All values are set in the ``_config.scss`` file
@mixin standard_hr ($standard_border_style, $standard_hr_width, $standard_hr_spacing, $standard_hr_color){
  border-bottom: $standard_hr_width $standard_border_style $standard_hr_color;
  padding-bottom: #{$standard_hr_spacing / $em}rem;
  margin-bottom: #{$standard_hr_spacing / $em}rem;
}



// This series of mixins sets default values for consistant use of text and box shadows
// throughout your site.  Values are set in the ``_config.scss`` file
@mixin primary_text_shadow ($h-shadow, $v-shadow, $blur ) {
  @include text_shadow ($shadow_color, #{$h-shadow / $em}em #{$v-shadow / $em}em #{$blur / $em}em);
}

@mixin disabled_text_shadow ($h-shadow, $v-shadow, $blur ) {
  @include text_shadow (fade-out($shadow_color, 0.5), #{$h-shadow / $em}em #{$v-shadow / $em}em #{$blur / $em}em);
}

@mixin primary_box_shadow ($h-shadow, $v-shadow, $blur ) {
  @include box_shadow ($shadow_color, #{$h-shadow / $em}em #{$v-shadow / $em}em #{$blur / $em}em);
}

@mixin disabled_box_shadow ($h-shadow, $v-shadow, $blur ) {
  @include box_shadow (fade-out($shadow_color, 0.4), #{$h-shadow / $em}em #{$v-shadow / $em}em #{$blur / $em}em);
}