@charset "UTF-8";
.table-content {
    @apply rounded-theme border border-neutral-200;
    .table {
        @apply w-full border-separate border-spacing-0;
        thead {
            @apply border-b border-b-neutral-200 bg-neutral-50;
            th {
                @apply text-sm p-3 ltr:text-left rtl:text-right overflow-hidden text-neutral-600 font-medium align-middle whitespace-nowrap box-border;
            }
            th.table-id {
                @apply w-12;
            }
            th.table-sort {
                @apply select-none min-w-[44px] max-w-[44px] w-11;
            }
            th.image-col {
                @apply min-w-[60px] max-w-[60px];
            }
            th.manage-th {
                @apply select-none w-10 py-0 px-0.5 text-center;
            }
        }
        tbody {
            tr {
                @apply even:bg-neutral-50;
                &:has(.multi-delete-checkbox input:checked) {
                    @apply bg-danger-50;
                }
            }
            td {
                @apply text-sm p-3 align-middle overflow-hidden text-ellipsis
                border-b-transparent border-t border-t-neutral-200
                text-neutral-800;
                &.image-col {
                    @apply p-1 w-[60px];
                }
                .item-image {
                    @apply inline-block w-[60px] h-[60px] rounded-theme transition-all m-0 align-top
                    hover:ring-2 hover:ring-neutral-300 hover:ring-offset-1
                    active:ring-neutral-400;
                    > div {
                        @apply bg-cover bg-center rounded-theme w-[60px] h-[60px];
                    }
                }
                .checkbox-status{
                    @apply p-1 inline-block bg-danger-400 rounded-full;
                    &.bg-success{
                        @apply bg-success-400;
                    }
                }
            }
            td.child-col {
                @apply p-0;
            }
            td.drag-me-col {
                @apply px-0.5 !important;
            }
            td.manage-td {
                @apply select-none py-0 px-0.5 text-center;
            }
            td.parent-child-td, td.subpage-td {
                @apply select-none py-0 px-0.5 text-center;
            }
            .sub-page-container{
                @apply flex flex-wrap justify-center items-center;
            }
        }

        .center-text{
            @apply !text-center;
        }
        .manage-links {
            @apply flex flex-nowrap items-center justify-end gap-0.5;
        }
        .nowrap {
            @apply whitespace-nowrap;
        }
        .highlight {
            border: hidden !important;
        }
    }
    .sort-header {
        thead {
            th {
                @apply p-0;
                a {
                    @apply relative block p-3 ltr:pr-5 rtl:pr-5 transition-colors
                    hover:text-neutral-600 active:bg-neutral-200;
                    &:before {
                        @apply absolute block text-neutral-300 ltr:right-1 rtl:left-1 text-[10px] bottom-1/2 leading-[9px];
                        content: "▲";
                    }

                    &:after {
                        @apply absolute block text-neutral-300 ltr:right-1 rtl:left-1 text-[10px] top-1/2 leading-[9px];
                        content: "▼";
                    }

                    &.asc:after {
                        @apply text-neutral-500;
                    }

                    &.desc:before {
                        @apply text-neutral-500;
                    }
                }

                &:not(.no-sort):hover {
                    @apply bg-neutral-100 transition-colors;
                }
            }
        }
    }
    .table-col-hide-sm{
        @apply hidden sm:table-cell !important;
    }
    .table-col-hide-md{
        @apply hidden md:table-cell !important;
    }
    .table-col-hide-lg{
        @apply hidden lg:table-cell !important;
    }
}
