@charset "UTF-8";

//
// Flex Grid
//
// Markup: ../../templates/core/flex-grid/flex-grid.twig
//
// Style guide: Core.FlexGrid

// Set some variables to use later.
// We get the keys and assume they are in order from smallest breakpoint to
// the largest breakpoint.
$_codes: map-keys($su-grid-media);
$_codes-collapse: map-keys(map-remove($su-grid-media, nth($_codes, 1)));

// The container helper.
.flex-container {
  @include flex-container;

  &--collapse {
    @include margin(0 null);

    // Loop through each fo the breakpoints starting from the second smallest.
    @each $shortcode in $_codes-collapse {
      @include grid-media($shortcode) {
        @include margin(0 null);
      }
    }
  }

  &--row-gap {
    > * {
      // No media query for the small breakpoint.
      @include margin(0 0 map-get($su-grid-gutters, nth($_codes, 1)) 0);

      // Loop through each fo the breakpoints starting from the second smallest.
      $_codes-gap: map-keys(map-remove($su-grid-media, nth($_codes, 1)));
      @each $shortcode in $_codes-gap {
        @include grid-media($shortcode) {
          @include margin(0 0 map-get($su-grid-gutters, $shortcode) 0);
        }
      }
    }
  }
}

// Properties for all columns at all breakpoints.
%grid-column {
  position: relative;
  width: 100%;
  min-height: 1px;
}

// Sizes item according to its width/height properties and/or size of content.
.flex-auto {
  @extend %grid-column;
  flex: 0 0 auto;
  width: auto;
  max-width: none;
}

// Loop through each breakpoint to generate column and push classes
// For every column.
@each $_breakpoint, $_media-query in $su-grid-screens {
  // The breakpoint short code. eg: xs, sm, lg
  $_insert: breakpoint-insert($_breakpoint, $su-grid-screens);

  // For all breakpoints and columns create a default state.
  @for $n from 1 through $su-grid-columns {
    .flex#{$_insert}-#{$n}-of-#{$su-grid-columns},
    .flex-#{$n}-of-#{$su-grid-columns} {
      @extend %grid-column;
    }
  }

  // At each breakpoint create size and gutter specific settings for each
  // column.
  @include grid-media($_breakpoint) {
    // Foreach of the columns at this breakpoint create a helper push class.
    @for $n from 0 through ($su-grid-columns - 1) {
      @if not ($_insert == "" and $n == 0) { // No .flex-push-0.
        .flex-push#{$_insert}-#{$n} {
          @include flex-grid-push($n, $su-grid-columns);
        }
      }
    }
  }
}

// Loop through each column and breakpoint creating a responsive flex column.
// The gutter sizes change as the breakpoints change so as the breakpoints
// get larger for each breakpoint class we have to adjust the gutter.
@for $n from 1 through $su-grid-columns {
  .flex-#{$n}-of-#{$su-grid-columns} {
    $cols: $n of $su-grid-columns;
    // Start from the second to smallest breakpoint and go up.
    $_flex-grid: map-remove($su-grid-media, nth($_codes, 1));

    // Responsive column for everything that is not 100% width.
    @if $n != $su-grid-columns {
      @include responsive-flex-column($cols, $_flex-grid);
    }
    // One breakpoint only needed for 100% width items.
    @else {
      @include grid-media(nth($_codes, 1)) {
        @include flex-column(12 of 12);
      }
    }
  }
}

// Create breakpoint flex overrides.
// Loop through each of the breakpoints and columns to create a grid class.
// Start at the second item as the first entry would be the same as flex-x-of-y
@each $_code in $_codes-collapse {

  // We want to generate styles for all breakpoints that are larger
  // than the defined option so we remove the smaller ones and pass
  // the work to the responsive-flex-column mixin.
  $_grid-up: map-remove($su-grid-media, nth($_codes, 1));
  $_prev: $_code;

  @while $_prev != null {
    $_prev: breakpoint-previous($_prev);
    $_grid-up: map-remove($_grid-up, $_prev);
  }

  @for $n from 1 through $su-grid-columns {
    // The breakpoint short code. eg: xs, sm, lg with a dash
    $_insert: breakpoint-insert($_code, $su-grid-screens);

    // The flex-breakpoint-column class.
    .flex#{$_insert}-#{$n}-of-#{$su-grid-columns} {
      @include responsive-flex-column($n of $su-grid-columns, $_grid-up);
    }
  }
}
