@import 'colors';

@mixin box-shadow($top, $left, $blur, $spread, $color, $inset: false) {
   @if $inset {
      -webkit-box-shadow:inset $top $left $blur, $spread $color;
      -moz-box-shadow:inset $top $left $blur $spread $color;
      box-shadow:inset $top $left $blur $spread $color;
   }
   @else {
      -webkit-box-shadow: $top $left $blur $spread $color;
      -moz-box-shadow: $top $left $blur $spread $color;
      box-shadow: $top $left $blur $spread $color;
   }
}

@mixin optional-at-root($sel) {
  @at-root #{if(not &, $sel, selector-append(&, $sel))} {
    @content;
  }
}

@mixin placeholder {
  @include optional-at-root('::-webkit-input-placeholder') {
    @content;
  }

  @include optional-at-root(':-moz-placeholder') {
    @content;
  }

  @include optional-at-root('::-moz-placeholder') {
    @content;
  }

  @include optional-at-root(':-ms-input-placeholder') {
    @content;
  }
}

@mixin blueGlow {
   outline: 0;
   box-shadow: 0.06em 0 0.6em 0.1em lighten($ac1, 30%);
   //@include box-shadow(0.06em, 0, 0.6em, 0.1em, lighten($ac1, 30%))
}

@mixin reset-list {
  background: transparent;
  list-style: none;
  margin: 0;
  padding: 0;
}

@mixin vertical-align($position: relative) {
  position: $position;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}