@import "nib"

// Lost Grid v5.1.5 - https://github.com/corysimmons/lost

$gutter = 30px
$rtl = false
$flexbox = false


/**
 * Sets a translucent background color to all elements it affects. Helpful while setting up, or debugging, the structure of your site to make sure all items are cleared correctly.
 *
 * @param {color} [$bg=blue] - A color to be lightened, so make sure you pick a darkish color.
 *
 * @example
 *   section
 *     edit(red)
 */

edit($bg = blue)
  *
    background: rgba($bg, 10%)


/**
 * Clearfix used to clear floated children elements. http://nicolasgallagher.com/micro-clearfix-hack
 *
 * @example
 *   .parent
 *     clearfix()
 *     .child
 *       column('1/2')
 */

clearfix()
  *zoom: 1
  &:before, &:after
    content: ''
    display: table
  &:after
    clear: both


/**
 * Creates a Flexbox container.
 *
 * @param {string} [$direction=row] - The flex-direction the container should create. This is typically opposite to the element you're creating so a row() would need flex-container(column).
 *
 * @example
 *   $flexbox = true
 *
 *   section
 *     flex-container()
 *     figure
 *       column('1/2')
 */

flex-container($direction = row)
  display: flex
  if $direction is row
    flex-flow: row wrap
  if $direction is column
    flex-flow: column nowrap


/**
 * Horizontally center a container element and apply padding to it.
 *
 * @param {unit} [$max-size=1140px] - A max-width to assign. Can be any unit.
 * @param {unit} [$pad=0] - Padding on the left and right of the element. Can be any unit.
 * @param {boolean} [$flex=$flexbox] - Determines whether this element should use Flexbox or not.
 *
 * @example
 *   section
 *     center(900px)
 */

center($max-size = 1140px, $pad = 0, $flex = $flexbox)
  if $flex is false
    clearfix()
  else
    flex-container()
  if $pad is not 0
    padding-left: $pad
    padding-right: $pad
  max-width: $max-size
  margin-left: auto
  margin-right: auto


/**
 * Align nested elements.
 *
 * @param {string} [$location=middle-center] - The position the nested element takes relative to the containing element.
 * @param {boolean} [$flex=$flexbox] - Determines whether this element should use Flexbox or not.
 *
 * - reset
 * - top-left
 * - top-center or top
 * - top-right
 * - middle-left or left
 * - middle-right or right
 * - bottom-left
 * - bottom-center or bottom
 * - bottom-right
 *
 * @example
 *   .parent
 *     align(right)
 *     width: 600px
 *     height: 400px
 *     .child
 *       width: 300px
 *       height: 150px
 */

align($location = middle-center, $flex = $flexbox)
  if $flex is false
    position: relative
    > *
      position: absolute
      if $location is reset
        top: auto
        right: auto
        bottom: auto
        left: auto
        transform: translate3d(0, 0, 0)
      else if $location is top-left
        top: 0
        right: auto
        bottom: auto
        left: 0
        transform: translate3d(0, 0, 0)
      else if $location is top-center or $location is top
        top: 0
        right: auto
        bottom: auto
        left: 50%
        transform: translate3d(-50%, 0, 0)
      else if $location is top-right
        top: 0
        right: 0
        bottom: auto
        left: auto
        transform: translate3d(0, 0, 0)
      else if $location is middle-left or $location is left
        top: 50%
        right: auto
        bottom: auto
        left: 0
        transform: translate3d(0, -50%, 0)
      else if $location is middle-right or $location is right
        top: 50%
        right: 0
        bottom: auto
        left: auto
        transform: translate3d(0, -50%, 0)
      else if $location is bottom-left
        top: auto
        right: auto
        bottom: 0
        left: 0
        transform: translate3d(0, 0, 0)
      else if $location is bottom-center or $location is bottom
        top: auto
        right: auto
        bottom: 0
        left: 50%
        transform: translate3d(-50%, 0, 0)
      else if $location is bottom-right
        top: auto
        right: 0
        bottom: 0
        left: auto
        transform: translate3d(0, 0, 0)
      else
        top: 50%
        right: auto
        bottom: auto
        left: 50%
        transform: translate3d(-50%, -50%, 0)
  else
    display: flex
    if $location is reset
      justify-content: inherit
      align-items: inherit
    else if $location is top-left
      justify-content: flex-start
      align-items: flex-start
    else if $location is top-center or $location is top
      justify-content: center
      align-items: flex-start
    else if $location is top-right
      justify-content: flex-end
      align-items: flex-start
    else if $location is middle-left or $location is left
      justify-content: flex-start
      align-items: center
    else if $location is middle-right or $location is right
      justify-content: flex-end
      align-items: center
    else if $location is bottom-left
      justify-content: flex-start
      align-items: flex-end
    else if $location is bottom-center or $location is bottom
      justify-content: center
      align-items: flex-end
    else if $location is bottom-right
      justify-content: flex-end
      align-items: flex-end
    else
      justify-content: center
      align-items: center


/**
 * Creates a column that is a fraction of the size of it's containing element with a gutter. You don't need to pass any additional ratios (fractions) as the grid system will make use of calc(). Note that fractions must always be wrapped in quotes.
 *
 * @param {string} [$fraction='1/1'] - This is a simple fraction of the containing element's width. This must be a string written as a fraction.
 * @param {number} [$cycle=convert(unquote(split('/', $fraction)[1]))] - Lost works by assigning a margin-right to all elements except the last in the row. It does this by default by using the denominator of the fraction you pick. To override this default use this param. e.g. column('2/4', $cycle: 2)
 * @param {number} [$gut=$gutter] - The margin on the right side of the element used to create a gutter. Typically this is left alone and the global $gutter will be used, but you can override it here if you want certain elements to have a particularly large or small gutter (pass 0 for no gutter at all).
 * @param {boolean} [$flex=$flexbox] - Determines whether this element should use Flexbox or not.
 *
 * @example
 *   figure
 *     column('1/3')
 */

column($fraction = '1/1', $cycle = convert(unquote(split('/', $fraction)[1])), $gut = $gutter, $flex = $flexbox)
  _get-size()
    if $gut is 0
      return s('calc(99.999999% * %s)', unquote($fraction))
    else
      return s('calc(99.99% * %s - (%s - %s * %s))', unquote($fraction), $gut, $gut, unquote($fraction))
  width: _get-size()
  if $flex is false
    if $rtl
      &:nth-child(n)
        margin-left: $gut
        float: right
        clear: none
      &:last-child
        margin-left: 0
      &:nth-child({$cycle}n)
        margin-left: 0
        float: left
      &:nth-child({$cycle}n + 1)
        clear: right
    else
      &:nth-child(n)
        margin-right: $gut
        float: left
        clear: none
      &:last-child
        margin-right: 0
      &:nth-child({$cycle}n)
        margin-right: 0
        float: right
      &:nth-child({$cycle}n + 1)
        clear: left
  else
    flex: 0 0 auto
    if $rtl
      &:nth-child(n)
        margin-left: $gut
      &:last-child
        margin-left: 0
      &:nth-child({$cycle}n)
        margin-left: 0
    else
      &:nth-child(n)
        margin-right: $gut
      &:last-child
        margin-right: 0
      &:nth-child({$cycle}n)
        margin-right: 0


/**
 * Creates a row that is a fraction of the size of it's containing element with a gutter. You don't need to pass any additional ratios (fractions) as the grid system will make use of calc(). Note that fractions must always be wrapped in quotes.
 *
 * @param {string} [$fraction='1/1'] - This is a simple fraction of the containing element's height. This must be a string written as a fraction.
 * @param {number} [$gut=$gutter] - The margin on the bottom of the element used to create a gutter. Typically this is left alone and the global $gutter will be used, but you can override it here if you want certain elements to have a particularly large or small gutter (pass 0 for no gutter at all).
 * @param {boolean} [$flex=$flexbox] - Determines whether this element should use Flexbox or not.
 *
 * @example
 *   figure
 *     row('1/3')
 */

row($fraction = '1/1', $gut = $gutter, $flex = $flexbox)
  _get-size()
    if $gut is 0
      return s('calc(99.999999% * %s)', unquote($fraction))
    else
      return s('calc(99.99% * %s - (%s - %s * %s))', unquote($fraction), $gut, $gut, unquote($fraction))
  width: 100%
  height: _get-size()
  margin-bottom: $gut
  if $flex is true
    flex: 0 0 auto
  &:last-child
    margin-bottom: 0


/**
 * Creates a block that is a fraction of the size of it's containing element with a gutter on the right and bottom. You don't need to pass any additional ratios (fractions) as the grid system will make use of calc(). Note that fractions must always be wrapped in quotes.
 *
 * @param {string} [$fraction='1/1'] - This is a simple fraction of the containing element's width/height. This must be a string written as a fraction.
 * @param {number} [$cycle=convert(unquote(split('/', $fraction)[1]))] - Lost works by assigning a margin-right/bottom to all elements except the last row (no margin-bottom) and the last column (no margin-right). It does this by default by using the denominator of the fraction you pick. To override this default use this param. e.g. waffle('2/4', $cycle: 2)
 * @param {number} [$gut=$gutter] - The margin on the right and bottom side of the element used to create a gutter. Typically this is left alone and the global $gutter will be used, but you can override it here if you want certain elements to have a particularly large or small gutter (pass 0 for no gutter at all).
 * @param {boolean} [$flex=$flexbox] - Determines whether this element should use Flexbox or not.
 *
 * @example
 *   figure
 *     waffle('1/3')
 */

waffle($fraction = '1/1', $cycle = convert(unquote(split('/', $fraction)[1])), $gut = $gutter, $flex = $flexbox)
  _get-size()
    if $gut is 0
      return s('calc(99.999999% * %s)', unquote($fraction))
    else
      return s('calc(99.99% * %s - (%s - %s * %s))', unquote($fraction), $gut, $gut, unquote($fraction))
  width: _get-size()
  height: _get-size()
  if $flex is false
    if $rtl
      &:nth-child(n)
        float: right
        margin-left: $gut
        clear: none
      &:nth-child({$cycle}n), &:last-child
        margin-left: 0
      &:nth-child({$cycle}n + 1)
        clear: right
    else
      &:nth-child(n)
        float: left
        margin-right: $gut
        clear: none
      &:nth-child({$cycle}n), &:last-child
        margin-right: 0
      &:nth-child({$cycle}n + 1)
        clear: left
  else
    flex: 0 0 auto
    if $rtl
      &:nth-child(n)
        margin-left: $gut
      &:nth-child({$cycle}n), &:last-child
        margin-left: 0
    else
      &:nth-child(n)
        margin-right: $gut
      &:nth-child({$cycle}n), &:last-child
        margin-right: 0
  &:nth-child(n)
    margin-bottom: $gut
  &:last-child
    margin-bottom: 0
  &:nth-last-child(-n + {$cycle})
    margin-bottom: 0

/**
 * Margin to the left, right, bottom, or top, of an element depending on if the fraction passed is positive or negative. It works for both horizontal and vertical grids but not both.
 *
 * @param {string} [$fraction='1/1'] - Fraction of the container to be offset. Must be a string.
 * @param {string} [$dir=row] - Direction the grid is going. Should be the opposite of the column() or row() it's being used on.
 * @param {number} [$gut=$gutter] - How large the gutter involved is, typically this won't be adjusted, but if you have set the elements for that container to have different gutters than default, you will need to match that gutter here as well.
 *
 * @example
 *   .two-elements
 *     column('1/3')
 *     &:first-child
 *       offset('1/3')
 */

offset($fraction = '1/1', $dir = row, $gut = $gutter)
  $numerator = convert(unquote(split('/', $fraction)[0]))
  _get-size()
    if $dir is row
      if $numerator > 0
        if $gut is 0
          return s('calc(99.999999% * %s)', unquote($fraction))
        else
          return s('calc(99.99% * %s - (%s - %s * %s) + (%s * 2))', unquote($fraction), $gut, $gut, unquote($fraction), $gut)
      if $numerator < 0
        if $gut is 0
          return s('calc(99.999999% * (%s * -1))', unquote($fraction))
        else
          return s('calc(99.99% * (%s * -1) - (%s - %s * (%s * -1)) + %s)', unquote($fraction), $gut, $gut, unquote($fraction), $gut)
    else
      if $numerator > 0
        if $gut is 0
          return s('calc(99.999999% * %s)', unquote($fraction))
        else
          return s('calc(99.99% * %s - (%s - %s * %s) + (%s * 2))', unquote($fraction), $gut, $gut, unquote($fraction), $gut)
      if $numerator < 0
        if $gut is 0
          return s('calc(99.999999% * (%s * -1))', unquote($fraction))
        else
          return s('calc(99.99% * (%s * -1) - (%s - %s * (%s * -1)) + (%s * 2))', unquote($fraction), $gut, $gut, unquote($fraction), $gut)
  if $dir is row
    if $numerator > 0
      margin-right: _get-size() !important
    else if $numerator < 0
      margin-left: _get-size() !important
    else
      margin-left: 0 !important
      margin-right: $gut !important
  else
    if $numerator > 0
      margin-bottom: _get-size() !important
    else if $numerator < 0
      margin-top: _get-size() !important
    else
      margin-top: 0 !important
      margin-bottom: $gut !important


/**
 * Source ordering. Shift elements left, right, up, or down, by their left or top position by passing a positive or negative fraction.
 *
 * @param {string} [$fraction='1/1'] - Fraction of the container to be shifted. Must be a string.
 * @param {string} [$dir=row] - Direction the grid is going. Should be the opposite of the column() or row() it's being used on.
 * @param {number} [$gut=$gutter] - Adjust the size of the gutter for this movement. Should match the element's $gut.
 *
 * @example
 *   figure
 *     column('1/2')
 *     &:first-child
 *       move('1/2')
 */

move($fraction = '1/1', $dir = row, $gut = $gutter)
  _get-size()
    if $gut is 0
      return s('calc(99.999999% * %s)', unquote($fraction))
    else
      return s('calc(99.99% * %s - (%s - %s * %s) + %s)', unquote($fraction), $gut, $gut, unquote($fraction), $gut)
  position: relative
  if $dir is row
    left: _get-size()
  else
    top: _get-size()


/**
 * Creates a wrapping element for working with JS masonry libraries like Isotope. Assigns a negative margin on each side of this wrapping element.
 *
 * @param {number} [$gut=$gutter] - How large the gutter involved is, typically this won't be adjusted and will inherit the global $gutter setting, but it's made available if you want your masonry grid to have a special $gut, it should match your masonry-column's $gut.
 * @param {boolean} [$flex=$flexbox] - Determines whether this element should use Flexbox or not.
 *
 * @example
 *   section
 *     masonry-wrap()
 *   figure
 *     masonry-column('1/3')
 */

masonry-wrap($gut = $gutter, $flex = $flexbox)
  if $flex is false
    clearfix()
  else
    flex-container()
  margin-left: -($gut / 2)
  margin-right: -($gut / 2)


/**
 * Creates a column for working with JS masonry libraries like Isotope. Assigns a margin to each side of the element.
 *
 * @param {number} [$gut=$gutter] - How large the gutter involved is, typically this won't be adjusted and will inherit the global $gutter setting, but it's made available if you want your masonry grid to have a special $gut, it should match your masonry-row's $gut.
 * @param {boolean} [$flex=$flexbox] - Determines whether this element should use Flexbox or not.
 *
 * @example
 *   section
 *     masonry-wrap()
 *   figure
 *     masonry-column('1/3')
 */

masonry-column($fraction = '1/1', $gut = $gutter, $flex = $flexbox)
  _get-size()
    if $gut is 0
      return s('calc(99.999999% * %s)', unquote($fraction))
    else
      return s('calc(99.99% * %s - %s)', unquote($fraction), $gut)
  if $flex is true
    flex: 0 0 auto
  width: _get-size()
  margin-left: ($gut / 2)
  margin-right: ($gut / 2)


/**
 * A function to return the size of a column minus it's gutter if a gutter is assigned. Handy for generating CSS classes.
 *
 * @param {string} [$fraction='1/1'] - This is a simple fraction of the containing element's width. This must be a string written as a fraction.
 * @param {number} [$gut=$gutter] - The gutter assigned to this size.
 *
 * @example
 *   [class*="col-"]
 *     float: left
 *     margin-right: $gutter
 *     &:last-child
 *       margin-right: 0
 *
 *   for $i in 1..12
 *     .col-{$i}
 *       width: get-size(s('%s/12', $i))
 */

get-size($fraction = '1/1', $gut = $gutter)
  if $gut is 0
    return s('calc(99.999999% * %s)', unquote($fraction))
  else
    return s('calc(99.99% * %s - (%s - %s * %s))', unquote($fraction), $gut, $gut, unquote($fraction))