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

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