$bolt-breakpoints: (
  xxsmall:  320px,
  xsmall:   400px,
  small:    600px,
  medium:   800px,
  large:    1000px,
  xlarge:   1200px,
  xxlarge:  1400px,
  xxxlarge: 1920px
);

$mq-breakpoints: $bolt-breakpoints;

$bolt-color-default: 'base';

$bolt-brand-colors: (
  'indigo': (
    'xdark': hsl(233, 71%, 8%),
    'dark': hsl(233, 47%, 16%),
    'base': hsl(233, 47%, 23%),
    'light': hsl(233, 33%, 49%),
    'xlight': hsl(233, 73%, 81%),
  ),
  'yellow': (
    'xdark': hsl(43, 100%, 20%),
    'dark': hsl(43, 82%, 50%),
    'base': hsl(43, 100%, 65%),
    'light': hsl(43, 100%, 80%),
    'xlight': hsl(43, 100%, 90%),
  ),
  'teal': (
    'xdark': hsl(180, 100%, 10%),
    'dark': hsl(180, 82%, 22%),
    'base': hsl(180, 100%, 30%),
    'light': hsl(180, 45%, 64%),
    'xlight': hsl(180, 48%, 81%),
  ),
  'orange': (
    'xdark': hsl(15, 100%, 20%),
    'dark': hsl(15, 82%, 39%),
    'base': hsl(15, 82%, 50%),
    'light': hsl(15, 100%, 70%),
    'xlight': hsl(15, 100%, 85%),
  ),
  'gray': (
    'xdark': hsl(233, 6%, 19%),
    'dark': hsl(233, 5.3%, 38%),
    'base': hsl(233, 5.7%, 57.6%),
    'light': hsl(233, 20%, 90%),
    'xlight': hsl(233, 23%, 97%),
  ),
  'black': (
    'base': hsl(225, 8%, 9%),
  ),
  'white': (
    'base': hsl(0, 0%, 100%),
  ),
);

$bolt-status-colors: (
  'blue': (
    'dark': hsl(201, 100%, 25%),
    'base': hsl(201, 100%, 35%),
    'light': hsl(201, 100%, 92%),
  ),
  'success': (
    'dark': rgb(37, 41%, 25%),
    'base': hsl(123, 41%, 35%),
    'light': hsl(123, 41%, 90%),
  ),
  'error': (
    'dark': hsl(6, 76%, 35%),
    'base': hsl(6, 76%, 40%),
    'light': hsl(6, 80%, 90%),
  ),
  'warning': (
    'dark': hsl(51, 80%, 45%),
    'base': hsl(51, 80%, 55%),
    'light': hsl(51, 80%, 90%),
  ),
);

$bolt-social-colors: (
  'social': (
    'facebook': hsl(222, 46%, 42%),
    'twitter': hsl(196, 100%, 46%),
    'linkedin': hsl(201, 96%, 36%),
  ),
);

$bolt-colors: map-merge(
  map-merge($bolt-brand-colors, $bolt-status-colors),
  $bolt-social-colors
);

$bolt-base-font-size--min: 15px;

$bolt-base-font-size--max: 18px;

$bolt-fonts--subset-loaded-class: 'js-fonts-subset-loaded';

$bolt-fonts--loaded-class: 'js-fonts-loaded';

$bolt-shadow-color: bolt-color(black);

$bolt-shadow--small: 0 2px 0.15rem rgba($bolt-shadow-color, 0.3);

$bolt-shadow--medium: 0 0.15rem 0.3rem rgba($bolt-shadow-color, 0.35);

$bolt-shadow--large: 0 0.35rem 0.6rem rgba($bolt-shadow-color, 0.18);

$bolt-border-width: 1px;

$bolt-border-style: solid;

$bolt-border-color: rgba(bolt-color(gray), 0.2);

$bolt-border-radius: 3px;

$bolt-transition: ease-in-out 200ms;

$bolt-transition-ease: ease-in-out;

$bolt-transition-timing: 200ms;

$bolt-translate-none: translate3d(0, 0, 0);

$bolt-translate-raised--small: translate3d(0, -1px, 0);

$bolt-translate-raised--medium: translate3d(0, -0.125rem, 0);

$bolt-translate-raised--large: translate3d(0, -0.25rem, 0);

$bolt-global-link-hover-opacity: bolt-opacity(80);

$bolt-global-link-active-opacity: bolt-opacity(60);

$bolt-global-border-opacity: bolt-opacity(20);

$bolt-global-border-color: bolt-color(gray);

$bolt-global-button-hover-mix: 15%;

$bolt-global-button-hover-color: bolt-color(white);

$bolt-global-button-active-mix: 25%;

$bolt-global-button-active-color: bolt-color(black);

$bolt-block-elements-list: 'p',
  'pre',
  'blockquote',
  'table',
  'ol',
  'ul',
  'dl',
  'fieldset',
  'legend',
  'details',
  'summary',
  'hr',
  'address';

$bolt-all-block-elements: $bolt-unquoted-block-elements-list;

$bolt-heading-elements-list: 'h1',
  'h2',
  'h3',
  'h4',
  'h5',
  'h6';

$bolt-all-heading-elements: $bolt-unquoted-heading-elements-list;

$_bolt-custom-block-elements: ();

$_bolt-custom-inline-elements: ();

$_bolt-custom-inline-block-elements: ();

$bolt-all-custom-block-elements: ();

$bolt-all-custom-inline-block-elements: ();

$bolt-all-custom-inline-elements: ();

@mixin bolt-register-element($element, $element-type) { 
  @if ($element-type != 'inline' and $element-type != 'inline-block' and $element-type != 'block'){
    @error 'Please register your #{$element} element as either an inline, inline-block or block.';
  }

  // @TODO: find a way to dynamically assign the right list to this
  @if ($element-type == 'inline') {
    $_bolt-custom-inline-elements: append($_bolt-custom-inline-elements, $element) !global;

  } @else if  ( $element-type == 'block') {
    $_bolt-custom-block-elements: append($_bolt-custom-block-elements, $element) !global;
  } @else if  ( $element-type == 'inline-block') {
    $_bolt-custom-inline-block-elements: append($_bolt-custom-inline-block-elements, $element) !global;
  }
}

$bolt-z-indexes: (
  sets: (
    fab: 300,
    modal: 200,
    modalBG: 180,
    navFixed: 160,
    tooltip: 140,
    popover: 120,
    nav: 100,
    contentTop: 80,
    content: 60,
    contentBottom: 40,
    backgroundTop: 20,
    background: 0,
    backgroundBottom: -20,
  ),
);

$bolt-spacing-gutter: 2rem;

$bolt-spacing-leading: 1.65;

$bolt-spacing-squished: 0.5;

$bolt-spacing-stretched: 1.5;

$bolt-spacing-values: (
  '': 1,
  'xxsmall': 0.125,
  'xsmall': 0.25,
  'small': 0.5,
  'medium': 1,
  'large': 2,
  'xlarge': 4,
  'xxlarge': 8,
);

$bolt-spacing-properties: ('padding', 'margin');

$bolt-spacing-directions: ('', 'top', 'right', 'bottom', 'left');

$bolt-spacing-types: ('', 'squished', 'stretched');

$bolt-opacities: (
  0: 0,
  20: .2,
  40: .4,
  60: .6,
  80: .8,
  100: 1
);

@function bolt-get-shadows-map($base-color: rgb(6, 10, 36)) { 
  $bolt-shadows: (
    'sets': (
      //'b1': (
      //  'base': 'inset 0 1px 3px rgba(0,0,0,0.12), inset 0 1px 2px rgba(0,0,0,0.24)',
      //  'lifted': ''
      //),
      'level-10': (
        'base': '0 1px 2px 1px #{transparentize($base-color, .92)}',
        'raised': ''
      ),
      'level-20': (
        'base': '0 1px 4px 1px #{transparentize($base-color, .90)}, 0 5px 10px 0 #{transparentize($base-color, .92)}',
        'raised': '0 1px 8px 1px #{transparentize($base-color, .82)}, 0 5px 10px 1px #{transparentize($base-color, .85)}, 0 15px 30px 0 #{transparentize($base-color, .84)}'
      ),
      'level-30': (
        'base': '0 8px 15px 1px #{transparentize($base-color, .90)}, 0 18px 24px 1px #{transparentize($base-color, .88)}',
        'raised': '0 8px 15px 1px #{transparentize($base-color, .90)}, 0 24px 36px 1px #{transparentize($base-color, .82)}, 0 35px 50px 0 #{transparentize($base-color, .75)}'
      ),
      'level-40': (
        'base': '0 10px 20px 1px #{transparentize($base-color, .90)}, 0 24px 36px 1px #{transparentize($base-color, .82)}',
        'raised': '0 10px 20px 1px #{transparentize($base-color, .90)}, 0 36px 49px 1px #{transparentize($base-color, .80)}, 0 45px 65px 0 #{transparentize($base-color, .70)}'
      ),
      'level-50': (
        'base': '0 10px 30px 1px #{transparentize($base-color, .90)}, 0 40px 48px 1px #{transparentize($base-color, .75)}',
        'raised': '0 10px 30px 1px #{transparentize($base-color, .90)}, 0 50px 70px 1px #{transparentize($base-color, .80)}, 0 55px 80px 0 #{transparentize($base-color, .70)}'
      ),
      'level-60': (
        'base': '0 10px 30px 1px #{transparentize($base-color, .90)}, 0 50px 60px 1px #{transparentize($base-color, .60)}',
        'raised': '0 10px 30px 1px #{transparentize($base-color, .90)}, 0 70px 80px 1px #{transparentize($base-color, .80)}, 0 80px 120px 0 #{transparentize($base-color, .65)}'
      ),
      'level-70': (
        'base': '0 10px 30px 1px #{transparentize($base-color, .90)}, 0 80px 90px 1px #{transparentize($base-color, .60)}',
        'raised': '0 10px 30px 1px #{transparentize($base-color, .90)}, 0 110px 130px 1px #{transparentize($base-color, .75)}, 0 130px 150px 0 #{transparentize($base-color, .65)}'
      )
    )
  );
  @return $bolt-shadows;
}

$bolt-shadows: bolt-get-shadows-map();

$bolt-font-family--japanese: -apple-system, BlinkMacSystemFont, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', '游ゴシック', '游ゴシック体', YuGothic, 'Yu Gothic', 'メイリオ', Meiryo, 'ＭＳ ゴシック', 'MS Gothic', HiraKakuProN-W3, 'TakaoExゴシック', TakaoExGothic, 'MotoyaLCedar', 'Droid Sans Japanese', sans-serif;

$bolt-font-family--sans-fallback: -apple-system, BlinkMacSystemFont, /* [1] */
  'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', /* [2] */
  'Helvetica Neue', sans-serif;

$bolt-font-family--serif: 'Georgia', serif;

$bolt-font-family--mono-fallback: monospace, monospace;

$bolt-font-family--sans: 'Open Sans', 'Helvetica Neue', sans-serif;

$bolt-font-family--sans-subset: 'OpenSansSubset', 'Helvetica Neue', sans-serif;

$bolt-font-family--mono: monospace, monospace;

$bolt-font-families: (
  font-families: (
    body: (
      fallback-font: $bolt-font-family--sans-fallback,
      custom-font:   $bolt-font-family--sans,
      loaded-class:  $bolt-fonts--loaded-class
    ),
    bodySubset: (
      fallback-font: $bolt-font-family--sans-fallback,
      custom-font:   $bolt-font-family--sans-subset,
      loaded-class:  $bolt-fonts--subset-loaded-class
    ),
    heading: (
      fallback-font: $bolt-font-family--sans-fallback,
      custom-font:   $bolt-font-family--sans,
      loaded-class:  $bolt-fonts--loaded-class
    ),
    code: (
      fallback-font: $bolt-font-family--mono-fallback,
      custom-font:   $bolt-font-family--mono,
      loaded-class:  $bolt-fonts--loaded-class
    )
  )
);

$bolt-font-size--small-bp: bolt-rem(bolt-breakpoint(xxsmall));

$bolt-font-size--medium-bp: bolt-rem(bolt-breakpoint(medium));

$bolt-font-size--xxxlarge--max: 3.083rem;

$bolt-font-size--xxxlarge--min: 2.275rem;

$bolt-font-size--xxlarge: 1.781rem;

$bolt-font-size--xlarge: 1.417rem;

$bolt-font-size--large: 1.111rem;

$bolt-font-size--medium: 1rem;

$bolt-font-size--small: 0.9rem;

$bolt-font-size--xsmall: 0.8rem;

$bolt-line-height--xxxlarge: 1.14;

$bolt-line-height--xxlarge: 1.31;

$bolt-line-height--xlarge: 1.35;

$bolt-line-height--large: 1.45;

$bolt-line-height--medium: 1.65;

$bolt-line-height--small: 1.51;

$bolt-line-height--xsmall: 1.45;

$bolt-line-height--tight: 1.111;

$bolt-font-sizes: (
  font-sizes: (
    xxxlarge: (
      font-size: (
        $bolt-font-size--small-bp: $bolt-font-size--xxxlarge--min,
        $bolt-font-size--medium-bp: $bolt-font-size--xxxlarge--max
      ),
      line-height: (
        regular: $bolt-line-height--xxxlarge,
        tight: $bolt-line-height--tight
      ),
    ),
    xxlarge: (
      font-size: $bolt-font-size--xxlarge,
      line-height: (
        regular: $bolt-line-height--xxlarge,
        tight: $bolt-line-height--tight
      )
    ),
    xlarge: (
      font-size: $bolt-font-size--xlarge,
      line-height: (
        regular: $bolt-line-height--xlarge,
        tight: $bolt-line-height--tight
      )
    ),
    large: (
      font-size: $bolt-font-size--large,
      line-height: (
        regular: $bolt-line-height--large,
        tight: $bolt-line-height--tight
      )
    ),
    medium: (
      font-size: $bolt-font-size--medium,
      line-height: (
        regular: $bolt-line-height--medium,
        tight: $bolt-line-height--tight
      )
    ),
    small: (
      font-size: $bolt-font-size--small,
      line-height: (
        regular: $bolt-line-height--small,
        tight: $bolt-line-height--tight
      )
    ),
    xsmall: (
      font-size: $bolt-font-size--xsmall,
      line-height: (
        regular: $bolt-line-height--xsmall,
        tight: $bolt-line-height--tight
      )
    )
  )
);

$bolt-font-weight--regular: 400;

$bolt-font-weight--semibold: 600;

$bolt-font-weight--bold: 800;

$bolt-font-weights: (
  font-weights: (
    bold:     $bolt-font-weight--bold,
    semibold: $bolt-font-weight--semibold,
    regular:  $bolt-font-weight--regular,
    normal:   $bolt-font-weight--regular
  )
);

@function bolt-breakpoint($name) { 
  @return map-get($bolt-breakpoints, $name);
}

@mixin bolt-mq($args...) { 
  @include mq($args...) {
    @content;
  }
}

@mixin bolt-poly-fluid-sizing($property, $map) { 
  // Get the number of provided breakpoints
  $length: length(map-keys($map));

  // Error if the number of breakpoints is < 2
  @if ($length < 2) {
    @error 'bolt-poly-fluid-sizing() $map requires at least values';
  }

  // Sort the map by viewport width (key)
  $map: bolt-map-sort($map);
  $keys: map-keys($map);


  // $map: (576px: 22px, 320px: 18px, 992px: 34px, 768px: 24px);
  // @include bolt-poly-fluid-sizing('font-size', $map);

  // Minimum size
  #{$property}: map-get($map, nth($keys, 1));

  // Interpolated size through breakpoints
  @for $i from 1 through ($length - 1) {
    @media (min-width: nth($keys, $i)) {
      $value1: map-get($map, nth($keys, $i));
      $value2: map-get($map, nth($keys, ($i + 1)));
      // If values are not equal, perform linear interpolation
      @if ($value1 != $value2) {
        #{$property}: bolt-linear-interpolation((nth($keys, $i): $value1, nth($keys, ($i + 1)): $value2));
      } @else {
        #{$property}: $value1;
      }
    }
  }

  // Maxmimum size
  @media (min-width: nth($keys, $length)) {
    #{$property}: map-get($map, nth($keys, $length));
  }
}

@mixin bolt-button-color($color) { 
  color: bolt-text-contrast($color);
  background-color: $color;
  border-color: mix(black, $color, 25%);

  // &:hover {
  //   color: bolt-text-contrast($color);
  //   background-color: mix(black, $color, 15%);
  //   border-color: mix(black, $color, 40%);
  // }
  //
  // &:focus,
  // &:active {
  //   color: bolt-text-contrast($color);
  //   background-color: mix(black, $color, 30%);
  //   border-color: mix(black, $color, 55%);
  // }
}

@function bolt-color($color, $tone: $bolt-color-default) { 
  @return map-get-deep($bolt-colors, quote($color), $tone);
}

@mixin bolt-color($color, $tone: $bolt-color-default, $important: null) { 
  @if $important == important {
    $important: !important;
  }

  /* stylelint-disable-next-line */
  color: map-get-deep($bolt-colors, $color, $tone) $important;
}

@mixin bolt-full-bleed() { 
  position: relative;
  right: 50%;
  left: 50%;
  width: 100%; //fallback if vw not supported.
  width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
  margin-top: -0.5px; //-0.5px is currently needed to patch a rendering bug in Firefox (when combined with layers being hardware accelerated)
  margin-bottom: -0.5px; //-0.5px is currently needed to patch a rendering bug in Firefox (when combined with layers being hardware accelerated)
}

@mixin bolt-vertical-scroll() { 
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

@mixin bolt-horizontal-scroll() { 
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

@function _bolt-create-spacing-map($sizes, $char: '') { 
  $map: ();
  @each $name, $value in $sizes {
    $keyName: $name;
    @if ($char != '' and $keyName != null) {
      $keyName: $char + $keyName;
    }
    $keyValue: $value * $bolt-spacing-gutter;
    $map: map-merge($map, ($keyName: $keyValue));
  }
  @return $map;
}

$bolt-spacing-sizes: _bolt-create-spacing-map($bolt-spacing-values);

@function bolt-spacing($size) { 
  @return map-get($bolt-spacing-sizes, nth($size, 1));
}

@function bolt-v-spacing($size, $modifier: null) { 
  @if ($modifier == 'squished') {
    $modifier: $bolt-spacing-squished;
  } @elseif ($modifier == 'stretched') {
    $modifier: $bolt-spacing-stretched;
  } @else {
    $modifier: 1;
  }

  @return (bolt-spacing($size) / bolt-strip-unit($bolt-spacing-gutter)) * $bolt-spacing-leading * $modifier;
}

@function bolt-vertical-spacing($size) { 
  @return bolt-v-spacing($size);
}

@function _bolt-collapse-directional-values($vals) { 
  $output: null;

  $a: nth($vals, 1);
  $b: if(length($vals) < 2, $a, nth($vals, 2));
  $c: if(length($vals) < 3, $a, nth($vals, 3));
  $d: if(length($vals) < 2, $a, nth($vals, if(length($vals) < 4, 2, 4)));

  @if $a == 0 { $a: 0; }
  @if $b == 0 { $b: 0; }
  @if $c == 0 { $c: 0; }
  @if $d == 0 { $d: 0; }

  @if $a == $b and $a == $c and $a == $d { $output: $a; }
  @else if $a == $c and $b == $d { $output: $a $b; }
  @else if $b == $d { $output: $a $b $c; }
  @else { $output: $a $b $c $d; }

  @return $output;
}

@function _bolt-contains-falsy($list) { 
  @each $item in $list {
    @if not $item {
      @return true;
    }
  }

  @return false;
}

@mixin _bolt-directional-property($prefix, $suffix, $values) { 
  @if $important == important {
    $important: !important;
  }

  // Property Names
  $top:    $prefix + '-top'    + if($suffix, '-#{$suffix}', '');
  $bottom: $prefix + '-bottom' + if($suffix, '-#{$suffix}', '');
  $left:   $prefix + '-left'   + if($suffix, '-#{$suffix}', '');
  $right:  $prefix + '-right'  + if($suffix, '-#{$suffix}', '');
  $all:    $prefix +             if($suffix, '-#{$suffix}', '');

  $values: _bolt-collapse-directional-values($values);

  @if _bolt-contains-falsy($values) {
    @if nth($values, 1) { #{$top}: nth($values, 1) $important; }

    @if length($values) == 1 {
      @if nth($values, 1) {
        #{$right}: nth($values, 1) $important;
        #{$bottom}: nth($values, 1) $important;
        #{$left}: nth($values, 1) $important;
      }
    } @else {
      @if nth($values, 2) { #{$right}: nth($values, 2) $important; }
    }

    @if length($values) == 2 {
      @if nth($values, 1) { #{$bottom}: nth($values, 1) $important; }
      @if nth($values, 2) { #{$left}: nth($values, 2) $important; }
    } @else if length($values) == 3 {
      @if nth($values, 3) { #{$bottom}: nth($values, 3) $important; }
      @if nth($values, 2) { #{$left}: nth($values, 2) $important; }
    } @else if length($values) == 4 {
      @if nth($values, 3) { #{$bottom}: nth($values, 3) $important; }
      @if nth($values, 4) { #{$left}: nth($values, 4) $important; }
    }
  } @else {
    #{$all}: $values $important;
  }
}

@mixin bolt-z-index($key: "content", $utility: false) { 
  $indexes: map-get($bolt-z-indexes, 'sets');
  $important: '';

  @if $utility {
    $important: '!important';
  }
  @if map-has-key($indexes, $key) {
    z-index: map-get($indexes, $key) #{$important};
  } @else {
    @error 'A value, #{$key}, was passed into @include bolt-z-index() that is not defined in $bolt-z-indexes';
  }
}

@function bolt-z-index($key) { 
  $indexes: map-get($bolt-z-indexes, 'sets');
  @if map-has-key($indexes, $key) {
    @return map-get($indexes, $key)
  } @else {
    @error 'A value, #{$key}, was passed into bolt-z-index() that is not defined in $bolt-z-indexes';
  }
}

@mixin bolt-shadow($key: 'G', $lifted: false, $base-color: false, $utility: false) { 
  $shadows: map-get(bolt-get-shadows-map(), 'sets');
  @if $base-color {
    $shadows: map-get(bolt-get-shadows-map($base-color), 'sets');
  }
  $important: '';

  @if $utility {
    $important: '!important';
  }
  @if not(map-has-key($shadows, $key)) {
    @error 'A value, #{$key}, was passed into @include bolt-shadow() that is not defined in $bolt-shadows';
  } @else {
    @if $lifted {
      transform: translateY(-2px) #{$important};
      box-shadow: unquote(map-get(map-get($shadows, $key), 'raised')) #{$important};
    } @else {
      transition: all 0.3s cubic-bezier(.25,.8,.25,1) #{$important};
      box-shadow: unquote(map-get(map-get($shadows, $key), 'base')) #{$important};
    }
  }
}

@function _bolt-str-replace($string, $search, $replace: '') { 
  $index: str-index($string, $search);

  @if $index {
    @return str-slice($string, 1, $index - 1) + $replace + _bolt-str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
  }

  @return $string;
}

@mixin bolt-font-face($name, $path, $weight: null, $style: null, $exts: woff2 woff) { 
  $src: null;

  $extmods: (
    eot: '?',
    svg: '#' + _bolt-str-replace($name, ' ', '_')
  );

  $formats: (
    otf: 'opentype',
    ttf: 'truetype'
  );

  @each $ext in $exts {
    $extmod: if(map-has-key($extmods, $ext), $ext + map-get($extmods, $ext), $ext);
    $format: if(map-has-key($formats, $ext), map-get($formats, $ext), $ext);
    $src: append($src, url('#{$path}.#{$extmod}') format(quote($format)), comma);
  }

  @font-face {
    font-family: quote($name);
    font-style: $style;
    font-weight: $weight;
    src: $src;
  }
}

@mixin bolt-font-family($type, $is_root: false) { 
  $fallback-font-family: map-get-deep($bolt-font-families, 'font-families', $type, 'fallback-font');
  $custom-font-family: map-get-deep($bolt-font-families, 'font-families', $type, 'custom-font');
  $fonts-loaded-class: map-get-deep($bolt-font-families, 'font-families', $type, 'loaded-class');

  $fontFamilyNames: map-keys(map-get($bolt-font-families, 'font-families')); // get the names of all available font families (custom and fallback)

  font-family: $fallback-font-family;
  font-family: var(--bolt-font-family-#{$type});

  @if $is_root == false {
    .#{$fonts-loaded-class} & {
      font-family: $custom-font-family;
      font-family: var(--bolt-font-family-#{$type});
    }
  }
  @else {
    @each $fontFamilyName in $fontFamilyNames {
      --bolt-font-family-#{$fontFamilyName}: #{map-get-deep($bolt-font-families, 'font-families', $fontFamilyName, 'fallback-font') ;};
    }

    &.#{$fonts-loaded-class} {
      @each $fontFamilyName in $fontFamilyNames {
        --bolt-font-family-#{$fontFamilyName}: #{map-get-deep($bolt-font-families, 'font-families', $fontFamilyName, 'custom-font') ;};
      }

      font-family: $custom-font-family;
    }
  }
}

@mixin bolt-font-kerning() { 
  font-feature-settings: 'kern';
  font-kerning: normal; // Safari 7+, Firefox 24+, Chrome 33(?)
}

@mixin bolt-font-size($size, $leading: regular) { 
  $font-size: map-get-deep($bolt-font-sizes, 'font-sizes', $size, 'font-size');

  @if (type-of($font-size) == 'map') {
    $length: length(map-keys($font-size));

    @if ($length < 2) {
      font-size: nth($font-size, 2);
    } @else {
      @include bolt-poly-fluid-sizing('font-size', $font-size);
    }
  } @else {
    font-size: $font-size;
  }

  @if ($leading != '' and  $leading != null) {
    @if (type-of($leading) == number) {
      $leading: $leading;
    } @elseif (type-of($leading) == string) {
      $leading: map-get-deep($bolt-font-sizes, 'font-sizes', $size, 'line-height', $leading);
    }

    @if (type-of($leading) == 'map') {
      $length: length(map-keys($leading));

      @if ($length < 2) {
        line-height: nth($leading, 2);
      } @else {
        @debug $leading;
        @include bolt-poly-fluid-sizing('line-height', $leading);
      }
    } @else {
      line-height: $leading;
    }
  }
}

@mixin bolt-font-weight($weight) { 
  $font-weight: map-get-deep($bolt-font-weights, 'font-weights', $weight);

  font-weight: $font-weight;
}

@function bolt-text-contrast($color) { 
  @if bolt-theme-tone($color) == "dark" {
    @return bolt-color(white);
  } @else {
    @return bolt-color(black);
  }
}

@mixin bolt-uppercase() { 
  text-transform: uppercase;
  letter-spacing: 0.1rem;
}

@mixin bolt-if-browser-supports-display-contents() { 
  @supports (display: contents) and (caret-color: red) {
    @content;
  }
}

@mixin bolt-clearfix($important: null) { 
  @if $important == important {
    $important: !important;
  }

  &:before,
  &:after {
    content: ' ' $important;
    display: table $important;
  }

  &:after {
    clear: both $important;
  }
}

@function bolt-linear-interpolation($map) { 
  $keys: map-keys($map);
  @if (length($keys) != 2) {
    @error 'linear-interpolation() $map must be exactly 2 values';
  }

  // The slope
  $m: (map-get($map, nth($keys, 2)) - map-get($map, nth($keys, 1))) / ( nth($keys, 2) - nth($keys, 1));

  // The y-intercept
  $b: map-get($map, nth($keys, 1)) - $m * nth($keys, 1);

  // Determine if the sign should be positive or negative
  $sign: '+';
  @if ($b < 0) {
    $sign: '-';
    $b: abs($b);
  }

  @return calc(#{$m * 100}vw #{$sign} #{$b});
}

@function bolt-list-remove($list, $index) { 
  $newList: ();
  @for $i from 1 through length($list) {
    @if $i != $index {
      $newList: append($newList, nth($list, $i), 'space');
    }
  }
  @return $newList;
}

@function bolt-list-sort($list) { 
    $sortedlist: ();
    @while length($list) > 0 {
        $value: nth($list, 1);
        @each $item in $list {
          @if type-of($item) == "number" and type-of($value) == "number" {
            @if $item < $value {
                $value: $item;
            }
          } @else {
            @warn 'Problem encountered'; // `@warn` shows Backtrace, `@error` does not
            @error 'These values are not sortable: ' + $item + ' and ' + $value;
          }
        }
        $sortedlist: append($sortedlist, $value, "space");
        $list: bolt-list-remove($list, index($list, $value));
    }
    @return $sortedlist;
}

@function bolt-map-sort($map) { 
  $keys: bolt-list-sort(map-keys($map));
  $sortedMap: ();
  @each $key in $keys {
    $sortedMap: map-merge($sortedMap, ($key: map-get($map, $key)));
  }
  @return $sortedMap;
}

@mixin bolt-no-select() { 
  user-select: none;
}

@mixin bolt-opacity($value, $important: false) { 
  $important: '';

  @if $utility {
    $important: '!important';
  }

  @if map-has-key($bolt-opacities, $value) {
    opacity: map-get($bolt-opacities, $value) #{$important};
  } @else {
    @error 'A value, #{$value}, was passed into @include bolt-opacity() that is not defined in $bolt-opacities';
  }
}

@function bolt-opacity($value) { 
  @if map-has-key($bolt-opacities, $value) {
    @return map-get($bolt-opacities, $value)
  } @else {
    @error 'A value, #{$value}, was passed into bolt-opacity() that is not defined in $bolt-opacities';
  }
}

@function bolt-rem($pixels, $context: $bolt-base-font-size--min) { 
  @if (unitless($pixels)) {
    $pixels: $pixels * 1px;
  }
  @if (unitless($context)) {
    $context: $context * 1px;
  }
  @return $pixels / $context * 1rem;
}

@function bolt-strip-unit($number) { 
  @if type-of($number) == 'number' and not unitless($number) {
    @return $number / ($number * 0 + 1);
  }
  @return $number;
}

@mixin bolt-visuallyhidden($important: null) { 
  @if $important == important {
    $important: !important;
  }

  border: 0 $important;
  clip: rect(0 0 0 0) $important;
  clip-path: inset(50%) $important;
  position: absolute $important;
  width: 1px $important;
  height: 1px $important;
  margin: -1px $important;
  padding: 0 $important;
  overflow: hidden $important;
  white-space: nowrap $important;
}

@function bolt-css-vars-assign() { 
  // CHECK PARAMS
  @if ($name==null) {
    @error "Variable name is expected, instead got: null";
  }
  @if ($value == null) {
    @error "Variable value is expected, instead got: null";
  }
  // assign to the global map
  @if ($bolt-css-vars-debug-log and map-get($bolt-css-variables, $name)) {
    @debug "'#{$name}' variable is reassigned";
  }
  @return map-merge($bolt-css-variables, ($name: $value));
}

@function bolt-var($args, $args2) { 
  $var: '';
  $opacity: 1;

  @if (length($args) >= 1) {
    $var: nth($args, 1);
  }

  @if type-of($var) == list {
    $opacity: nth($var, 2);
  }

  $varName: str-slice(nth($var, 1), 8, str-length(nth($var, 1)));

  @if str-slice($varName, 0, 5) == 'theme' {
    $varNameSansTheme: str-slice($varName, 7, str-length($varName));

    @if bolt-is-theme-var($varNameSansTheme) and bolt-is-shimmable-theme-prop($varNameSansTheme) {
      @return bolt-theme($varNameSansTheme, $opacity);
    } @else {
      // @warn "The `#{$varNameSansTheme}` theme-specific CSS variable used isn't a registered theme variable in Bolt. Be carefull as these will not work as expected in IE 11...";
    }
  } @else {
    // @warn $varName + ' CSS variable was used but not registered as a Globally variable in Bolt. Be carefull as these will not work as expected in IE 11...';
  }
  @return var($args);
}

@mixin bolt-css-vars($varMap: null, $root: false) { 
  // CHECK PARAMS
  @if ($varMap == null) {
    @error "Map of variables is expected, instead got: null";
  }
  @if (type_of($varMap) != map) {
    @error "Map of variables is expected, instead got another type passed: #{type_of($varMap)}";
  }
  // PROCESS
  @if ($bolt-css-vars-debug-log or not $bolt-css-vars-use-native) { // Sass or debug
    // merge variables and values to the global map (provides no output)
    @each $name, $value in $varMap {
      $bolt-css-vars: bolt-css-vars-assign($name, $value) !global; // store in global variable
    }
  }

  @if ($bolt-css-vars-use-native) { // CSS variables
    // Native CSS: assign CSS custom properties to the global scope
    @if $root == true {
      @at-root :root {
        @each $name, $value in $varMap {
          @if (type_of($value) == string) {
            #{$name}: $value // to prevent quotes interpolation
          } @else {
            #{$name}: #{$value}
          }
        }
      }
    } @else {
      @each $name, $value in $varMap {
        @if (type_of($value) == string) {
          #{$name}: $value // to prevent quotes interpolation
        } @else {
          #{$name}: #{$value}
        }
      }
    }
  }
}

@function bolt-json-encode($value) { 
  $type: type-of($value);

  @if function-exists('_json-encode--#{$type}') {
    @return call(get-function('_json-encode--#{$type}'), $value);
  }

  @error 'Unknown type for #{$value} (#{$type}).';
}

@function _proof-quote($value) { 
  // $value: to-string($value);
  @return '"#{$value}"';
}

@mixin bolt-json-encode($value, $flag) { 
  $flag: if(index('all' 'regular' 'media' 'comment', $flag), $flag, 'all');
  $json: bolt-json-encode($value);

  // Persistent comment
  @if $flag == 'comment' or $flag == 'all' {
    /*! json-encode: #{$json} */
  }
  // Regular property value pair
  @if $flag == 'regular' or $flag == 'all' {
    // All browsers except IE8-
    body {
      &::before {
        // This element must be in the render tree to get it via getComputedStyle(document.body, ':before');
        content: bolt-json-encode($value);
        display: block;
        height: 0;
        overflow: hidden;
        width: 0;
      }
    }

    // All browsers except Opera (Presto based)
    head {
      font-family: bolt-json-encode($value);
    }
  }

  // Falsy media query
  @if $flag == 'media' or $flag == 'all' {
    @media -json-encode {
      json {
        json: $json;
      }
    }
  }
}

@function _json-encode--bool($bool) { 
  @return $boolean;
}

@function _json-encode--color($color) { 
  @return _proof-quote($color);
}

@function _json-encode--list($list) { 
  $str: '';

  @each $item in $list {
    $str: $str + ', ' + bolt-json-encode($item);
  }

  @return '[' + str-slice($str, 3) + ']';
}

@function _json-encode--map($map) { 
  $str: '';

  @each $key, $value in $map {
    $str: $str + ', ' + _proof-quote($key) + ': ' + bolt-json-encode($value);
  }

  @return '{' + str-slice($str, 3) + '}';
}

@function _json-encode--null($null) { 
  @return 'null';
}

@function _json-encode--number($number) { 
  @return if(unitless($number), $number, _proof-quote($number));
}

@function _json-encode--string($string) { 
  @return _proof-quote($string);
}