pico/scss/content/_typography.scss

@use "../settings" as *;

/**
 * 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);
}

// Links
// 1. Remove the gray background on active links in IE 10
a,
[role="link"] {
  #{$✨}color: var(#{$✨}primary);
  #{$✨}background-color: transparent;
  outline: none;
  background-color: var(#{$✨}background-color); // 1
  color: var(#{$✨}color);
  text-decoration: var(#{$✨}text-decoration);

  @if $enable-transitions {
    transition: background-color var(#{$✨}transition), color var(#{$✨}transition),
      text-decoration var(#{$✨}transition), box-shadow var(#{$✨}transition);
  }

  &:is([aria-current], :hover, :active, :focus) {
    #{$✨}color: var(#{$✨}primary-hover);
    #{$✨}text-decoration: underline;
  }

  &:focus {
    #{$✨}background-color: var(#{$✨}primary-focus);
  }

  @if $enable-classes {
    // Secondary
    &.secondary {
      #{$✨}color: var(#{$✨}secondary);

      &:is([aria-current], :hover, :active, :focus) {
        #{$✨}color: var(#{$✨}secondary-hover);
      }

      &:focus {
        #{$✨}background-color: var(#{$✨}secondary-focus);
      }
    }

    // Contrast
    &.contrast {
      #{$✨}color: var(#{$✨}contrast);

      &:is([aria-current], :hover, :active, :focus) {
        #{$✨}color: var(#{$✨}contrast-hover);
      }

      &:focus {
        #{$✨}background-color: var(#{$✨}contrast-focus);
      }
    }
  }
}

// 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 typography block
:where(address, blockquote, dl, figure, form, ol, p, pre, table, ul) {
  ~ :is(h1, h2, h3, h4, h5, h6) {
    margin-top: var(#{$✨}typography-spacing-vertical);
  }
}

// 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(#{$✨}primary-focus);
}