// ----
// Sass (v3.4.21)
// Compass (v1.0.3)
// ----

// global breakpoints
$tiny:           320px                 !default;
$small:          480px                 !default;
$medium:         600px                 !default;
$large:          768px                 !default;
$xlarge:        1024px,'no-query' true !default; // fallback for IE8
$xxlarge:       1280px                 !default;
$huge:          1600px                 !default;

// config/_breakpoints.scss
$breakpoints: (
  'tiny':     320px,
  'small':    480px,
  'medium':   600px,
  'large':    768px,
  'xlarge':  1024px,
  'xxlarge': 1280px,
  'huge':    1600px
);

// config/_typography.scss
$text-sizing: (
  'centi': (
    'small': (
      'font-size': 12px,
      'line-height': 16px
    )
  ),
  'deci': (
    'small': (
      'font-size': 14px,
      'line-height': 20px
    )
  ),
  'base': (
    'small': (
      'font-size': 16px,
      'line-height': 26px
    )
  ),
  'deca': (
    'small': (
      'font-size': 18px,
      'line-height': 26px
    ),
    'large': (
      'font-size': 20px,
      'line-height': 30px
    )
  ),
  'h3': (
    'small': (
      'font-size': 22px,
      'line-height': 28px
    ),
    'large': (
      'font-size': 24px,
      'line-height': 32px
    )
  ),
  'h2': (
    'small': (
      'font-size': 24px,
      'line-height': 32px
    ),
    'large': (
      'font-size': 28px,
      'line-height': 36px
    )
  ),
  'h1': (
    'small': (
      'font-size': 24px,
      'line-height': 32px
    ),
    'xlarge': (
      'font-size': 58px,
      'line-height': 85px
    )
  )
);


// lib/functions/_responsive.scss
@function breakpoint($breakpoint-name) {
  $breakpoint-value: map-get($breakpoints, $breakpoint-name);

  @if $breakpoint-value {
    @return $breakpoint-value;
  }

  @warn "Breakpoint '#{$breakpoint-name}' not found in $breakpoints";
}

// lib/functions/_typography.scss
@function text-breakpoints-for($text-size) {
  $text-breakpoints: map-get($text-sizing, $text-size);

  @if $text-breakpoints {
    @return $text-breakpoints;
  }

  @warn "Text size '#{$text-size}' not found in $text-sizing";
}

@function text-properties-for($text-size, $breakpoint-name) {
  $text-breakpoints: text-breakpoints-for($text-size);
  $text-properties: map-get($text-breakpoints, $breakpoint-name);

  @if $text-properties {
    @return $text-properties;
  }

  @warn "Breakpoint '#{$breakpoint-name}' for text size '#{$text-size}' was not found";
}

// lib/mixins/_responsive.scss
@mixin respond-above($breakpoint-name) {
  $breakpoint-value: breakpoint($breakpoint-name);

  @if $breakpoint-value {
    @media screen and (min-width: $breakpoint-value) {
      @content;
    }
  }
}

// lib/mixins/_typography.scss
@mixin text-size($text-size, $breakpoint-name: 'small') {
  $text-size-properties: text-properties-for($text-size, $breakpoint-name);

  @if $text-size-properties {
    font-size: map-get($text-size-properties, 'font-size');
    line-height: map-get($text-size-properties, 'line-height');
  }
}

@mixin responsive-text-size($text-size, $default-breakpoint: 'small') {
  @include text-size($text-size, $default-breakpoint);

  $text-breakpoints-map: text-breakpoints-for($text-size);
  $text-breakpoints-keys: map-keys($text-breakpoints-map);

  @each $breakpoint-name in $text-breakpoints-keys {
    @if $breakpoint-name != $default-breakpoint {
      @include respond-above($breakpoint-name) {
        @include text-size($text-size, $breakpoint-name);
      }
    }
  }
}

// _typography.scss
h1,
.text--mega {
  @include responsive-text-size('mega');
}

h2,
.text--kilo {
  @include responsive-text-size('kilo');
}

h3,
.text--hecto {
  @include responsive-text-size('hecto');
}

h4,
.text--deca {
  @include responsive-text-size('deca');
}

h5,
h6,
body,
.text--base {
  @include responsive-text-size('base');
}

.text--deci {
  @include responsive-text-size('deci');
}

small,
.text--centi {
  @include responsive-text-size('centi');
}