details.transcript > summary::-webkit-details-marker {
    @apply hidden;
}

.transcript__label {
    @apply flex text-sm items-center gap-x-2 cursor-pointer font-semibold outline-sky-500 focus-visible:text-sky-500;

    details:not([open]) & [data-icon="less"] {
        @apply hidden;
    }

    details:is([open]) & [data-icon="more"] {
        @apply hidden;
    }
}

.transcript__body {
    @apply space-y-4 bg-zinc-50 p-3 mt-3;
}

*:not(.hidden) + .transcript {
    @apply mt-[var(--media-transcript-space,theme('space.4'))];
}