.table-wrapper,
.result-table {
    @apply max-w-full overflow-x-auto relative;
}

.table {
    @apply w-full text-left border-collapse;
}

.table caption {
    @apply text-left text-sm text-secondary mb-1.5;
}

.table tbody {
    @apply align-baseline;
}

.table tbody tr {
    @apply border-b border-gray-200;
}

.table tbody tr:nth-child(even) {
    @apply bg-gray-50;
}

.table td {
    @apply py-3 px-2;
}

.table th {
    @apply top-0 text-sm font-semibold text-gray-500 p-2;
}

.table thead tr {
    @apply py-3 border-b border-gray-500;
}

.result-table {
    .state-message {
        @apply p-9 text-center;

        .title {
            @apply text-xl;
        }
    }
    .has-overlay {
        @apply opacity-10;
    }
    .loading-overlay-spinner {
        @apply absolute top-20 flex flex-col items-center justify-center w-full;
    }
}

.result-table.loading,
.result-table.failed {
    min-height: 14rem;
}

.result-table.loading {
    caption {
        visibility: hidden;
    }
}

.sort-trigger {
    @apply bg-gray-100 hover:bg-gray-200;
}

.sort-ascending span {
    width: 10px;
    display: inline-flex;
    margin-bottom: -7px;
    margin-left: 10px;
    height: 23px;
    mask-image: url('/assets/arrow-up.svg');
    mask-repeat: no-repeat;
    mask-size: 1.2rem;
    mask-position: center;
    @apply bg-gray-500;
}

.sort-descending span {
    width: 10px;
    display: inline-flex;
    margin-bottom: -7px;
    margin-left: 10px;
    height: 23px;
    mask-image: url('/assets/arrow-down.svg');
    mask-repeat: no-repeat;
    mask-size: 1.2rem;
    mask-position: center;
    @apply bg-gray-500;
}