/**
 */

@utility readable {
  > :where(:not(:last-child)) {
    margin-bottom: calc(var(--spacing) * 4) /* 1rem = 16px */;
  }

  :where(h1, h2, h3, h4, h5, h6) {
    text-align: left;
    &:where(:not(:first-child)) {
      margin-top: calc(var(--spacing) * 8) /* 2rem = 32px */;
    }
  }

  :where(a) {
    text-decoration-line: underline;
    text-decoration-color: transparent;
    text-underline-offset: 5px;
    transition-property:
      color, background-color, border-color, outline-color, text-decoration-color;
    transition-duration: var(--tw-duration, 300ms);
  }

  :where(:not(a)) {
    &:where(:hover, :focus) {
      text-decoration-color: currentColor;
    }
  }

  :where(blockquote) {
    padding-inline-start: calc(var(--spacing) * 6) /* 1.5rem = 24px */;
    font-family: var(--font-mono);
    font-weight: var(--font-weight-medium) /* 500 */;
    line-height: var(--leading-snug) /* 1.375 */;
    border-inline-start-style: var(--tw-border-style, solid);
    border-inline-start-width: 4px;
  }

  :where(pre) {
    padding-inline: calc(var(--spacing) * 3) /* 0.75rem = 12px */;
    padding-block: calc(var(--spacing) * 2) /* 0.5rem = 8px */;
    font-family: var(--font-mono);
    font-weight: var(--font-weight-medium) /* 500 */;
    line-height: var(--leading-relaxed) /* 1.625 */;
    border-radius: var(--radius-md) /* 0.375rem = 6px */;
  }

  :where(table, th, td) {
    border-style: var(--tw-border-style, solid);
    border-width: 1px;
    border-collapse: collapse;
  }
  :where(th, td) {
    padding-inline: calc(var(--spacing) * 1.5) /* 0.375rem = 6px */;
    padding-block: calc(var(--spacing) * 1) /* 0.25rem = 4px */;
  }
  :where(th) {
    vertical-align: top;
  }

  :where(ul, ol) {
    margin-left: calc(var(--spacing) * 4) /* 1rem = 16px */;
    list-style-position: inside;
    :where(ul, ol) {
      margin-top: calc(var(--spacing) * 4) /* 1rem = 16px */;
    }
  }
  :where(ul) {
    list-style-type: disc;
  }
  :where(ol) {
    list-style-type: decimal;
  }
  :where(li) {
    padding-left: calc(var(--spacing) * 4) /* 1rem = 16px */;
    text-indent: calc(var(--spacing) * -6) /* -1.5rem = -24px */;
    text-align: left;
    &:where(:not(:last-child)) {
      margin-bottom: calc(var(--spacing) * 2) /* 1rem = 8px */;
    }
  }
}