//
// atGrid.css for Concise CSS - Attribute-based Grid System
// https://github.com/jameskolce/atgrid.css
// MIT License - James Kolce <contact@jameskolce.com>
// =============================================================================

@if ($enable-grid) {
  [#{$prefix}container] {
    margin-left: auto;
    margin-right: auto;
    max-width: $container-width;
    padding-left: $gutter / 2;
    padding-right: $gutter / 2;
    overflow: auto;
  }

  @if($enable-container-solid) {
    [#{$prefix}container~="solid"] {
      @media(--small) {
        max-width: $break-small;
      }
      @media(--medium) {
        max-width: $break-medium;
      }
      @media(--large) {
        max-width: $break-large;
      }
      @media(--extra-large) {
        max-width: $container-width;
      }
    }
  }

  [#{$prefix}grid] {
    display: flex;
    margin-left: $gutter / -2;
    margin-right: $gutter / -2;
    flex-direction: column;

    // Collapse columns on breakpoint
    @media ($breakpoint) { flex-direction: row; }
  }

  [#{$prefix}column] {
    flex: 1;
    padding-left: $gutter / 2;
    padding-right: $gutter / 2;
  }

  //
  // No Gutters
  //

  [#{$prefix}grid~="no-gutters"] {
    margin-left: 0;
    margin-right: 0;

    > [#{$prefix}column] {
      padding-left: 0;
      padding-right: 0;
    }
  }

  //
  // No Collapse columns
  //

  [#{$prefix}grid~="no-collapse"] { flex-flow: row nowrap; }

  //
  // Column wrapping
  //

  [#{$prefix}grid~="wrap"] { flex-wrap: wrap; }
  [#{$prefix}grid~="no-wrap"] { flex-wrap: nowrap; }
  [#{$prefix}grid~="wrap-reverse"] { flex-wrap: wrap-reverse; }

  //
  // Direction of columns in a row
  //

  [#{$prefix}grid~="row"] { flex-direction: row; }
  [#{$prefix}grid~="row-reverse"] { flex-direction: row-reverse; }
  [#{$prefix}grid~="column"] { flex-direction: column; }
  [#{$prefix}grid~="column-reverse"] { flex-direction: column-reverse; }
  
  //
  // Reorder items above breakpoint
  //
  
  @media ($breakpoint) {
     @for $i from 1 through $num-columns {  
        [#{$prefix}column~="n#{$i}"] { order: #{$i}; }
     }
  }

  //
  // Justify content
  //

  [#{$prefix}grid~="justify-start"] { justify-content: flex-start; }
  [#{$prefix}grid~="justify-end"] { justify-content: flex-end; }
  [#{$prefix}grid~="justify-center"] { justify-content: center; }
  [#{$prefix}grid~="justify-between"] { justify-content: space-between; }
  [#{$prefix}grid~="justify-around"] { justify-content: space-around; }

  //
  // Alignment of all columns in a row
  //

  [#{$prefix}grid~="top"] { align-items: flex-start; }
  [#{$prefix}grid~="center"] { align-items: center; }
  [#{$prefix}grid~="bottom"] { align-items: flex-end; }
  [#{$prefix}grid~="baseline"] { align-items: baseline; }
  [#{$prefix}grid~="stretch"] { align-items: stretch; }

  //
  // Alignment of individual columns
  //

  [#{$prefix}column~="top"] { align-self: flex-start; }
  [#{$prefix}column~="center"] { align-self: center; }
  [#{$prefix}column~="bottom"] { align-self: flex-end; }

  // Create column widths and offsets above the breakpoint
  @media ($breakpoint) {
    //
    // Column widths
    //
    @for $i from 1 through $num-columns {
      [#{$prefix}column~="#{$i}"] {
        flex: 0 1 ($i/$num-columns) * 100%;
        max-width: ($i/$num-columns) * 100%;
      }
    }

    //
    // Column offsets
    //
    @for $i from 1 through $num-columns {
      [#{$prefix}column~="+#{$i}"] {
        margin-left: ($i/$num-columns) * 100%;
      }
    }
  }

  @if ($full-grid) {
    @media (--extra-small) {
      //
      // Column widths
      //
      @for $i from 1 through $num-columns {
        [#{$prefix}column~="xs-#{$i}"] {
          flex: 0 1 ($i/$num-columns) * 100%;
          max-width: ($i/$num-columns) * 100%;
        }
      }

      //
      // Column offsets
      //
      @for $i from 1 through $num-columns {
        [#{$prefix}column~="+xs-#{$i}"] {
          margin-left: ($i/$num-columns) * 100%;
        }
      }
    }

    @media (--small) {
      //
      // Column widths
      //
      @for $i from 1 through $num-columns {
        [#{$prefix}column~="s-#{$i}"] {
          flex: 0 1 ($i/$num-columns) * 100%;
          max-width: ($i/$num-columns) * 100%;
        }
      }

      //
      // Column offsets
      //
      @for $i from 1 through $num-columns {
        [#{$prefix}column~="+s-#{$i}"] {
          margin-left: ($i/$num-columns) * 100%;
        }
      }
    }

    @media (--medium) {
      //
      // Column widths
      //
      @for $i from 1 through $num-columns {
        [#{$prefix}column~="m-#{$i}"] {
          flex: 0 1 ($i/$num-columns) * 100%;
          max-width: ($i/$num-columns) * 100%;
        }
      }

      //
      // Column offsets
      //
      @for $i from 1 through $num-columns {
        [#{$prefix}column~="+m-#{$i}"] {
          margin-left: ($i/$num-columns) * 100%;
        }
      }
    }

    @media (--large) {
      //
      // Column widths
      //
      @for $i from 1 through $num-columns {
        [#{$prefix}column~="l-#{$i}"] {
          flex: 0 1 ($i/$num-columns) * 100%;
          max-width: ($i/$num-columns) * 100%;
        }
      }

      //
      // Column offsets
      //
      @for $i from 1 through $num-columns {
        [#{$prefix}column~="+l-#{$i}"] {
          margin-left: ($i/$num-columns) * 100%;
        }
      }
    }

    @media (--extra-large) {
      //
      // Column widths
      //
      @for $i from 1 through $num-columns {
        [#{$prefix}column~="xl-#{$i}"] {
          flex: 0 1 ($i/$num-columns) * 100%;
          max-width: ($i/$num-columns) * 100%;
        }
      }

      //
      // Column offsets
      //
      @for $i from 1 through $num-columns {
        [#{$prefix}column~="+xl-#{$i}"] {
          margin-left: ($i/$num-columns) * 100%;
        }
      }
    }
  }
}