/*
 * Data Table widget.
 */
.ekl-table-wrap {
    @apply w-full overflow-x-auto;
}

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

    th,
    td {
        @apply border border-solid border-ekl-neutral-200 px-[16px] py-[12px] align-middle;
    }

    th {
        @apply bg-ekl-neutral-50 text-[15px] font-semibold leading-[1.4] text-ekl-secondary;
    }

    td {
        @apply text-[15px] leading-[1.6] text-ekl-neutral-700;
    }
}

.ekl-table__caption {
    @apply pb-[10px] text-left text-[14px] text-ekl-neutral-700;
}

.ekl-table__icon,
.ekl-table__cell-icon {
    @apply mr-[8px] inline-flex items-center leading-none align-middle;

    i,
    svg {
        @apply inline-block text-[1em];
    }

    svg {
        @apply h-[1em] w-[1em] fill-current;
    }
}

.ekl-table__image,
.ekl-table__cell-image {
    @apply mr-[8px] inline-flex items-center leading-none align-middle;

    img {
        @apply inline-block h-auto max-w-[28px] object-contain align-middle;
    }
}

.ekl-table__icon--after,
.ekl-table__image--after,
.ekl-table__cell-icon--after,
.ekl-table__cell-image--after {
    @apply mr-0 ml-[8px];
}

.ekl-table__cell-text {
    @apply inline align-middle;
}

.ekl-table[data-striped='yes'] tbody tr:nth-child(even) {
    @apply bg-ekl-neutral-50;
}

.ekl-table[data-hover='yes'] tbody tr {
    @apply transition-colors duration-200;

    &:hover {
        @apply bg-ekl-red-orange-200;
    }
}

.ekl-table tbody tr.is-highlighted {
    @apply bg-ekl-red-orange-200;
}

/*
 * Stacked: the header row is taken away and each cell says its own column's
 * name instead, so a narrow screen reads down rather than across.
 */
@media (max-width: 767px) {
    .ekl-table[data-stack='yes'] {
        @apply block;

        thead {
            @apply hidden;
        }

        tbody,
        tr,
        td {
            @apply block w-full;
        }

        tr {
            @apply mb-[14px];
        }

        td[data-heading]::before {
            @apply mr-[10px] font-semibold text-ekl-secondary;

            content: attr(data-heading) ':';
        }
    }
}