table {
    --palette-background-lightest: var(--palette-neutral-lightest);

    @apply border-collapse w-full;
}

/**
 * TODO: Repeat properties could probably be condensed a bit
 */

table[data-variation~="borders"] {
    & :is(td, th):not(:last-child)::after {
        @apply absolute block bg-current h-full opacity-40 right-0 top-0 w-px;

        content: "";
    }

    & > :is(tbody, thead, tfoot):first-child :is(td, th):not(:last-child)::after {
        border-top-left-radius: var(--radius-medium);
        border-top-right-radius: var(--radius-medium);
    }

    & > :is(tbody, thead, tfoot):last-child :is(td, th):not(:last-child)::after {
        border-bottom-left-radius: var(--radius-medium);
        border-bottom-right-radius: var(--radius-medium);
    }
}

table[data-variation~="stripes"] {
    & > tbody > tr:nth-child(2n + 1) {
        @apply;

        background-color: rgba(var(--palette-background-lightest), theme("opacity.20"));
    }
}

th,
thead,
td,
tfoot,
tr {
    @apply relative;
}

th,
td {
    @apply align-center px-[var(--spacing-root-medium)] py-[var(--spacing-root-small)] text-left;
}

:is(thead, tfoot) > tr > :is(td, th),
table[data-variation~="borders"] > tbody > tr:not(:last-child) > :is(td, th) {
    &::before {
        @apply absolute block bg-current bottom-0 h-px opacity-40 right-0 w-full;

        content: "";
    }

    &:first-child {
        &::before {
            border-top-left-radius: var(--radius-medium);
            border-bottom-left-radius: var(--radius-medium);
        }
    }

    &:last-child {
        &::before {
            border-top-right-radius: var(--radius-medium);
            border-bottom-right-radius: var(--radius-medium);
        }
    }
}

tfoot > tr > :is(td, th) {
    &::before {
        @apply top-0;
    }
}