@layer components {
    .table-container {
        @apply relative w-full overflow-x-auto;
    }

    .table {
        @apply w-full text-sm text-gray-500 dark:text-gray-400;

        thead,
        tfoot {
            @apply text-gray-700 uppercase bg-gray-200 dark:bg-gray-800 dark:text-gray-400;

            th {
                @apply text-nowrap;
            }
        }

        thead {}

        tfoot {}

        tbody {

            tr {}
        }

        th,
        td {
            @apply p-2.5 text-justify;
        }

        &.table-striped {
            tbody tr:nth-of-type(even) {
                @apply bg-gray-100 dark:bg-gray-800;
            }
        }

        &.table-border {

            th,
            td {
                @apply border border-gray-300 dark:border-gray-700 border-collapse;
            }
        }

        &.table-border-separate {
            @apply border-separate;

            th,
            td {
                @apply border border-gray-300 dark:border-gray-700;
            }
        }

        &.table-divide {
            tbody {
                tr {
                    @apply border-b border-gray-300 dark:border-gray-700;
                }
            }
        }

        &.table-hover {
            tbody {
                tr {
                    @apply hover:bg-gray-100 dark:hover:bg-gray-800;
                }
            }
        }

        &.table-rounded {
            @apply rounded overflow-hidden;
        }

        &.xxs {
            @apply text-xxs;

            th,
            td {
                @apply p-1;
            }
        }

        &.xs {
            @apply text-xs;

            th,
            td {
                @apply p-1.5;
            }
        }

        &.sm {
            @apply text-sm;

            th,
            td {
                @apply p-2;
            }
        }

        &.lg {
            @apply text-lg;

            th,
            td {
                @apply p-3.5;
            }
        }

        &.xl {
            @apply text-xl;

            th,
            td {
                @apply p-4;
            }
        }

        &.xxl {
            @apply text-2xl;

            th,
            td {
                @apply p-5;
            }
        }
    }

}