array.css

/* ==========================================================================
   ARRAY FIELDTYPE
   ========================================================================== */

.array-fieldtype {
}

.array-table-wrapper {
    @apply overflow-hidden rounded-sm border dark:border-dark-900;
    &:focus-within {
        @apply ring-2 ring-blue-300 dark:ring-dark-blue-100;
    }
}
.array-table {
    @apply w-full rounded-sm text-sm ltr:text-left rtl:text-right;
    &:focus {
        @apply outline-hidden;
    }

    tr:not(:last-child) {
        th,
        td {
            @apply border-b dark:border-dark-900;
        }
    }

    th {
        @apply bg-gray-300 p-2 dark:border-dark-900 dark:bg-dark-500 ltr:border-r rtl:border-l;
    }

    td {
        @apply m-0 p-0;
    }

    tr:first-child th {
        @apply ltr:rounded-tl rtl:rounded-tr;
    }

    tr:first-child td,
    tr:first-child .input-text-minimal {
        @apply ltr:rounded-tr rtl:rounded-tl;
    }

    tr:last-child th {
        @apply ltr:rounded-bl rtl:rounded-br;
    }
    tr:last-child td:last-child,
    tr:last-child .input-text-minimal {
        @apply ltr:rounded-br rtl:rounded-bl;
    }

    &:focus-within {
        @apply focus-none;
    }

    td:focus-within {
        @apply bg-gray-200 dark:bg-dark-600;
    }

    /* Read Only */
    .read-only-field & {
        th {
            @apply text-gray-500 dark:text-dark-150;
        }
        tr td {
            @apply bg-gray-200 dark:bg-dark-600;
        }
    }
}