$list-style-type: disc !default;
$list-margin-left: calculateRem(20) !default;
$list-margin-top: calculateRem(16) !default;

$heading-font-family: 'Lato', sans-serif !default;
$heading-font-weight: 600 !default;
$heading-line-height: 1.4 !default;
$heading-margin-bottom: calculateRem(7.2) !default;
$heading-color: inherit !default;

$subheading-margin-bottom: calculateRem(16) !default;
$subheading-margin-top: calculateRem(-6.4) !default;
$subheading-font-weight: 400 !default;
$subheading-line-height: $heading-line-height !default;
$subheading-color: createColor(#838383) !default;

$blockquote-border-color: createColor(#d6d6d6) !default;
$blockquote-border-width: 1px !default;
$blockquote-color: var(--color-black) !default;
$blockquote-margin: calculateRem(16) 0 0 !default;
$blockquote-padding: 0.5rem 0 0.5rem 1.25rem !default;
$cite-font-size: calculateRem(13) !default;
$cite-color: var(--color-black) !default;

$abbr-border-color: var(--color-black) !default;

:root {
  --theme-heading-font-family: #{$heading-font-family};
}

%heading {
  --font-color: #{$heading-color};
  --font-family: var(--theme-heading-font-family);
  --font-weight: #{$heading-font-weight};
  --line-height: #{$heading-line-height};

  color: var(--font-color);
  display: block;
  font-family: var(--font-family);
  font-size: var(--font-size);
  font-weight: var(--font-weight);
  line-height: var(--line-height);
  margin-bottom: $heading-margin-bottom;

  &.is-subheading {
    --font-color: #{$subheading-color};
    --font-weight: #{$subheading-font-weight};
    --line-height: #{$subheading-line-height};
  }

  &:not(.is-subheading) + .is-subheading {
    margin-top: $subheading-margin-top;
  }

  & + .is-subheading:last-of-type {
    margin-bottom: $subheading-margin-top;
  }
}

$heading-sizes: 'very-big-heading' h1, 'big-heading' h2, 'medium-heading' h3, 'heading' h4, 'small-heading' h5, 'very-small-heading' h6;

@function heading-size($key) {
  @if map-has-key($heading-size, $key) {
    @return map-get($heading-size, $key);
  }

  @warn "Unknown `#{$key}` in $heading-sizes.";
  @return null;
}

$heading-size: (
  h1: calculateRem(46),
  h2: calculateRem(40),
  h3: calculateRem(30),
  h4: calculateRem(24),
  h5: calculateRem(20),
  h6: calculateRem(16)
) !default;

@each $size in $heading-sizes {
  #{nth($size, 2)}, .is-#{nth($size, 1)} {
    @extend %heading;
    --font-size: #{heading-size(nth($size, 2))};
  }
}

a {
  color: var(--color-link);
  cursor: pointer;
  text-decoration: none;

  &:hover {
    text-decoration: underline;
  }

  .has-link-inherit &:not(.button) {
    color: inherit;
  }
}

ol, ul {
  --margin-left: #{$list-margin-left};
  --margin-top: #{$list-margin-top};

  margin-left: var(--margin-left);
  margin-top: var(--margin-top);

  ul, ol, dl {
    margin-top: 0;
  }
}

ul, ol {
  list-style-position: outside;
}

ul {
  --style-type: #{$list-style-type};

  list-style-type: var(--style-type);

  &.has-no-list-style {
    list-style-type: none;
    margin-left: 0;
  }

  &.is-inline-list {
    display: flex !important;
    flex-flow: row wrap;
    list-style-type: none;
    margin: 0;

    & > li:not(:last-child) {
      margin-right: 0.5rem;
    }
  }
}

dl {
  dt {
    font-weight: bold;
    margin-bottom: 0.3rem;
  }

  dd ~ dt {
    margin-top: 0.3rem;
  }
}

blockquote {
  --border-color: #{$blockquote-border-color};
  --border-width: #{$blockquote-border-width};
  --font-color: #{$blockquote-color};
  --margin: #{$blockquote-margin};
  --padding: #{$blockquote-padding};

  border-left: var(--border-width) solid var(--border-color);
  color: var(--font-color);
  margin: var(--margin);
  padding: var(--padding);

  cite {
    --font-color: #{$cite-color};
    --font-size: #{$cite-font-size};

    color: var(--font-color);
    display: block;
    font-size: var(--font-size);

    &::before {
      content: "- ";
    }
  }
}

abbr {
  --border-color: #{$abbr-border-color};

  border-bottom: 1px dotted var(--border-color);
  cursor: help;
  text-decoration: none;
}
