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

.above-all {
    z-index: calc(infinity);
}
/* scrollbar styles */
/* width */
::-webkit-scrollbar {
    @apply w-1 h-1
}

/* Track */
::-webkit-scrollbar-track {
    @apply bg-transparent
}

/* Handle */
::-webkit-scrollbar-thumb {
    @apply bg-stone-400
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    @apply bg-stone-500
}
/* dark scrollbar */

/* Track */
.dark *::-webkit-scrollbar-track,
.dark::-webkit-scrollbar-track {
    @apply bg-stone-800
}

/* Handle */
.dark *::-webkit-scrollbar-thumb,
.dark::-webkit-scrollbar-thumb {
    @apply bg-stone-600
}

/* Handle on hover */
.dark *::-webkit-scrollbar-thumb:hover,
.dark::-webkit-scrollbar-thumb:hover {
    @apply bg-stone-700
}

/* selection */
*::selection {
    @apply bg-stone-950 text-stone-50
}
.dark *::selection {
    @apply bg-stone-50 text-stone-950
}
/* end selection */

#sidebar {
    transition: transform 0.3s ease, opacity 0.3s ease;
    transform: translateX(100%); /* Off-screen initially */
    opacity: 0; /* Hidden */
}

#sidebar.show {
    transform: translateX(0); /* Slide in */
    opacity: 1; /* Visible */
}