// if it has a class we presume it's styled
// just a bunch of small phrasing elements that markdown might generate
// hugo has code highlighting built in so I've tweaked that here too

p {
  line-height: 1.5;
}
ul[class],
ol[class],
li[class] {
  padding: 0;
  margin: 0;
  list-style: none;
}

// markdown checklist
ul:has(input),
li:has(input) {
  padding: 0;
  margin: var(--theme-spacing--1) 0 auto 0;
  list-style: none;
  &::marker {
    content: "✶ ";
    color: var(--theme-color--accent);
  }
}
ul:has(input) {
  margin: var(--theme-spacing--1) 0 var(--theme-spacing--3);
}

blockquote {
  font-size: var(--theme-type-size--4);
  margin: var(--theme-spacing--4) 0 var(--theme-spacing--6);
  @include pattern(dots, var(--theme-color--pop), b, false, 0.2);
  border-bottom: var(--theme-border--thick);
  border-image: var(--theme-border-image);
}

code,
.code,
pre code .highlight pre,
time {
  font: var(--theme-font--system);
}
code:not([class]) {
  color: var(--theme-color--pop);
}
//this .highlight is goldmark
.highlight pre {
  display: block;
  padding: var(--theme-spacing--gutter);
  overflow-x: auto;
  margin: 0;
}

.highlight {
  border: var(--theme-border);
  padding: var(--theme-spacing--1);
  max-width: var(--theme-spacing--linelength);
  @include pattern(dots, currentColor, c, false);
  margin-bottom: var(--theme-spacing--4);
}

// details could show up in github flavoured markdown so we put a basic style on here
summary > * {
  display: inline-block;
}
summary::marker {
  color: var(--theme-color--accent);
  font-size: var(--theme-type-size--3);
}
hr {
  border: 0;
  border-bottom: var(--theme-border--thick);
  border-image: var(--theme-border-image);
  margin: var(--theme-spacing--6)
    calc(3 * calc(-1 * var(--theme-spacing--gutter)));
  max-width: 50%;
}
