<commit_before>@charset "UTF-8";

////
/// This file contains Site-wide typography base styles.
/// @group base|typography
///
/// @type map
/// @see $group__element--default
/// @see $group__element
////

/// Load the font-face declarations.
@include load-fonts($base-fonts);

// ---------------------------------------------------------------------------------------------------------------------
/// - Set the root body font size
/// - Since most browsers default their `normal` font size to 16px,
///    we use that as the basis for our percentage calculation, using
///    the declared `$root-font-size` variable.
///
///
/// @example scss - Used in `base/_typography.scss` by the `html` root element
///  html {
///     @include properties($typography__html--default, $typography__html);
///   }
///
/// @require {variable} $root-font-size Root font size
///
$typography__html--default: (
  font-size: percentage($root-font-size/16px),
) !default;

$typography__html: () !default;

html {
  /*!*/
  @include properties($typography__html--default, $typography__html);
}


// ---------------------------------------------------------------------------------------------------------------------
/// - Base styling for `body` (line-height, font-family, font-size)
///
/// @example scss - Used in `base/_typography.scss` by the `body` element
///  body {
///     @include properties($typography__body--default, $typography__body);
///   }
///
/// @require em()
/// @require $base-font-size
/// @require $root-font-size
/// @require $base-font-family
/// @require $base-line-height
/// @todo
///   - Implement vertical rhythm
///
/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body
$typography__body--default: (
  line-height: $base-line-height,
  font-family: $base-font-family,
  font-size: em(_retrieve-decanter-setting(base-font-size), _retrieve-decanter-setting(root-font-size)),
) !default;

$typography__body: () !default;

body {
  /*!*/
  @include properties($typography__body--default, $typography__body);
}


// ---------------------------------------------------------------------------------------------------------------------
/// - Base styling for all heading levles
///
/// @example scss - Used in `base/_typography.scss` by the `#{all-headlines}` variable
///  #{$all-headlines} {
///     @include properties($typography__headlines--default, $typography__headlines);
///   }
///
/// @require $all-headlines
/// @require $heading-font-family
/// @require $heading-line-height
/// @require modular-scale()
/// @todo
///   - Implement vertical rhythm
///
/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements
$typography__headlines--default: (
  font-family: $heading-font-family,
  font-weight: 700,
  line-height: $heading-line-height,
  margin: modular-scale(-1) 0 modular-scale(-3),
) !default;

$typography__headlines: () !default;

#{$all-headlines} {
  /*!*/
  @include properties($typography__headlines--default, $typography__headlines);
}

// ---------------------------------------------------------------------------------------------------------------------
/// - Base styling for Heading 1
///
/// @example scss - Used in `base/_typography.scss` by the `h1` element
///  h1 {
///     @include properties($typography__h1--default, $typography__h1);
///   }
///
/// @require modular-scale()
/// @todo
///   - Implement vertical rhythm
///
/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements
$typography__h1--default: (
  font-size: modular-scale(5),
) !default;

$typography__h1:() !default;

h1 {
  /*!*/
  @include properties($typography__h1--default, $typography__h1);
}

// ---------------------------------------------------------------------------------------------------------------------
/// - Base styling for Heading 2
///
/// @example scss - Used in `base/_typography.scss` by the `h2` element
///  h2 {
///     @include properties($typography__h2--default, $typography__h2);
///   }
///
/// @require modular-scale()
/// @todo
///   - Implement vertical rhythm
///
/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements
$typography__h2--default: (
  font-size: modular-scale(4),
) !default;

$typography__h2:() !default;

h2 {
  /*!*/
  @include properties($typography__h2--default, $typography__h2);
}

// ---------------------------------------------------------------------------------------------------------------------
/// - Base styling for Heading 3
///
/// @example scss - Used in `base/_typography.scss` by the `h3` element
///  h3 {
///     @include properties($typography__h3--default, $typography__h3);
///   }
///
/// @require modular-scale()
/// @todo
///   - Implement vertical rhythm
///
/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements
$typography__h3--default: (
  font-size: modular-scale(3),
) !default;

$typography__h3:() !default;

h3 {
  /*!*/
  @include properties($typography__h2--default, $typography__h2);
}

// ---------------------------------------------------------------------------------------------------------------------
/// - Base styling for Heading 4
///
/// @example scss - Used in `base/_typography.scss` by the `h4` element
///  h4 {
///     @include properties($typography__h4--default, $typography__h4);
///   }
///
/// @require modular-scale()
/// @todo
///   - Implement vertical rhythm
///
/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements
$typography__h4--default: (
  font-size: modular-scale(2),
) !default;

$typography__h4:() !default;

h4 {
  /*!*/
  @include properties($typography__h4--default, $typography__h4);
}

// ---------------------------------------------------------------------------------------------------------------------
/// - Base styling for Heading 5
///
/// @example scss - Used in `base/_typography.scss` by the `h5` element
///  h5 {
///     @include properties($typography__h5--default, $typography__h5);
///   }
///
/// @require modular-scale()
/// @todo
///   - Implement vertical rhythm
///
/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements
$typography__h5--default: (
  font-size: modular-scale(2),
) !default;

$typography__h5:() !default;

h5 {
  /*!*/
  @include properties($typography__h5--default, $typography__h5);
}

// ---------------------------------------------------------------------------------------------------------------------
/// - Base styling for Heading 6
///
/// @example scss - Used in `base/_typography.scss` by the `h6` element
///  h6 {
///     @include properties($typography__h6--default, $typography__h6);
///   }
///
/// @require modular-scale()
/// @todo
///   - Implement vertical rhythm
///
/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements
$typography__h6--default: (
  font-size: modular-scale(2),
) !default;

$typography__h6:() !default;

h6 {
  /*!*/
  @include properties($typography__h6--default, $typography__h6);
}

// ---------------------------------------------------------------------------------------------------------------------
/// - Set up base typography for paragraphs
///
/// @example scss - Used in `base/_typography.scss` by the `p` element
///  p {
///     @include properties($typography__p--default, $typography__p);
///   }
///
/// @require modular-scale()
/// @todo
///   - Implement vertical rhythm
///
/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p
///
$typography__p--default: (
  margin: 0 0 modular-scale(1),
) !default;

$typography__p:() !default;

p {
  /*!*/
  @include properties($typography__p--default, $typography__p);
}

// ---------------------------------------------------------------------------------------------------------------------
/// - Base styling for emphasis elements
///
/// @example scss - Used in `base/_typography.scss` by the `dfn, cite, em, i` elements
///  dfn, cite, em, i {
///     @include properties($typography__emphasis--default, $typography__emphasis);
///   }
///
/// @require modular-scale()
///
/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/cite
/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dfn
/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/em
/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/i
$typography__emphasis--default: (
  font-style: italic,
) !default;

$typography__emphasis:() !default;

dfn, cite, em, i {
  /*!*/
  @include properties($typography__emphasis--default, $typography__emphasis);
}

// ---------------------------------------------------------------------------------------------------------------------
/// - Base quote styles and spacing for blockquotes
///
/// @example scss - Used in `base/_typography.scss` by the `blockquote` element
///  blockquote {
///     @include properties($typography__blockquote--default, $typography__blockquote);
///   }
///
/// @require modular-scale()
/// @link https://css-tricks.com/almanac/properties/q/quotes/
/// @todo
///   - Implement vertical rhythm
/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote
///
$typography__blockquote--default: (
  margin: 0 modular-scale(2),
  quotes: '"\201c" "\201d" "\2018" "\2019"',

  '&::before': (
    content: open-quote,
  ),
  '&::after': (
      content: close-quote,
  ),
) !default;

$typography__blockquote:() !default;

blockquote {
  /*!*/
  @include properties($typography__blockquote--default, $typography__blockquote);
}

// ---------------------------------------------------------------------------------------------------------------------
/// - Base typography for quotations
///
/// @example scss - Used in `base/_typography.scss` by the `q` element
///  q {
///     @include properties($typography__q--default, $typography__q);
///   }
///
/// @require modular-scale()
/// @link https://css-tricks.com/almanac/properties/q/quotes/
/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q
///
$typography__q--default: (
  quotes: '"\201c" "\201d" "\2018" "\2019"',

  '&::before': (
      content: open-quote,
  ),
  '&::after': (
      content: close-quote,
  ),
) !default;

$typography__q:() !default;

q {
  /*!*/
  @include properties($typography__q--default, $typography__q);
}


// ---------------------------------------------------------------------------------------------------------------------
/// - Base typography for address elements
///
/// @example scss - Used in `base/_typography.scss` by the `address` element
///  address {
///     @include properties($typography__address--default, $typography__address);
///   }
///
/// @require modular-scale()
///
/// @todo
///   - Implement vertical rhythm
/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/address
///
$typography__address--default: (
  margin: 0 0 modular-scale(2),
) !default;

$typography__address:() !default;

address {
  /*!*/
  @include properties($typography__address--default, $typography__address);
}

// ---------------------------------------------------------------------------------------------------------------------
/// - Base styling for preformatted text
///
/// @example scss - Used in `base/_typography.scss` by the `pre` element
///  pre {
///     @include properties($typography__pre--default, $typography__pre);
///   }
///
/// @require rgba
/// @require color
/// @require $monospace-font-family
/// @require $base-line-height
/// @require modular-scale
/// @require em
/// @todo
///   - Implement vertical rhythm
/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre
///
$typography__pre--default: (
  background: rgba(color(light-grey), .6),
  font-family: $monospace-font-family,
  font-size: em(16px),
  line-height: $base-line-height,
  margin-bottom: modular-scale(2),
  max-width: 100%,
  overflow: auto,
  padding: 1.6em,
  border: 1px solid color(grey),
  white-space: pre-wrap,
) !default;

$typography__pre: () !default;

pre {
  /*!*/
  @include properties($typography__pre--default, $typography__pre);
}


// ---------------------------------------------------------------------------------------------------------------------
/// - Base styling for phrase tags
///
/// @example scss - Used in `base/_typography.scss` by the `code`, `kbd`, `tt`, `var`, `samp` elements
///  code, kbd, tt, var, samp {
///     @include properties($typography__code--default, $typography__code);
///   }
///
/// @require {variable} $monospace-font-family
/// @require {function} font-size
/// *Note:* the HTML tag `tt` (teletype) was deprecated in HTML 5.
///  - for computer code, consider the `code` element;
///  - For keyboard input, consider the `kbd` element;
///  - for variables, consider the `var` element;
///  - and for computer output, consider the `samp` element
///
/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/code
/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/kbd
/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/var
/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/samp
///
$typography__code--default: (
  font-family: $monospace-font-family,
  font-size: em(16px),
  padding: modular-scale(-10) modular-scale(-5),
  position: relative,
  background-color: rgba(color(light-grey), .6),
  border: 1px solid color(grey),
) !default;

$typography__code: () !default;

code, kbd, var, samp {
  /*!*/
  @include properties($typography__code--default, $typography__code);
}

// ---------------------------------------------------------------------------------------------------------------------
/// - Base styling for abbreviation and acronym tags
///
/// @example scss - Used in `base/_typography.scss` by the `abbr`, `acronym` elements
///  base, acronym {
///     @include properties($typography__abbr--default, $typography__abbr);
///   }
///
/// @require color
/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/abbr
///
$typography__abbr--default: (
  border-bottom: 1px dotted color(border),
  cursor: help,
) !default;

$typography__abbr: () !default;

abbr, acronym {
  /*!*/
  @include properties($typography__abbr--default, $typography__abbr);
}

// ---------------------------------------------------------------------------------------------------------------------
/// - Shared styling for document markup (insert, delete, mark).
///
/// @example scss - Used in `base/_typography.scss` by the `mark`, `ins`, `del` elements
///  mark, ins, del {
///     @include properties($typography__edits--default, $typography__edits);
///   }
///
$typography__edits--default: (
  padding: 0 .25em .15em,
) !default;

$typography__edits: () !default;

mark, ins, del {
  /*!*/
  @include properties($typography__edits--default, $typography__edits);
}

// ---------------------------------------------------------------------------------------------------------------------
/// - Base documentation cut & paste template.
///
/// @example scss - Used in `base/_typography.scss` by the `del` element
///  del {
///     @include properties($typography__del--default, $typography__del);
///   }
///
/// @require color
/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/del
///
$typography__del--default: (
  color: color(text),
  background: color(light-red),
  text-decoration: line-through,
  text-decoration-color: color(red),
) !default;

$typography__del: () !default;

del {
  /*!*/
  @include properties($typography__del--default, $typography__del);
}

// ---------------------------------------------------------------------------------------------------------------------
/// - Base styles for the `ins` element
///
/// @example scss - Used in `base/_typography.scss` by the `ins` ins
///  ins {
///     @include properties($typography__ins--default, $typography__ins);
///   }
///
/// @require color
///
/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/ins/ins
///

$typography__ins--default: (
  color: color(text),
  background: color(light-green),
  text-decoration: none,
) !default;

$typography__ins: () !default;

ins {
  /*!*/
  @include properties($typography__ins--default, $typography__ins);
}

// ---------------------------------------------------------------------------------------------------------------------
/// - Base styles for the `mark` element
///
/// @example scss - Used in `base/_typography.scss` by the `mark` mark
///   mark {
///     @include properties($typography__mark--default, $typography__mark);
///   }
///
/// @require color
/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/mark
///
$typography__mark--default: (
  color: color(text),
  background: color(light-yellow),
  text-decoration: none,
) !default;

$typography__mark: () !default;

mark {
  /*!*/
  @include properties($typography__mark--default, $typography__mark);
}

// ---------------------------------------------------------------------------------------------------------------------
/// - Base styles for the `small` and `.text-text` elements
///
/// @example scss - Used in `base/_typography.scss` by the `small' and `.small-text` elements
///   text, .small-text {
///     @include properties($typography__small-text--default, $typography__small-text);
///   }
///
/// @require modular-scale
///
/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/small
$typography__small-text--default: (
  font-size: modular-scale(-1, $ratio: 1.125),
) !default;

$typography__small-text: () !default;

small, .small-text {
  /*!*/
  @include properties($typography__small-text--default, $typography__small-text);
}


// ---------------------------------------------------------------------------------------------------------------------
/// - Base styles for the `.large-text` element
///
/// **Note**: *The `big` element has been deprecated from the HTML spec. Use the `.large-text` class instead.*
///
/// @example scss - Used in `base/_typography.scss` by the `.large-text` selector
///   .large-text {
///     @include properties($typography__large-text--default, $typography__large-text);
///   }
///
/// @require modular-scale
/// @deprecated
/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/big
///
$typography__large-text--default: (
  font-size: modular-scale(1),

) !default;

$typography__large-text: () !default;

.large-text {
  /*!*/
  @include properties($typography__large-text--default, $typography__large-text);
}

// ---------------------------------------------------------------------------------------------------------------------
/// - Base styles for the `hr` element
///
/// @example scss - Used in `base/_typography.scss` by the `hr` element
///   hr {
///     @include properties($typography__hr--default, $typography__hr);
///   }
///
/// @require $base-border
/// @require $base-spacing
///
/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hr
///
/// @todo
///   - Implement vertical rhythm
$typography__hr--default: (
  border-top: 0,
  border-right: 0,
  border-bottom: $base-border,
  border-left: 0,
  margin: modular-scale(1) 0,
) !default;

$typography__hr: () !default;

hr {
  /*!*/
  @include properties($typography__hr--default, $typography__hr);
}

// ---------------------------------------------------------------------------------------------------------------------
/// - Base styles for the `a` element
///
/// @example scss - Used in `base/_typography.scss` by the `a` element
///   a {
///     @include properties($typography__a--default, $typography__a);
///   }
///
/// @require color
/// @require $hocus
///
/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a
///
$typography__a--default: (
    color: color(link),
    text-decoration: none,

    #{$hocus}: (
        color: color(link-active),
        text-decoration: underline,
    ),
) !default;

$typography__a: () !default;

a {
  /*!*/
  @include properties($typography__a--default, $typography__a);
}
<commit_msg>!fixup More use cases<commit_after>@charset "UTF-8";

////
/// This file contains Site-wide typography base styles.
/// @group base|typography
///
/// @type map
/// @see $group__element--default
/// @see $group__element
////

/// Load the font-face declarations.
@include load-fonts($base-fonts);

// ---------------------------------------------------------------------------------------------------------------------
/// - Set the root body font size
/// - Since most browsers default their `normal` font size to 16px,
///    we use that as the basis for our percentage calculation, using
///    the declared `$root-font-size` variable.
///
///
/// @example scss - Used in `base/_typography.scss` by the `html` root element
///  html {
///     @include properties($typography__html--default, $typography__html);
///   }
///
/// @require {variable} $root-font-size Root font size
///
$typography__html--default: (
  font-size: percentage(_retrieve-decanter-setting(root-font-size)/16px),
) !default;

$typography__html: () !default;

html {
  /*!*/
  @include properties($typography__html--default, $typography__html);
}


// ---------------------------------------------------------------------------------------------------------------------
/// - Base styling for `body` (line-height, font-family, font-size)
///
/// @example scss - Used in `base/_typography.scss` by the `body` element
///  body {
///     @include properties($typography__body--default, $typography__body);
///   }
///
/// @require em()
/// @require $base-font-size
/// @require $root-font-size
/// @require $base-font-family
/// @require $base-line-height
/// @todo
///   - Implement vertical rhythm
///
/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body
$typography__body--default: (
  line-height: $base-line-height,
  font-family: $base-font-family,
  font-size: em(_retrieve-decanter-setting(base-font-size), _retrieve-decanter-setting(root-font-size)),
) !default;

$typography__body: () !default;

body {
  /*!*/
  @include properties($typography__body--default, $typography__body);
}


// ---------------------------------------------------------------------------------------------------------------------
/// - Base styling for all heading levles
///
/// @example scss - Used in `base/_typography.scss` by the `#{all-headlines}` variable
///  #{$all-headlines} {
///     @include properties($typography__headlines--default, $typography__headlines);
///   }
///
/// @require $all-headlines
/// @require $heading-font-family
/// @require $heading-line-height
/// @require modular-scale()
/// @todo
///   - Implement vertical rhythm
///
/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements
$typography__headlines--default: (
  font-family: $heading-font-family,
  font-weight: 700,
  line-height: $heading-line-height,
  margin: modular-scale(-1) 0 modular-scale(-3),
) !default;

$typography__headlines: () !default;

#{$all-headlines} {
  /*!*/
  @include properties($typography__headlines--default, $typography__headlines);
}

// ---------------------------------------------------------------------------------------------------------------------
/// - Base styling for Heading 1
///
/// @example scss - Used in `base/_typography.scss` by the `h1` element
///  h1 {
///     @include properties($typography__h1--default, $typography__h1);
///   }
///
/// @require modular-scale()
/// @todo
///   - Implement vertical rhythm
///
/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements
$typography__h1--default: (
  font-size: modular-scale(5),
) !default;

$typography__h1:() !default;

h1 {
  /*!*/
  @include properties($typography__h1--default, $typography__h1);
}

// ---------------------------------------------------------------------------------------------------------------------
/// - Base styling for Heading 2
///
/// @example scss - Used in `base/_typography.scss` by the `h2` element
///  h2 {
///     @include properties($typography__h2--default, $typography__h2);
///   }
///
/// @require modular-scale()
/// @todo
///   - Implement vertical rhythm
///
/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements
$typography__h2--default: (
  font-size: modular-scale(4),
) !default;

$typography__h2:() !default;

h2 {
  /*!*/
  @include properties($typography__h2--default, $typography__h2);
}

// ---------------------------------------------------------------------------------------------------------------------
/// - Base styling for Heading 3
///
/// @example scss - Used in `base/_typography.scss` by the `h3` element
///  h3 {
///     @include properties($typography__h3--default, $typography__h3);
///   }
///
/// @require modular-scale()
/// @todo
///   - Implement vertical rhythm
///
/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements
$typography__h3--default: (
  font-size: modular-scale(3),
) !default;

$typography__h3:() !default;

h3 {
  /*!*/
  @include properties($typography__h2--default, $typography__h2);
}

// ---------------------------------------------------------------------------------------------------------------------
/// - Base styling for Heading 4
///
/// @example scss - Used in `base/_typography.scss` by the `h4` element
///  h4 {
///     @include properties($typography__h4--default, $typography__h4);
///   }
///
/// @require modular-scale()
/// @todo
///   - Implement vertical rhythm
///
/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements
$typography__h4--default: (
  font-size: modular-scale(2),
) !default;

$typography__h4:() !default;

h4 {
  /*!*/
  @include properties($typography__h4--default, $typography__h4);
}

// ---------------------------------------------------------------------------------------------------------------------
/// - Base styling for Heading 5
///
/// @example scss - Used in `base/_typography.scss` by the `h5` element
///  h5 {
///     @include properties($typography__h5--default, $typography__h5);
///   }
///
/// @require modular-scale()
/// @todo
///   - Implement vertical rhythm
///
/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements
$typography__h5--default: (
  font-size: modular-scale(2),
) !default;

$typography__h5:() !default;

h5 {
  /*!*/
  @include properties($typography__h5--default, $typography__h5);
}

// ---------------------------------------------------------------------------------------------------------------------
/// - Base styling for Heading 6
///
/// @example scss - Used in `base/_typography.scss` by the `h6` element
///  h6 {
///     @include properties($typography__h6--default, $typography__h6);
///   }
///
/// @require modular-scale()
/// @todo
///   - Implement vertical rhythm
///
/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements
$typography__h6--default: (
  font-size: modular-scale(2),
) !default;

$typography__h6:() !default;

h6 {
  /*!*/
  @include properties($typography__h6--default, $typography__h6);
}

// ---------------------------------------------------------------------------------------------------------------------
/// - Set up base typography for paragraphs
///
/// @example scss - Used in `base/_typography.scss` by the `p` element
///  p {
///     @include properties($typography__p--default, $typography__p);
///   }
///
/// @require modular-scale()
/// @todo
///   - Implement vertical rhythm
///
/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p
///
$typography__p--default: (
  margin: 0 0 modular-scale(1),
) !default;

$typography__p:() !default;

p {
  /*!*/
  @include properties($typography__p--default, $typography__p);
}

// ---------------------------------------------------------------------------------------------------------------------
/// - Base styling for emphasis elements
///
/// @example scss - Used in `base/_typography.scss` by the `dfn, cite, em, i` elements
///  dfn, cite, em, i {
///     @include properties($typography__emphasis--default, $typography__emphasis);
///   }
///
/// @require modular-scale()
///
/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/cite
/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dfn
/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/em
/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/i
$typography__emphasis--default: (
  font-style: italic,
) !default;

$typography__emphasis:() !default;

dfn, cite, em, i {
  /*!*/
  @include properties($typography__emphasis--default, $typography__emphasis);
}

// ---------------------------------------------------------------------------------------------------------------------
/// - Base quote styles and spacing for blockquotes
///
/// @example scss - Used in `base/_typography.scss` by the `blockquote` element
///  blockquote {
///     @include properties($typography__blockquote--default, $typography__blockquote);
///   }
///
/// @require modular-scale()
/// @link https://css-tricks.com/almanac/properties/q/quotes/
/// @todo
///   - Implement vertical rhythm
/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote
///
$typography__blockquote--default: (
  margin: 0 modular-scale(2),
  quotes: '"\201c" "\201d" "\2018" "\2019"',

  '&::before': (
    content: open-quote,
  ),
  '&::after': (
      content: close-quote,
  ),
) !default;

$typography__blockquote:() !default;

blockquote {
  /*!*/
  @include properties($typography__blockquote--default, $typography__blockquote);
}

// ---------------------------------------------------------------------------------------------------------------------
/// - Base typography for quotations
///
/// @example scss - Used in `base/_typography.scss` by the `q` element
///  q {
///     @include properties($typography__q--default, $typography__q);
///   }
///
/// @require modular-scale()
/// @link https://css-tricks.com/almanac/properties/q/quotes/
/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q
///
$typography__q--default: (
  quotes: '"\201c" "\201d" "\2018" "\2019"',

  '&::before': (
      content: open-quote,
  ),
  '&::after': (
      content: close-quote,
  ),
) !default;

$typography__q:() !default;

q {
  /*!*/
  @include properties($typography__q--default, $typography__q);
}


// ---------------------------------------------------------------------------------------------------------------------
/// - Base typography for address elements
///
/// @example scss - Used in `base/_typography.scss` by the `address` element
///  address {
///     @include properties($typography__address--default, $typography__address);
///   }
///
/// @require modular-scale()
///
/// @todo
///   - Implement vertical rhythm
/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/address
///
$typography__address--default: (
  margin: 0 0 modular-scale(2),
) !default;

$typography__address:() !default;

address {
  /*!*/
  @include properties($typography__address--default, $typography__address);
}

// ---------------------------------------------------------------------------------------------------------------------
/// - Base styling for preformatted text
///
/// @example scss - Used in `base/_typography.scss` by the `pre` element
///  pre {
///     @include properties($typography__pre--default, $typography__pre);
///   }
///
/// @require rgba
/// @require color
/// @require $monospace-font-family
/// @require $base-line-height
/// @require modular-scale
/// @require em
/// @todo
///   - Implement vertical rhythm
/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre
///
$typography__pre--default: (
  background: rgba(color(light-grey), .6),
  font-family: $monospace-font-family,
  font-size: em(16px),
  line-height: $base-line-height,
  margin-bottom: modular-scale(2),
  max-width: 100%,
  overflow: auto,
  padding: 1.6em,
  border: 1px solid color(grey),
  white-space: pre-wrap,
) !default;

$typography__pre: () !default;

pre {
  /*!*/
  @include properties($typography__pre--default, $typography__pre);
}


// ---------------------------------------------------------------------------------------------------------------------
/// - Base styling for phrase tags
///
/// @example scss - Used in `base/_typography.scss` by the `code`, `kbd`, `tt`, `var`, `samp` elements
///  code, kbd, tt, var, samp {
///     @include properties($typography__code--default, $typography__code);
///   }
///
/// @require {variable} $monospace-font-family
/// @require {function} font-size
/// *Note:* the HTML tag `tt` (teletype) was deprecated in HTML 5.
///  - for computer code, consider the `code` element;
///  - For keyboard input, consider the `kbd` element;
///  - for variables, consider the `var` element;
///  - and for computer output, consider the `samp` element
///
/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/code
/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/kbd
/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/var
/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/samp
///
$typography__code--default: (
  font-family: $monospace-font-family,
  font-size: em(16px),
  padding: modular-scale(-10) modular-scale(-5),
  position: relative,
  background-color: rgba(color(light-grey), .6),
  border: 1px solid color(grey),
) !default;

$typography__code: () !default;

code, kbd, var, samp {
  /*!*/
  @include properties($typography__code--default, $typography__code);
}

// ---------------------------------------------------------------------------------------------------------------------
/// - Base styling for abbreviation and acronym tags
///
/// @example scss - Used in `base/_typography.scss` by the `abbr`, `acronym` elements
///  base, acronym {
///     @include properties($typography__abbr--default, $typography__abbr);
///   }
///
/// @require color
/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/abbr
///
$typography__abbr--default: (
  border-bottom: 1px dotted color(border),
  cursor: help,
) !default;

$typography__abbr: () !default;

abbr, acronym {
  /*!*/
  @include properties($typography__abbr--default, $typography__abbr);
}

// ---------------------------------------------------------------------------------------------------------------------
/// - Shared styling for document markup (insert, delete, mark).
///
/// @example scss - Used in `base/_typography.scss` by the `mark`, `ins`, `del` elements
///  mark, ins, del {
///     @include properties($typography__edits--default, $typography__edits);
///   }
///
$typography__edits--default: (
  padding: 0 .25em .15em,
) !default;

$typography__edits: () !default;

mark, ins, del {
  /*!*/
  @include properties($typography__edits--default, $typography__edits);
}

// ---------------------------------------------------------------------------------------------------------------------
/// - Base documentation cut & paste template.
///
/// @example scss - Used in `base/_typography.scss` by the `del` element
///  del {
///     @include properties($typography__del--default, $typography__del);
///   }
///
/// @require color
/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/del
///
$typography__del--default: (
  color: color(text),
  background: color(light-red),
  text-decoration: line-through,
  text-decoration-color: color(red),
) !default;

$typography__del: () !default;

del {
  /*!*/
  @include properties($typography__del--default, $typography__del);
}

// ---------------------------------------------------------------------------------------------------------------------
/// - Base styles for the `ins` element
///
/// @example scss - Used in `base/_typography.scss` by the `ins` ins
///  ins {
///     @include properties($typography__ins--default, $typography__ins);
///   }
///
/// @require color
///
/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/ins/ins
///

$typography__ins--default: (
  color: color(text),
  background: color(light-green),
  text-decoration: none,
) !default;

$typography__ins: () !default;

ins {
  /*!*/
  @include properties($typography__ins--default, $typography__ins);
}

// ---------------------------------------------------------------------------------------------------------------------
/// - Base styles for the `mark` element
///
/// @example scss - Used in `base/_typography.scss` by the `mark` mark
///   mark {
///     @include properties($typography__mark--default, $typography__mark);
///   }
///
/// @require color
/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/mark
///
$typography__mark--default: (
  color: color(text),
  background: color(light-yellow),
  text-decoration: none,
) !default;

$typography__mark: () !default;

mark {
  /*!*/
  @include properties($typography__mark--default, $typography__mark);
}

// ---------------------------------------------------------------------------------------------------------------------
/// - Base styles for the `small` and `.text-text` elements
///
/// @example scss - Used in `base/_typography.scss` by the `small' and `.small-text` elements
///   text, .small-text {
///     @include properties($typography__small-text--default, $typography__small-text);
///   }
///
/// @require modular-scale
///
/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/small
$typography__small-text--default: (
  font-size: modular-scale(-1, $ratio: 1.125),
) !default;

$typography__small-text: () !default;

small, .small-text {
  /*!*/
  @include properties($typography__small-text--default, $typography__small-text);
}


// ---------------------------------------------------------------------------------------------------------------------
/// - Base styles for the `.large-text` element
///
/// **Note**: *The `big` element has been deprecated from the HTML spec. Use the `.large-text` class instead.*
///
/// @example scss - Used in `base/_typography.scss` by the `.large-text` selector
///   .large-text {
///     @include properties($typography__large-text--default, $typography__large-text);
///   }
///
/// @require modular-scale
/// @deprecated
/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/big
///
$typography__large-text--default: (
  font-size: modular-scale(1),

) !default;

$typography__large-text: () !default;

.large-text {
  /*!*/
  @include properties($typography__large-text--default, $typography__large-text);
}

// ---------------------------------------------------------------------------------------------------------------------
/// - Base styles for the `hr` element
///
/// @example scss - Used in `base/_typography.scss` by the `hr` element
///   hr {
///     @include properties($typography__hr--default, $typography__hr);
///   }
///
/// @require $base-border
/// @require $base-spacing
///
/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hr
///
/// @todo
///   - Implement vertical rhythm
$typography__hr--default: (
  border-top: 0,
  border-right: 0,
  border-bottom: $base-border,
  border-left: 0,
  margin: modular-scale(1) 0,
) !default;

$typography__hr: () !default;

hr {
  /*!*/
  @include properties($typography__hr--default, $typography__hr);
}

// ---------------------------------------------------------------------------------------------------------------------
/// - Base styles for the `a` element
///
/// @example scss - Used in `base/_typography.scss` by the `a` element
///   a {
///     @include properties($typography__a--default, $typography__a);
///   }
///
/// @require color
/// @require $hocus
///
/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a
///
$typography__a--default: (
    color: color(link),
    text-decoration: none,

    #{$hocus}: (
        color: color(link-active),
        text-decoration: underline,
    ),
) !default;

$typography__a: () !default;

a {
  /*!*/
  @include properties($typography__a--default, $typography__a);
}

{'fraction_non_alphanumeric': 0.3161436654121283, 'fraction_numerical': 0.007377682510406022, 'mean_word_length': 1.7881862404447533, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 62, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '486185', 'n_tokens_mistral': 12073, 'n_tokens_neox': 11670, 'n_words': 2335}