/* 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%;
}