// border radius mixin
// useage @include border-radius(1.5rem);

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  border-radius: $radius;
  background-clip: padding-box;
}

@mixin border-top-radius($radius) {
  -webkit-border-top-right-radius: $radius;
  border-top-right-radius: $radius;
  -webkit-border-top-left-radius: $radius;
  border-top-left-radius: $radius;
  background-clip: padding-box;
}

@mixin border-right-radius($radius) {
  -webkit-border-bottom-right-radius: $radius;
  border-bottom-right-radius: $radius;
  -webkit-border-top-right-radius: $radius;
  border-top-right-radius: $radius;
  background-clip: padding-box;
}

@mixin border-bottom-radius($radius) {
  -webkit-border-bottom-right-radius: $radius;
  border-bottom-right-radius: $radius;
  -webkit-border-bottom-left-radius: $radius;
  border-bottom-left-radius: $radius;
  background-clip: padding-box;
}

@mixin border-left-radius($radius) {
  -webkit-border-bottom-left-radius: $radius;
  border-bottom-left-radius: $radius;
  -webkit-border-top-left-radius: $radius;
  border-top-left-radius: $radius;
  background-clip: padding-box;
}

// opacity mixin
// useage @include opacity(0.8);

@mixin opacity($opacity) {
  opacity: $opacity;
  $opacity-ie: $opacity * 100;
  filter: alpha(opacity=$opacity-ie); //IE8
}

// position absolute mixin
// useage @include abs-pos(10px, 10px, 5px, 15px);

@mixin abs-pos($top: auto, $right: auto, $bottom: auto, $left: auto) {
  top: $top;
  right: $right;
  bottom: $bottom;
  left: $left;
  position: absolute;
}

// font size mixin
// useage @include font-size(16);
@mixin font-size($sizeValue: 12) {
  font-size: (0.125 * $sizeValue) + rem;
}

// line height mixin
// useage @include line-height (1.2);

@mixin line-height($heightValue: 12) {
  line-height: (0.125 * $heightValue) + rem;
}

// transition mixin
// useage @include transition(color .3s ease, font-size .5s ease);

@mixin transition($args...) {
  -webkit-transition: $args;
  -moz-transition: $args;
  -o-transition: $args;
  transition: $args;
}

// font-weight mixin
// useage @include font-weight(book);

@mixin font-weight($weight) {
  $weights: (
          thin: 100,
          extra-light: 200,
          ultra-light: 200,
          light: 300,
          normal: 400,
          book: 400,
          regular: 400,
          medium: 500,
          semi-bold: 600,
          demi-bold: 600,
          bold: 700,
          extra-bold: 800,
          ultra-bold: 900,
          heavy: 900,
          black: 900,
          ultra: 900,
          ultra-black: 900,
          extra-ultra: 900
  );

  $output: $weight;
  @if map-has-key($weights, $weight) {
    $output: map-get($weights, $weight);
  }

  font-weight: $output;
}

.w100 {
  @include font-weight(thin);
}

.w200 {
  @include font-weight(extra-light);
}

.w300 {
  @include font-weight(light);
}

.w400 {
  @include font-weight(book);
}

.w500 {
  @include font-weight(medium);
}

.w600 {
  @include font-weight(semi-bold);
}

.w700 {
  @include font-weight(bold);
}

.w800 {
  @include font-weight(extra-bold);
}

.w900 {
  @include font-weight(ultra-bold);
}

// box shaodw mixin
// useage @include box-shadow(-1px -1px 2px rgba(0, 0, 0, .05), 0 1px 1px white inset);

@mixin box-shadow($shadow1, $shadow2:false, $shadow3:false, $shadow4:false, $shadow5:false) {
  $params: $shadow1;
  @if $shadow2 {
    $params: $shadow1, $shadow2;
  }
  @if $shadow3 != false {
    $params: $shadow1, $shadow2, $shadow3;
  }
  @if $shadow4 != false {
    $params: $shadow1, $shadow2, $shadow3, $shadow4;
  }
  @if $shadow5 != false {
    $params: $shadow1, $shadow2, $shadow3, $shadow4, $shadow5;
  }

  -webkit-box-shadow: $params;
  -moz-box-shadow: $params;
  box-shadow: $params;

}

// links mixin
// useage @include links(orange, blue, yellow, teal);

@mixin links($link, $visited, $hover, $active) {
  & {
    color: $link;

    &:visited {
      color: $visited;
      @include transition(all 0.2s ease-in-out);
    }

    &:hover {
      color: $hover;
      text-decoration: none;
      @include transition(all 0.2s ease-in-out);
    }

    &:active,
    &:focus {
      color: $active;
    }
  }
}

// pseudo mixin
// useage @include pseudo;

@mixin pseudo($display: block,$content: '') {
  content: $content;
  display: $display;
}