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

.card {
    @apply dark:bg-dark-foreground bg-white sm:p-6 p-4 rounded-xl lg:mb-6 mb-5
}

.widget-card {
    @apply dark:bg-dark-foreground bg-white lg:p-5 p-4 rounded-xl
}

.input-dark {
    @apply w-full dark:bg-2x-dark-foreground bg-light-background py-3 sm:px-5 px-4 rounded-lg appearance-none border-transparent sm:text-base text-sm font-bold border
}

.text-limit {
    @apply whitespace-nowrap text-ellipsis overflow-x-hidden block
}

.is-inactive {
    @apply pointer-events-none opacity-40
}

.grid-view {
    @apply grid grid-cols-3 content-start sm:grid-cols-4 lg:gap-2 xl:grid-cols-6 xl:gap-4;
}

.grid-view-sidebar {
    @apply grid grid-cols-3 content-start md:grid-cols-2 lg:grid-cols-3 lg:gap-2 xl:grid-cols-4 xl:gap-4 2xl:grid-cols-5;
}