.q-snippet {
  --q-snippet-ink: #171717;
  --q-snippet-bg: var(--ss-surface-light);
  --q-snippet-border: rgba(0, 0, 0, 0.08);
  box-sizing: border-box;
  position: relative;
  width: fit-content;
  max-width: 100%;
  border: 1px solid var(--q-snippet-border);
  border-radius: 6px;
  padding: 10px 48px 10px 12px;
  background: var(--q-snippet-bg);
  color: var(--q-snippet-ink);
}
.q-snippet__line {
  margin: 0;
  text-align: left;
  font:
    13px/20px QuoterGeistMono,
    monospace;
  white-space: pre;
  overflow: auto;
  scrollbar-width: none;
}
.q-snippet__line::-webkit-scrollbar {
  display: none;
}
.q-snippet[data-prompt='true'] .q-snippet__line::before {
  content: '$ ';
  user-select: none;
}
.q-snippet[data-empty='true'] .q-snippet__line {
  color: #8f8f8f;
}
.q-snippet .q-button.q-snippet__copy[data-variant] {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  box-shadow: none;
}
.q-snippet .q-button.q-snippet__copy[data-variant]:hover {
  background: transparent;
  box-shadow: 0 0 0 1px var(--q-gray-400);
  opacity: 0.8;
}
.q-snippet .q-button.q-snippet__copy[data-variant]:focus-visible {
  box-shadow:
    0 0 0 2px var(--q-snippet-bg),
    0 0 0 4px var(--ss-primary);
}
.q-snippet[data-inverted='true'] {
  --q-snippet-bg: #171717;
  --q-snippet-ink: #f2f2f2;
}
.q-snippet[data-type='success'] {
  --q-snippet-bg: #f0f7ff;
  --q-snippet-border: #cce6ff;
  --q-snippet-ink: #0068d6;
}
.q-snippet[data-type='error'] {
  --q-snippet-bg: #fff0f0;
  --q-snippet-border: #fdd8d8;
  --q-snippet-ink: #cb2a2f;
}
.q-snippet[data-type='warning'] {
  --q-snippet-bg: #fff6e6;
  --q-snippet-border: #ffdd8f;
  --q-snippet-ink: #a35200;
}
[data-theme='dark'] .q-snippet {
  --q-snippet-ink: #ededed;
  --q-snippet-bg: #0a0a0a;
  --q-snippet-border: rgba(255, 255, 255, 0.14);
}
[data-theme='dark'] .q-snippet[data-inverted='true'] {
  --q-snippet-bg: #ededed;
  --q-snippet-ink: #1a1a1a;
}
[data-theme='dark'] .q-snippet[data-type='success'] {
  --q-snippet-bg: #0f1c2e;
  --q-snippet-border: #0d3868;
  --q-snippet-ink: #52a8ff;
}
[data-theme='dark'] .q-snippet[data-type='error'] {
  --q-snippet-bg: #2a1314;
  --q-snippet-border: #671e21;
  --q-snippet-ink: #ff6166;
}
[data-theme='dark'] .q-snippet[data-type='warning'] {
  --q-snippet-bg: #291800;
  --q-snippet-border: #573300;
  --q-snippet-ink: #f2a20d;
}