:root {
  --color-text: hsl(12, 5%, 4%);
  --color-border: hsl(17, 24%, 90%);
}

html {
  color: var(--color-text);
  font: 'Source Sans Pro', 'Helvetica Neue', 'Segoe UI', 'Helvetica', 'Arial', sans-serif;
  box-sizing: border-box;
  overflow-y: scroll;
}

body {
  color: hsla(0, 0%, 0%, 0.8);
  font-family: 'Source Sans Pro', 'Helvetica Neue', 'Segoe UI', 'Helvetica', 'Arial', sans-serif;
  font-weight: 400;
  word-wrap: break-word;
  font-kerning: normal;
  margin: 0;
}

img {
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
  margin-bottom: 1.125rem;
}
h1 {
  padding-bottom: 0.375rem;
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
  margin-bottom: 2.25rem;
  color: inherit;
  font-family: 'Cabin', 'Helvetica Neue', 'Segoe UI', 'Helvetica', 'Arial', sans-serif;
  font-weight: 500;
  text-rendering: optimizeLegibility;
  font-size: 2rem;
  line-height: 1.1;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
h2 {
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
  color: inherit;
  font-family: 'Cabin', 'Helvetica Neue', 'Segoe UI', 'Helvetica', 'Arial', sans-serif;
  font-weight: 500;
  text-rendering: optimizeLegibility;
  font-size: 1.51572rem;
  line-height: 1.1;
}
h3 {
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
  color: inherit;
  font-family: 'Cabin', 'Helvetica Neue', 'Segoe UI', 'Helvetica', 'Arial', sans-serif;
  font-weight: 500;
  text-rendering: optimizeLegibility;
  font-size: 1.31951rem;
  line-height: 1.1;
}
h4 {
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
  color: inherit;
  font-family: 'Cabin', 'Helvetica Neue', 'Segoe UI', 'Helvetica', 'Arial', sans-serif;
  font-weight: 500;
  text-rendering: optimizeLegibility;
  font-size: 1rem;
  line-height: 1.1;
}
h5 {
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
  color: inherit;
  font-family: 'Cabin', 'Helvetica Neue', 'Segoe UI', 'Helvetica', 'Arial', sans-serif;
  font-weight: 500;
  text-rendering: optimizeLegibility;
  font-size: 0.87055rem;
  line-height: 1.1;
}
h6 {
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
  color: inherit;
  font-family: 'Cabin', 'Helvetica Neue', 'Segoe UI', 'Helvetica', 'Arial', sans-serif;
  font-weight: 500;
  text-rendering: optimizeLegibility;
  font-size: 0.81225rem;
  line-height: 1.1;
}

:is(h1, h2, h3, h4, h5, h6) {
  text-wrap: balance;
  margin-block: 1.5em 0.5em;

  /* Prevent excessive space between direct heading siblings. */
  & + & {
    margin-block-start: 0;
  }
}

/* First heading on the page should neatly align to the top */
h1:first-of-type {
  margin-block-start: 0;
}

ul,
ol {
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;
  padding-bottom: 0;
  padding-right: 0;
  padding-top: 0;
  margin-bottom: 1.125rem;

  /* https://piccalil.li/blog/an-in-depth-guide-to-customising-lists-with-css/ */
  padding-left: 1lh;
}

p {
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
  margin-bottom: 1.125rem;
  text-wrap: pretty;
}
figure {
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
  margin-bottom: 1.125rem;
}

table {
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
  margin-bottom: 1.125rem;
  font-size: 1rem;
  line-height: 1.5rem;
  border-collapse: collapse;
  width: 100%;
}
fieldset {
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
  margin-bottom: 1.125rem;
}
blockquote {
  margin-left: 1.5rem;
  margin-right: 1.5rem;
  margin-top: 0;
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
  margin-bottom: 1.125rem;
  padding: 1em;
  margin: 0 0 1.5rem 0;
  color: #555;
  background: #f6f6f6;
  border-left: 4px solid #ccc;
}
form {
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
  margin-bottom: 1.125rem;
}
b,
strong,
dt,
th {
  font-weight: 700;
}

li {
  margin-bottom: 0.375rem;
}
ol li,
ul li {
  padding-left: 0;
}

li > ul,
li > ol {
  margin-bottom: calc(1.125rem / 2);
  margin-top: calc(1.125rem / 2);
}
blockquote *:last-child,
li *:last-child,
p *:last-child {
  margin-bottom: 0;
}

li > p {
  margin-bottom: calc(1.125rem / 2);
}
code {
  font-size: 0.85rem;
  line-height: 1.5rem;
  background: rgba(0, 0, 0, 0.05);
  padding: 0 0.25em;
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  display: inline-block;
}

thead {
  text-align: left;
}
td,
th {
  text-align: left;
  border-bottom: 1px solid hsla(0, 0%, 0%, 0.12);
  font-feature-settings: 'tnum';
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: calc(0.75rem - 1px);
}
th:first-child,
td:first-child {
  padding-left: 0;
}
th:last-child,
td:last-child {
  padding-right: 0;
}
a {
  color: #007a3d;
}

nav {
  margin-right: 2em;
}

nav > ul {
  position: sticky;
}

@media (max-width: 640px) {
  nav {
    display: none;
    margin-right: 0;
  }

  nav > ul {
    position: static;
  }

  nav.opened {
    display: block;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}

.anchor-icon {
  color: rgb(82 82 82 / var(--tw-text-opacity));
  transition-property: color,background-color,border-color,text-decoration-color,fill,stroke;
  transition-timing-function: cubic-bezier(.4,0,.2,1);
  transition-duration: .15s;
  padding-inline-start: 6px;
  opacity: 0;
}

.anchor-icon svg {
  vertical-align: bottom;
}

.anchor-icon:hover {
  opacity: 1;
}

h1:hover .anchor-icon,
h2:hover .anchor-icon,
h3:hover .anchor-icon {
  opacity: 1;
}

.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.similar-components-table td,
.similar-components-table th {
    text-align: left;
}