:root {
  --vt-c-white: #ffffff;
  --vt-c-white-soft: #f9f9f9;
  --vt-c-white-mute: #f1f1f1;

  --vt-c-black: #1a1a1a;
  --vt-c-black-pure: #000000;
  --vt-c-black-soft: #242424;
  --vt-c-black-mute: #2f2f2f;

  --vt-c-indigo: #213547;
  --vt-c-indigo-soft: #476582;
  --vt-c-indigo-light: #aac8e4;

  --vt-c-gray: #8e8e8e;
  --vt-c-gray-light-1: #aeaeae;
  --vt-c-gray-light-2: #c7c7c7;
  --vt-c-gray-light-3: #d1d1d1;
  --vt-c-gray-light-4: #e5e5e5;
  --vt-c-gray-light-5: #f2f2f2;
  --vt-c-gray-dark-1: #636363;
  --vt-c-gray-dark-2: #484848;
  --vt-c-gray-dark-3: #3a3a3a;
  --vt-c-gray-dark-4: #282828;
  --vt-c-gray-dark-5: #202020;

  --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
  --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
  --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
  --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);

  --vt-c-text-light-1: var(--vt-c-indigo);
  --vt-c-text-light-2: rgba(60, 60, 60, 0.70);
  --vt-c-text-light-3: rgba(60, 60, 60, 0.33);
  --vt-c-text-light-4: rgba(60, 60, 60, 0.18);
  --vt-c-text-light-code: var(--vt-c-indigo-soft);

  --vt-c-text-dark-1: rgba(255, 255, 255, 0.87);
  --vt-c-text-dark-2: rgba(235, 235, 235, 0.60);
  --vt-c-text-dark-3: rgba(235, 235, 235, 0.38);
  --vt-c-text-dark-4: rgba(235, 235, 235, 0.18);
  --vt-c-text-dark-code: var(--vt-c-indigo-light);

  --vt-c-green: #42b883;
  --vt-c-green-light: #42d392;
  --vt-c-green-lighter: #35eb9a;
  --vt-c-green-dark: #33a06f;
  --vt-c-green-darker: #155f3e;

  --vt-c-blue: #3b8eed;
  --vt-c-blue-light: #549ced;
  --vt-c-blue-lighter: #50a2ff;
  --vt-c-blue-dark: #3468a3;
  --vt-c-blue-darker: #255489;

  --vt-c-yellow: #ffc517;
  --vt-c-yellow-light: #ffe417;
  --vt-c-yellow-lighter: #ffff17;
  --vt-c-yellow-dark: #e0ad15;
  --vt-c-yellow-darker: #bc9112;

  --vt-c-red: #ed3c50;
  --vt-c-red-light: #f43771;
  --vt-c-red-lighter: #fd1d7c;
  --vt-c-red-dark: #cd2d3f;
  --vt-c-red-darker: #ab2131;

  --vt-c-purple: #de41e0;
  --vt-c-purple-light: #e936eb;
  --vt-c-purple-lighter: #f616f8;
  --vt-c-purple-dark: #823c83;
  --vt-c-purple-darker: #602960;
}

/**
 * Colors Theme
 * -------------------------------------------------------------------------- */

:root {
  --vt-c-bg: var(--vt-c-white);
  --vt-c-bg-soft: var(--vt-c-white-soft);
  --vt-c-bg-mute: var(--vt-c-white-mute);

  --vt-c-divider: var(--vt-c-divider-light-1);
  --vt-c-divider-light: var(--vt-c-divider-light-2);

  --vt-c-divider-inverse: var(--vt-c-divider-dark-1);
  --vt-c-divider-inverse-light: var(--vt-c-divider-dark-2);

  --vt-c-text-1: var(--vt-c-text-light-1);
  --vt-c-text-2: var(--vt-c-text-light-2);
  --vt-c-text-3: var(--vt-c-text-light-3);
  --vt-c-text-4: var(--vt-c-text-light-4);
  --vt-c-text-code: var(--vt-c-text-light-code);

  --vt-c-text-inverse-1: var(--vt-c-text-dark-1);
  --vt-c-text-inverse-2: var(--vt-c-text-dark-2);
  --vt-c-text-inverse-3: var(--vt-c-text-dark-3);
  --vt-c-text-inverse-4: var(--vt-c-text-dark-4);

  --vt-c-brand: var(--vt-c-green);
  --vt-c-brand-light: var(--vt-c-green-light);
  --vt-c-brand-dark: var(--vt-c-green-dark);
  --vt-c-brand-highlight: var(--vt-c-brand-dark);
}

.dark {
  --vt-c-bg: var(--vt-c-black);
  --vt-c-bg-soft: var(--vt-c-black-soft);
  --vt-c-bg-mute: var(--vt-c-black-mute);

  --vt-c-divider: var(--vt-c-divider-dark-1);
  --vt-c-divider-light: var(--vt-c-divider-dark-2);

  --vt-c-divider-inverse: var(--vt-c-divider-light-1);
  --vt-c-divider-inverse-light: var(--vt-c-divider-light-2);

  --vt-c-text-1: var(--vt-c-text-dark-1);
  --vt-c-text-2: var(--vt-c-text-dark-2);
  --vt-c-text-3: var(--vt-c-text-dark-3);
  --vt-c-text-4: var(--vt-c-text-dark-4);
  --vt-c-text-code: var(--vt-c-text-dark-code);

  --vt-c-text-inverse-1: var(--vt-c-text-light-1);
  --vt-c-text-inverse-2: var(--vt-c-text-light-2);
  --vt-c-text-inverse-3: var(--vt-c-text-light-3);
  --vt-c-text-inverse-4: var(--vt-c-text-light-4);

  --vt-c-brand-highlight: var(--vt-c-brand-light);
}

/**
 * Typography
 * -------------------------------------------------------------------------- */

:root {
  --vt-font-family-base: Inter, -apple-system,
    BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
    'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  --vt-font-family-mono: Menlo, Monaco, Consolas, 'Courier New', monospace;
}

/**
 * Shadows
 * -------------------------------------------------------------------------- */

:root {
  --vt-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
  --vt-shadow-2: 0 3px 12px rgba(0, 0, 0, 0.07), 0 1px 4px rgba(0, 0, 0, 0.07);
  --vt-shadow-3: 0 12px 32px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.08);
  --vt-shadow-4: 0 14px 44px rgba(0, 0, 0, 0.12), 0 3px 9px rgba(0, 0, 0, 0.12);
  --vt-shadow-5: 0 18px 56px rgba(0, 0, 0, 0.16), 0 4px 12px rgba(0, 0, 0, 0.16);
}

/**
 * Magic Numbers
 * -------------------------------------------------------------------------- */

:root {
  --vt-nav-height: 55px;
}



.page {
  --vt-doc-code-font-size: 14px;
  --vt-doc-code-line-height: 1.5;
}

/* inline code */
.page :not(pre) > code {
  background-color: var(--vt-c-bg-mute);
  padding: 0.15em 0.5em;
  border-radius: 4px;
  color: var(--vt-c-text-code);
  transition: color 0.5s, background-color 0.5s;
}

.page a > code {
  color: var(--vt-c-brand-dark);
}

.page :not(pre, h1, h2, h3, h4, h5, h6) > code {
  font-size: var(--vt-doc-code-font-size);
}

@media (min-width: 768px) {
  .page :not(pre) > code {
    white-space: nowrap;
  }
}

.page div[class*='language-'] {
  position: relative;
  margin: 28px -24px;
  background-color: #292d3e;
  overflow-x: auto;
  transition: background-color 0.5s;
}

.dark .page div[class*='language-'] {
  background-color: var(--vt-c-bg-soft);
}

@media (min-width: 640px) {
  .page div[class*='language-'] {
    margin: 28px 0;
    border-radius: 8px;
  }
}

@media (max-width: 639px) {
  .page li div[class*='language-'] {
    border-radius: 8px 0 0 8px;
  }
}

.page div[class*='language-'] + div[class*='language-'],
.page div[class$='-api'] + div[class*='language-'],
.page div[class*='language-'] + div[class$='-api'] > div[class*='language-'] {
  margin-top: -16px;
}

.page [class*='language-'] pre,
.page [class*='language-'] code {
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}

.page [class*='language-'] pre {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 14px 24px;
  background: transparent;
  overflow-x: auto;
  height: 100%;
  box-sizing: border-box;
}

.page [class*='language-'] code {
  display: inline-block;
  padding: 0;
  line-height: var(--vt-doc-code-line-height);
  font-size: var(--vt-doc-code-font-size);
  color: #a6accd;
  transition: color 0.5s;
}

.page .highlight-lines {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  padding: 13px 0 11px;
  width: 100%;
  font-family: var(--vt-font-family-mono);
  line-height: var(--vt-doc-code-line-height);
  font-size: var(--vt-doc-code-font-size);
  user-select: none;
  overflow: hidden;
  z-index: 2;
}

.page .highlight-lines .highlighted {
  background-color: rgba(0, 0, 0, 0.3);
  transition: background-color 0.5s;
}

.dark .page .highlight-lines .highlighted {
  background-color: rgba(255, 255, 255, 0.05);
}

.page div[class*='language-'].line-numbers-mode {
  padding-left: 32px;
}

.page .line-numbers-wrapper {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
  border-right: 1px solid var(--vt-c-divider-light);
  padding: 13px 0 11px;
  width: 32px;
  text-align: center;
  font-family: var(--vt-font-family-mono);
  line-height: var(--vt-doc-code-line-height);
  font-size: var(--vt-doc-code-font-size);
  color: var(--vt-c-text-3);
  transition: border-color 0.5s, color 0.5s;
}

.page [class*='language-']:before {
  position: absolute;
  top: 4px;
  right: 10px;
  z-index: 2;
  font-size: 12px;
  font-weight: 500;
  color: var(--vt-c-text-dark-3);
  transition: color 0.5s;
}

@media (max-width: 480px) {
  .page [class*='language-']:before {
    top: 1px;
    right: 5px;
    font-size: 11px;
  }
  .page [class*='language-'] pre {
    padding: 18px 20px 12px;
  }
  .page .highlight-lines {
    padding-top: 17px;
  }
}

.page [class~='language-vue']:before {
  content: 'vue';
}

.page [class~='language-html']:before {
  content: 'html';
}

.page [class~='language-vue-html']:before {
  content: 'template';
}

.page [class~='language-css']:before {
  content: 'css';
}

.page [class~='language-js']:before {
  content: 'js';
}

.page [class~='language-jsx']:before {
  content: 'jsx';
}

.page [class~='language-ts']:before {
  content: 'ts';
}

.page [class~='language-tsx']:before {
  content: 'tsx';
}

.page [class~='language-json']:before {
  content: 'json';
}

.page [class~='language-sh']:before,
.page [class~='language-bash']:before {
  content: 'sh';
}