@import "tailwindcss";

@custom-variant dark (&:where(.dark, .dark *));

#bknd-admin,
.bknd-admin {
   --color-primary: var(--color-zinc-950);
   --color-background: var(--color-zinc-50);
   --color-muted: var(--color-zinc-200);
   --color-darkest: var(--color-black);
   --color-lightest: var(--color-white);

   --color-warning: var(--color-amber-100);
   --color-warning-foreground: var(--color-amber-800);
   --color-error: var(--color-red-100);
   --color-error-foreground: var(--color-red-800);
   --color-success: var(--color-green-100);
   --color-success-foreground: var(--color-green-800);
   --color-info: var(--color-blue-100);
   --color-info-foreground: var(--color-blue-800);

   --color-resize: var(--color-blue-300);

   @mixin light {
      --mantine-color-body: var(--color-zinc-50);
   }
   @mixin dark {
      --mantine-color-body: var(--color-zinc-950);
   }

   table {
      font-size: inherit;
   }
}

.dark,
.dark .bknd-admin /* currently used for elements, drop after making headless */,
#bknd-admin.dark,
.bknd-admin.dark {
   --color-primary: var(--color-zinc-50);
   --color-background: rgb(30 31 34);
   --color-muted: rgb(47 47 52);
   --color-darkest: var(--color-white);
   --color-lightest: rgb(24 24 27);

   --color-warning: var(--color-yellow-900);
   --color-warning-foreground: var(--color-yellow-200);
   --color-error: var(--color-red-950);
   --color-error-foreground: var(--color-red-200);
   --color-success: var(--color-green-950);
   --color-success-foreground: var(--color-green-200);
   --color-info: var(--color-blue-950);
   --color-info-foreground: var(--color-blue-200);
}

@theme {
   --color-primary: var(--color-primary);
   --color-background: var(--color-background);
   --color-muted: var(--color-muted);
   --color-darkest: var(--color-darkest);
   --color-lightest: var(--color-lightest);

   --color-warning: var(--color-warning);
   --color-warning-foreground: var(--color-warning-foreground);
   --color-error: var(--color-error);
   --color-error-foreground: var(--color-error-foreground);
   --color-success: var(--color-success);
   --color-success-foreground: var(--color-success-foreground);
   --color-info: var(--color-info);
   --color-info-foreground: var(--color-info-foreground);
}

#bknd-admin {
   @apply bg-background text-primary overflow-hidden h-dvh w-dvw;

   ::selection {
      @apply bg-primary/15;
   }

   input {
      &::selection {
         @apply bg-primary/15;
      }
   }
}

body,
#bknd-admin {
   @apply flex flex-1 flex-col h-dvh w-dvw;
}

.link {
   @apply active:translate-y-px;
}

.img-responsive {
   @apply max-h-full w-auto;
}

#bknd-admin,
.bknd-admin {
   /* Chrome, Edge, and Safari */
   & *::-webkit-scrollbar {
      @apply w-1;
      &:horizontal {
         @apply h-px;
      }
   }

   & *::-webkit-scrollbar-track {
      @apply bg-transparent w-1;
   }

   & *::-webkit-scrollbar-thumb {
      @apply bg-primary/25;
   }
}

@utility debug {
   @apply border-red-500 border;
}
@utility debug-blue {
   @apply border-blue-500 border;
}
@utility w-min-content {
   width: min-content;
   width: -webkit-min-content;
}