// units are the number of units that make up 100% of the container
// e.g., if there are 4 units then sizes, lengths, can be from 0 to 4
// corresponding to lengths of 0, 25%, 50%, 75% and 100%.
$units: 4;
$unit-size: 100% / $units;

%ab-layout {
  position: relative;

  &::before {
    content: "";
    display: block;
    position: absolute;
    width: $unit-size;
    height: $unit-size;
    transform-origin: 0 0;
    transition: transform 0.4s ease-in-out;
  }
}

// all blocks start out at 1 unit size in length and width.
// $x, $y are the starting coordinates
@mixin ab-set-layout($x: 0, $y: 0, $color: rgba(0, 0, 0, 0.5)) {
  @extend %ab-layout;

  &::before {
    left: $x * $unit-size;
    top: $y * $unit-size;
    background-color: $color;
  }
}

@mixin ab-set-state($state-class, $width, $height) {
  @at-root .state-#{$state-class} &::before {
    transform: scale($width, $height);
  }
}

.block-grid {
  padding-top: 3rem;
}

.anim-block {
  background-color: rgba(blue, 0.06);
}

.anim-block--1 {
  @include ab-set-layout(2, 1, blue);

  @include ab-set-state(0, 1, 1);
  @include ab-set-state(1, 2, 2);
  @include ab-set-state(2, 2, 3);
}

.anim-block--2 {
  @include ab-set-layout(1, 1, red);

  @include ab-set-state(0, 1, 1);
  @include ab-set-state(1, 2, 2);
  @include ab-set-state(2, 2, 3);
}

// vim:set filetype=scss: