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

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 0 0% 3.9%;

    --card: 0 0% 100%;
    --card-foreground: 0 0% 3.9%;

    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 3.9%;

    --primary: 0 0% 9%;
    --primary-foreground: 0 0% 98%;

    --secondary: 0 0% 96.1%;
    --secondary-foreground: 0 0% 9%;

    --muted: 0 0% 96.1%;
    --muted-foreground: 0 0% 45.1%;

    --accent: 0 0% 96.1%;
    --accent-foreground: 0 0% 9%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;

    --border: 0 0% 89.8%;
    --input: 0 0% 89.8%;
    --ring: 0 0% 3.9%;

    --radius: 0.5rem;
  }

  .dark {
    --background: 0 0% 0%;
    --foreground: 0 0% 98%;

    --card: 0 0% 0%;
    --card-foreground: 0 0% 98%;

    --popover: 0 0% 3.9%;
    --popover-foreground: 0 0% 98%;

    --primary: 0 0% 98%;
    --primary-foreground: 0 0% 9%;

    --secondary: 0 0% 14.9%;
    --secondary-foreground: 0 0% 98%;

    --muted: 0 0% 10.9%;
    --muted-foreground: 0 0% 53.9%;

    --accent: 0 0% 14.9%;
    --accent-foreground: 0 0% 98%;

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;

    --border: 0 0% 14.9%;
    --input: 0 0% 14.9%;
    --ring: 0 0% 83.1%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

/* Nextra overrides */
.docs .nx-max-w-\[90rem\] {
  max-width: none;
}

.docs * {
  font-weight: 400 !important;
}

.docs h2 {
  margin-bottom: none;
}

.docs h2.nx-border-b {
  border-bottom: none;
}

.docs div.nx-border-b {
  border-bottom: none;
}

.docs div.nx-border-t {
  border-top: none;
}

.docs :is(html[class~="dark"] .dark\:nx-bg-dark) {
  background-color: hsl(var(--background)) !important;
}

.docs :is(html[class~="dark"] body) {
  background-color: hsl(var(--background)) !important;
}

.docs
  :is(
    html[class~="dark"]
      .dark\:nx-shadow-\[0_-1px_0_rgba\(255\,255\,255\,\.1\)_inset\]
  ) {
  box-shadow: none;
}

.docs :is(html[class~="dark"] .nextra-nav-container-blur) {
  background-color: hsl(var(--background) / 0.8) !important;
}

.docs :is(html[class~="dark"] .dark\:nx-shadow-\[0_-12px_16px_\#111\]) {
  box-shadow: none;
}

.docs [data-theme="dark"]#logo-path {
  color: white;
}

.docs th,
td {
  border: none;
}

.docs th {
  text-align: left;
}

.docs tr:nth-child(2n) {
  background-color: inherit !important;
}

.docs table {
  table-layout: auto;
}

.docs thead > tr {
  border-top: none;
}

.docs table,
thead,
tbody {
  display: table;
  width: 100%;
}

.docs :is(html[class~="dark"] tr) {
  border-color: rgba(38, 38, 38, var(--tw-bg-opacity));
}

.docs li.active > a {
  color: var(--primary-foreground) !important;
  background-color: transparent !important;
}

.docs li.active > a > p {
  color: var(--primary-foreground) !important;
  background-color: transparent !important;
}

.docs aside.md\:nx-w-64 {
  width: 20rem;
}

img,
svg {
  filter: grayscale(100%);
}

li.nx-my-2 {
  list-style: none;
}

.nx-truncate {
  background-color: transparent !important;
  color: rgba(255, 255, 255, 0.5) !important;
}

footer {
  background-color: transparent !important;
}

:is(html[class~="dark"] .nextra-sidebar-container) {
  background-color: hsl(var(--background)) !important;
}

:is(html[class~="dark"] .dark\:nx-text-orange-300)
  :is([dir="ltr"] .ltr\:nx-pl-3) {
  display: none;
}

:is(html[class~="dark"] .dark\:nx-text-orange-300) {
  background-color: transparent !important;
  color: var(--primary-foreground) !important;
  border-color: rgba(38, 38, 38, var(--tw-bg-opacity));
  padding: 0 20px;
}

@layer base {
  /* .docs .nextra-code-block{
    @apply text-primary;
    @apply leading-normal;
    @apply 2xl:leading-normal;
    @apply text-base;
    @apply sm:text-lg;
    @apply 2xl:text-xl;
    @apply 3xl:text-2xl;
  } */
}