<?php
/**
 *
 * The classes are named using the format .a-gap-{size} for all spacers.
 *
 * Where size is one of:
 *
 *    0 - for classes that eliminate the height or height by setting it to 0
 *    1 - (by default) for classes that set the height to $spacer * .25
 *    2 - (by default) for classes that set the height to $spacer * .5
 *    3 - (by default) for classes that set the height to $spacer
 *    4 - (by default) for classes that set the height to $spacer * 2
 *
 * Common component variables
 * @param array $spacers
 */
?>

<?php foreach ($spacers as $gap => $height) { ?>
	<div class="a-gap-<?php echo $gap; ?> mx-auto bg-orange">a-gap-<?php echo $gap; ?> <span class="float-right">height: <?php echo $height; ?>px</span></div>

	<?php if ($gap + 2 <= count($spacers)) { ?><hr><?php } ?>
<?php } ?>

.a-gap {

    @each $index, $value in $spacers {

        &-#{$index} {

            height: $value;

        }

    }

}

[class*="a-gap"] {

    box-sizing: content-box;

}