@use '../../compiled/tokens/scss/size';

/**
 * Container
 *
 * 1. Child elements of varying sizes look a bit off if they aren't centered.
 * 2. Ideally this component won't be over-stuffed, but just in case, let's
 *    wrap children if there are too many of them or they're too big.
 * 3. Keeps z-index values of child elements relative to this to avoid
 *    disrupting outside stacking order. We shouldn't have to set a base
 *    `z-index` as well, but some browsers don't establish a new stacking order
 *    without this, which can cause children to display beneath outside
 *    elements.
 */

.o-bunch {
  align-items: center; /* 1 */
  display: flex;
  flex-wrap: wrap; /* 2 */
  position: relative; /* 3 */
  z-index: 0; /* 3 */
}

/**
 * Child elements
 *
 * 1. Prevent unintended squashing of items in flex container.
 * 2. Overlap with adjacent items to for a unified visual appearance.
 * 3. It feels odd to have the first element underneath the last. In lieu of a
 *    a built-in CSS method of reversing the natural `z-index` order, we use
 *    a custom property that we'll set with `nth-child` a little further down.
 *
 * @see https://github.com/w3c/csswg-drafts/issues/1026#issuecomment-385285148
 */

.o-bunch > * {
  flex: none; /* 1 */
  margin-inline-end: (size.$overlap-small * -1); /* 2 */
  z-index: calc(var(--bunch-index, 0) * -1);
}

/**
 * Set the `--bunch-index` property for the first ten elements. You can manually
 * set `--bunch-index` for items past that point, but you should really question
 * if this is the right CSS object to use if you need more than that!
 */

@for $i from 1 through 10 {
  .o-bunch > :nth-child(#{$i}) {
    --bunch-index: #{$i};
  }
}