/*
 * Comparison Table widget.
 *
 * A tick and a cross say nothing when read out, so each carries a word beside
 * it that is kept out of sight but not out of the page.
 */
.ekl-compare-wrap {
    @apply w-full overflow-x-auto;
}

.ekl-compare {
    @apply w-full border-collapse text-center;

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

    th[scope='row'] {
        @apply text-left text-[15px] font-medium leading-[1.5] text-ekl-secondary;
    }

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

.ekl-compare__corner {
    @apply bg-transparent;
}

.ekl-compare__head {
    @apply relative bg-ekl-neutral-50;
}

.ekl-compare__name {
    @apply block text-[18px] font-bold leading-[1.3] text-ekl-secondary;
}

.ekl-compare__subtitle {
    @apply mt-[4px] block text-[14px] leading-[1.4] text-ekl-neutral-700;
}

.ekl-compare__badge {
    @apply mb-[8px] inline-block rounded-full bg-ekl-brand px-[12px] py-[4px] text-[12px] font-semibold uppercase leading-none tracking-wide text-white;
}

.ekl-compare__button {
    @apply mt-[12px] inline-flex items-center justify-center rounded-[6px] bg-ekl-secondary px-[18px] py-[10px] text-[14px] font-semibold leading-none text-white transition-colors duration-300 hover:bg-ekl-brand hover:text-white;
}

.ekl-compare .is-featured {
    @apply bg-ekl-neutral-50;
}

.ekl-compare__yes,
.ekl-compare__no {
    @apply inline-flex items-center justify-center leading-none;

    i,
    svg {
        @apply block text-[18px];
    }

    svg {
        @apply h-[18px] w-[18px] fill-current;
    }
}

.ekl-compare__yes {
    @apply text-ekl-brand-two;
}

.ekl-compare__no {
    @apply text-[#c9c9c9];
}

/* Said, but not shown: the tick's meaning for anyone not looking at it. */
.ekl-compare__sr {
    @apply absolute h-px w-px overflow-hidden whitespace-nowrap border-0 p-0;

    clip: rect(0 0 0 0);
    clip-path: inset(50%);
}