@import "helper";

@mixin animation-start {
  @include transition(opacity 0.6s linear, transform 0.6s ease-out);

  .-fade& {
    opacity: 1;
  }
  .-move& {
    @include transform(translate(0, 0));
  }
}

@mixin animation-presets {
  .-fade& {
    opacity: 0;
  }
  .-move& {
    @include transform(translate(50px, 0));
  }
  .-move-right& {
    @include transform(translate(-50px, 0));
  }
  .-move-top& {
    @include transform(translate(0, 50px));
  }
  .-move-bottom& {
    @include transform(translate(0, -50px));
  }
}

.is-animated {
  &:not(.rs-columns):not(.animate-children) {
    > *:not(.rs-columns) {
      .-in-view& {
        @include animation-start;
      }
      :not(.-in-view)& {
        @include animation-presets;
      }
    }
  }

  &:not(.rs-columns):not(.animate-children) {
    > *.rs-columns {
      > * {
        &.-in-view {
          @include animation-start;
        }

        &:not(.-in-view) {
          @include animation-presets;
        }
      }
    }
  }

  &.rs-columns,
  &.animate-children {
    > * {
      &.-in-view {
        @include animation-start;
      }

      &:not(.-in-view) {
        @include animation-presets;
      }
    }
  }
}