// We need to override some .content behavior
.content {
  pre {
    border: 1px solid $border;
  }
  // Bold code spans
  code {
    font-weight: inherit;
  }
  a code {
    color: $link;
  }
  h1, h2, h3, h4, h5, h6 {
    code {
      color: $content-heading-color;
    }
  }
  // Don't make tables full-width and make sure that overflowing tables are scrollable
  table {
    display: block;
    width: initial;
    max-width: 100%;
    overflow-x: auto;
  }
  // kbd tags
  kbd {
    @extend .tag;
    @extend .is-dark;
  }
  //
  blockquote, .admonition-body {
    > ul:first-child, > ol:first-child {
      margin-top: 0;
    }
  }
}

// We want to be able to disable certain breadcrumb components
.breadcrumb a.is-disabled {
  cursor: default;
  pointer-events: none;
  &, &:hover{
    color: $breadcrumb-item-disabled-color;
  }
}

// highlight.js background color fix
.hljs {
  background: initial !important;
  padding: initial !important;
}

// There appears to be a rendering bug in Chrome, where elements with `position: absolute` in
// an overflow container affect whether the outer container is overflowing / needs
// scrollbars.
//
// In this particular case, KaTeX applies `position: absolute` on the the MathML
// accessibility span. This breaks the dashboard layout of the equation is somewhere far
// down in the container.
//
// Moving all of these accessbility "pixels" to the top-right seems to take care of the
// issue. An alternative is also to use `position: fixed`, which does not cause the outer
// container to scroll.
.katex .katex-mathml {
  top: 0;
  right: 0;
}

// Set font subpixel rendering to auto on the HTML tag
html {
  -moz-osx-font-smoothing: auto;
  -webkit-font-smoothing: auto;
}
