h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
blockquote {
  max-width: $line-width-max;

  &.hyphenated {
  hyphens: auto;
  overflow-wrap: break-word;
  word-wrap: break-word;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  word-break: break-word;
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  & span {
    margin-top: 0;
  }
}


h1 {
  @include set-font($typography-h1-fontsize, "single", "light");
  margin: 0 0 spacing($typography-margin-bottom-h1) 0;

  & + h2 {
    margin-top: 0;
  }
}

h2 {
  @include set-font($typography-h1-fontsize - 1, "single", "bold");
  margin: spacing($typography-margin-top-h2) 0 spacing($typography-margin-bottom-h2) 0;

  & + h3 {
    margin-top: spacing(-1);
  }
}

h3 {
  @include set-font($typography-h1-fontsize - 2, "single", "bold");
  margin: spacing($typography-margin-top-h3) 0 spacing($typography-margin-bottom-h3) 0;

  & + h4 {
    margin-top: spacing(-3);
  }
}

h4,
h5,
h6 {
  @include set-font(0, "single", $weight: "bold");
  margin: spacing($typography-margin-top-h4) 0 spacing($typography-margin-bottom-h4) 0;
}

h2,
h3,
h4,
h5,
h6 {
  & + p,
  & + ul,
  & + ol,
  & + table.table,
  & + dl.dl  {
    margin-top: 0;
  }
}

p {
  @include set-font(0, "multiple");
  margin: spacing($typography-margin-p) 0;
}

ul,
ol {
  padding: 0;
  margin: spacing($typography-margin-list) 0;
  list-style: none;

  & li {
    margin: spacing(-3) 0;
    padding-left: 1.8em; //room for 2 digit number

    &:first-child {
      margin-top: 0;
    }

    &:last-child {
      margin-bottom: 0;
    }

    //nested lists
    ul,
    ol {
      margin: spacing(-2) 0;
    }
  }

  .text--single-line &,
  &.text--single-line {
    li {
      line-height: line-height("single");
    }
  }

  &.text--pull {
    margin-bottom: spacing(-2);
  }

  &.list--dense {
    & li {
      margin: 0;

      //nested dense lists
      ul,
      ol {
        margin: spacing(-5) 0;
      }
    }
  }

  &.list--links {
    li {
      a {
        background-image: none;
        text-shadow: none;
        color: color("foreground-theme");

        &:hover {
          background-image: none;
          color: color("foreground-theme-hover");
        }

        &:active {
          background-image: none;
          color: color("foreground-theme");
        }
      }
    }
  }
}

ul {
  &.ul--no-bullets {
    padding: 0;

    & > li {
      padding: 0;

      &::before {
        content: none;
      }
    }
  }
}

//custom bullets
ul {
  & > li {
    position: relative;

    &::before {
      content: "";
      display: inline-block;
      position: absolute;
      width: spacing(-5);
      height: spacing(-5);
      border-radius: 50%;
      background-color: color("foreground");
      left: 0;
      top: spacing(-5, $times: -1, $add: #{line-height("multiple", $include-calc: false)}, $divideby: 2);
    }
  }

  .text--single-line & li,
  &.text--single-line li,
  & li.text--single-line {
    &::before {
      top: spacing(-5, $times: -1, $add: #{line-height("single", $include-calc: false)}, $divideby: 2);
    }
  }

  .text--secondary & li,
  &.text--secondary li,
  & li.text--secondary {
    &::before {
      background-color: color("foreground-secondary");
    }
  }
}

ol {
  counter-reset: ol-counter;

  &[start] {
    counter-reset: none;
  }  

  & > li {
    position: relative;
    counter-increment: ol-counter;

    &::before {
      content: counter(ol-counter) ".";
      position: absolute;
      left: 0;
    }

    //if there's an ol nested inside an ol use lowercase letters for numbering in the nested list
    & ol {
      li::before {
        content: counter(ol-counter, lower-alpha) ".";
      }
    }
  }
}


strong,
b {
  font-weight: $font-weight-bold;
}

em,
i {
  font-style: $font-style-italic;
}

blockquote {
  margin: spacing($typography-margin-blockquote) 0;
  padding: 0 0 0 spacing(-1);
  border-left: $width-border solid color("border-theme");
  @include set-font(0, "multiple");

  & > cite {
    @include set-font(0, "single");
    display: block;
    position: relative;
    padding-left: 1em;
    font-style: normal;
    margin-top: spacing(-3);
    color: color("foreground-secondary");

    &::before {
      content: "-";
      position: absolute;
      top: 0;
      left: 0;
    }
  }

  &.blockquote--large {
    @include set-font(1, "multiple");

    & > p {
      @include set-font(1, "multiple");
    }

    &--constrain-width {
      max-width: calc(#{math.div($line-width-max, 1em)} * #{font-size(0)});
    }
  }
}




//wrapper for more dense typography
.typography--dense {

  @function get-compressed-size($uncompressed, $level: "default") {
    $compression-level: 2;
    @if $level == "aggressive" {
      $compression-level: $typography-dense-compression-aggresive;
    }
    @else if $level == "relaxed" {
      $compression-level: $typography-dense-compression-relaxed;
    }

    $min-spacing: ($spacing-offset-default-size - 1) * -1;
    @if $uncompressed - $compression-level >= $min-spacing {
      @return $uncompressed - $compression-level;
    }
    @else {
      @return $min-spacing;
    }
  }

  h1 {
    margin-bottom: spacing(get-compressed-size($typography-margin-bottom-h1));
  }

  h2 {
    margin-top: spacing(get-compressed-size($typography-margin-top-h2));
    margin-bottom: spacing(get-compressed-size($typography-margin-bottom-h2));
  }

  h3 {
    margin-top: spacing(get-compressed-size($typography-margin-top-h3));
    margin-bottom: spacing(get-compressed-size($typography-margin-bottom-h3));
  }

  h4,
  h5,
  h6 {
    margin-top: spacing(get-compressed-size($typography-margin-top-h4));
  }

  p {
    margin: spacing(get-compressed-size($typography-margin-p, $level: "aggressive")) 0;
  }

  ul,
  ol {
    margin: spacing(get-compressed-size($typography-margin-list)) 0;

    li {
      margin: 0;
    }
  }

  blockquote {
    margin: spacing(get-compressed-size($typography-margin-blockquote, $level: "relaxed")) 0;
  }

  hr {
    margin-top: spacing($hr-margin-dense);
  }

  h2,
  h3,
  h4,
  h5,
  h6 {
    & + p,
    & + ul,
    & + ol,
    & + table.table  {
      margin-top: 0;
    }
  }
}

.typography--constrained-width {
  max-width: $line-width-max;
}

.typography--small-headers {
  h1,
  h2,
  h3 {
    @include set-font(0, "single", $weight: "bold");
    margin-top: spacing($typography-margin-top-h4);
    margin-bottom: spacing($typography-margin-bottom-h4);
  }
}

//text modifiers
.text {
  &--stamp {
    display: block;
    @include set-font(-1, "single", $weight: "bold", $transform: "uppercase");
    color: color('foreground-theme');
    margin: 0 0 spacing(-5) 0;

    & + h1 {
      margin-top: 0;
    }
  }

  &--label-header {
    display: block;
    @include set-font(-1, "single", $weight: "bold", $transform: "uppercase", $max-width: "default");
    margin-bottom: spacing(-5);
  }

  &--intro {
    @include set-font(1, "multiple");
    margin: spacing(-1) 0;
  }

  &--secondary {
    color: color("foreground");
  }

  &--disabled {
    color: color("foreground-disabled");
  }

  &--byline {
    @include set-font(-1, "single");
    color: color("foreground-secondary");
    display: block;
    margin: spacing($typography-margin-byline) 0;

    & + * {
      margin-top: 0;
    }
  }

  &--note {
    @include set-font(-1, "single", $max-width: "default");
    color: color("foreground");
  }

  &--pull {
    margin-bottom: spacing(-4);

    & + * {
      margin-top: 0;
    }
  }

  &--push {
    margin-bottom: spacing(-1);

    & + * {
      margin-top: 0;
    }
  }

  &--small {
    font-size: font-size(-1);
  }

  &--default-size {
    font-size: font-size(0);
  }

  &--large {
    font-size: font-size($typography-h1-fontsize - 2);
  }

  &--larger {
    font-size: font-size($typography-h1-fontsize - 1);
  }

  &--largest {
    font-size: font-size($typography-h1-fontsize);
  }

  &--single-line {
    line-height: line-height("single");
  }

  &--multiple-lines {
    line-height: line-height("multiple");
  }

  &--strong {
    font-weight: $font-weight-bold;
  }

  &--regular {
    font-weight: $font-weight-normal;
  }

  &--light {
    font-weight: $font-weight-light;
  }

  &--uppercase {
    text-transform: uppercase;
  }

  &--lowercase {
    text-transform: lowercase;
  }

  &--capitalize {
    text-transform: capitalize;
  }

  &--centered {
    text-align: center;
  }

  &--unconstrained-width {
    max-width: none;
  }

  &--default-max-width {
    max-width: $line-width-max;
  }

  &--callout {
    display: inline;
    font-style: normal;
    padding: $width-border spacing(-5) $width-border spacing(-5);
    color: color("utility-foreground");

    &--confirm {
      background-color: color("utility-confirm-background");
      border-color: color("utility-confirm");
    }

    &--attention {
      background-color: color("utility-attention-background");
      border-color: color("utility-attention");
    }

    &--warning {
      background-color: color("utility-warning-background");
      border-color: color("utility-warning");
    }
  }

  &--constrain-width-font-size-m1 {
    @include max-line-width(-1);
  }

  &--constrain-width-font-size-0 {
    @include max-line-width(0);
  }

  &--constrain-width-font-size-p1 {
    @include max-line-width(1);
  }

  &--constrain-width-font-size-p2 {
    @include max-line-width(2);
  }

  &--constrain-width-font-size-p3 {
    @include max-line-width(3);
  }

  &--overflow-wrap {
    overflow-wrap: break-word;
  }
}