/* ==========================================================================
   Grid
   ========================================================================== */

/**
 * Grid row
 *
 * 1. Remove inter-cell whitespace
 * 2. Force no-wrap
 */

.contained-layout
  position: relative
  width: 100%
  max-width: $gridMaxWidth
  margin: 0 auto
  font-size: 0 /* 1 */
  white-space: nowrap /* 2 */

  .spacer
    width: 100%
    height: 0
    margin-bottom: column(1)

  +respond-to-width($smGridBreakpoint)
    white-space: normal

/* Columns
   ========================================================================== */

/*
 * Calculate width by dividing a full width into 12 columns
 * Create a class for each column
 */

@for $i from 1 through $gridColumns

  /**
   * Grid column
   *
   * 1. Reset white-space inherited from `.grid`
   */
  .col-#{$i}
    width: column($i)
    position: relative
    vertical-align: top

    display: inline-block
    margin: 0 auto
    white-space: normal /* 1 */
    font-size: $baseFontSize /* 2 */

    +respond-to-width-beyond($xlGridBreakpoint)
      font-size: $xlFontSize

    /**
     * Center column
     *
     * 1. 'inline-block' doesn't center with margin '0 auto'
     */

    &.centered
      display: block /* 1 */
      margin-left: auto
      margin-right: auto

  // Handle direct children (columns in columns)
  @for $c from 1 through $gridColumns

    .col-#{$i} > .col-#{$c}
      width: column($c,$i)

/* Column offset
   ========================================================================== */

@for $i from 1 through $gridColumns

  .offset-#{$i}
    margin-left: column($i)

/* Media queries
 ========================================================================== */

/*
 * Define widths for different screen sizes
  */

// Cover all columns
@for $i from 0 through $gridColumns

  // Larger then xlBreakpoint
  +respond-to-width-beyond($xlGridBreakpoint)
    .col-xl-#{$i}
      width: column($i,12)

    .offset-xl-#{$i}
      margin-left: column($i,12)

  // Loop through $breakpoints for the other breakpoints
  $breakpoints :  ('lg' $lgGridBreakpoint) ('md' $mdGridBreakpoint) ('sm' $smGridBreakpoint) ('xs' $xsGridBreakpoint)

  @each $list in $breakpoints

    $name : nth($list,1)
    $breakpoint : nth($list,2)

    +respond-to-width($breakpoint)
      .col-#{$name}-#{$i}
        width: column($i,12)

      .offset-#{$name}-#{$i}
        margin-left: column($i,12)


/*
 * This class is used when element contains .col-elements
 * Mostly we use it in combination with another class, f.e. an .col-element
 */
.column-container
  white-space: nowrap

  +respond-to-width($mdGridBreakpoint)
    white-space: normal

// On mobile
.col-12
  +respond-to-width($xsGridBreakpoint)
    width: 100%