@import "variable"

=prefixes($property, $value)
  -webkit-#{$property}: #{$value}
  -khtml-#{$property}: #{$value}
  -moz-#{$property}: #{$value}
  -ms-#{$property}: #{$value}
  -o-#{$property}: #{$value}
  #{$property}: #{$value}

=placeholder
  &::-webkit-input-placeholder
    @content
  &:-moz-placeholder
    @content
  &::-moz-placeholder
    @content
  &:-ms-input-placeholder
    @content

=flex
  display: -webkit-box
  display: -ms-flexbox
  display: -webkit-flex
  display: flex

=inline-flex
  display: -webkit-inline-box
  display: -ms-inline-flexbox
  display: -webkit-inline-flex
  display: inline-flex

=transition($for: all, $value: .4s, $animate: ease)
  +prefixes("transition", $for $value $animate)

=border-radius($radius: $borderRadiusBase)
  +prefixes("border-radius", $radius)

=box-shadow($value: 0 0 5px #ccc)
  +prefixes("box-shadow", $value)

=clearfix
  &:before,
  &:after
    content: " "
    display: table
  &:after
    clear: both

=arrow($direction, $size, $color)
  @if $direction == up
    border-left: $size solid transparent
    border-right: $size solid transparent
    border-bottom: $size solid $color
  @else if $direction == down
    border-left: $size solid transparent
    border-right: $size solid transparent
    border-top: $size solid $color
  @else if $direction == right
    border-top: $size solid transparent
    border-bottom: $size solid transparent
    border-left: $size solid $color
  @else if $direction == left
    border-top: $size solid transparent
    border-bottom: $size solid transparent
    border-right: $size solid $color

=push-auto
  margin:
    left: auto
    right: auto

=pseudo($display: block, $pos: absolute, $content: '')
  content: $content
  display: $display
  position: $pos

=triangle($color, $direction, $size: 6px, $position: absolute, $round: false)
  +pseudo($pos: $position)
  width: 0
  height: 0
  @if $round
    border-radius: 3px
  @if $direction == down
    border-left: $size solid transparent
    border-right: $size solid transparent
    border-top: $size solid $color
    margin-top: 0 - round( $size / 2.5 )
  @else if $direction == up
    border-left: $size solid transparent
    border-right: $size solid transparent
    border-bottom: $size solid $color
    margin-bottom: 0 - round( $size / 2.5 )
  @else if $direction == right
    border-top: $size solid transparent
    border-bottom: $size solid transparent
    border-left: $size solid $color
    margin-right: -$size
  @else if $direction == left
    border-top: $size solid transparent
    border-bottom: $size solid transparent
    border-right: $size solid $color
    margin-left: -$size

=mq($width, $type: max)
  @if map_has_key($breakpoints, $width)
    $width: map_get($breakpoints, $width)
    @if $type == max
      $width: $width - 1px
    @media only screen and (#{$type}-width: $width)
      @content

=retina($image, $width, $height)
  @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6/2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx)
    /* Serving 2x image on Retina display */
    background-image: url($image)
    background-size: $width $height

=font-face($font-name, $file-name, $weight: normal, $style: normal)
  @font-face
    font-family: quote($font-name)
    src: url($file-name + '.eot')
    src: url($file-name + '.eot?#iefix') format('embedded-opentype'),
    url($file-name + '.woff') format('woff'),
    url($file-name + '.ttf') format('truetype'),
    url($file-name + '.svg##{$font-name}') format('svg')
    font-weight: $weight
    font-style: $style

=absolute-center
  position: absolute
  top: 50%
  left: 50%
  +prefixes("transform", translate(-50%, -50%))

=center($top, $left)
  position: absolute
  margin-top: - $top / 2
  margin-left: - $left / 2
  top: 50%
  left: 50%

=reset-brds-left($value: 4px)
  +border-radius(0 $value $value 0)

=reset-brds-right($value: 4px)
  +border-radius($value 0 0 $value)

=truncate($truncation-boundary)
  max-width: $truncation-boundary
  white-space: nowrap
  overflow: hidden
  text-overflow: ellipsis

=adaptive($el, $type : 'max')
  .#{$el}
    @content
    @each $class, $screen in (xs, 'phone'), (sm, 'phablet'), (md, 'tablet'), (lg, 'desktop'), (xl, 'desktop-wide')
      @if ($type == 'min')
        +mq($screen, 'min')
          &-#{$class}
            @content
      @else
        +mq($screen)
          &-#{$class}
            @content

=align-middle
  +flex
  align-items: center
  flex-grow: 1