=blocks
  video,
  canvas,
  iframe,
  textarea,
  figure,
  details,
  blockquote,
  div,
  p,
  img,
  dl,
  ol,
  ul,
  table,
  pre,
  .speak,
  .message
    max-width: 100%
    margin-block: 1.75em
  hr
    max-width: 100%
    margin-block: 2.5em

=list
  ul,
  ol
    list-style-position: outside
    margin-left: 1.75em
  li
    +text-block(1em 1.86)
    margin-block: .5em
    &:first-child
      margin-top: 0
    &:last-child
      margin-bottom: 0
    input
      margin-right: .25rem
    p:last-of-type
      margin-bottom: 0
  > p + ul,
  > p + ol
    margin-top: 1em
  ol
    list-style-type: decimal
    &.is-aiu
      list-style: katakana
  >ul
    list-style-type: disc
  >ol
    list-style-type: decimal
  li
    ul,
    ol
      margin-block: .375em
      &:first-child
        margin-top: .375em
      &:last-child
        margin-bottom: .375em
    >ul
      list-style-type: circle
      >li
        >ul
          list-style-type: square

=speak
  .speak
    &.is-mc
      font-weight: 700
  .speak__speaker
    margin-bottom: .75em
    & > a,
    & > span
      display: flex
      align-items: center
      gap: .5rem
      text-decoration: none
      color: var(--default-text)
    >a:hover
      .speak__speaker-name
        text-decoration: underline
    img
      margin-bottom: 0
  .speak__speaker-name
    flex: 1
    +text-block(1em 1.6, 700)
    text-decoration: none
    white-space: nowrap
  .speak__body
    margin-top: .5rem

=headdings
  h1
    +text-block(1.875em 1.466 0 .75em, 600)
    color: var(--main-text)
    padding-bottom: .25em
    border-bottom: 3px solid var(--border)
  h2
    +text-block(1.625em 1.4615 0 .75em, 600)
    padding-bottom: .25em
    border-bottom: 1px solid var(--border)
  * + h2
    margin-top: 1.4em
  h2 + h3
    margin-top: 1.4em
  * + h2,
  * + h3,
  * + h4,
  * + h5
    margin-top: 1.5em
  h3
    +text-block(1.375em 1.6, 600)
    margin-bottom: .625em
    & + *
      margin-top: 0 !important
  h4
    +text-block(1.25em 1.6, 600)
    margin-bottom: .625em
    & + *
      margin-top: 0 !important
  h5
    +text-block(1.125em 1.6, 600)
    margin-bottom: .625em
    & + *
      margin-top: 0 !important
  h6
    +text-block(1em 1.6, 600)
    margin-bottom: .625em
    & + *
      margin-top: 0 !important

=header-anchor
  h1,
  h2,
  h3,
  h4,
  h5,
  h6
    scroll-snap-align: start
    scroll-snap-stop: always
    position: relative
    outline-style: none
    &:hover
      .header-anchor
        opacity: 1
  .header-anchor
    display: flex
    +text-block(.75rem, 400)
    float: left
    +position(absolute)
    margin-left: -1.5rem
    text-decoration: none !important
    +size(1.5rem 100%)
    align-items: center
    justify-content: center
    transition: all .2s ease-out
    opacity: 0
    &:link,
    &:visited
      color: var(--main)

=table
  table
    width: 100%
    background-color: var(--base)
  th,
  td
    border: solid 1px var(--border-shade)
    padding: .5em .625em
    +text-block(.875em 1.6, left)
  th
    background-color: var(--background)
  tbody tr
    &:nth-child(even)
      background-color: mix($default-text, $background, 2%)

=figure
  figure:has(figcaption) > *:first-child
    margin-bottom: 0
  figcaption
    +text-block(.875em 1.6)
    margin-top: .75em
    text-align: center


=message
  .message
    padding: 1em 1.25em 1em 2.75em
    border-radius: .25rem
    background-color: var(--warning-tint)
    color: var(--warning-text)
    &::before
      +fa(fas '\f06a')
      +position(absolute, left .25em, top .25em)
      font-size: 1.5em
      color: var(--warning)
    &.alert,
    &.danger
      background-color: var(--danger-tint)
      color: var(--danger-text)
      &::before
        color: var(--danger)
    &.warning
      background-color: var(--warning-tint)
      color: var(--warning-text)
      &::before
        color: var(--warning)
    &.info
      background-color: var(--info-tint)
      color: var(--info-text)
      &::before
        color: var(--info)
    &.primary
      background-color: var(--primary-tint)
      color: var(--primary-text)
      &::before
        color: var(--primary)
    &.success
      background-color: var(--success-tint)
      color: var(--success-text)
      &::before
        color: var(--success)

=task-list
  ul.contains-task-list
    list-style: none
    margin-left: 0
  li.task-list-item
    position: relative
    padding-left: 1.375em
    .task-list-item-checkbox
      +position(absolute, top .5em, left 0)

=long-text-style($pc-font-size: 1rem, $mobile-font-size: .8125rem, $background: $base, $font: $default-text)
  word-wrap: break-word
  +media-breakpoint-up(md)
    font-size: $pc-font-size
  +media-breakpoint-down(sm)
    font-size: $mobile-font-size
  +headdings
  p
    +text-block(1em 1.86)
  a
    +hover-link-reversal
    +default-link
    &:hover
      img
        border-color: mix($font, $background, 16%)
  a,
  a:link,
  a:visited,
  a:hover
    pre,
    code
      text-decoration: none !important
  dl
    border: 1px solid mix($font, $background, 20%)
    padding: 1em
    border-radius: .25rem
  dt
    +text-block(1em 1.6, 600)
    margin-bottom: .25em
  dd
    +text-block(1em 1.6)
    &:not(:last-child)
      margin-block: 1em
  code
    font-family: var(--monospace)
    tab-size: 2
    hyphens: none
  pre
    padding: 0
    code
      border: none
      +text-block(.9375em 1.5)
      overflow: auto
      display: block
      width: 100%
      padding: .875em
  code[class*="language-"],
  pre[class*="language-"]
    border: none
    tab-size: 2
  pre[class*="language-"]
    padding: 0
  p,
  li
    *:not(ol):not(ul):first-child
      margin-top: 0
    *:not(ol):not(ul):last-child
      margin-bottom: 0
    pre:not(ol):not(ul):last-child
      margin-block: 1em
    blockquote
      margin-left: calc(.75em + 1px)
    blockquote + ul
      margin-top: -2em
    >code
      +text-block(.875em 1.7, inline-flex)
      color: var(--default-text)
      align-items: center
      letter-spacing: 0
      padding-inline: .25rem
      border: solid 1px var(--border)
      background-color: mix($font, $background, 4%)
      margin-inline: .25rem
      border-radius: .125rem
    pre[class*=language-]
      margin-block: 1em
  hr
    display: block
    height: .25rem
    background-color: #dadbdc
    border: none
  img
    height: auto
    display: block
    margin-inline: auto
    border: 1px solid mix($font, $background, 10%)
    &.is-xs
      max-width: 10em
    &.is-sm
      max-width: 20em
    &.is-md
      max-width: 30em
    +media-breakpoint-down(sm)
      max-width: 100% !important
  br + img
    margin-block: 1em
  +figure
  +list
  div
    +list

  blockquote
    padding-left: 1.5em
    +position(relative)
    border-left: solid .25em var(--border-tint)
    +list
    p + &
      margin-block: 3em 2.5em
    code
      font-style: normal
    >*:last-child
      margin-bottom: 0 !important

  details
    +text-block(.875rem 1.8)
    margin-bottom: 1.5em
    border: solid 1px var(--border)
    padding: .5em 1em
    border-radius: .25rem
    +list
    summary
      +text-block(1em 1.8)
      cursor: pointer
      outline: none
      +hover-link
    &[open] summary
      border-bottom: solid 1px var(--border)
      padding-bottom: .5em
      margin-bottom: .5em

  iframe
    display: block
    margin-inline: auto

  code
    word-break: break-all
    word-wrap: break-word
    white-space: pre-wrap

  strong,
  b
    font-weight: 700

  div
    position: relative
    width: 100%
    +list

  +message
  +table
  +task-list
  +speak
  +header-anchor
  +blocks

  textarea
    background-color: var(--input-background)
    width: 100%
    padding: .75em
    border: solid 1px var(--input-border)
    border-radius: .25rem
    min-height: 16rem
    transition: border-color .2s ease-in, background-color .2s ease-in, box-shadow .2s ease-in
    &:hover
      background-color: var(--input-hover-background)
      border-color: var(--input-hover-border)
    &:focus
      background-color: var(--input-focus-background)
      border-color: var(--input-focus-border)
      box-shadow: var(--input-focus-shadow)
    &:disabled
      color: #999
      background-color: #dedede
      pointer-events: none

  .a-user-emoji-link
    +size(2em)
    display: inline-block
    &:not(:first-child)
      margin-left: .5em
    .a-user-emoji
      margin-block: 0
  .header-anchor + .a-user-emoji-link
    margin-left: 0
  .a-user-emoji
    +size(1.8em)
    object-fit: cover
    background-color: var(--base)
    border-radius: 2px
    display: inline-block !important
    border: none !important
    margin-inline: 0 !important
    vertical-align: middle
  body.articles & .a-user-emoji-link,
  body.buzz & .a-user-emoji-link
    pointer-events: none

  *:first-child
    margin-top: 0 !important
  *:last-child
    margin-bottom: 0 !important
