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

.nav-item-mobile {
    @apply p-4;
}

.nav-item-mobile-text {
    @apply text-slate-200;
    @apply text-xl;
    @apply select-none;
}

.nav-item {
    @apply p-2 px-3;
}

.nav-item-text {
    @apply text-slate-200;
}

.lyrics-text {
    @apply text-lg text-white italic;
    @apply w-fit max-w-[300px];
    @apply bg-black p-4 rounded;
}

/* For Webkit-based browsers (Chrome, Safari and Opera) */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

/* For IE, Edge and Firefox */
.scrollbar-hide {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

.black-button {
    @apply w-fit h-fit;
    @apply px-4 py-2;
    @apply bg-black;
    @apply text-lg text-slate-200;
    @apply rounded;
    @apply select-none;
}

.black-button:hover {
    @apply bg-gray-900;
    @apply text-slate-100;
    @apply cursor-pointer;
}

.gray-button {
    @apply w-fit h-fit;
    @apply px-4 py-2;
    @apply bg-gray-600;
    @apply text-lg text-slate-200;
    @apply rounded;
    @apply select-none;
}

.gray-button:hover {
    @apply bg-gray-500;
    @apply text-slate-100;
    @apply cursor-pointer;
}

.orange-button {
    @apply w-fit h-fit;
    @apply px-4 py-2;
    @apply bg-orange-700;
    @apply text-lg text-slate-200;
    @apply rounded;
    @apply select-none;
}

.orange-button:hover {
    @apply bg-orange-600;
    @apply text-slate-100;
    @apply cursor-pointer;
}