@function _format-gutters($value, $direction) {
  $vertical-gutter: false;
  $horizontal-gutter: false;

  @if (type-of($value) == list) {
    @if (nth($value, 1)) {
      $vertical-gutter: (nth($value, 1));
    }
    @if (nth($value, 2)) {
      $horizontal-gutter: (nth($value, 2));
    }
  } @else {
    $vertical-gutter: $value;
    $horizontal-gutter: $value;
  }

  @if ($direction == vertical) {
    @return $vertical-gutter;
  } @else {
    @return $horizontal-gutter;
  }
}

@mixin flex-layout($columns: false, $gutters: 16px) {
  $items: length($columns);

  @if (type-of($columns) == number) {
    @include flex-row($gutters);

    > * {
      @include flex-column(calc(1 / $columns), $gutters);
    }
  } @else if (type-of($columns) == list and $items > 1) {
    $column-count: 0;

    @each $column in $columns {
      $column-count: $column-count + $column;
    }

    @include flex-row($gutters);

    @for $item from 1 through $items {
      $width: nth($columns, $item) / $column-count;

      & > *:nth-child(#{$items}n + #{$item}) {
        @include flex-column($width, $gutters);
      }
    }
  }
}

/**
 * flex-row()
 */

@mixin flex-row($gutters) {
  $horizontal-gutter: _format-gutters($gutters, horizontal);
  $vertical-gutter: _format-gutters($gutters, vertical);

  display: flex;
  flex-wrap: wrap;

  @if ($horizontal-gutter and $horizontal-gutter != 0) {
    margin-left: -($horizontal-gutter);
  }

  @if ($vertical-gutter and $vertical-gutter != 0) {
    margin-top: -($vertical-gutter);
  }
}

/**
 * flex-column()
 */

@mixin flex-column($width, $gutters) {
  $horizontal-gutter: _format-gutters($gutters, horizontal);
  $vertical-gutter: _format-gutters($gutters, vertical);

  @if (type-of($width) == number and unitless($width)) {
    $width: percentage($width);
  }

  @if ($horizontal-gutter and $horizontal-gutter != 0) {
    margin-left: $horizontal-gutter;
    width: calc(#{$width} - #{$horizontal-gutter});
  } @else {
    width: $width;
  }

  @if ($vertical-gutter and $vertical-gutter != 0) {
    margin-top: $vertical-gutter;
  }
}

@function _get-pseudo($pseudo) {
  @if ($pseudo == false) {
    $pseudo: '&::after';
  } @else if (_contains(('after', ':after', '::after', '&:after', '&::after'), $pseudo)) {
    $pseudo: '&::after';
  } @else if (_contains(('before', ':before', '::before', '&:before', '&::before'), $pseudo)) {
    $pseudo: '&::before';
  }

  @return $pseudo;
}

@function _is-pseudo($pseudo) {
  @return ($pseudo == '&::after' or $pseudo == '&::before');
}

@function _contains($list, $item) {
  @return index($list, $item) != null;
}

/**
 * aspect-ratio()
 *
 * Give a heightless element a height based on its width.
 * Always follows the set width:height ratio.
 *
 * @param {number} $width - Without CSS unit
 * @param {number} $height - Without CSS unit
 * @param {string} $pseudo - Optional selector to use insted of default pseudo-element
 */

@mixin aspect-ratio($width, $height, $pseudo: false) {
  $pseudo: _get-pseudo($pseudo);

  #{$pseudo} {
    @if (_is-pseudo($pseudo)) {
      content: '';
    }
    display: block;
    height: 0;
    padding-bottom: calc((100% / $width) * $height);
  }
}
