/**
 * Pure css masonary grid
 *
 * Assign width, height x and y positin for each item in the grid, for 4 screen sizes, using only css classes
 *
 * Example calsses for "lg" size:
 *
 * ┌────────────────────────┐┌─────────────┐
 * │       lt-lg-x-0        ││  lt-lg-x-2  │
 * │       lt-lg-y-0        ││  lt-lg-y-0  │
 * │       lt-lg-w-2        ││  lt-lg-w-1  │
 * │       lt-lg-h-1        ││  lt-lg-h-1  │
 * └────────────────────────┘└─────────────┘
 * ┌───────────────────────────────────────┐
 * │               lt-lg-x-0               │
 * │               lt-lg-y-1               │
 * │               lt-lg-w-3               │
 * │               lt-lg-h-1               │
 * └───────────────────────────────────────┘
 */

@import "vars";

// Modifiable variables
// @screen-lg: 1200px;
// @screen-md: 992px;
// @screen-sm: 768px;

// Columns for each screen size
$cols-lg: 4;
$cols-md: 3;
$cols-sm: 2;
$cols-xs: 1;

// Gaps between widgets for each screen size
$gap-lg: 1%;
$gap-md: 2%;
$gap-sm: 3%;
$gap-xs: 4%;

// Aspect ratio (width / height) between widgets for each screen size
$aspect-lg: 2 / 3;
$aspect-md: 2 / 3;
$aspect-sm: 2 / 3;
$aspect-xs: 2 / 3;

// Maximum rows for each screen size
// This affects file size of the resulting css quite a bit
// so you might want to set it up to up with only the rows you need
$max-rows-xs: 25;
$max-rows-sm: 20;
$max-rows-md: 15;
$max-rows-lg: 10;
$ghost-bg: $bg-color-base;
$mask-border-color: $gray-300;

.lt-container {
  position: relative;
  width: 100%;
}

.lt {
  position: absolute;
}

.lt-body {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

@mixin responsive-visibility-loop-x($i, $prefix, $width, $cols, $max-rows, $gap) {
  @if ($i < $cols) {
    @include responsive-visibility-loop-x($i + 1, $prefix, $width, $cols, $max-rows, $gap);
    .lt-#{$prefix}-x-#{$i} {
      margin-left: #{($width + $gap) * $i};
    }
  }
}

@mixin responsive-visibility-loop-y($i, $prefix, $height, $cols, $max-rows, $gap) {
  @if ($i < $max-rows) {
    @include responsive-visibility-loop-y($i + 1, $prefix, $height, $cols, $max-rows, $gap);
    .lt-#{$prefix}-y-#{$i} {
      margin-top: #{($height + $gap) * $i};
    }
  }
}

@mixin responsive-visibility-loop-w($i, $prefix, $width, $cols, $max-rows, $gap) {
  @if ($i <= $cols) {
    @include responsive-visibility-loop-w($i + 1, $prefix, $width, $cols, $max-rows, $gap);
    .lt-#{$prefix}-w-#{$i} {
      width: #{$width * $i + $gap * ($i - 1)};
    }
  }
}

@mixin responsive-visibility-loop-h($i, $prefix, $height, $cols, $max-rows, $gap) {
  @if ($i <= $max-rows) {
    @include responsive-visibility-loop-h($i + 1, $prefix, $height, $cols, $max-rows, $gap);
    .lt-#{$prefix}-h-#{$i} {
      padding-bottom: #{$height * $i + $gap * ($i - 1)};
    }
  }
}

@mixin responsive-visibility($prefix, $cols, $max-rows, $gap, $aspect) {
  $width: (100% - ($cols - 1) * $gap) / $cols;
  $height: $width * $aspect;

  @include responsive-visibility-loop-x(0, $prefix, $width, $cols, $max-rows, $gap);
  @include responsive-visibility-loop-y(0, $prefix, $height, $cols, $max-rows, $gap);
  @include responsive-visibility-loop-w(1, $prefix, $width, $cols, $max-rows, $gap);
  @include responsive-visibility-loop-h(1, $prefix, $height, $cols, $max-rows, $gap);
}

@include responsive-visibility(xs, $cols-xs, $max-rows-xs, $gap-xs, $aspect-xs);

@include media-breakpoint-up(md) {
  @include responsive-visibility(sm, $cols-sm, $max-rows-sm, $gap-sm, $aspect-sm);
}

@include media-breakpoint-up(lg) {
  @include responsive-visibility(md, $cols-md, $max-rows-md, $gap-md, $aspect-md);
}

@include media-breakpoint-up(xl) {
  @include responsive-visibility(lg, $cols-lg, $max-rows-lg, $gap-lg, $aspect-lg);
}

/**
 * Styles specific to the ordering process
 */
.lt {
  z-index: 1;
  transition: margin-left .1s ease-out, margin-top .1s ease-out;
}

.lt-ghost {
  z-index: 2;
  pointer-events: none;
  background-color: $ghost-bg;
  opacity: .5;
  transition: margin-left 0s ease-out, margin-top 0s ease-out;
}

.lt-container {
  transition: padding-bottom .1s ease-out;
}

.lt-container .lt-mask {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
  display: block;
  border: 1px solid $mask-border-color;
}