@layer ui {
    /* these styles wrap a code block in a simulated terminal window
   adapted from https://codepen.io/adrienjarthon/pen/ogjjoj.codeblock-terminal, */
    :root {
        --terminal-bg: var(--gray-800);
        --terminal-border-color: var(--gray-600);
    }
    .dark-theme {
        --terminal-bg: var(--gray-900);
        --terminal-border-color: var(--gray-700);
    }

    .codeblock-terminal {
        background: var(--terminal-bg);
        border: solid var(--terminal-border-color);
        border-width: 30px 4px 4px 4px;
        border-radius: 3px 3px 0 0;
        color: var(--white);
        padding: 5px 0 0;
        position: relative;
        width: 100%;
    }
    .codeblock-terminal.codeblock,
    .codeblock-terminal.codeblock.codeblock-length-md,
    .codeblock-terminal.codeblock.codeblock-length-lg {
        margin-left: 0;
    }

    .codeblock-terminal.codeblock {
        position: relative;
    }
    .codeblock-terminal.codeblock .ui-button-copy {
        position: absolute;
        top: -31px;
        right: 4px;
        background: transparent;
        border: 0;
        padding: 0;
        font-size: var(--ui-font-size-sm);
    }
    .codeblock-terminal.codeblock.command-windows .ui-button-copy,
    .windows .codeblock-terminal:not(.command-linux):not(.command-macos) .ui-button-copy {
        right: 110px;
    }
    .codeblock-terminal.codeblock .ui-button-copy svg {
        vertical-align: sub;
    }

    .codeblock-terminal .codeblock-lines {
        display: none;
    }
    .codeblock-terminal .codeblock-code {
        background: transparent;
        min-height: 50px;
        padding: 10px;
    }

    .codeblock-terminal code {
        color: var(--gray-50);
        font-family: var(--font-family-monospace);
        font-size: 13px;
        font-synthesis: none;
        font-variant-ligatures: none;
        white-space: pre-wrap;
    }
    @media (min-width: 768px) {
        .codeblock-terminal code {
            font-size: 14px;
        }
    }

    .codeblock-terminal .hljs-comment {
        color: #8b949e;
        user-select: none;
        -webkit-user-select: none;
    }
    .codeblock-terminal .hljs-keyword {
        color: var(--gray-50);
    }
    .codeblock-terminal .hljs-prompt {
        color: #8b949e;
        user-select: none;
        -webkit-user-select: none;
    }
    .codeblock-terminal .hljs-string {
        color: #a5d6ff;
    }

    /* the exact window decorations depend on the user's operating system */
    .macos .codeblock-terminal:not(.command-linux):not(.command-windows):before,
    .codeblock-terminal.command-macos:before {
        background-color: rgba(255, 255, 255, 0.3);
        border-radius: 50%;
        box-shadow:
            0 0 0 2px rgba(255, 255, 255, 0.3),
            20px 0 0 2px rgba(255, 255, 255, 0.3),
            40px 0 0 2px rgba(255, 255, 255, 0.3);
        content: '';
        display: block;
        height: 7px;
        left: 8px;
        position: absolute;
        top: -18px;
        width: 7px;
    }
    .windows .codeblock-terminal:not(.command-linux):not(.command-macos):before,
    .codeblock-terminal.command-windows:before {
        background-color: transparent;
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="rgba(255, 255, 255, 0.3)" d="M464 352H48c-26.5 0-48 21.5-48 48v32c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48v-32c0-26.5-21.5-48-48-48z"></path></svg>'),
            url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="rgba(255, 255, 255, 0.3)" d="M464 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm0 394c0 3.3-2.7 6-6 6H54c-3.3 0-6-2.7-6-6V192h416v234z"></path></svg>'),
            url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="rgba(255, 255, 255, 0.3)" d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"></path></svg>');
        background-repeat: no-repeat;
        background-position:
            right 80px top 5px,
            right 44px top 8px,
            right 8px top 8px;
        background-size: 14px, 14px, 14px;
        content: '';
        display: block;
        height: 30px;
        position: absolute;
        top: -30px;
        width: 100%;
    }
    .linux .codeblock-terminal:not(.command-windows):not(.command-macos):before,
    .codeblock-terminal.command-linux:before {
        background-color: transparent;
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="rgba(255, 255, 255, 0.3)" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"></path></svg>'),
            url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="rgba(255, 255, 255, 0.3)" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zM124 296c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h264c6.6 0 12 5.4 12 12v56c0 6.6-5.4 12-12 12H124z"></path></svg>'),
            url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="rgba(255, 255, 255, 0.3)" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm96 328c0 8.8-7.2 16-16 16H176c-8.8 0-16-7.2-16-16V176c0-8.8 7.2-16 16-16h160c8.8 0 16 7.2 16 16v160z"></path></svg>');
        background-repeat: no-repeat;
        background-position:
            left 8px top 8px,
            left 28px top 8px,
            left 48px top 8px;
        background-size: 14px, 14px, 14px;
        content: '';
        display: block;
        height: 30px;
        position: absolute;
        top: -30px;
        width: 100%;
    }
}