@layer ui {
    /* This contains all the styles needed to make code listing look good, including syntax highlighting */
    :root {
        --doc-codeblock-background: light-dark(#f6f8fa, #18202a);
        --doc-configuration-block-tab-container-border: none;
        --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;
    }

    /* borders and shadows change more than just a color per theme, so they can't use light-dark() */
    .dark-theme {
        --doc-configuration-block-tab-container-border: 1px solid var(--gray-600);
        --doc-configuration-block-active-tab-shadow: 0 2px 0 var(--gray-900);
    }

    /* the syntax highlighting values are based on the GitHub light and dark themes */

    .hljs-comment {
        color: light-dark(#6a737d, #8b949e);
    }
    .hljs-keyword {
        color: light-dark(#d73a49, #ff7b72);
    }
    .hljs-title {
        color: light-dark(#e36209, #ffa657);
    }
    .hljs-variable-other-marker {
        color: light-dark(#005cc5, #79c0ff);
    }
    .hljs-function .hljs-title {
        color: light-dark(#6f42c1, #d2a8ff);
    }
    .hljs-string {
        color: light-dark(#032f62, #a5d6ff);
    }
    /* remove .hljs-php-attribute when all the docs have been rebuilt with the new highlighter */
    .hljs-attr,
    .hljs-php-attribute,
    .hljs-meta {
        color: light-dark(#22863a, #7ee787);
    }
    .hljs-tag .hljs-name {
        color: light-dark(#22863a, #7ee787);
    }
    .hljs-tag .hljs-attr {
        color: light-dark(#6f42c1, #d2a8ff);
    }
    .hljs-addition {
        background: light-dark(#e6ffed, rgba(46, 160, 67, 0.3));
        outline: 3px solid light-dark(#e6ffed, rgba(46, 160, 67, 0.3));
    }
    .hljs-deletion {
        background: light-dark(#ffeef0, rgba(218, 54, 51, 0.3));
        outline: 3px solid light-dark(#ffeef0, rgba(218, 54, 51, 0.3));
    }

    code,
    pre {
        color: var(--text-color);
        font-family: var(--font-family-monospace);
        font-size: 13px;
        font-optical-sizing: auto;
        font-style: normal;
        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 light-dark(var(--gray-200), var(--gray-900));
    }
    pre code {
        border-bottom: 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 .codeblock-caption {
        background: light-dark(var(--gray-200), var(--gray-700));
        color: light-dark(var(--gray-600), var(--gray-300));
        font-size: 13px;
        font-family: var(--font-family-monospace);
        font-optical-sizing: auto;
        font-style: normal;
        font-synthesis: none;
        font-variant-ligatures: none;
        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 {
        background: var(--doc-codeblock-background);
        border: 1px solid transparent;
        border-radius: var(--ui-border-radius-md);
        color: var(--ui-text-secondary-color);
        font-size: var(--font-size-sm);
        line-height: 21px;
        outline: none;
        padding: 4px 6px;
        position: absolute;
        top: 4px;
        right: 4px;
    }
    .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);
        border-color: var(--ui-border-primary-color);
    }
    .codeblock.codeblock-has-caption .btn-codeblock-copy-code {
        top: 34px;
    }
    .codeblock-terminal.codeblock {
        position: relative;
    }
    .codeblock-terminal.codeblock .btn-codeblock-copy-code {
        color: var(--white);
        display: flex;
        align-items: center;
        position: absolute;
        top: -26px;
        right: 4px;
        background: transparent;
        border: 0;
        padding: 0;
        font-size: var(--ui-font-size-sm);
    }
    .codeblock-terminal.codeblock.command-windows .btn-codeblock-copy-code,
    .windows .codeblock-terminal:not(.command-linux):not(.command-macos) .btn-codeblock-copy-code {
        right: 110px;
    }
    .codeblock-terminal.codeblock .btn-codeblock-copy-code svg {
        margin-right: 5px;
        height: 16px;
        width: 16px;
    }

    .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: light-dark(#b8bdc6, var(--gray-500));
        border-right: 1px solid light-dark(var(--gray-200), rgba(240, 246, 252, 0.15));
        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;
        border: 0;
        font-size: 13px;
        padding: 0;
        word-break: unset;
        white-space: pre;
    }
    @media (min-width: 768px) {
        pre.codeblock-code code,
        .ui-page-main-content pre.codeblock-code code {
            font-size: 14px;
        }
    }

    .configuration-block .configuration-tabs,
    .diff-tabs {
        background-color: light-dark(#ededed, var(--gray-900));
        border-radius: var(--ui-border-radius-md);
        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,
    .diff-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,
    .diff-tabs button::before {
        content: '';
        width: 1px;
        background: light-dark(var(--gray-300), var(--gray-600));
        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,
    .diff-tabs button:first-child::before,
    .diff-tabs button[data-active]::before,
    .diff-tabs button[data-active] + button::before {
        width: 0;
    }

    .configuration-block .configuration-tabs li[data-active],
    .configuration-block .configuration-tabs button[data-active],
    .diff-tabs button[data-active] {
        background-color: light-dark(var(--page-background), var(--gray-600));
        border-radius: var(--ui-border-radius-md);
        border: 1px solid light-dark(transparent, var(--gray-700));
        box-shadow: var(--doc-configuration-block-active-tab-shadow);
        color: light-dark(var(--text-color), var(--gray-200));
        position: relative;
        z-index: 1;
    }

    /* the diff view tabs are smaller than the configuration tabs because
       they repeat often and are less important than the code they toggle */
    .diff-tabs {
        font-size: var(--font-size-xs);
        margin-bottom: 6px;
    }
    .diff-tabs button {
        color: var(--ui-text-secondary-color);
        padding: 1px 10px;
    }
    .diff-tabs button[data-active] {
        color: light-dark(var(--text-color), var(--gray-200));
    }
}