/* ==========================================================================

MIXINS
========================================================================== */

%tab-focus {

/* Default*/
outline: thin dotted $focus-color;
/* Webkit*/
outline: 5px auto $focus-color;
outline-offset: -2px;

}

/*

em function
========================================================================== */

@function em($target, $context: $doc-font-size) {

@return ($target / $context) * 1em;

}

/*

Bourbon clearfix
========================================================================== */

/*

* Provides an easy way to include a clearfix for containing floats.
* link http://cssmojo.com/latest_new_clearfix_so_far/
*
* example scss - Usage
*
* .element {
*   @include clearfix;
* }
*
* example css - CSS Output
*
* .element::after {
*   clear: both;
*   content: "";
*   display: table;
* }

*/

@mixin clearfix {

clear: both;

&::after {
  clear: both;
  content: "";
  display: table;
}

}

/*

Compass YIQ Color Contrast
https://github.com/easy-designs/yiq-color-contrast
========================================================================== */

@function yiq-is-light(

$color,
$threshold: $yiq-contrasted-threshold

) {

$red: red($color);
$green: green($color);
$blue: blue($color);

$yiq: (($red*299)+($green*587)+($blue*114))/1000;

@if $yiq-debug { @debug $yiq, $threshold; }

@return if($yiq >= $threshold, true, false);

}

@function yiq-contrast-color(

$color,
$dark: $yiq-contrasted-dark-default,
$light: $yiq-contrasted-light-default,
$threshold: $yiq-contrasted-threshold

) {

@return if(yiq-is-light($color, $threshold), $yiq-contrasted-dark-default, $yiq-contrasted-light-default);

}

@mixin yiq-contrasted(

$background-color,
$dark: $yiq-contrasted-dark-default,
$light: $yiq-contrasted-light-default,
$threshold: $yiq-contrasted-threshold

) {

background-color: $background-color;
color: yiq-contrast-color($background-color, $dark, $light, $threshold);

}