@layer base {
  :root {
    --shiki-color-text: theme('colors.white');
    --shiki-token-constant: theme('colors.brand.300');
    --shiki-token-string: theme('colors.brand.300');
    --shiki-token-comment: theme('colors.zinc.500');
    --shiki-token-keyword: theme('colors.sky.300');
    --shiki-token-parameter: theme('colors.pink.300');
    --shiki-token-function: theme('colors.violet.300');
    --shiki-token-string-expression: theme('colors.brand.300');
    --shiki-token-punctuation: theme('colors.zinc.200');
  }

  [inert] ::-webkit-scrollbar {
    display: none;
  }

  .prose [class*='language-'] code .highlighted {
    background-color: var(--vp-code-line-highlight-color);
    transition: background-color 0.5s;
    margin: 0 -24px;
    padding: 0 24px;
    width: calc(100% + 48px);
    display: inline-block;
  }

  .prose [class*='language-'] code .highlighted.error {
    background-color: var(--vp-code-line-error-color);
  }

  .prose [class*='language-'] code .highlighted.warning {
    background-color: var(--vp-code-line-warning-color);
  }

  .prose [class*='language-'] code .diff {
    transition: background-color 0.5s;
    margin: 0 -24px;
    padding: 0 24px;
    width: calc(100% + 48px);
    display: inline-block;
  }

  .prose [class*='language-'] code .diff:before {
    position: absolute;
    left: 10px;
  }

  .prose [class*='language-'] .has-focused .line:not(.focused) {
    filter: blur(0.095rem);
    opacity: 0.4;
    transition:
      filter 0.35s,
      opacity 0.35s;
  }

  .prose [class*='language-'] .has-focused .line:not(.focused) {
    opacity: 0.7;
    transition:
      filter 0.35s,
      opacity 0.35s;
  }

  .prose [class*='language-']:hover .has-focused .line:not(.focused) {
    filter: blur(0);
    opacity: 1;
  }

  .prose [class*='language-'] code .diff.remove {
    background-color: var(--vp-code-line-diff-remove-color);
    opacity: 0.7;
  }

  .prose [class*='language-'] code .diff.remove:before {
    content: '-';
    color: var(--vp-code-line-diff-remove-symbol-color);
  }

  .prose [class*='language-'] code .diff.add {
    background-color: var(--vp-code-line-diff-add-color);
  }

  .prose [class*='language-'] code .diff.add:before {
    content: '+';
    color: var(--vp-code-line-diff-add-symbol-color);
  }
}

@tailwind base;
@tailwind components;
@tailwind utilities;