.webform-help {
    @apply align-baseline;

    > button {
        @apply flex items-center text-base outline-none hover:text-sky-600 focus-visible:text-sky-600;
    }

    dialog {
        @apply shadow-lg border border-neutral-200 rounded p-2 text-sm left-1/2 transform -translate-x-1/2;

        min-width: clamp(15ch, 25ch, 90vw);

        strong {
            @apply block mb-1;
        }

        &:has(.webform-help__close) {
            @apply pr-10;
        }
    }
}

.webform-help__close {
    @apply absolute top-2 right-2 text-base outline-none hover:text-sky-600 focus-visible:text-sky-600;
}