/* most sass functions and mixins (other than prefix), reside here */

/**

* Makes the element a CSS triangle, pointing in the given direction.
* Height is optional, if not given, it will be $base/2.
*/

@mixin triangle ($direction, $color, $base, $height: 0) {

@if $direction == top {
        $border-side: bottom;
} @else if $direction == bottom {
        $border-side: top;
} @else if $direction == left {
        $border-side: right;
} @else  {              // fall thru assuming direction as 'right'
        $border-side: left;
}
width:                  0;
height:                 0;
border:                 $base/2 solid transparent;
border-#{$direction}-width: 0;
@if $height > 0 {
        border-#{$border-side}-width:   $height;
}
border-#{$border-side}-color:           $color;

}

/**

* Clear Design argues that because "rem" unit does not work on pseudo-elements in IE,
* we should use a function to compute "rem" to "px" with Sass.  Kept here until reassessed.
*/

@function rem($remSize) {

@return $remSize * $font-size;

}

/**

* Button settings are passed a color ($color-primary, $color-button-default, etc.)
*/

@mixin button-color($color) {

$temp-border-color:     darken($color, 10%);
$temp-text-color:               $color-button-text;
@if lightness($color) < 80 {
        $temp-text-color:       $color-button-text-inverted;
}
background:     $color;
border:                 1px solid $temp-border-color;
box-shadow:     0 $button-shadow-height 0 0 $temp-border-color;
color:                  $temp-text-color;

}