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

// Common grid for all pages with supported variants
//
// #PageContainer         - Holds all the things, overflow added here to prevent scrollbar
// <main>                 - Main body content containers with body bg set, stretch to 1440
// marketing-nav-wrapper  - See <main>
// footer--main           - See <main>
// page-block             - Color blocks, direct descendents of the `main` containers with
// page-width             - Generic container to hold any content, grid or not, stretches to 990
// grid-container         - Container for grid elements, default 990
//
// Styleguide Grid Basics.

/*================ Grid Container ================*/
// Standard grid with tiles that can peak out to left or right at width > 990
// safe to @extend from individual components
//
// .grid-container - Applies to container for grid elements
//
// Styleguide Grid Container.
.grid-container {
  @include page-container();
}

// generate-columns mixins can be found in sass_helpers/mixins.scss
@include shopify-breakpoint($desktop-up) {
  @include generate-columns;
}

@include shopify-breakpoint($tablet-only) {
  @include generate-columns($width: $column--tablet);
}

// The tablet grid is also 8 columns, but with narrower widths/column.
// Columns can span a different # of columns across desktop vs tablet using tablet-only classes
//
// .grid--tablet-4  - Grid item that will span 4 cols on tablet only
//
// Styleguide Grid Tablet.
@include shopify-breakpoint($tablet-only) {
  @include generate-columns($prefix: 'grid--tablet-', $width: $column--tablet);
}

/*================ Grid Item ================*/
// Defines a grid item
// **NOT TO BE EXTENDED**, creates way too many classes on account of the generate-columns function
//
// .grid-item - Applies to container that acts as a column
// .grid-X    - Where X is the number of columns required. Both classes must be supplied.
//
// Styleguide Grid Item.
.grid-item {
  float: left;
  position: relative;

  /*================ Grid Wrapper Helpers ================*/
  // * For regular grids (eg grids with equal numbers in each row), helpers for row clearing
  //   and removing right-margin that's present on all grid items
  // * This allows us to avoid having to create row wrappers for the grid
  // * `nth-child` child selectors are cleared depending on the grid-type
  //
  // .grid-container--halves   - Applied to 2-col grids
  // .grid-container--thirds   - Applied to 3-col grids
  // .grid-container--quarters - Applies to 4-col grids
  //
  // Styleguide Grid Wrapper Helpers.

  @include shopify-breakpoint($tablet-up) {
    .grid-container--halves & {
      @include omega(2n);
    }

    .grid-container--thirds & {
      @include omega(3n);
    }

    .grid-container--quarters & {
      @include omega(4n);
    }

    .grid-container--eights & {
      @include omega(8n);
    }
  }

  /*================ Mobile Grid ================*/
  // Grid becomes only 2 col on mobile,
  // Cols become %-based
  // Default mobile behavior is for all cols to span 100% on mobile
  // Otherwise, a special mobile only 2-col grid is available
  //
  // .grid--mobile - Applied to a .grid-item if it's to span 50% on mobile
  //
  // Styleguide Grid Mobile.

  @include shopify-breakpoint($mobile) {
    float: none;

    &.grid--mobile {
      @include span-columns(2 of 4);
      @include omega(2n);
      float: left;
    }

    &.grid--mobile.grid--last {
      + .grid-item {
        clear: none;
      }
    }
  }
}

/*================ Grid Row Clearing ================*/
// For irregular grids (eg grids with different column widths),
// right margin on right-most element in a row is removed via this class
//
// .grid--last - Applied to .grid-item to remove right margin
//
// Styleguide Grid Last.
.grid--last {
  margin-right: 0;
  // To avoid .row classes
  + .grid-item {
    clear: both;
  }
}

/*================ Fluid 1/3 Grid ================*/
// Officially we have an 8 col fixed width grid with fixed cols and margins
// But there are a few cases where we need a fluid % grid, specifically for 3-col layouts
// Right Margin is still applied in these cases
//
// .grid-item--fluid__third       - Applied to grid item that's 1/3 width
// .grid-item--fluid__two-thirds  - Applies to grid item that's 2/3 width
//
// Styleguide Grid Fluid 1/3 Grid.
@include shopify-breakpoint($tablet-up) {
  .grid-item--fluid__third {
    @include span-columns(4 of 12);
  }

  .grid-item--fluid__two-thirds {
    @include span-columns(8 of 12);
  }
}

/*================ Extended Grid ================*/
// Wide grid with content peeking from both sides by 2 columns worth
//
// .grid-container--wide   - Container for grid elements in wide grid
//                         - Includes left and right padding and negative left margin
// .grid--wide-left/right  - Left/right extended grid content. Gets cut off as window resizes
//                         - Includes negative left and right margin
//
// Styleguide Extended Grid/Grid Wide Details.

@include shopify-breakpoint($desktop-up) {
  .grid-container--wide {
    width: $wide;
    padding-left: $grid-extendor;
    padding-right: $grid-extendor;
    margin-left: -$grid-extendor;
  }

  .grid-item--wide {
    @include generate-extended-columns($extendor: $grid-extendor);
  }

  .grid--wide-right,
  .grid--wide-left {
    @extend .grid-item--wide;
  }

  .grid--wide-left {
    margin-left: -$grid-extendor;
  }

  .grid--wide-right {
    margin-right: -$grid-extendor;
  }
}

@include shopify-breakpoint($tablet-only) {
  .grid--wide-right {
    margin-right: 0;
  }
}

/*================ Flush Grid ================*/
// Fluid grid with no horizontal margins for when content must be flush with grid edges
//
// .grid-item--flush-half    - 50% width item
// .grid-item--flush-third   - 33.3% width item
// .grid-item--flush-quarter - 25% width item
//
// Styleguide Flush Grid.

@include shopify-breakpoint($tablet-up) {
  .grid-item--flush-half {
    width: percentage(1/2);
  }

  .grid-item--flush-third {
    width: percentage(1/3);
  }

  .grid-item--flush-quarter {
    width: percentage(1/4);
  }
}

/*================ Bordered Grid ================*/
// grid with borders between items but not around outside edges. Supports 2, 3, and 4-col grids.
// to be used in combination with flush grid.
// Total number of grid items must be a multiple of column number OR empty divs must be used to make up the difference.t
//
// Styleguide Bordered Grid.

.grid-item--bordered {
  border-bottom: $border-grey;

  @include shopify-breakpoint($mobile) {
    &:last-child {
      border-bottom: 0;
    }
  }

  @include shopify-breakpoint($tablet-up) {
    border-right: $border-grey;

    .grid-container--thirds & {
      &:nth-child(3n) {
        border-right: 0;
      }

      &:nth-last-child(-n+3) {
        border-bottom: 0;
      }
    }

    .grid-container--quarters & {
      &:nth-child(4n) {
        border-right: 0;
      }

      &:nth-last-child(-n+4) {
        border-bottom: 0;
      }
    }

    .grid-container--halves & {
      &:nth-child(2n) {
        border-right: 0;
      }

      &:nth-last-child(-n+2) {
        border-bottom: 0;
      }
    }
  }
}

/*================ Grid items with bottom margin ================*/
// Add bottom margin to grid-items on desktop and tablet. Designed for blocks of
// grid items that span multiple lines that need vertical space between them.
//
// Styleguide Grid items with bottom margin

.grid-item--margin-bottom {
  @include shopify-breakpoint($tablet-up) {
    margin-bottom: em($gutter);
  }
}