media(min = 0, max = 0)
  if max
    if min
      @media (min-width: min) and (max-width: max - unit(.01, unit(max)))
        {block}
    else
      @media (max-width: max - unit(.01, unit(max)))
        {block}
  else if min
    @media (min-width: min)
      {block}
  else 
    {block}

populate-misc(name)
  .start-{name} {
    justify-content flex-start
    text-align left
  }
  .center-{name} {
    justify-content center
    text-align center
  }
  .end-{name} {
    justify-content flex-end
    text-align right
  }
  .around-{name} {
    justify-content space-around
  }
  .between-{name} {
    justify-content space-between
  }
  .stretch-horizontal-{name} {
    justify-content stretch
  }
  .stretch-vertical-{name} {
    align-items stretch
  }
  .top-{name} {
    align-items flex-start
    vertical-align top
  }
  .middle-{name} {
    align-items center
    vertical-align middle
  }
  .bottom-{name} {
    align-items flex-end
    vertical-align bottom
  }
  .first-{name} {
    order -1
  }
  .last-{name} {
    order 1
  }  

populate-width(name, size, next-size)
  if name != all
    +media(size, next-size)
      .{name} {
        width size
      }
      .hidden-{name} {
        display none !important
      }

    +media(0, size)
      .pre-{name} {
        width size
      }
      .hidden-pre-{name} {
        display none !important
      }

    +media(size)
      .post-{name} {
        width size
      }
      .hidden-post-{name} {
        display none !important
      }

populate-diff-hidden(sizes)
  for name, size in sizes
    for name-next, size-next in sizes
      if (name-next != name)
        if (size-next != size)
          if not selector-exists('.hidden-' + name-next + '-' + name)
            if (name != all)
              if (name-next != all)
                +media(size, size-next)
                  .hidden-{name}-{name-next} {
                    display none !important
                  }

populate-cols(name, size, cols-amount, suffix)
  for i in range(1, cols-amount)
    value = i * 100% / cols-amount;

    if i == cols-amount
      .col{suffix}-{name}-{i}, .col{suffix}-{name} {
        flex-basis 100%
        max-width 100%
        width 100%
      }
    else
      .col{suffix}-{name}-{i} {
        flex-basis value
        max-width value
        width value
      }
  
    .offset{suffix}-{name}-{i} {
      margin-left value
    }

cols(cols-amount, sizes, suffix = cols-amount, media-mixin = null)
  for name, size in sizes
    size-values = values(sizes);
    next-size = size-values[index(size-values, size) + 1];

    +media(size)
      populate-cols(name, size, cols-amount, suffix)
      if media-mixin
        media-mixin(name, size, next-size, sizes, cols-amount, suffix)

    if length(arguments) > 4
      for arg in slice(arguments, 4)
        arg(name, size, next-size, sizes, cols-amount, suffix)

helpers(cols-amount, sizes)
  for name, size in sizes
    size-values = values(sizes);
    next-size = size-values[index(size-values, size) + 1];

    +media(size)
      populate-misc(name)

    populate-width(name, size, next-size)

  populate-diff-hidden(sizes)

  .hidden {
    display none !important
  }

cols-with-helpers(cols-amount, sizes, suffix = cols-amount)
  cols(cols-amount, sizes, suffix, populate-misc, populate-width)

  populate-diff-hidden(sizes)

  .hidden {
    display none !important
  }