/**
 * Functions
 */
// em and rem calculators
@function em($value, $base: $em-base){
  @return ($value / $base) * 1em;
}

@function rem($value){
  $base: $em-base;
  @return ($value / $base) * 1rem;
}

// get a color from the map in _settings.scss
@function color($color){
  $value: map-get($colors, $color);

  @if $value != null {
    @return $value;
  }

  @else {
    @warn "Color entered could not be found. Please check the $colors map in _settings.scss";
  }
}

// determine if color needs to be dark or light, based on bg
@function setColor($color){
  @if(lightness($color) > 50){
    @return color('dark');
  } @else {
    @return color('white');
  }
}

// allows absolute position elements if in a %contained mixin
@function pos($value){
  @return calc(((100% - #{$max-width}) / 2) + #{$value});
}

/**
 * Mixins
 */
// Breakpoing mixin
@mixin bp($breakpoint){
  $value: map-get($breakpoints, $breakpoint);

  @if $value != null {
    @media(min-width: $value){
      @content;
    }
  }

  @else {
    @warn "Breakpoint entered could not be found. Please check the $breakpoints map in _settings.scss";
  }
}

// Triangle shape maker
// --------------
// @include triangle(12px, white, down);
// @include triangle(12px 6px, red blue, up-left);
@mixin triangle($size, $color, $direction) {
  $width: nth($size, 1);
  $height: nth($size, length($size));
  $foreground-color: nth($color, 1);
  $background-color: if(length($color) == 2, nth($color, 2), transparent);
  height: 0;
  width: 0;

  @if ($direction == up) or ($direction == down) or ($direction == right) or ($direction == left) {
    $width: $width / 2;
    $height: if(length($size) > 1, $height, $height/2);

    @if $direction == up {
      border-bottom: $height solid $foreground-color;
      border-left: $width solid $background-color;
      border-right: $width solid $background-color;
    } @else if $direction == right {
      border-bottom: $width solid $background-color;
      border-left: $height solid $foreground-color;
      border-top: $width solid $background-color;
    } @else if $direction == down {
      border-left: $width solid $background-color;
      border-right: $width solid $background-color;
      border-top: $height solid $foreground-color;
    } @else if $direction == left {
      border-bottom: $width solid $background-color;
      border-right: $height solid $foreground-color;
      border-top: $width solid $background-color;
    }
  } @else if ($direction == up-right) or ($direction == up-left) {
    border-top: $height solid $foreground-color;

    @if $direction == up-right {
      border-left:  $width solid $background-color;
    } @else if $direction == up-left {
      border-right: $width solid $background-color;
    }
  } @else if ($direction == down-right) or ($direction == down-left) {
    border-bottom: $height solid $foreground-color;

    @if $direction == down-right {
      border-left:  $width solid $background-color;
    } @else if $direction == down-left {
      border-right: $width solid $background-color;
    }
  } @else if ($direction == inset-up) {
    border-color: $background-color $background-color $foreground-color;
    border-style: solid;
    border-width: $height $width;
  } @else if ($direction == inset-down) {
    border-color: $foreground-color $background-color $background-color;
    border-style: solid;
    border-width: $height $width;
  } @else if ($direction == inset-right) {
    border-color: $background-color $background-color $background-color $foreground-color;
    border-style: solid;
    border-width: $width $height;
  } @else if ($direction == inset-left) {
    border-color: $background-color $foreground-color $background-color $background-color;
    border-style: solid;
    border-width: $width $height;
  }
}

/**
 * Extendable mixins
 */
// Global transition
%gtrans {
  transition: all .3s ease-in-out;
}

%clear {
  &:after,
  &:before {
    content: '';
    display: table;
  }

  &:after {
    clear: both;
  }
}

// Creates a "contained" effect without the use of an extra div.
%contained {
  @include bp(dlg){
    width: 100%;
    margin: 0;
    padding-left: calc((100% - #{$max-width}) / 2);
    padding-right: calc((100% - #{$max-width}) / 2);
  }
}