/* ==========================================================================
   TABLES
   ========================================================================== */
/* Modifiers...

    - .data-table--contained is used when the table head appears _inside_ the container, for example /assets.

*/
.data-table {
    @apply w-full max-w-full outline-hidden text-gray-500 antialiased border-separate border-spacing-y-0 min-w-full overflow-x-auto text-start;

    &.data-table--contained {
        @apply rounded-xl;
        /* When we have overflow e.g. /cp/assets on mobile with lots of columns */
        background: inherit;
        box-shadow: inherit;
    }

    thead {
        th {
            @apply whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-300 text-start;
            @apply px-2 md:px-4 py-2;

            .data-table--contained & {
                @apply py-2.5 border-b border-gray-200 dark:border-gray-700;
            }
        }

        th.handle-column {
            @apply w-4 p-0;
        }

        .type-column {
            @apply text-end;
        }
    }

    /* Make sure we only apply this where the data table "head" is in the gray wrapper, i.e. _not_ assets, since otherwise we would be rounding the second row */
    &:not(.data-table--contained) {
        tbody {
            tr:first-child {
                /* [1] Round the corners */
                td:first-child,
                th:first-child {
                    @apply ltr:rounded-tl-xl rtl:rounded-tr-xl;
                }
                td:last-child,
                th:last-child {
                    @apply ltr:rounded-tr-xl rtl:rounded-tl-xl;
                }
                /* [2] Add a border */
                td {
                    @apply border-t border-t-gray-200 dark:border-t-gray-800;
                }
            }
            tr td {
                @apply dark:bg-gray-850;
                /* [3] Add left and right borders */
                &:first-child {
                    @apply border-s border-s-gray-200 dark:border-s-gray-800;
                }
                &:last-child {
                    @apply border-e border-e-gray-200 dark:border-e-gray-800;
                }
            }
        }
    }

    tbody {
        @apply text-sm shadow-sm-b rounded-xl outline-none;

        tr {
            &:last-child {
                @apply border-none;

                td {
                    @apply border-b border-b-gray-200 dark:border-b-gray-800;
                }

                td:first-child,
                th:first-child {
                    @apply ltr:rounded-bl-xl rtl:rounded-br-xl;
                }

                td:last-child,
                th:last-child {
                    @apply ltr:rounded-br-xl rtl:rounded-bl-xl;
                }
            }

            th {
                @apply py-2 ltr:pr-4 rtl:pl-4;
            }

            td {
                @apply bg-white dark:bg-gray-900;
                @apply ps-2 md:pl-4.5 pe-1 md:pe-2.5 py-3 border-t border-gray-200 dark:border-white/10;
                @apply text-gray-900 dark:text-gray-200;
            }

            /* When the row is hovered, change the background of all its cells to a hover state color */
            &:has(:hover) td {
                @apply bg-gray-50 dark:bg-gray-900;
            }
        }

        .type-column {
            @apply text-end;
        }
    }

    .date-index-field {
        @apply whitespace-nowrap;
    }
}

.data-table--contained tbody {
    tr:first-child td {
        border-top: unset;
    }
}

/* Sticky Meta Columns */
.data-table {
    .checkbox-column {
        /* When the table is scrolled on smaller screens, remove the left border radius from the sticky checkbox column */
        @container scroll-state(scrollable: inline-start) {
            @apply rounded-l-none!;
        }
    }

    thead th.checkbox-column {
        /* We need calc on the padding-start to account for the border of the table */
        @apply sticky z-1 ps-[calc(0.75rem+1px)] w-8;
        .data-table--contained & {
            @apply sticky ps-4;
        }
    }

    thead .actions-column {
        @apply sticky p-0 -end-px ps-2 text-end;
        width: 45px;
        min-width: 45px;
    }

    tbody .checkbox-column {
        @apply px-3 -start-px sticky -left-1.75;
        container-type: scroll-state;
        .data-table--contained & {
            @apply sticky ps-4;
        }
    }

    tbody .actions-column {
        @apply sticky p-0 ps-2 text-end w-12;
    }
}

/* Row Selection */
.data-table[data-has-selections] {
    tbody tr[data-row="selected"] td {
        @apply bg-gray-100 dark:bg-gray-925;
    }
}

.table-drag-handle {
    @apply h-full cursor-grab hover:bg-gray-100 dark:hover:bg-gray-700 dark:opacity-75;
    background-image: url('../../svg/drag-dots.svg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 7px 17px;
}

.column-sortable {
    @apply cursor-pointer relative;
}

.column-status {
    text-align: center;
    width: 80px;
}

.column-actions {
    @apply text-end w-12;
}

