@import 'chassis/constants/math';
@import 'chassis/constants/colors';
@import 'chassis/constants/typography';

@import 'chassis/config/breakpoints';
@import 'chassis/config/typography';
@import 'chassis/config/layout';
@import 'chassis/config/z-index';

@import 'chassis/functions/math';
@import 'chassis/functions/unit-conversion';
@import 'chassis/functions/z-index';

@import 'chassis/mixins/media-queries';
@import 'chassis/mixins/misc';
@import 'chassis/mixins/flex-layout';

@import 'chassis/typography/definitions';
@import 'chassis/typography/functions';
@import 'chassis/typography/mixins';

@import 'chassis/reset';
@import 'chassis/global-modifiers';

// Used to set initial font-size, line-height, and margin values for
// mobile-first media-queries
$first-viewport-width-range: nth(map-keys($viewport-width-ranges), 1);
$first-viewport-width-range-upper-bound: map-get(nth(map-values($viewport-width-ranges), 1), upper-bound);

// Chassis Core ----------------------------------------------------------------

.chassis {
  min-width: $ui-min-width;

  margin: 0;
  padding: 0;

  font-size: get-font-size(root, $first-viewport-width-range-upper-bound);
  line-height: get-line-height(root, $first-viewport-width-range-upper-bound);

  h1 {
    font-size: get-initial-heading-font-size($h1-font-size-alias, $first-viewport-width-range-upper-bound);
    line-height: get-initial-heading-line-height($h1-font-size-alias, $first-viewport-width-range-upper-bound);
    margin-bottom: get-initial-heading-margin-bottom($h1-font-size-alias, $first-viewport-width-range-upper-bound);
  }

  h2 {
    font-size: get-initial-heading-font-size($h2-font-size-alias, $first-viewport-width-range-upper-bound);
    line-height: get-initial-heading-line-height($h2-font-size-alias, $first-viewport-width-range-upper-bound);
    margin-bottom: get-initial-heading-margin-bottom($h2-font-size-alias, $first-viewport-width-range-upper-bound);
  }

  h3 {
    font-size: get-initial-heading-font-size($h3-font-size-alias, $first-viewport-width-range-upper-bound);
    line-height: get-initial-heading-line-height($h3-font-size-alias, $first-viewport-width-range-upper-bound);
    margin-bottom: get-initial-heading-margin-bottom($h3-font-size-alias, $first-viewport-width-range-upper-bound);
  }

  h4 {
    font-size: get-initial-heading-font-size($h4-font-size-alias, $first-viewport-width-range-upper-bound);
    line-height: get-initial-heading-line-height($h4-font-size-alias, $first-viewport-width-range-upper-bound);
    margin-bottom: get-initial-heading-margin-bottom($h4-font-size-alias, $first-viewport-width-range-upper-bound);
  }

  h5 {
    font-size: get-initial-heading-font-size($h5-font-size-alias, $first-viewport-width-range-upper-bound);
    line-height: get-initial-heading-line-height($h5-font-size-alias, $first-viewport-width-range-upper-bound);
    margin-bottom: get-initial-heading-margin-bottom($h5-font-size-alias, $first-viewport-width-range-upper-bound);
  }

  h6 {
    font-size: get-initial-heading-font-size($h6-font-size-alias, $first-viewport-width-range-upper-bound);
    line-height: get-initial-heading-line-height($h6-font-size-alias, $first-viewport-width-range-upper-bound);
    margin-bottom: get-initial-heading-margin-bottom($h6-font-size-alias, $first-viewport-width-range-upper-bound);
  }

  legend {
    font-size: get-initial-heading-font-size($form-legend-font-size-alias, $first-viewport-width-range-upper-bound);
    line-height: get-initial-heading-line-height($form-legend-font-size-alias, $first-viewport-width-range-upper-bound);
    margin-bottom: get-initial-heading-margin-bottom($form-legend-font-size-alias, $first-viewport-width-range-upper-bound);
  }

  // Container Elements
  section,
  nav,
  form {
    margin-bottom: ( ( get-line-height(root, $first-viewport-width-range-upper-bound) / get-font-size(root, $first-viewport-width-range-upper-bound) ) * $type-scale-ratio ) * 1em;
  }

  // Inner Elements
  // section section,
  nav section,
  section nav,
  nav nav,
  article,
  fieldset,
  figure,
  pre,
  blockquote,
  table,
  canvas,
  embed {
    margin-bottom: ( get-line-height(root, $first-viewport-width-range-upper-bound) / get-font-size(root, $first-viewport-width-range-upper-bound) ) * 1em;
  }

  p {
    margin-bottom: 1em;
  }

  // Auto Typography -----------------------------------------------------------

  @each $range-semantic-name, $range-bounds in $viewport-width-ranges {

    $index: index(map-keys($viewport-width-ranges), $range-semantic-name);
    $upper-bound: map-get($range-bounds, upper-bound);

    @if $index == length($viewport-width-ranges) {
      @include min-viewport-width($range-semantic-name) {
        @include global-typography-rules($upper-bound);
      }
    } @elseif $index != 1 {
      @include at-viewport-width($range-semantic-name) {
        @include global-typography-rules($upper-bound);
      }
    }

  }

}