@cbpds/web-components/dist/collection/components/cbp-code-snippet/cbp-code-snippet.css

Web components for the CBP Design System.

/* 
 * Caution: "global styles" get injected into every component and can cause file size bloat.
 * These should only include SASS variables and mixins that are not written out to CSS directly
 */
/**
* @prop --cbp-code-snippet-max-height: auto;
* @prop --cbp-code-snippet-pre-padding: 0 var(--cbp-space-1x);
* @prop --cbp-code-snippet-color: var(--cbp-color-text-darkest);
* @prop --cbp-code-snippet-color-dark: var(--cbp-color-text-lightest);
* @prop --cbp-code-snippet-color-bg: var(--cbp-color-gray-cool-10);
* @prop --cbp-code-snippet-color-bg-dark: var(--cbp-color-gray-cool-70);
*/
:root {
  --cbp-code-snippet-max-height: auto;
  --cbp-code-snippet-pre-padding: 0 var(--cbp-space-1x);
  --cbp-code-snippet-color: var(--cbp-color-text-darkest);
  --cbp-code-snippet-color-dark: var(--cbp-color-text-lightest);
  --cbp-code-snippet-color-bg: var(--cbp-color-gray-cool-10);
  --cbp-code-snippet-color-bg-dark: var(--cbp-color-gray-cool-70);
}

[data-cbp-theme=light] cbp-code-snippet[context*=dark]:not([context=light-always]),
[data-cbp-theme=dark] cbp-code-snippet:not([context=dark-inverts]):not([context=light-always]) {
  --cbp-code-snippet-color: var(--cbp-code-snippet-color-dark);
  --cbp-code-snippet-color-bg: var(--cbp-code-snippet-color-bg-dark);
}

cbp-code-snippet {
  color: var(--cbp-code-snippet-color);
  background-color: var(--cbp-code-snippet-color-bg);
  border-radius: var(--cbp-border-radius-soft);
}
cbp-code-snippet pre {
  margin: 0;
  white-space: pre-wrap;
  display: inline;
  font-family: var(--cbp-font-family-roboto);
  scrollbar-width: thin;
}
cbp-code-snippet pre code {
  padding: var(--cbp-code-snippet-pre-padding);
  font-family: var(--cbp-font-family-roboto-mono);
}
cbp-code-snippet[variant=block] {
  display: block;
  padding: var(--cbp-space-2x);
}
cbp-code-snippet[variant=block] pre {
  display: flex;
  --cbp-code-snippet-pre-padding: var(--cbp-space-2x);
  overflow: auto;
  max-height: var(--cbp-code-snippet-max-height);
}
cbp-code-snippet[variant=block] pre cbp-button {
  margin-left: auto;
}
cbp-code-snippet[variant=block] > cbp-button {
  margin: var(--cbp-space-2x);
}