picocss/scss/content/_typography.scss

@use "sass:map";
@use "../settings" as *;

@if map.get($modules, "content/typography") {
  /**
   * Typography
   */

  // Reboot based on :
  // - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
  // - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
  // ––––––––––––––––––––

  // Add the correct font weight in Chrome, Edge, and Safari
  b,
  strong {
    font-weight: bolder;
  }

  // Prevent `sub` and `sup` elements from affecting the line height in all browsers
  sub,
  sup {
    position: relative;
    font-size: 0.75em;
    line-height: 0;
    vertical-align: baseline;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }

  // Pico
  // ––––––––––––––––––––

  address,
  blockquote,
  dl,
  figure,
  form,
  ol,
  p,
  pre,
  table,
  ul {
    margin-top: 0;
    margin-bottom: var(#{$✨}typography-spacing-vertical);
    color: var(#{$✨}color);
    font-style: normal;
    font-weight: var(#{$✨}font-weight);
    font-size: var(#{$✨}font-size);
  }

  // Headings
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin-top: 0;
    margin-bottom: var(#{$✨}typography-spacing-vertical);
    color: var(#{$✨}color);
    font-weight: var(#{$✨}font-weight);
    font-size: var(#{$✨}font-size);
    font-family: var(#{$✨}font-family);
  }

  h1 {
    #{$✨}color: var(#{$✨}h1-color);
  }
  h2 {
    #{$✨}color: var(#{$✨}h2-color);
  }
  h3 {
    #{$✨}color: var(#{$✨}h3-color);
  }
  h4 {
    #{$✨}color: var(#{$✨}h4-color);
  }
  h5 {
    #{$✨}color: var(#{$✨}h5-color);
  }
  h6 {
    #{$✨}color: var(#{$✨}h6-color);
  }

  // Margin-top for headings after a block
  :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) {
    ~ :is(h1, h2, h3, h4, h5, h6) {
      margin-top: var(#{$✨}typography-spacing-top);
    }
  }

  // Heading group
  @if $enable-classes == false {
    hgroup {
      margin-bottom: var(#{$✨}typography-spacing-vertical);

      > * {
        margin-bottom: 0;
      }

      > *:last-child {
        #{$✨}color: var(#{$✨}muted-color);
        #{$✨}font-weight: unset;
        font-size: 1rem;
        font-family: unset;
      }
    }
  }

  @if $enable-classes {
    hgroup,
    .headings {
      margin-bottom: var(#{$✨}typography-spacing-vertical);

      > * {
        margin-bottom: 0;
      }

      > *:last-child {
        #{$✨}color: var(#{$✨}muted-color);
        #{$✨}font-weight: unset;
        font-size: 1rem;
        font-family: unset;
      }
    }
  }

  // Paragraphs
  p {
    margin-bottom: var(#{$✨}typography-spacing-vertical);
  }

  // Small
  small {
    font-size: var(#{$✨}font-size);
  }

  // Lists
  :where(dl, ol, ul) {
    padding-right: 0;
    padding-left: var(#{$✨}spacing);
    padding-inline-start: var(#{$✨}spacing);
    padding-inline-end: 0;

    li {
      margin-bottom: calc(var(#{$✨}typography-spacing-vertical) * 0.25);
    }
  }

  // Margin-top for nested lists
  // 1. Remove the margin on nested lists in Chrome, Edge, IE, and Safari
  :where(dl, ol, ul) {
    :is(dl, ol, ul) {
      margin: 0; // 1
      margin-top: calc(var(#{$✨}typography-spacing-vertical) * 0.25);
    }
  }

  ul li {
    list-style: square;
  }

  // Highlighted text
  mark {
    padding: 0.125rem 0.25rem;
    background-color: var(#{$✨}mark-background-color);
    color: var(#{$✨}mark-color);
    vertical-align: baseline;
  }

  // Blockquote
  blockquote {
    display: block;
    margin: var(#{$✨}typography-spacing-vertical) 0;
    padding: var(#{$✨}spacing);
    border-right: none;
    border-left: 0.25rem solid var(#{$✨}blockquote-border-color);
    border-inline-start: 0.25rem solid var(#{$✨}blockquote-border-color);
    border-inline-end: none;

    footer {
      margin-top: calc(var(#{$✨}typography-spacing-vertical) * 0.5);
      color: var(#{$✨}blockquote-footer-color);
    }
  }

  // Abbreviations
  // 1. Remove underline decoration in Chrome, Edge, IE, Opera, and Safari
  abbr[title] {
    border-bottom: 1px dotted;
    text-decoration: none; // 1
    cursor: help;
  }

  // Ins
  ins {
    color: var(#{$✨}ins-color);
    text-decoration: none;
  }

  // del
  del {
    color: var(#{$✨}del-color);
  }

  // selection
  ::selection {
    background-color: var(#{$✨}text-selection-color);
  }
}