/* Using global sytles is not recommended, prefer local styles via CSS Modules */

/*
 * box model like it should be
 *
 * http://www.paulirish.com/2012/box-sizing-border-box-ftw/
 */
html { box-sizing: border-box; }

*,
*::before,
*::after {
  box-sizing: inherit;
}

/*
 * kill document defaults margin & padding. We all do that all the time, right ?
 */
html,
body {
  margin: 0;
  padding: 0;
}

/*
 * page styles
 */
html {
  min-height: 100%;
  background: color(var(--colorPrimary) l(99%));
}

body {
  color: var(--colorText);
  font-size: 1rem;
  line-height: 1.5rem;

  /* system font https://medium.com/designing-medium/system-shock-6b1dc6d6596f */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
}

/*
 * .phenomic-HeadingAnchor
 *
 * anchors for markdown headings, generated via markdown renderer, so require
 * global styling
 */
@custom-selector :--headings h1, h2, h3, h4, h5, h6;

:--headings {
  position: relative;
}

:root {
  --phenomic-HeadingAnchor-width: 1.4rem;
  --phenomic-HeadingAnchor-margin: 0.4rem;
}

.phenomic-HeadingAnchor {
  display: inline-block;
  text-align: center;
  margin-left: calc(-1 * (var(--phenomic-HeadingAnchor-width) + var(--phenomic-HeadingAnchor-margin)));
  margin-right: var(--phenomic-HeadingAnchor-margin);
  width: var(--phenomic-HeadingAnchor-width);
  line-height: var(--phenomic-HeadingAnchor-width);
  text-decoration: none;
  opacity: 0.1;
  transition: opacity 0.2s;

  @nest :--headings:hover & {
    opacity: 1;
  }
}

/* minimal styling, prefer removing this and use local styles */
a {
  color: inherit;
  text-decoration: none;

  &:hover {
    text-decoration: underline;
  }
}

hr {
  border: 0;
  height: 1px;
  background: var(--colorNeutral);
  opacity: 0.2;
  margin: 2rem 0;
}