.chart {
    @apply border p-6 shadow;

    --icon-size: 1.25em;

    a:not(.chart__download) {
        @apply underline underline-offset-2;
    }
}

.chart__title {
    @apply font-semibold text-xl @lg/chart:text-2xl mb-4;
}

.chart__figure {
    figcaption {
        @apply text-base leading-relaxed text-neutral-700 mt-4;
    }
}

.chart__data-table {
    @apply text-base leading-relaxed text-neutral-700;

    summary {
        @apply outline-none cursor-pointer list-none font-medium hover:text-sky-700 focus:text-sky-700 inline-flex items-center gap-x-1;
    }

    table {
        @apply w-full;
    }
}

* + :is(.chart__data-table, .chart__sources, .chart__download, .chart__footnotes) {
    @apply mt-4;
}

.chart__footnotes {
    @apply text-sm leading-relaxed text-neutral-500 -mx-6 bg-neutral-100 -mb-6 p-6;
}

.chart__download {
    @apply inline-flex items-center gap-x-1 bg-sky-600 text-white px-6 py-3 font-semibold rounded-lg text-base leading-none truncate no-underline hover:bg-sky-700;
}

.chart__sources {
    @apply text-base leading-relaxed text-neutral-700;

    > dt {
        @apply font-semibold text-lg mb-2;
    }
}

.ck .chart canvas {
    @apply border border-dashed;
}

.\@container\/chart + .\@container\/chart {
    @apply mt-10;
}