/*
    Table
*/
table {
    --table-text-color: inherit;
    --table-bg-color: transparent;
    --table-border-color: var(--border-color);

    --table-striped-text-color: inherit;
    --table-striped-bg-color: rgba(var(--color-white-rgb), 0.05);

    --table-padding-x: 1rem;
    --table-padding-y: 0.6rem;

    caption-side: bottom;
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 1rem;
    vertical-align: top;
    border-color: var(--table-border-color);
}

th {
    text-align: inherit;
    text-align: -webkit-match-parent;
}

thead,
tbody,
tfoot,
tr,
td,
th {
    border-color: inherit;
    border-style: solid;
    border-width: 0;
}

table > :not(caption) > * > * {
    padding: var(--table-padding-y) var(--table-padding-x);
    color: var(--table-text-color);
    background-color: var(--table-bg-color);
    border-bottom-width: var(--border-width);
}

table > tbody {
    vertical-align: inherit;
}

table > thead {
    vertical-align: bottom;
}

.table-divider {
    border-top: calc(var(--border-width) * 2) solid currentcolor;
}

.caption-top {
    caption-side: top;
}

.table-bordered > :not(caption) > * {
    border-width: var(--border-width) 0;
}

.table-bordered > :not(caption) > * > * {
    border-width: 0 var(--border-width);
}


/*
    Striped Tables
*/
.table-striped > tbody > tr:nth-of-type(odd) > * {
    color: var(--table-striped-text-color);
    background-color: var(--striped-table-bg-color);
}

.table-striped-columns > :not(caption) > tr > :nth-child(even) {
    color: var(--table-striped-text-color);
    background-color: var(--table-striped-bg-color);
}


/*
    Responsive Tables
*/
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 576px) {
    .sm\:table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 768px) {
    .md\:table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 1024px) {
    .lg\:table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 1280px) {
    .xl\:table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 1540px) {
    .xxl\:table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}


/* 
    Table Colours 
*/
.table-black {
    --table-text-color: var(--color-black-contrast);
    --table-bg-color: var(--color-black);
    --table-border-color: var(--color-black-alt);
    --table-striped-text-color: var(--color-black-contrast);
    --table-striped-bg-color: rgba(var(--color-black-rgb), 0.9);
}

.table-white {
    --table-text-color: var(--color-white-contrast);
    --table-bg-color: var(--color-white);
    --table-border-color: var(--color-white-alt);
    --table-striped-text-color: var(--color-white-contrast);
    --table-striped-bg-color: rgba(var(--color-white-rgb), 0.9);
}

.table-primary {
    --table-text-color: var(--color-primary-contrast);
    --table-bg-color: var(--color-primary);
    --table-border-color: var(--color-primary-alt);
    --table-striped-text-color: var(--color-primary-contrast);
    --table-striped-bg-color: rgba(var(--color-primary-rgb), 0.9);
}

.table-secondary {
    --table-text-color: var(--color-secondary-contrast);
    --table-bg-color: var(--color-secondary);
    --table-border-color: var(--color-secondary-alt);
    --table-striped-text-color: var(--color-secondary-contrast);
    --table-striped-bg-color: rgba(var(--color-secondary-rgb), 0.9);
}

.table-tertiary {
    --table-text-color: var(--color-tertiary-contrast);
    --table-bg-color: var(--color-tertiary);
    --table-border-color: var(--color-tertiary-alt);
    --table-striped-text-color: var(--color-tertiary-contrast);
    --table-striped-bg-color: rgba(var(--color-tertiary-rgb), 0.9);
}