@reference "../../index.css";


.article-content, .article-title {
  @apply break-words;
  word-break: break-word;
}

.article-content *:not(.plyr__tooltip) {
  @apply max-w-full;
}

.article-content audio {
  @apply hidden;
}

.article-content li,
.article-content p {
  @apply my-4!
}

.article-content img {
  @apply my-0!
}

/* 文章标题链接样式 */
.article-title a {
  @apply text-foreground font-medium no-underline
}

/* 文章内容链接样式 */
.article-content a {
  @apply border-b-[1px] border-dotted border-primary no-underline transition-colors text-primary
}

/*表格*/
.article-content td {
  @apply text-content2-foreground text-sm
}

/*code 相关样式 */
.article-content code:not(pre code) {
  @apply whitespace-pre-wrap before:content-none after:content-none border font-medium font-mono dark:text-default-500 rounded text-default-600 bg-default-100 dark:bg-default-100/80 px-1.5 py-0.5
}

.article-content pre code {
  @apply whitespace-pre md:whitespace-pre-wrap;
}


/*https://github.com/shikijs/shiki/issues/3*/
.line-numbers code {
  counter-increment: step 0;
  counter-reset: step;
}

.line-numbers code .line::before {
  color: hsl(var(--heroui-default-400));
  content: counter(step);
  counter-increment: step;
  display: inline-block;
  margin-right: 1.5rem;
  text-align: right;
  width: 1rem;
}

.article-content blockquote > p {
  @apply before:content-none after:content-none
}

.article-content figure {
  @apply my-4 w-auto!
}

iframe {
  @apply aspect-video border-none! h-auto w-[calc(100%+2.5rem)]! max-w-[calc(100%+2.5rem)]! -mx-5
}

blockquote {
  @apply not-italic!
}

figcaption {
  @apply italic!
}

/*代码主题跟随系统当前使用主题*/
html[class$="dark"] .shiki,
html[class$="dark"] .shiki span,
div.force-dark-code-theme .shiki,
div.force-dark-code-theme .shiki span {
  background-color: var(--shiki-dark-bg) !important;
  color: var(--shiki-dark) !important;
}

/*image gallery*/
.PhotoView-Slider__BannerWrap {
  @apply pt-safe-or-4 px-safe-or-4 h-auto flex-row-reverse
}

/*图片计数显示*/
.PhotoView-Slider__Counter {
  @apply hidden;
}

/*顶部工具栏*/
.PhotoView-Slider__BannerWrap {
  @apply bg-transparent;
}

/*关闭按钮*/
.PhotoView-Slider__toolbarIcon {
  @apply p-2 bg-black/50 rounded-full;
}

.PhotoView-Slider__BannerRight svg {
  @apply size-8
}

/*导航按钮容器*/
.PhotoView-Slider__ArrowLeft, .PhotoView-Slider__ArrowRight {
  @apply hidden w-auto px-safe-offset-4 md:flex animate-in fade-in zoom-in
}

/*导航按钮*/
.PhotoView-Slider__ArrowLeft svg, .PhotoView-Slider__ArrowRight svg {
  @apply bg-black/50 rounded-full p-2 size-4;
}

