// Layout
// ==========================================================================

// Usage:
// For two equal columns

// <div class="grid-row">
//   <div class="column-one-half">
//
//   </div>
//   <div class="column-one-half">
//
//   </div>
// </div>

// Use .grid-row to define a row for grid columns to sit in
// .o-layout?
.gv-o-grid-row {
  // Should we use a utility class, or OK to use a mixin here?
  @include clearfix;

  margin: 0 (-$gutter-half);
}

.gv-o-grid-item {
  @include box-sizing(border-box);

  @include media(tablet) {
    float: left;
  }

  padding: 0 $gutter-half;
}

// A mixin for a grid column
// Creates a cross browser grid column with a standardised gutter between the
// columns. Widths should be defined as fractions of the full desktop width
// they want to fill. By default they break to become full width at tablet size
// but that can be configured to be desktop using the `$full-width` argument.
//
// Usage:
//
//   .column-quarter {
//     @include grid-column( 1/4 );
//   }
//   .column-half {
//     @include grid-column( 1/2 );
//   }
//   .column-third {
//     @include grid-column( 1/3 );
//   }
//   .column-two-thirds {
//     @include grid-column( 2/3 );
//   }
//   .column-desktop-third {
//     @include grid-column( 1/3, $full-width: desktop );
//   }
@mixin grid-column($width, $full-width: tablet, $float: left) {

  @include media($full-width) {
    width: percentage($width);
    float: $float;
  }

  @include ie-lte(7) {
    width: (($site-width + $gutter) * $width) - $gutter;
  }

  padding: 0 $gutter-half;
  @include box-sizing(border-box);
}

// Use .grid-column to create a grid column with 15px gutter
// By default grid columns break to become full width at tablet size


// An extendable selector to outdent to the full page-width
// So that you can create elements that take up the gutters on the side of the
// page and butt up to the edge of the browser on smaller screens (rather than
// leaving a gutter at the edge of the page).
//
// Usage:
//
// .hero-image-container {
//   @extend %outdent-to-full-width;
// }
%outdent-to-full-width {
  margin-right: -$gutter-half;
  margin-left: -$gutter-half;

  @include media(tablet) {
    margin-right: -$gutter;
    margin-left: -$gutter;
  }
}
