@use 'sass:math';
@use '../mixins/utils';

@use './base';

$heading-font-family: base.$body-font-family !default;
$heading-font-weight: bold !default;
$heading-font-style: normal !default;
$heading-font-color: base.$body-font-color !default;
$heading-text-rendering: optimizeLegibility !default;
$heading-top-margin: base.$base-line-height-computed !default;
$heading-bottom-margin: math.div(base.$base-line-height-computed, 2) !default;
$heading-line-height: 1.2 !default;

$h1-font-size: 2.5rem !default; //40px when base-font-size is 16px
$h2-font-size: 2rem !default; //32px when base-font-size is 16px
$h3-font-size: 1.7rem !default; //27.2px when base-font-size is 16px
$h4-font-size: 1.4rem !default; //22.4px when base-font-size is 16px
$h5-font-size: 1.2rem !default; //19.2px when base-font-size is 16px
$h6-font-size: 1rem !default;

$paragraph-font-family: base.$body-font-family !default;
$paragraph-font-weight: base.$body-font-weight !default;
$paragraph-font-size: 1rem !default;
$paragraph-line-height: base.$base-line-height !default;
$paragraph-margin: 0 0 math.div(base.$base-line-height-computed, 2) !default;
$paragraph-text-rendering: optimizeLegibility !default;

/* Default header styles */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: $heading-font-family;
  font-weight: $heading-font-weight;
  font-style: $heading-font-style;
  color: $heading-font-color;
  text-rendering: $heading-text-rendering;
  margin-top: $heading-top-margin;
  margin-bottom: $heading-bottom-margin;
  line-height: $heading-line-height;
}

h1 {
  font-size: $h1-font-size;
}
h2 {
  font-size: $h2-font-size;
}
h3 {
  font-size: $h3-font-size;
}
h4 {
  font-size: $h4-font-size;
}
h5 {
  font-size: $h5-font-size;
}
h6 {
  font-size: $h6-font-size;
}

section,
article,
nav,
aside {
  h1 {
    font-size: $h2-font-size;
  }
  h2 {
    font-size: $h3-font-size;
  }
  h3 {
    font-size: $h4-font-size;
  }
  h4 {
    font-size: $h5-font-size;
  }
  h5 {
    font-size: $h5-font-size;
  }
  section,
  article,
  nav,
  aside {
    h1 {
      font-size: $h3-font-size;
    }
    h2 {
      font-size: $h4-font-size;
    }
    h3 {
      font-size: $h5-font-size;
    }
    h4 {
      font-size: $h6-font-size;
    }
    section,
    article,
    nav,
    aside {
      h1 {
        font-size: $h4-font-size;
      }
      h2 {
        font-size: $h5-font-size;
      }
      h3 {
        font-size: $h6-font-size;
      }
    }
  }
}

p {
  font-family: $paragraph-font-family;
  font-weight: $paragraph-font-weight;
  font-size: $paragraph-font-size;
  line-height: $paragraph-line-height;
  margin: $paragraph-margin;
  text-rendering: $paragraph-text-rendering;
}

em,
i {
  font-style: italic;
  line-height: inherit;
}

strong,
b {
  font-weight: bold;
  line-height: inherit;
}

small {
  font-size: 0.8em;
  line-height: inherit;
}

// Lists
// -------------------------

// Unordered and Ordered lists
ul,
ol {
  line-height: $paragraph-line-height;
  margin-top: 0;
  margin-bottom: math.div(base.$base-line-height-computed, 2);
  padding-left: base.$base-line-height-computed;
  ul,
  ol {
    margin-bottom: 0;
  }
}
ul {
  list-style-type: disc;
}
ol {
  list-style-type: decimal;
}

// List options

// Unstyled keeps list items block level, just removes default browser padding and list-style
ul,
ol {
  &.clean {
    @include utils.wipe-list;
  }
}

// Description Lists
dl {
  margin-top: 0; // Remove browser default
  margin-bottom: base.$base-line-height-computed;
}
dt,
dd {
  line-height: $paragraph-line-height;
}
dt {
  font-weight: bold;
}
dd {
  margin-left: 0; // Undo browser default
}