// Container widths
//
// Set the container width, and override it for fixed navbars in media queries.

.#{$container-class-name}
  +make-container

  // For each breakpoint, define the maximum width of the container in a media query
  @each $breakpoint, $container-max-width in $container-max-widths
    +media-breakpoint-up($breakpoint)
      max-width: $container-max-width

// Fluid container
//
// Utilizes the mixin meant for fixed width containers, but without any defined
// width for fluid, full width layouts.

.container-fluid
  +make-container

// Row
//
// Rows contain and clear the floats of your columns.

.row
  +make-row

// Columns
//
// Common styles for small and large grid columns

.row>[class*=col-]
  position: relative
  // Prevent columns from collapsing when empty
  min-height: 1px
  // Inner gutter via padding
  +padding(horizontal, $grid-gutter-width / 2)

+make-grid-columns

.col-xs-first
  order: -1
.col-xs-last
  order: 1

+media-breakpoint-up(sm)
  .col-sm-first
    order: -1
  .col-sm-last
    order: 1

+media-breakpoint-up(md)
  .col-md-first
    order: -1
  .col-md-last
    order: 1

+media-breakpoint-up(lg)
  .col-lg-first
    order: -1
  .col-lg-last
    order: 1

+media-breakpoint-up(xl)
  .col-xl-first
    order: -1
  .col-xl-last
    order: 1

// Alignment for every column in row

.row-xs-top
  align-items: flex-start
.row-xs-center
  align-items: center
.row-xs-bottom
  align-items: flex-end

+media-breakpoint-up(sm)
  .row-sm-top
    align-items: flex-start
  .row-sm-center
    align-items: center
  .row-sm-bottom
    align-items: flex-end

+media-breakpoint-up(md)
  .row-md-top
    align-items: flex-start
  .row-md-center
    align-items: center
  .row-md-bottom
    align-items: flex-end

+media-breakpoint-up(lg)
  .row-lg-top
    align-items: flex-start
  .row-lg-center
    align-items: center
  .row-lg-bottom
    align-items: flex-end

+media-breakpoint-up(xl)
  .row-xl-top
    align-items: flex-start
  .row-xl-center
    align-items: center
  .row-xl-bottom
    align-items: flex-end

// Alignment per column

.col-xs-top
  align-self: flex-start
.col-xs-center
  align-self: center
.col-xs-bottom
  align-self: flex-end

+media-breakpoint-up(sm)
  .col-sm-top
    align-self: flex-start
  .col-sm-center
    align-self: center
  .col-sm-bottom
    align-self: flex-end

+media-breakpoint-up(md)
  .col-md-top
    align-self: flex-start
  .col-md-center
    align-self: center
  .col-md-bottom
    align-self: flex-end

+media-breakpoint-up(lg)
  .col-lg-top
    align-self: flex-start
  .col-lg-center
    align-self: center
  .col-lg-bottom
    align-self: flex-end

+media-breakpoint-up(xl)
  .col-xl-top
    align-self: flex-start
  .col-xl-center
    align-self: center
  .col-xl-bottom
    align-self: flex-end

=grid($gutter-size)
  &.row
    +margin(horizontal, $gutter-size/2 * -1)
    >*
      +padding(horizontal, $gutter-size/2)

// helper
.row
  @for $i from 0 through 16
    $gutter-size: $i * 4
    &.is-gutter-width-#{$gutter-size}
      +margin(horizontal, px_to_rem($gutter-size * 1px, $base-px) / -2)
      >[class*=col-]
        +padding(horizontal, px_to_rem($gutter-size * 1px, $base-px) / 2)