.custom-table {
    width: 100%;
    & > thead > th, & > thead > tr > th {
        @apply text-left px-6 text-gray-200 font-semibold py-3 border-gray-600 border-b;
    }

    & > tr, & > tbody > tr {
        @apply text-gray-200 transition-all duration-300 rounded hover:bg-gray-800;
        & > td {
            @apply py-1 px-6;
        }
    }

    &.custom-table-sm {
        & > thead > th, & > thead > tr > th {
            @apply px-3 py-2;
        }
        & > tr, & > tbody > tr {
            & > td {
                @apply py-1 px-3;
            }
        }
    }

    &.custom-table-light {
        & > thead > th, & > thead >  tr > th {
            @apply border-gray-500;
        }
        & > tr, & > tbody > tr {
            @apply hover:bg-gray-700;
        }
    }
}
