/* Style for syntax highlighting */
@import url("github.css");

body:not(.toc-inline) {
  padding-right: 1.5em;
  padding-left: 1.5em;
}

/* Code blocks */
pre,
code,
samp,
.sourcecode {
  color: hsl(11deg 81% 43%);
}

pre code:not(.hljs),
.sourcecode:not(.hljs) {
  margin: 1em 0;
  padding: 1em;
  border-radius: 0.2em;
  overflow: auto;
  background: hsl(24deg 20% 95%);
}

/* Style all kbd elements that are not in table headers */
:not(th) > kbd {
  display: inline-block;
  padding: 0.1em 0.3em;
  color: #555;
  vertical-align: middle;
  background-color: #fcfcfc;
  border: solid 1px #ccc;
  border-bottom-color: #bbb;
  border-radius: 0.2em;
  box-shadow: inset 0 -1px 0 #bbb;
}

table.data.attributes tbody th,
table.data.attributes tbody td {
  border: 1px solid silver;
}

/* CodePen button */
.example-header {
  display: flex;
  align-items: center;
  margin-top: 3rem;
  margin-bottom: 1rem;
  page-break-after: avoid;
  page-break-inside: avoid;
  font: 100% sans-serif;
  font-family: inherit;
  line-height: 1.2;
  hyphens: manual;
}

/* We need to override the top margin for the link example */

th .example-header {
  margin-top: 1em;
}

.example-header > :first-child {
  margin: 0;
}

.example-header > :first-child + * {
  margin-left: 1em;
}

.example-code button,
.example-header button {
  display: inline-block;
  position: relative;
  padding: 0.4em 0.7em;
  border: 1px solid hsl(213deg 71% 49%);
  border-radius: 5px;
  box-shadow: 0 1px 2px hsl(216deg 27% 55%);
  color: #fff;
  font-size: inherit;
  text-shadow: 0 -1px 1px hsl(216deg 27% 25%);
  background-color: hsl(216deg 82% 51%);
  background-image: linear-gradient(
    to bottom,
    hsl(216deg 82% 53%),
    hsl(216deg 82% 47%)
  );
}

.example-header button:hover {
  border-color: hsl(213deg 71% 29%);
  background-color: hsl(216deg 82% 31%);
  background-image: linear-gradient(
    to bottom,
    hsl(216deg 82% 33%),
    hsl(216deg 82% 27%)
  );
  cursor: default;
}

.example-header button:focus {
  outline: none;
}

.example-header button:focus::before {
  position: absolute;
  z-index: -1;

  /* button border width - outline width - offset */
  top: calc(-1px - 3px - 3px);
  right: calc(-1px - 3px - 3px);
  bottom: calc(-1px - 3px - 3px);
  left: calc(-1px - 3px - 3px);
  border: 3px solid hsl(213deg 71% 49%);

  /* button border radius + outline width + offset */
  border-radius: calc(5px + 3px + 3px);
  content: "";
}

.example-header button:active {
  border-color: hsl(213deg 71% 49%);
  background-color: hsl(216deg 82% 31%);
  background-image: linear-gradient(
    to bottom,
    hsl(216deg 82% 53%),
    hsl(216deg 82% 47%)
  );
  box-shadow: inset 0 3px 5px 1px hsl(216deg 82% 30%);
}

#support-notice[open] summary {
  padding-bottom: 1em;
  margin-bottom: 1em;
}

#support-notice summary p {
  display: inline;
  margin-left: 5px;
}

.note,
.warning,
.advisement {
  border-right: none;
  padding: 1em;
  margin: 2em 0;
}

.note > h2,
.note > h3,
.note > h4,
.note > h5,
.warning > h2,
.warning > h3,
.warning > h4,
.warning > h5,
.advisement > h2,
.advisement > h3,
.advisement > h4,
.advisement > h5 {
  margin: 0 0 0.5em;
  font-size: 1.2rem;
  font-weight: 400;
  color: black;
}

.note > :first-child + *,
.warning > :first-child + *,
.advisement > :first-child + * {
  margin-top: 0;
}

.note > :last-child,
.warning > :last-child,
.advisement > :last-child {
  margin-bottom: initial;
}

.warning {
  background-color: #fdd4e1;
  border-left: 0.5em solid #c20d4a;
}