.Sui-Table{
    --sui-table-px: 1rem;
    --sui-table-py: 0.75rem;
    --sui-table-border: 0px;
    --sui-table-border-color: theme('colors.sui.borderDim');
    --sui-table-border-head: 0px;
    --sui-table-cell-bg: transparent;
    @apply text-start table w-full border-collapse border-spacing-0 text-sm ;

    &__Wrapper{
        @apply w-full overflow-auto;
    }
    &__Cell{
        text-align: inherit;
        border-top-width: var(--sui-table-border);
        @apply table-cell px-[var(--sui-table-px)] py-[var(--sui-table-py)] border-[color:var(--sui-table-border-color)] bg-[color:var(--sui-table-cell-bg)];
        &--align-start{
            @apply text-start;
        }
        &--align-end{
            @apply text-start;
        }
        &--align-center{
            @apply text-center;
        }
        &--align-inherit{
            text-align: inherit;
        }
        &--align-left{
            @apply text-left;
        }
        &--align-right{
            @apply text-right;
        }
        &--atext-justify{
            @apply text-justify;
        }
    }
    &__Row{
        @apply table-row;
        &:first-child>.Sui-Table__Cell{
            --sui-table-border: 0px;
        }
    }
    &__Body{
        @apply table-row-group
    }
    &__Head{
        @apply table-header-group;
        >.Sui-Table__Row:last-child>.Sui-Table__Cell{
            border-bottom-width: var(--sui-table-border-head);
        }
    }
    &__Footer{
        @apply table-footer-group;
        >.Sui-Table__Row:first-child>.Sui-Table__Cell{
            border-top-width: var(--sui-table-border-head);
        }
    }

    &__Head>.Sui-Table__Row>.Sui-Table__Cell,
    &__Footer>.Sui-Table__Row>.Sui-Table__Cell,
    th.Sui-Table__Cell{
        @apply font-semibold;
    }

    &--dense{
        --sui-table-px: 0.625rem;
        --sui-table-py: 0.375rem;
    }

    &--divided{
        --sui-table-border: 1px;
        --sui-table-border-head: 3px;
    }
    &--bordered{
        --sui-table-border: 1px;
        --sui-table-border-head: 3px;
        .Sui-Table__Cell {
            @apply border-r last:border-r-0
        }
    }
    &--striped{
        --sui-table-border-head: 3px;
        >.Sui-Table__Body>.Sui-Table__Row:nth-child(even){
            --sui-table-cell-bg: theme('colors.sui.bgDim');
        }
        >.Sui-Table_Head,
        >.Sui-Table_Footer {
            >.Sui-Table__Row {
                --sui-table-cell-bg: theme('colors.sui.bgDim');
            }
        }
    }

    &--hoverable{
        .Sui-Table__Body>.Sui-Table__Row:hover{
            --sui-table-cell-bg: theme('colors.sui.bgDim');
        }
    }

    &--stickyHeader{
        .Sui-Table__Head{
            --sui-table-cell-bg: theme('colors.sui.bg');
            box-shadow: 0 3px 0 0 var(--sui-table-border-color);
            --sui-table-border-head: 0;
            @apply sticky top-0 left-0;
        }
    }

}


.Sui-TableSortCell{
    --sui-sort-icon-color: inherit;
    @apply cursor-pointer select-none;
    &__Inner{
        @apply inline-flex items-center;
    }
    &__Icon{
        @apply w-3 h-3 ml-0.5 transition-colors duration-100 ease-linear text-[color:var(--sui-sort-icon-color)]
    }
    &:hover{
        --sui-sort-icon-color: theme('colors.primary.500');
    }
}

.Sui-TablePagination{
    @apply flex justify-end items-center space-x-2 px-2 py-1.5 border-t border-t-sui-borderDim;
    &__Pagination{
        /*@apply inline-flex items-center space-x-0.5;*/
    }
    &__PerPage{
        @apply inline-flex items-center space-x-1;
    }

}