@use 'sass:map';
@use '../function' as *;
@use '../mixin' as *;
@use '../config' as *;

@mixin generate-typography {
  html {
    -webkit-tap-highlight-color: hsl(0deg 0% 0% / 0%);
  }

  body {
    font-family: config('font-family-base', $typography);
    font-size: config('font-size-base', $typography);
    font-weight: config('font-weight-base', $typography);
    line-height: config('line-height-base', $typography);
  }

  @if setting('hyphens') {
    p,
    li,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      hyphens: auto;
      overflow-wrap: break-word;
    }
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    color: color('heading');
    font-family: config('font-family-heading', $typography);
    font-weight: config('font-weight-heading', $typography);
    letter-spacing: config('letter-spacing-heading', $typography);
    line-height: config('line-height-heading', $typography);
  }

  h1 {
    font-size: font-size('h1');
  }

  h2 {
    font-size: font-size('h2');
  }

  h3 {
    font-size: font-size('h3');
  }

  h4 {
    font-size: font-size('h4');
  }

  h5 {
    font-size: font-size('h5');
  }

  h6 {
    font-size: font-size('h6');
  }

  ul,
  ol {
    list-style-position: inside;
    @include layout-stack('xxs');

    li {
      list-style-position: outside;

      &::marker {
        color: color('marker');
      }
    }
  }

  li > ul,
  li > ol {
    margin-block-start: spacer('xxs');
  }

  dl {
    dt {
      color: color('heading');
      font-weight: bold;
    }

    dd {
      margin: 0;
    }

    dd + dt {
      margin-block-start: spacer('s');
    }
  }

  .quote {
    border-inline-start: 0.5rem solid color('blockquote-border');
    padding-inline-start: spacer('m');
    @include layout-stack('xs');

    blockquote {
      border-inline-start: 0;
      padding-inline-start: 0;
    }

    figcaption {
      text-align: start;
    }
  }

  blockquote {
    border-inline-start: 0.5rem solid color('blockquote-border');
    margin-inline-start: 0;
    padding-inline-start: spacer('m');
    @include layout-stack('xs');
  }

  abbr[title] {
    border-block-end: 1px dotted;
    cursor: help;
    text-decoration: none;
  }

  mark {
    background-color: color('mark-background');
    border-radius: config('border-radius', $typography);
    color: color('mark-foreground');
    padding: config('inline-padding', $typography);
  }

  code,
  kbd,
  samp {
    background-color: color('code-background');
    border-radius: config('border-radius', $typography);
    color: color('code-foreground');
    padding: config('inline-padding', $typography);
  }

  strong {
    color: color('strong');
  }

  .lead {
    font-size: config('font-size-lead', $typography);
  }
}