/**
 * VS theme by Andrew Lock (https://andrewlock.net)
 * Inspired by Visual Studio syntax coloring
 */
code[class*=language-],
pre[class*=language-] {
  color: #393A34;
  font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
  direction: ltr;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  font-size: 0.9em;
  line-height: 1.2em;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}

pre > code[class*=language-] {
  font-size: 1em;
}

pre[class*=language-]::-moz-selection, pre[class*=language-] ::-moz-selection,
code[class*=language-]::-moz-selection, code[class*=language-] ::-moz-selection {
  background: #C1DEF1;
}

pre[class*=language-]::selection, pre[class*=language-] ::selection,
code[class*=language-]::selection, code[class*=language-] ::selection {
  background: #C1DEF1;
}

/* Code blocks */
pre[class*=language-] {
  padding: 1em;
  margin: 0.5em 0;
  overflow: auto;
  border: 1px solid #dddddd;
  background-color: white;
}

/* Inline code */
:not(pre) > code[class*=language-] {
  padding: 0.2em;
  padding-top: 1px;
  padding-bottom: 1px;
  background: #f8f8f8;
  border: 1px solid #dddddd;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: #008000;
  font-style: italic;
}

.token.namespace {
  opacity: 0.7;
}

.token.string {
  color: #A31515;
}

.token.punctuation,
.token.operator {
  color: #393A34; /* no highlight */
}

.token.url,
.token.symbol,
.token.number,
.token.boolean,
.token.variable,
.token.constant,
.token.inserted {
  color: #36acaa;
}

.token.atrule,
.token.keyword,
.token.attr-value,
.language-autohotkey .token.selector,
.language-json .token.boolean,
.language-json .token.number,
code[class*=language-css] {
  color: #0000ff;
}

.token.function {
  color: #393A34;
}

.token.deleted,
.language-autohotkey .token.tag {
  color: #9a050f;
}

.token.selector,
.language-autohotkey .token.keyword {
  color: #00009f;
}

.token.important {
  color: #e90;
}

.token.important,
.token.bold {
  font-weight: bold;
}

.token.italic {
  font-style: italic;
}

.token.class-name,
.language-json .token.property {
  color: #2B91AF;
}

.token.tag,
.token.selector {
  color: #800000;
}

.token.attr-name,
.token.property,
.token.regex,
.token.entity {
  color: #ff0000;
}

.token.directive.tag .tag {
  background: #ffff00;
  color: #393A34;
}

/* overrides color-values for the Line Numbers plugin
 * http://prismjs.com/plugins/line-numbers/
 */
.line-numbers.line-numbers .line-numbers-rows {
  border-right-color: #a5a5a5;
}

.line-numbers .line-numbers-rows > span:before {
  color: #2B91AF;
}

/* overrides color-values for the Line Highlight plugin
* http://prismjs.com/plugins/line-highlight/
*/
.line-highlight.line-highlight {
  background: rgba(193, 222, 241, 0.2);
  background: -webkit-linear-gradient(left, rgba(193, 222, 241, 0.2) 70%, rgba(221, 222, 241, 0));
  background: linear-gradient(to right, rgba(193, 222, 241, 0.2) 70%, rgba(221, 222, 241, 0));
}

:host-context([data-theme=dark]), :host-context([data-theme=g90]) {
  /*********************************************************
  * Tokens
  */
  /*********************************************************
  * Language Specific
  */
  /*********************************************************
  * Line highlighting
  */
}
:host-context([data-theme=dark]) pre[class*=language-],
:host-context([data-theme=dark]) code[class*=language-], :host-context([data-theme=g90]) pre[class*=language-],
:host-context([data-theme=g90]) code[class*=language-] {
  color: #d4d4d4;
  font-size: 13px;
  text-shadow: none;
  font-family: Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;
  direction: ltr;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  line-height: 1.5;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}
:host-context([data-theme=dark]) pre[class*=language-]::selection,
:host-context([data-theme=dark]) code[class*=language-]::selection,
:host-context([data-theme=dark]) pre[class*=language-] *::selection,
:host-context([data-theme=dark]) code[class*=language-] *::selection, :host-context([data-theme=g90]) pre[class*=language-]::selection,
:host-context([data-theme=g90]) code[class*=language-]::selection,
:host-context([data-theme=g90]) pre[class*=language-] *::selection,
:host-context([data-theme=g90]) code[class*=language-] *::selection {
  text-shadow: none;
  background: #264F78;
}
@media print {
  :host-context([data-theme=dark]) pre[class*=language-],
  :host-context([data-theme=dark]) code[class*=language-], :host-context([data-theme=g90]) pre[class*=language-],
  :host-context([data-theme=g90]) code[class*=language-] {
    text-shadow: none;
  }
}
:host-context([data-theme=dark]) pre[class*=language-], :host-context([data-theme=g90]) pre[class*=language-] {
  padding: 1em;
  margin: 0.5em 0;
  overflow: auto;
  background: #1e1e1e;
}
:host-context([data-theme=dark]) :not(pre) > code[class*=language-], :host-context([data-theme=g90]) :not(pre) > code[class*=language-] {
  padding: 0.1em 0.3em;
  border-radius: 0.3em;
  color: #db4c69;
  background: #1e1e1e;
}
:host-context([data-theme=dark]) .namespace, :host-context([data-theme=g90]) .namespace {
  opacity: 0.7;
}
:host-context([data-theme=dark]) .token.doctype .token.doctype-tag, :host-context([data-theme=g90]) .token.doctype .token.doctype-tag {
  color: #569CD6;
}
:host-context([data-theme=dark]) .token.doctype .token.name, :host-context([data-theme=g90]) .token.doctype .token.name {
  color: #9cdcfe;
}
:host-context([data-theme=dark]) .token.comment,
:host-context([data-theme=dark]) .token.prolog, :host-context([data-theme=g90]) .token.comment,
:host-context([data-theme=g90]) .token.prolog {
  color: #6a9955;
}
:host-context([data-theme=dark]) .token.punctuation,
:host-context([data-theme=dark]) .language-html .language-css .token.punctuation,
:host-context([data-theme=dark]) .language-html .language-javascript .token.punctuation, :host-context([data-theme=g90]) .token.punctuation,
:host-context([data-theme=g90]) .language-html .language-css .token.punctuation,
:host-context([data-theme=g90]) .language-html .language-javascript .token.punctuation {
  color: #d4d4d4;
}
:host-context([data-theme=dark]) .token.property,
:host-context([data-theme=dark]) .token.tag,
:host-context([data-theme=dark]) .token.boolean,
:host-context([data-theme=dark]) .token.number,
:host-context([data-theme=dark]) .token.constant,
:host-context([data-theme=dark]) .token.symbol,
:host-context([data-theme=dark]) .token.inserted,
:host-context([data-theme=dark]) .token.unit, :host-context([data-theme=g90]) .token.property,
:host-context([data-theme=g90]) .token.tag,
:host-context([data-theme=g90]) .token.boolean,
:host-context([data-theme=g90]) .token.number,
:host-context([data-theme=g90]) .token.constant,
:host-context([data-theme=g90]) .token.symbol,
:host-context([data-theme=g90]) .token.inserted,
:host-context([data-theme=g90]) .token.unit {
  color: #b5cea8;
}
:host-context([data-theme=dark]) .token.selector,
:host-context([data-theme=dark]) .token.attr-name,
:host-context([data-theme=dark]) .token.string,
:host-context([data-theme=dark]) .token.char,
:host-context([data-theme=dark]) .token.builtin,
:host-context([data-theme=dark]) .token.deleted, :host-context([data-theme=g90]) .token.selector,
:host-context([data-theme=g90]) .token.attr-name,
:host-context([data-theme=g90]) .token.string,
:host-context([data-theme=g90]) .token.char,
:host-context([data-theme=g90]) .token.builtin,
:host-context([data-theme=g90]) .token.deleted {
  color: #ce9178;
}
:host-context([data-theme=dark]) .language-css .token.string.url, :host-context([data-theme=g90]) .language-css .token.string.url {
  text-decoration: underline;
}
:host-context([data-theme=dark]) .token.operator,
:host-context([data-theme=dark]) .token.entity, :host-context([data-theme=g90]) .token.operator,
:host-context([data-theme=g90]) .token.entity {
  color: #d4d4d4;
}
:host-context([data-theme=dark]) .token.operator.arrow, :host-context([data-theme=g90]) .token.operator.arrow {
  color: #569CD6;
}
:host-context([data-theme=dark]) .token.atrule, :host-context([data-theme=g90]) .token.atrule {
  color: #ce9178;
}
:host-context([data-theme=dark]) .token.atrule .token.rule, :host-context([data-theme=g90]) .token.atrule .token.rule {
  color: #c586c0;
}
:host-context([data-theme=dark]) .token.atrule .token.url, :host-context([data-theme=g90]) .token.atrule .token.url {
  color: #9cdcfe;
}
:host-context([data-theme=dark]) .token.atrule .token.url .token.function, :host-context([data-theme=g90]) .token.atrule .token.url .token.function {
  color: #dcdcaa;
}
:host-context([data-theme=dark]) .token.atrule .token.url .token.punctuation, :host-context([data-theme=g90]) .token.atrule .token.url .token.punctuation {
  color: #d4d4d4;
}
:host-context([data-theme=dark]) .token.keyword, :host-context([data-theme=g90]) .token.keyword {
  color: #569CD6;
}
:host-context([data-theme=dark]) .token.keyword.module,
:host-context([data-theme=dark]) .token.keyword.control-flow, :host-context([data-theme=g90]) .token.keyword.module,
:host-context([data-theme=g90]) .token.keyword.control-flow {
  color: #c586c0;
}
:host-context([data-theme=dark]) .token.function,
:host-context([data-theme=dark]) .token.function .token.maybe-class-name, :host-context([data-theme=g90]) .token.function,
:host-context([data-theme=g90]) .token.function .token.maybe-class-name {
  color: #dcdcaa;
}
:host-context([data-theme=dark]) .token.regex, :host-context([data-theme=g90]) .token.regex {
  color: #d16969;
}
:host-context([data-theme=dark]) .token.important, :host-context([data-theme=g90]) .token.important {
  color: #569cd6;
}
:host-context([data-theme=dark]) .token.italic, :host-context([data-theme=g90]) .token.italic {
  font-style: italic;
}
:host-context([data-theme=dark]) .token.constant, :host-context([data-theme=g90]) .token.constant {
  color: #9cdcfe;
}
:host-context([data-theme=dark]) .token.class-name,
:host-context([data-theme=dark]) .token.maybe-class-name, :host-context([data-theme=g90]) .token.class-name,
:host-context([data-theme=g90]) .token.maybe-class-name {
  color: #4ec9b0;
}
:host-context([data-theme=dark]) .token.console, :host-context([data-theme=g90]) .token.console {
  color: #9cdcfe;
}
:host-context([data-theme=dark]) .token.parameter, :host-context([data-theme=g90]) .token.parameter {
  color: #9cdcfe;
}
:host-context([data-theme=dark]) .token.interpolation, :host-context([data-theme=g90]) .token.interpolation {
  color: #9cdcfe;
}
:host-context([data-theme=dark]) .token.punctuation.interpolation-punctuation, :host-context([data-theme=g90]) .token.punctuation.interpolation-punctuation {
  color: #569cd6;
}
:host-context([data-theme=dark]) .token.boolean, :host-context([data-theme=g90]) .token.boolean {
  color: #569cd6;
}
:host-context([data-theme=dark]) .token.property,
:host-context([data-theme=dark]) .token.variable,
:host-context([data-theme=dark]) .token.imports .token.maybe-class-name,
:host-context([data-theme=dark]) .token.exports .token.maybe-class-name, :host-context([data-theme=g90]) .token.property,
:host-context([data-theme=g90]) .token.variable,
:host-context([data-theme=g90]) .token.imports .token.maybe-class-name,
:host-context([data-theme=g90]) .token.exports .token.maybe-class-name {
  color: #9cdcfe;
}
:host-context([data-theme=dark]) .token.selector, :host-context([data-theme=g90]) .token.selector {
  color: #d7ba7d;
}
:host-context([data-theme=dark]) .token.escape, :host-context([data-theme=g90]) .token.escape {
  color: #d7ba7d;
}
:host-context([data-theme=dark]) .token.tag, :host-context([data-theme=g90]) .token.tag {
  color: #569cd6;
}
:host-context([data-theme=dark]) .token.tag .token.punctuation, :host-context([data-theme=g90]) .token.tag .token.punctuation {
  color: #808080;
}
:host-context([data-theme=dark]) .token.cdata, :host-context([data-theme=g90]) .token.cdata {
  color: #808080;
}
:host-context([data-theme=dark]) .token.attr-name, :host-context([data-theme=g90]) .token.attr-name {
  color: #9cdcfe;
}
:host-context([data-theme=dark]) .token.attr-value,
:host-context([data-theme=dark]) .token.attr-value .token.punctuation, :host-context([data-theme=g90]) .token.attr-value,
:host-context([data-theme=g90]) .token.attr-value .token.punctuation {
  color: #ce9178;
}
:host-context([data-theme=dark]) .token.attr-value .token.punctuation.attr-equals, :host-context([data-theme=g90]) .token.attr-value .token.punctuation.attr-equals {
  color: #d4d4d4;
}
:host-context([data-theme=dark]) .token.entity, :host-context([data-theme=g90]) .token.entity {
  color: #569cd6;
}
:host-context([data-theme=dark]) .token.namespace, :host-context([data-theme=g90]) .token.namespace {
  color: #4ec9b0;
}
:host-context([data-theme=dark]) pre[class*=language-javascript],
:host-context([data-theme=dark]) code[class*=language-javascript],
:host-context([data-theme=dark]) pre[class*=language-jsx],
:host-context([data-theme=dark]) code[class*=language-jsx],
:host-context([data-theme=dark]) pre[class*=language-typescript],
:host-context([data-theme=dark]) code[class*=language-typescript],
:host-context([data-theme=dark]) pre[class*=language-tsx],
:host-context([data-theme=dark]) code[class*=language-tsx], :host-context([data-theme=g90]) pre[class*=language-javascript],
:host-context([data-theme=g90]) code[class*=language-javascript],
:host-context([data-theme=g90]) pre[class*=language-jsx],
:host-context([data-theme=g90]) code[class*=language-jsx],
:host-context([data-theme=g90]) pre[class*=language-typescript],
:host-context([data-theme=g90]) code[class*=language-typescript],
:host-context([data-theme=g90]) pre[class*=language-tsx],
:host-context([data-theme=g90]) code[class*=language-tsx] {
  color: #9cdcfe;
}
:host-context([data-theme=dark]) pre[class*=language-css],
:host-context([data-theme=dark]) code[class*=language-css], :host-context([data-theme=g90]) pre[class*=language-css],
:host-context([data-theme=g90]) code[class*=language-css] {
  color: #ce9178;
}
:host-context([data-theme=dark]) pre[class*=language-html],
:host-context([data-theme=dark]) code[class*=language-html], :host-context([data-theme=g90]) pre[class*=language-html],
:host-context([data-theme=g90]) code[class*=language-html] {
  color: #d4d4d4;
}
:host-context([data-theme=dark]) .language-regex .token.anchor, :host-context([data-theme=g90]) .language-regex .token.anchor {
  color: #dcdcaa;
}
:host-context([data-theme=dark]) .language-html .token.punctuation, :host-context([data-theme=g90]) .language-html .token.punctuation {
  color: #808080;
}
:host-context([data-theme=dark]) pre[class*=language-] > code[class*=language-], :host-context([data-theme=g90]) pre[class*=language-] > code[class*=language-] {
  position: relative;
  z-index: 1;
}
:host-context([data-theme=dark]) .line-highlight.line-highlight, :host-context([data-theme=g90]) .line-highlight.line-highlight {
  background: #f7ebc6;
  box-shadow: inset 5px 0 0 #f7d87c;
  z-index: 0;
}

pre[class*=language-].line-numbers {
  position: relative;
  padding-left: 3.8em;
  counter-reset: linenumber;
}

pre[class*=language-].line-numbers > code {
  position: relative;
  white-space: inherit;
}

.line-numbers .line-numbers-rows {
  position: absolute;
  pointer-events: none;
  top: 0;
  font-size: 100%;
  left: -3.8em;
  width: 3em;
  letter-spacing: -1px;
  border-right: 1px solid #999;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.line-numbers-rows > span {
  display: block;
  counter-increment: linenumber;
}

.line-numbers-rows > span:before {
  content: counter(linenumber);
  color: #999;
  display: block;
  padding-right: 0.8em;
  text-align: right;
}

/*
 * Application colors
 */
/*
 * Theme colors
 */
/*
 * Alert colors
 */
/*
 * Tokens for developers
 */
/*
 * Default page background;
 * UI Shell base color
 */
/*
 * Container color on $background;
 * Secondary page background
 */
/*
Container color on $layer-01
 */
/*
Container color on $layer-02
 */
/*
Primary icons
 */
/*

Inverse icon color
 */
/**
Primary text;
Body copy;
Headers;
Hover text color for --text-secondary
 */
/**
 * Secondary text;
 * Input labels
 */
/**
 * Placeholder text
 */
/**
Text on interactive colors;
Text on button colors
 */
/**
Tertiary text;
Help text
 */
/**
Error message text
 */
/**
Inverse text color
 */
/*
Default input fields;
Fields on $backgrounds
 */
/*
Secondary input fields;
Fields on $layer-01
 */
/*
Secondary input fields;
Fields on $layer-02
 */
/*
Hover color for $field-01
 */
/*
Hover color for $field-02
 */
/*
Hover color for $field-03
 */
/*
Primary icons
 */
/*

Inverse icon color
 */
/*
 * Skeleton color for text and UI elements
 */
/*
 * Skeleton color for containers
 */
/*
Selected UI elements
 */
/**
* Disabled fields;
* Disabled backgrounds;
* Disabled border
*/
/**
* Disabled elements on $disabled-01;
* Disabled label;
* Disabled text on $disabled-01;
* Disabled icons;
* Disabled border
*/
/**
* Disabled text on $disabled-02;
* Disabled icons on $disabled-02
*/
/**
* Primary links;
* Ghost button
*/
/**
Secondary link color for lower contrast backgrounds
 */
/**
* Secondary link color for lower contrast backgrounds
*/
/*
Subtle borders paired with $background
 */
/*
Subtle borders paired with $background
 */
/*
Subtle borders paired with $layer-01
 */
/*
Subtle borders paired with $layer-02
 */
/*
Subtle borders paired with $layer-03
 */
/*
Medium contrast border;
Border-bottom paired with $field-01;
3:1 AA non-text contrast
 */
/*
Medium contrast border;
Border-bottom paired with $field-02;
3:1 AA non-text contrast
 */
/*
Medium contrast border;
Border-bottom paired with $field-03;
3:1 AA non-text contrast
 */
/*
 * There are two body styles for productive and expressive moments. Productive styles have a suffix of -01 and expressive styles have a suffix of -02
 */
/*
 * Application colors
 */
/*
 * Theme colors
 */
/*
 * Alert colors
 */
/*
 * Tokens for developers
 */
/*
 * Default page background;
 * UI Shell base color
 */
/*
 * Container color on $background;
 * Secondary page background
 */
/*
Container color on $layer-01
 */
/*
Container color on $layer-02
 */
/*
Primary icons
 */
/*

Inverse icon color
 */
/**
Primary text;
Body copy;
Headers;
Hover text color for --text-secondary
 */
/**
 * Secondary text;
 * Input labels
 */
/**
 * Placeholder text
 */
/**
Text on interactive colors;
Text on button colors
 */
/**
Tertiary text;
Help text
 */
/**
Error message text
 */
/**
Inverse text color
 */
/*
Default input fields;
Fields on $backgrounds
 */
/*
Secondary input fields;
Fields on $layer-01
 */
/*
Secondary input fields;
Fields on $layer-02
 */
/*
Hover color for $field-01
 */
/*
Hover color for $field-02
 */
/*
Hover color for $field-03
 */
/*
Primary icons
 */
/*

Inverse icon color
 */
/*
 * Skeleton color for text and UI elements
 */
/*
 * Skeleton color for containers
 */
/*
Selected UI elements
 */
/**
* Disabled fields;
* Disabled backgrounds;
* Disabled border
*/
/**
* Disabled elements on $disabled-01;
* Disabled label;
* Disabled text on $disabled-01;
* Disabled icons;
* Disabled border
*/
/**
* Disabled text on $disabled-02;
* Disabled icons on $disabled-02
*/
/**
* Primary links;
* Ghost button
*/
/**
Secondary link color for lower contrast backgrounds
 */
/**
* Secondary link color for lower contrast backgrounds
*/
/*
Subtle borders paired with $background
 */
/*
Subtle borders paired with $background
 */
/*
Subtle borders paired with $layer-01
 */
/*
Subtle borders paired with $layer-02
 */
/*
Subtle borders paired with $layer-03
 */
/*
Medium contrast border;
Border-bottom paired with $field-01;
3:1 AA non-text contrast
 */
/*
Medium contrast border;
Border-bottom paired with $field-02;
3:1 AA non-text contrast
 */
/*
Medium contrast border;
Border-bottom paired with $field-03;
3:1 AA non-text contrast
 */
/*
 * There are two body styles for productive and expressive moments. Productive styles have a suffix of -01 and expressive styles have a suffix of -02
 */
* {
  box-sizing: border-box;
}

:host {
  font-family: var(--font-family-base, "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif);
}

::selection {
  color: var(--color-white, white);
  background: var(--color-primary, #0f62fe);
}

/* width */
::-webkit-scrollbar {
  width: var(--scrollbar-width);
  height: var(--scrollbar-width);
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #888;
}
::-webkit-scrollbar-thumb :hover {
  background: #555;
}

:host([hidden]) {
  display: none;
}

:host, :host([layer=background]) {
  --field: var(--field-01, #f4f4f4);
  --layer: var(--layer-01, #f4f4f4);
  --layer-hover: var(--layer-hover-01, #e8e8e8);
  --layer-accent: var(--layer-accent-01, #e0e0e0);
  --layer-selected: var(--layer-selected-01, #e0e0e0);
  --layer-selected-hover: var(--layer-selected-hover-01, #d1d1d1);
  --field-hover: var(--field-hover-01, #e8e8e8);
  --border-strong: var(--border-strong-01, #8d8d8d);
  --border-subtle: var(--border-subtle-00, #e0e0e0);
}

:host([layer="01"]) {
  --field: var(--field-02, white);
  --layer: var(--layer-02, white);
  --layer-hover: var(--layer-hover-02, #e8e8e8);
  --layer-accent: var(--layer-accent-02, #e0e0e0);
  --layer-selected: var(--layer-selected-02, #e0e0e0);
  --layer-selected-hover: var(--layer-selected-hover-02, #d1d1d1);
  --field-hover: var(--field-hover-02, #e8e8e8);
  --border-strong: var(--border-strong-02, #8d8d8d);
  --border-subtle: var(--border-subtle-01, #e0e0e0);
}

:host([layer="02"]) {
  --field: var(--field-03, #f4f4f4);
  --layer: var(--layer-03, #f4f4f4);
  --layer-hover: var(--layer-hover-03, #e8e8e8);
  --layer-accent: var(--layer-accent-03, #e0e0e0);
  --layer-selected: var(--layer-selected-03, #e0e0e0);
  --layer-selected-hover: var(--layer-selected-hover-03, #d1d1d1);
  --field-hover: var(--field-hover-03, #e8e8e8);
  --border-strong: var(--border-strong-03, #8d8d8d);
  --border-subtle: var(--border-subtle-02, #e0e0e0);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.center-content {
  display: flex;
  align-items: center;
  justify-content: center;
}

.skeleton {
  position: relative;
  padding: 0;
  border: none;
  background: var(--skeleton-background, #e8e8e8);
  box-shadow: none;
  pointer-events: none;
}
.skeleton::before {
  position: absolute;
  animation: 3000ms ease-in-out skeleton infinite;
  background: var(--skeleton-element, #c6c6c6);
  block-size: 100%;
  content: "";
  inline-size: 100%;
  will-change: transform-origin, transform, opacity;
}

@keyframes skeleton {
  0% {
    opacity: 0.3;
    transform: scaleX(0);
    transform-origin: left;
  }
  20% {
    opacity: 1;
    transform: scaleX(1);
    transform-origin: left;
  }
  28% {
    transform: scaleX(1);
    transform-origin: right;
  }
  51% {
    transform: scaleX(0);
    transform-origin: right;
  }
  58% {
    transform: scaleX(0);
    transform-origin: right;
  }
  82% {
    transform: scaleX(1);
    transform-origin: right;
  }
  83% {
    transform: scaleX(1);
    transform-origin: left;
  }
  96% {
    transform: scaleX(0);
    transform-origin: left;
  }
  100% {
    opacity: 0.3;
    transform: scaleX(0);
    transform-origin: left;
  }
}
:host {
  display: block;
  height: 100%;
  /**
    * @prop --goat-code-highlighter-background: Code Highlighter background color
    */
  --goat-code-highlighter-background: var(--code-bg-primary);
}

.code-loader {
  height: 10rem;
  background-color: var(--goat-code-highlighter-background);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-02);
}

.code-highlighter {
  position: relative;
  height: 100%;
  background-color: var(--goat-code-highlighter-background);
  color: var(--text-primary);
}
.code-highlighter .scroll-wrapper {
  height: 100%;
  overflow: auto;
}
.code-highlighter .scroll-wrapper .line-numbers-wrapper {
  padding: var(--spacing-05);
  padding-inline-end: 3rem;
  position: relative;
  font-family: var(--code-02-font-family, IBM Plex Mono, Courier New, monospace);
  font-size: var(--code-02-font-size, 0.875rem);
  font-weight: var(--code-02-font-weight, 400);
  line-height: var(--code-02-line-height, 1.25rem);
  letter-spacing: var(--code-02-letter-spacing, 0.32px);
}
.code-highlighter .scroll-wrapper .line-numbers-wrapper.line-numbers {
  margin-left: 3.8rem;
}
.code-highlighter .scroll-wrapper .line-numbers-wrapper .highlighter {
  margin: 0;
  position: relative;
}
.code-highlighter .copy-btn {
  position: absolute;
  background-color: var(--goat-code-highlighter-background);
  top: 0.675rem;
  right: var(--spacing-03);
}

:host([inline]) {
  display: inline;
  height: initial;
}
:host([inline]) .code-highlighter {
  display: inline;
  cursor: pointer;
}
:host([inline]) .code-highlighter .scroll-wrapper {
  display: inline;
}
:host([inline]) .code-highlighter .scroll-wrapper .line-numbers-wrapper {
  padding: 0 var(--spacing-03);
  font-size: inherit;
  display: inline;
  word-wrap: break-word;
}
:host([inline]) .code-highlighter .scroll-wrapper .line-numbers-wrapper .highlighter {
  display: inline;
}
:host([inline]) .code-loader {
  height: initial;
  display: inline;
}