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

#bknd-admin.dark,
.dark .bknd-admin {
   --color-primary: 250 250 250; /* zinc-50 */
   --color-background: 30 31 34;
   --color-muted: 47 47 52;
   --color-darkest: 255 255 255; /* white */
   --color-lightest: 24 24 27; /* black */
}

#bknd-admin,
.bknd-admin {
   --color-primary: 9 9 11; /* zinc-950 */
   --color-background: 250 250 250; /* zinc-50 */
   --color-muted: 228 228 231; /* ? */
   --color-darkest: 0 0 0; /* black */
   --color-lightest: 255 255 255; /* white */

   @mixin light {
      --mantine-color-body: rgb(250 250 250);
   }
   @mixin dark {
      --mantine-color-body: rgb(9 9 11);
   }

   table {
      font-size: inherit;
   }
}

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

   ::selection {
      @apply bg-muted;
   }

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

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

@layer components {
   .link {
      @apply transition-colors active:translate-y-px;
   }

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

   /**
    * debug classes
    */
   .bordered-red {
      @apply border-2 border-red-500;
   }

   .bordered-green {
      @apply border-2 border-green-500;
   }

   .bordered-blue {
      @apply border-2 border-blue-500;
   }

   .bordered-violet {
      @apply border-2 border-violet-500;
   }

   .bordered-yellow {
      @apply border-2 border-yellow-500;
   }
}

#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;
   }
}