/* Wrap <pre><code>...</code></pre> in .copy-command; copy-code.js adds the button. */
.copy-command{position:relative;box-sizing:border-box;width:100%;max-width:540px;margin:1em 0;padding-right:48px;border:1px solid #c8c8c8;border-radius:6px;background:#f6f6f6;color:#292929;text-align:left}
.copy-command pre{box-sizing:border-box;margin:0;padding:20px 0 20px 20px;overflow:auto;white-space:pre;overflow-wrap:normal;font:13px/1.6 Consolas,"Liberation Mono",Menlo,monospace}
.copy-command code{font:inherit}
.copy-command__button{position:absolute;top:8px;right:8px;display:flex;align-items:center;justify-content:center;width:30px;height:30px;padding:5px;border:0;border-radius:4px;background:transparent;color:#686868;cursor:pointer}
.copy-command__button:hover{background:#e5e5e5;color:#222}
.copy-command__button:focus-visible{outline:2px solid #2687c8;outline-offset:2px}
.copy-command__button svg{display:block;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.copy-command__status{position:absolute;top:12px;right:44px;padding:2px 6px;border-radius:3px;background:#f6f6f6;color:#296d32;font:12px/1.5 Arial,Helvetica,sans-serif}
.copy-command__status:empty{display:none}
.copy-command__status--error{color:#b02020}

/* Inline values reuse the command copy button and clipboard handling. */
.copy-value{position:relative;display:inline-flex;align-items:center;vertical-align:middle}
.copy-value>.copy-command__button{position:static;flex:none;width:22px;height:22px;margin-left:4px;padding:3px}
.copy-value>.copy-command__status{top:50%;right:auto;left:100%;margin-left:4px;transform:translateY(-50%);white-space:nowrap}

@media (prefers-color-scheme: dark) {
	.copy-command{border-color:#505050;background:#292929;color:#d8d8d8}
	.copy-command__button{color:#aaa}
	.copy-command__button:hover{background:#3d3d3d;color:#eee}
	.copy-command__status{background:#292929;color:#90ce97}
	.copy-command__status--error{color:#ffb4b4}
}