@mixin position($position, $args) {
  @each $o in top right bottom left {
    $i: index($args, $o);
    @if $i and $i + 1 <= length($args) and type-of(nth($args, $i + 1)) == number {
      #{$o}: nth($args, $i + 1);
    }
  }
  position: $position;
}


@mixin absolute($args: '') {
  @include position(absolute, $args);
}

@mixin fixed($args: '') {
  @include position(fixed, $args);
}

@mixin relative($args: '') {
  @include position(relative, $args);
}

// @include fixed(top 0 left 0);

@mixin gradient($start-color, $end-color, $orientation) {
  background: $start-color;
  @if $orientation == 'vertical' {
    background: -webkit-linear-gradient(top, $start-color, $end-color);
    background: linear-gradient(to bottom, $start-color, $end-color);
  } @else if $orientation == 'horizontal' {
    background: -webkit-linear-gradient(left, $start-color, $end-color);
    background: linear-gradient(to right, $start-color, $end-color);
  } @else {
    background: -webkit-radial-gradient(center, ellipse cover, $start-color, $end-color);
    background: radial-gradient(ellipse at center, $start-color, $end-color);
  }
}

// @include gradient(#07c, #06f, vertical);

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

// div::after {
//     @include pseudo;
// }

@mixin input-placeholder {
    &.placeholder { @content; }
    &:-moz-placeholder { @content; }
    &::-moz-placeholder { @content; }
    &:-ms-input-placeholder { @content; }
    &::-webkit-input-placeholder { @content; }
}

// input,  
// textarea {  
//     @include input-placeholder {
//         color: $grey;
//     }
// }


//Glow text
$ease-cb: cubic-bezier(.19,1,.22,1);

@mixin nth-trans-delay($delay_items: 7, $delay_time: 0.2s){
  @for $i from 1 through $delay_items {
    &:nth-child(#{$i}) {   
      transition-delay: $delay_time * $i; 
    }
  }
}

@mixin nth-ani-delay($delay_items: 7, $delay_time: 0.2s){
  @for $i from 1 through $delay_items {
    &:nth-child(#{$i}) {   
      animation-delay: $delay_time * $i; 
    }
  }
}

@mixin transition($time, $properties...) {
  $transition: ();
  @each $property in $properties {
    $transition: append(
        $transition, ($property $time ease-in-out), $separator: comma
    );
  }
  transition: $transition;
}

// @include transition(150ms, 150ms, width, background-color);



@mixin transitionDelay($time,$delay, $properties...) {
  $transition: ();
  @each $property in $properties {
    $transition: append(
        $transition, ($property $time $delay ease-in-out), $separator: comma
    );
  }
  transition: $transition;
}