/*
 * Base
 */

html,
body {
  background: var(--bg-body);
  font-family: var(--body-font);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-body);
  overflow-x: hidden;
}

body {
  @extend %ms-font-size-0;
  padding: 0;
  margin: 0;
}

/*
 * Code
 */

pre,
code {
  font-family: var(--monospace-font);
  letter-spacing: -0.03em;
}

pre {
  font-size: var(--code-size);
}

/*
 * Antialias
 */

*:not(pre):not(code) {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/*
 * Links
 */

a {
  color: var(--brand-b);
}

a:visited {
  color: var(--brand-b7);
}

a:hover {
  color: var(--brand-b3);
}

/* prism.js adds aria-hidden which it probably shouldn't */
[aria-hidden]:not(.line-highlight) {
  display: none !important;
}

/* No tooltips on mobile */
@media (max-width: 580px) {
  .hint--bottom {
    &::before,
    &::after {
      display: none;
    }
  }
}

/*
 * I don't know where I got these from
 */

a,
button,
summary {
  border-radius: 3px;
  transition: background-color 100ms linear;
}

a:focus,
button:focus,
summary:focus {
  outline: 0;
  background-color: color-mod(var(--brand-b) alpha(6%));
  animation: focus-in 300ms linear;
}

@keyframes focus-in {
  0% {
    background-color: color-mod(var(--brand-b) alpha(12%));
  }
}
