// Don't USE !!!!!! DEMO ONLY
// ==========================================================
html,body{height:100%;}body{display:flex;align-items:center;justify-content: center;background:#1A414A;}ul{list-style-type:none;margin:0;padding:0;}


// Cascader Styles: !REQUIRED!
// # of dom nodes = ($cascade-items * $cascade-rows)
// ==========================================================

$cascader-size: 16px;
$cascader-bgcolor: #999996;
$cascader-items: 8; // number of items in a row
$cascader-rows: 5; // number of rows
$cascader-delay: 120ms;
$cascader-style: reveal; // accepts 'wave' or 'reveal'
$cascader-effect: (
  name: cascader,
  duration: 2s,
  iteration: infinite,
  fill-mode: forwards
);

.cascader {
  display: flex;
  flex-wrap: wrap;
  height: $cascader-size * $cascader-rows;
  width: $cascader-size * $cascader-items;
}

.cascader__item {
  animation: zip(map-values($cascader-effect)...); // zip() will take a comma separated list returned by map-values() and convert that into a single space separated string!
	width: $cascader-size;
	height: $cascader-size;
	background: $cascader-bgcolor;
  @if $cascader-style == wave {
    @for $i from 1 through ($cascader-rows * $cascader-items) {
      &:nth-child(#{$i}) {
        animation-delay: $cascader-delay * $i;
      }
    }
  } @elseif $cascader-style == reveal {
    @for $i from 1 through ($cascader-rows - 1) {
      &:nth-child(n+#{ $cascader-items * $i+1 }) {
        animation-delay: $cascader-delay * $i;
      }
    }
  }
}

@keyframes cascader {
	from, to {
    opacity: 0;
    transform: scale3d(0, 0, 0);
	}
	45%, 55% {
    opacity: 1;
    transform: scale3d(1, 1, 1);
	}
}