/* This contains all the styles needed to make code listing look good, including syntax highlighting */
:root {
  --doc-codeblock-lines-color: #b8bdc6;
  --doc-codeblock-lines-border-color: var(--gray-200);
  --doc-codeblock-background: #f6f8fa;
  --doc-codeblock-caption-bg: var(--gray-200);
  --doc-codeblock-caption-color: var(--gray-600);
  --doc-code-border-color: var(--gray-200);
  --doc-configuration-block-tab-container-border: none;
  --doc-configuration-block-tab-background: #ededed;
  --doc-configuration-block-tab-border-color: var(--gray-300);
  --doc-configuration-block-active-tab-background: var(--page-background);
  --doc-configuration-block-active-tab-color: var(--text-color);
  --doc-configuration-block-active-tab-shadow: rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
  --doc-configuration-block-active-tab-border-color: transparent;
  /* These values are based on GitHub light theme */
  --code-syntax-comment: #6a737d;
  --code-syntax-keyword: #d73a49;
  --code-syntax-title: #e36209;
  --code-syntax-variable-other-marker: #005cc5;
  --code-syntax-function-title: #6f42c1;
  --code-syntax-string: #032f62;
  --code-syntax-attr: #22863a;
  --code-syntax-tag-name: #22863a;
  --code-syntax-tag-attr: #6f42c1;
  --code-syntax-addition-bg: #e6ffed;
  --code-syntax-addition-border: #e6ffed;
  --code-syntax-deletion-bg: #ffeef0;
  --code-syntax-deletion-border: #ffeef0;
}

.dark-theme {
  --doc-codeblock-lines-color: var(--gray-500);
  --doc-codeblock-lines-border-color: rgba(240, 246, 252, 0.15);
  --doc-codeblock-background: #18202a;
  --doc-codeblock-caption-bg: var(--gray-700);
  --doc-codeblock-caption-color: var(--gray-300);
  --doc-code-border-color: var(--gray-900);
  --doc-terminal-background: var(--gray-900);
  --doc-terminal-border-color: var(--gray-700);
  --doc-configuration-block-tab-container-border: 1px solid var(--gray-600);
  --doc-configuration-block-tab-background: var(--gray-900);
  --doc-configuration-block-tab-border-color: var(--gray-600);
  --doc-configuration-block-active-tab-background: var(--gray-600);
  --doc-configuration-block-active-tab-color: var(--gray-200);
  --doc-configuration-block-active-tab-shadow: 0 2px 0 var(--gray-900);
  --doc-configuration-block-active-tab-border-color: var(--gray-700);
  /* These values are based on GitHub dark theme */
  --code-syntax-comment: #8b949e;
  --code-syntax-keyword: #ff7b72;
  --code-syntax-title: #ffa657;
  --code-syntax-variable-other-marker: #79c0ff;
  --code-syntax-function-title: #d2a8ff;
  --code-syntax-string: #a5d6ff;
  --code-syntax-attr: #7ee787;
  --code-syntax-tag-name: #7ee787;
  --code-syntax-tag-attr: #d2a8ff;
  --code-syntax-addition-bg: rgba(46, 160, 67, 0.3);
  --code-syntax-addition-border: rgba(46, 160, 67, 0.3);
  --code-syntax-deletion-bg: rgba(218, 54, 51, 0.3);
  --code-syntax-deletion-border: rgba(218, 54, 51, 0.3);
}

.hljs-comment { color: var(--code-syntax-comment); }
.hljs-keyword { color: var(--code-syntax-keyword); }
.hljs-title { color: var(--code-syntax-title); }
.hljs-variable-other-marker { color: var(--code-syntax-variable-other-marker); }
.hljs-function .hljs-title { color: var(--code-syntax-function-title); }
.hljs-string { color: var(--code-syntax-string); }
/* remove .hljs-php-attribute when all the docs have been rebuilt with the new highlighter */
.hljs-attr, .hljs-php-attribute, .hljs-meta { color: var(--code-syntax-attr); }
.hljs-tag .hljs-name { color: var(--code-syntax-tag-name); }
.hljs-tag .hljs-attr { color: var(--code-syntax-tag-attr); }
.hljs-addition { background: var(--code-syntax-addition-bg); outline: 3px solid var(--code-syntax-addition-border); }
.hljs-deletion { background: var(--code-syntax-deletion-bg); outline: 3px solid var(--code-syntax-deletion-border); }

code, pre {
  color: var(--text-color);
  font-family: var(--font-family-monospace);
  font-size: 13px;
  font-synthesis: none;
  font-variant-ligatures: none;
  white-space: pre-wrap;
}
@media (min-width: 768px) {
  code, pre { font-size: 14px; }
}
code {
  border-bottom: 1px solid var(--doc-code-border-color);
}
pre code { border-bottom: 0; }

.highlight-diff .highlight > pre {
  padding-left: 0;
}

.codeblock {
  position: relative;
  display: grid;
  margin-bottom: var(--margin-md);
}
@media (min-width: 992px) {
  .codeblock { margin-left: -21px; }
  .codeblock.codeblock-length-sm[data-loc="1"],
  .codeblock.codeblock-length-sm[data-loc="2"] {
    margin-left: 0;
  }
  .codeblock.codeblock-length-md { margin-left: -30px; }
}
.codeblock:hover {
  .btn-codeblock-copy-code { animation: fade-in .5s both; }
}
.codeblock .codeblock-caption {
  background: var(--doc-codeblock-caption-bg);
  color: var(--doc-codeblock-caption-color);
  font-size: 13px;
  font-family: var(--font-family-monospace);
  font-weight: 600;
  margin-left: 23px;
  padding: 4px 10px;
  /* needed to truncate long text */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.codeblock[data-loc="1"] .codeblock-caption,
.codeblock[data-loc="2"] .codeblock-caption {
  margin-left: 0;
}
.codeblock.codeblock-length-md .codeblock-caption { margin-left: 32px; }
.codeblock pre {
  line-height: 1.8;
  white-space: pre;
}
.codeblock .btn-codeblock-copy-code {
  animation: fade-out .2s both;
  background: var(--doc-action-background);
  border: 1px solid var(--listgroup-border-color);
  border-radius: 4px;
  color: var(--text-muted-color);
  font-size: var(--font-size-sm);
  line-height: 21px;
  opacity: 0;
  outline: none;
  padding: 4px 8px;
  position: absolute;
  top: 5px;
  right: 5px;
}
.codeblock .btn-codeblock-copy-code svg {
  vertical-align: text-bottom;
}

.codeblock .btn-codeblock-copy-code:hover,
.codeblock .btn-codeblock-copy-code:active,
.codeblock .btn-codeblock-copy-code.btn-codeblock-copy-code-active {
  color: var(--text-color);
}
.codeblock.codeblock-has-caption .btn-codeblock-copy-code { top: 34px; }

.codeblock-scroll {
  display: flex;
  flex-direction: row;
  overflow-x: auto;
}
.codeblock-lines {
  flex-grow: 0;
  flex-shrink: 0;
  margin-bottom: 0;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;

  color: var(--doc-codeblock-lines-color);
  border-right: 1px solid var(--doc-codeblock-lines-border-color);
  font-size: 13px;
  padding: 5px 10px 0 5px;
  text-align: right;
}
@media (min-width: 768px) {
  .codeblock-lines { font-size: 14px; }
}
/* the 'pre' is needed to give these styles more priority */
pre.codeblock-lines {
  /* needed because line numbers use a smaller font size, so they can't use the default
  /* line-height of `<pre>` elements, which is relative to font size */
  line-height: 23.4px;
}
@media (min-width: 768px) {
  pre.codeblock-lines { line-height: 25.2px; }
}
/* hide the line numbers of code blocks that only contain 1 or 2 lines */
.codeblock[data-loc="1"] .codeblock-lines,
.codeblock[data-loc="2"] .codeblock-lines {
  display: none;
}

pre.codeblock-code {
  background: var(--doc-codeblock-background);
  flex: 1;
  hyphens: none;
  margin-bottom: 0;
  padding: 5px 10px;
}
pre.codeblock-code code,
.page-content .content pre.codeblock-code code {
  background: transparent;
  border-radius: 0;
  font-size: 13px;
  padding: 0;
  word-break: unset;
  white-space: pre;
}
@media (min-width: 768px) {
  pre.codeblock-code code,
  .page-content .content pre.codeblock-code code {
    font-size: 14px;
  }
}

.configuration-block .configuration-tabs {
  background-color: var(--doc-configuration-block-tab-background);
  border-radius: 6px;
  border: var(--doc-configuration-block-tab-container-border);
  display: inline-flex;
  font-size: var(--font-size-sm);
  margin: 0 0 10px 0;
  padding: 2px;
  user-select: none;
  -webkit-user-select: none;
}
/* hide tabs when there's just one config format available */
.configuration-block .configuration-tabs.configuration-tabs-length-1 { display: none; }

.configuration-block .configuration-tabs li,
.configuration-block .configuration-tabs button {
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  list-style: none;
  margin: 0;
  padding: 0 15px;
  position: relative;
  text-align: center;
}
.configuration-block .configuration-tabs li::marker { content: ''; }

.configuration-block .configuration-tabs li::before,
.configuration-block .configuration-tabs button::before {
  content: '';
  width: 1px;
  background: var(--doc-configuration-block-tab-border-color);
  position: absolute;
  left: 0;
  top: 15%;
  bottom: 15%;
}

.configuration-block .configuration-tabs li:first-child::before,
.configuration-block .configuration-tabs button:first-child::before,
.configuration-block .configuration-tabs li[data-active]::before,
.configuration-block .configuration-tabs button[data-active]::before,
.configuration-block .configuration-tabs li[data-active] + li::before,
.configuration-block .configuration-tabs button[data-active] + li::before,
.configuration-block .configuration-tabs li[data-active] + button::before,
.configuration-block .configuration-tabs button[data-active] + button::before {
  width: 0;
}

.configuration-block .configuration-tabs li[data-active],
.configuration-block .configuration-tabs button[data-active] {
  background-color: var(--doc-configuration-block-active-tab-background);
  border-radius: 6px;
  border: 1px solid var(--doc-configuration-block-active-tab-border-color);
  box-shadow: var(--doc-configuration-block-active-tab-shadow);
  color: var(--doc-configuration-block-active-tab-color);
  position: relative;
  z-index: 1;
}