@mixin gz-make-unit ($width: 100%) {
  // Required for offset/push/pull
  position: relative;
  // By default, all columns should be 100% wide (mobile-first).
  @include gz-unit-width($width);
  // border-box forces the browser to include padding and borders when calculating the width.
  box-sizing: border-box;
}

@mixin gz-unit-width ($count, $total: null) {
  $value: gz-percentage($count, $total);
  flex: 0 0 $value;
  width: $value;
}

@mixin gz-unit-push ($count, $total: null) {
  $value: gz-percentage($count, $total);
  left: $value;
}

@mixin gz-unit-pull ($count, $total: null) {
  $value: gz-percentage($count, $total);
  left: -$value;
}

@mixin gz-unit-offset ($count, $total: null) {
  $value: gz-percentage($count, $total);
  margin-left: $value;
}

@mixin gz-unit-equal-width {
  flex: 1 1 0%;
  width: auto;
}

@mixin gz-unit-first {
  order: -1;
}

@mixin gz-unit-last {
  order: 9999;
}

@mixin gz-unit-fit-content {
  flex: none;
  width: auto;
}

@mixin gz-unit-vertical-align ($align) {
  $map: (
    top    : flex-start,
    middle : center,
    bottom : flex-end,
  );

  align-self: map-get($map, $align);
}

@mixin gz-unit-stretch {
  align-self: stretch;
}
