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

@layer components {
    .table-t1-container {
        @apply bg-gray-800 shadow overflow-hidden lg:rounded-lg;

    }

    .table-t1-default {
        @apply min-w-full divide-y divide-gray-700;
    }

    .table-t1-header {
        @apply px-3 md:px-6 py-4 text-left text-xs font-medium text-gray-300 uppercase tracking-wider;
    }

    .table-t1-row {
        @apply hover:bg-gray-700;
    }

    .table-t1-row-divided {
        @apply divide-y divide-gray-700;
    }

    .table-t1-cell {
        @apply px-3 md:px-6 py-4 whitespace-nowrap text-sm text-gray-300;
    }

    .table-t1-link {
        @apply underline text-blue-200 hover:text-blue-400
    }
}

.pagy {
    @apply flex space-x-1 font-semibold text-sm text-gray-500;

    a:not(.gap) {
        @apply block rounded-lg px-3 py-1 bg-gray-200;

        &:hover {
            @apply bg-gray-300;
        }

        &:not([href]) { /* disabled links */
            @apply text-gray-300 bg-gray-100 cursor-default;
        }

        &.current {
            @apply text-white bg-gray-400;
        }
    }

    label {
        @apply inline-block whitespace-nowrap bg-gray-200 rounded-lg px-3 py-0.5;

        input {
            @apply bg-gray-100 border-none rounded-md;
        }
    }
}

.cancel-button {
    @apply bg-gray-600 hover:bg-gray-700 text-white font-medium px-4 py-2 rounded-md transition-colors duration-200
}

.primary-button {
    @apply bg-blue-600 hover:bg-blue-700 text-white font-medium px-4 py-2 rounded-md transition-colors duration-200
}

.delete-button {
    @apply bg-red-600 hover:bg-red-700 text-white font-medium px-4 py-2 rounded-md transition-colors duration-200
}