/**
 * Custom style for zui
 * -------------------------------------------------------------------------- */
body {
  @apply !-bg-canvas;
}
.Layout {
  font-size: 1rem;
}

.vp-doc h3:not(:where(.vp-raw, .vp-raw *)) {
  @apply -mb-4;
}
.vp-doc h4:not(:where(.vp-raw, .vp-raw *)),
.vp-doc h5:not(:where(.vp-raw, .vp-raw *)),
.vp-doc h6:not(:where(.vp-raw, .vp-raw *)) {
  @apply -my-3;
}
.vp-doc .example a:hover {
  @apply -no-underline;
}
.VPDoc > .container {
  @apply -min-w-0;
}
input:focus, textarea:focus, select:focus {
  @apply -outline-1 -outline;
}
.vp-doc .vp-code {
  max-height: 500px;
  font-size: inherit;
}
.VPSidebar > .nav {
  @apply -block;
}
.VPSidebarItem .caret {
  @apply -border-none;
}
.VPSidebarItem .caret > .caret-icon {
  @apply -hidden;
}
.VPNavBarMenu.menu {
  @apply -shadow-none -border-none -bg-transparent;
}

.VPSidebarItem .text {
  @apply -flex -flex-row -justify-between -items-center;
}
.VPSidebarItem .text > code {
  @apply -text-sm -text-[--vp-c-text-2] -bg-[--vp-c-gutter] -rounded-full -py-0.5 -px-1 -leading-none;
}
.VPSidebarItem.is-active .text > code {
  @apply -text-[--vp-c-brand] -bg-[--vp-c-brand-dim];
}

button.DocSearch-Button {
  @apply -bg-surface/50 -backdrop-blur;
}

.custom-block.warning {
  @apply -ring-0;
}
.custom-block.warning:hover {
  @apply -text-[--vp-custom-block-warning-text] -bg-[--vp-custom-block-warning-bg];
}

.hover-scale {
  @apply -transition-[transform] hover:-scale-105 hover:-z-10;
}
.hover-scale-shadow {
  @apply -transition-[transform,box-shadow] hover:-scale-105 hover:-shadow-md hover:-z-10;
}

@media (min-width: 960px) {
  .VPNavBar {
    @apply -transition-colors;
  }
  .VPNavBar:not(.top,.has-sidebar) {
    background: rgba(var(--color-canvas-rgb), .05)!important;
    backdrop-filter: blur(10px)!important;
  }
  .VPNavBar:not(.top,.has-sidebar) .content-body {
    background: none!important;
  }
}

.plugin-tabs {
  @apply -ring-1 -ring-border -w-full -rounded -shadow -bg-transparent;
}
.plugin-tabs--content {
  @apply !-p-0;
}
.plugin-tabs--content .example {
  @apply -shadow-none -rounded-t-none;
}
.plugin-tabs--content div[class*='language-'] {
  @apply !-rounded-t-none !-bg-[--vp-code-block-bg];
}
.plugin-tabs--tab-list {
  @apply  -bg-surface;
}
.plugin-tabs--tab-list::after {
  @apply -bg-border -h-px;
}
.plugin-tabs--tab {
  @apply -h-10 -leading-10;
}
