:root {
  --text-xs: 0.5625rem; // 9px
  --text-sm: 0.7875rem; // 12.6px
  --text-md: 0.875rem;  // 14px
  --text-lg: 1.0208rem; // 16.3333px
  --text-xl: 1.3125rem; // 21px
  --text-xxl: 1.75rem;  // 28px
  --header-font: Tahoma, Verdana, Helvetica, sans-serif;
  --body-font: Verdana, Helvetica, sans-serif;
  --monospace-font: 0.85rem monospace; // 13.6px
}

$h1_padding: 0.8em 0 0.25em 0;
$h2_padding: 0.8em 0 0.25em 0;
$h3_padding: 0.8em 0 0.25em 0;
$h4_padding: 0.8em 0 0.25em 0;

// https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements
@mixin fa-solid-icon($content) {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;

  /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: $content;
}

@mixin active-link {
  color: var(--link-color);

  &:hover, &:focus {
    background-color: var(--subnav-menu-background-color);
    outline: none;
  }
}

@mixin inactive-link {
  color: var(--muted-text-color);

  &:hover {
    color: var(--link-hover-color);
    background-color: var(--subnav-menu-background-color);
  }
}