[data-color-scheme="dark"] .shiki,
[data-color-scheme="dark"] .shiki span {
  /* biome-ignore lint/complexity/noImportantStyles: this is needed to override the style */
  color: var(--shiki-dark) !important;
  /* biome-ignore lint/complexity/noImportantStyles: this is needed to override the style */
  font-style: var(--shiki-dark-font-style) !important;
  /* biome-ignore lint/complexity/noImportantStyles: this is needed to override the style */
  font-weight: var(--shiki-dark-font-weight) !important;
  /* biome-ignore lint/complexity/noImportantStyles: this is needed to override the style */
  text-decoration: var(--shiki-dark-text-decoration) !important;
}

.shiki code {
  direction: ltr;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  tab-size: 4;
  hyphens: none;
}

.shiki {
  & {
    @apply !bg-transparent;
  }

  & code {
    @apply block w-fit min-w-full;
  }

  & .line:where(:not(:last-child:empty)) {
    @apply inline-block w-full border-l-2 border-transparent px-4;
  }
}

/* diff */
.shiki.has-diff {
  & .line:where(:not(:last-child:empty)) {
    & {
      @apply px-2;
    }
    & *:first-child {
      @apply ml-4;
    }
  }

  & .line.diff.add {
    & {
      @apply bg-green-500/10 dark:bg-green-600/20;
    }
    & > :first-child {
      & {
        @apply ml-0;
      }
      &::before {
        content: "+";
        @apply mr-2 text-green-500 dark:text-green-600;
      }
    }
  }

  & .line.diff.remove {
    & {
      @apply bg-red-500/10 dark:bg-red-600/20;
    }
    & > :first-child {
      & {
        @apply ml-0;
      }
      &::before {
        content: "-";
        @apply mr-2 text-red-500 dark:text-red-600;
      }
    }
  }
}

/* highlight line */
.shiki {
  & .line.highlighted {
    @apply border-l-blue-400 bg-zinc-400/10 dark:border-l-lime-400 dark:bg-zinc-600/20;
  }
}

/* highlight word */
.shiki {
  & .highlighted-word {
    @apply rounded-md border border-zinc-300 bg-zinc-400/10 px-1 dark:border-zinc-700 dark:bg-zinc-600/20;
  }
}

/* line numbers */
.shiki.has-line-numbers {
  & .line:where(:not(:last-child:empty)) {
    @apply px-4 before:content-[attr(data-line)] before:mr-4 before:inline-block before:w-4 before:text-right before:text-zinc-400 before:dark:text-zinc-600;
  }
}