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

[x-cloak] {
  display: none !important;
}

html {
  @apply text-base dark:!text-white;
}

body {
  @apply font-sans h-screen dark:bg-black dark:!text-white;
}

.nav-panel-explore,
.navbar-item.search {
  @apply hidden;
}

.navmenu {
  @apply pt-11;
}

a.home-link {
  @apply dark:bg-white/40 rounded dark:hover:bg-orange;
}

footer, .components, .footer a {
  @apply dark:bg-black dark:!text-white;
}

.breadcrumbs {
  @apply dark:text-white;
}

.breadcrumbs a, .edit-this-page a {
  @apply dark:!text-white dark:hover:!text-orange;
}

.doc {
  @apply pt-6 dark:text-white;
}

.doc table.stripes-even>tbody>tr:nth-of-type(2n) {
  @apply dark:bg-slate;
}

.doc h1,.doc h2,.doc h3,.doc h4,.doc h5,.doc h6, .doc p, .title, .version, .toc-menu, .toc .toc-menu h3, table {
  @apply dark:!text-white;
}

.doc h2:not(.discrete) {
  @apply dark:border-slate;
}

.toc .toc-menu a {
  @apply dark:border-slate;
}

.toc .toc-menu a.is-active {
  @apply dark:!text-orange dark:border-orange;
}

.toc .toc-menu a {
  @apply dark:hover:text-orange;
}

.doc .listingblock pre:not(.highlight),
.doc .literalblock pre,
.tablist>ul li, .tabpanel,
.tabs.is-loading .tablist li:not(:first-child), .tabs:not(.is-loading) .tablist li:not(.is-selected) {
  @apply dark:bg-slate;
}

.doc .admonitionblock td.content {
  @apply dark:bg-slate dark:text-white;
}

.doc .admonitionblock {
  @apply dark:bg-slate;
}

.doc table.tableblock tr th {
  @apply dark:bg-transparent;
}

.doc .admonitionblock .icon i {
  @apply dark:text-white;
}

.article .doc .tabs .tab:not(.is-selected) {
  @apply dark:bg-charcoal;
}

body.article {
  @apply pt-0;
}

#headblock {
 @apply border-0;
}

aside.nav,
div.toolbar {
  @apply top-10 dark:bg-black;
}

div.toolbar {
  @apply z-40 border-b-0;
}

hr:first-of-type {
  @apply border-0;
}

#mobile-menu-button {
  @apply outline-none border-0 bg-transparent;
}

select, #search-input {
  @apply dark:bg-charcoal dark:text-white dark:border-slate;
}

#avatar>div,
#avatar>div>img {
  @apply rounded;
}

#avatar > a {
  @apply whitespace-nowrap;
}

#userMenu, #guideMenu {
  border: 1px solid #d1d5db;
}