
.typography--padded {

}

.typography {

.font-family-monospace {
  font-family: $font-family-monospace;
}

  p, > h1, > h2, > h3, > h4, > h5, > h6, > img, > ul, ol, pre, > div, table, blockquote {
    margin-bottom: $s-m;
		line-height: $line-height-normal;
	}

	> h1, > h2, > h3, > h4, > h5, > h6 {
    font-weight: 500;
		margin-top: 1.5em;
	}

	> h1 {
		font-size: 1.85em;
	}

  > h2 {
  	font-size: 1.65em;
  }

  > h3 {
    font-size: 1.35em;
  }

  > h4 {
    font-size: 1.25em;
  }

  > h5, > h6 {
    font-size: 1.25em;
  }

  h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
    font-weight: normal;
    color: color(text-secondary);
  }

  h1 small, h2 small, h3 small {
    font-size: 65%;
  }

  h4 small, h5 small, h6 small {
    font-size: 75%;
  }

  h1.with-underline,
  h2.with-underline,
  h3.with-underline,
  h4.with-underline,
  h5.with-underline,
  h6.with-underline {
    border-bottom: 1px solid color(border);
  }

  .lead {
    font-size: 135%;
    color: color(text-secondary);
  }

  small {
    font-size: 85%;
  }
}

dl dt {
  font-weight: 500;
  margin-left: 5px;
  color: var(--ee-text-normal);
  line-height: 1.6;
}

dl dd {
  color: var(--ee-text-primary);
  margin-left: 20px;
  margin-bottom: 5px;
}

details {
  padding: 10px;
  margin-bottom: 10px;

  summary {
    font-weight: 500;
    color: var(--ee-text-normal);
    line-height: 1.6;
    font-size: 1rem;
    list-style: none;

    &:before {
      color: var(--ee-text-placeholder);
      content: "\f054";
      font-size: 10px;
      line-height: 0;
      margin-right: 5px;
      position: relative;
      top: -2px;
      font-family: "Font Awesome 6 Pro";
      font-weight: 600;
      margin-right: 5px;
      display: inline-block;
    }
  }
}

details summary::-webkit-details-marker { display: none;}

details[open] summary:before {
  content: "\f078";
}

menu {
  padding-left: 20px;
  margin: 10px 0;

  menuitem {
    display: block;
    margin-bottom: 5px;
  }
}

dialog {
  padding: 20px 30px 20px 30px;
  line-height: 1.6;
  background: var(--ee-bg-blank);
  border-color: var(--ee-border)
}