@layer components {
    /* AsciiDoc content */
    .note-leather p a {
        @apply underline hover:text-primary-500 dark:hover:text-primary-400;
    }

    .note-leather section p {
        @apply w-full;
    }

    .note-leather section p table {
        @apply w-full table-fixed space-x-2 space-y-2;
    }

    .note-leather section p table td {
        @apply p-2;
    }

    .note-leather section p table td .content:has(> .imageblock) {
        @apply flex flex-col items-center;
    }

    .note-leather .imageblock {
        @apply flex flex-col space-y-2;
    }

    .note-leather .imageblock .content {
        @apply flex justify-center;
    }
    .note-leather .imageblock .title {
        @apply text-center;
    }

    .note-leather .imageblock.left .content {
        @apply justify-start;
    }
    .note-leather .imageblock.left .title {
        @apply text-left;
    }

    .note-leather .imageblock.right .content {
        @apply justify-end;
    }
    .note-leather .imageblock.right .title {
        @apply text-right;
    }

    .note-leather section p table td .literalblock {
        @apply my-2 p-2 border rounded border-gray-400 dark:border-gray-600;
    }

    .note-leather .literalblock pre {
        @apply p-3 text-wrap break-words;
    }

    .note-leather .listingblock pre {
        @apply overflow-x-auto;
    }

    /* lists */
    .note-leather .ulist ul {
        @apply space-y-1 list-disc list-inside;
    }

    .note-leather .olist ol {
        @apply space-y-1 list-inside;
    }

    .note-leather ol.arabic {
        @apply list-decimal;
    }

    .note-leather ol.loweralpha {
        @apply list-lower-alpha;
    }

    .note-leather ol.upperalpha {
        @apply list-upper-alpha;
    }

    .note-leather li ol,
    .note-leather li ul {
        @apply ps-5 my-2;
    }

    .audioblock .title,
    .imageblock .title,
    .literalblock .title,
    .tableblock .title,
    .videoblock .title,
    .olist .title,
    .ulist .title {
        @apply my-2;
    }

    .note-leather li p {
        @apply inline;
    }

    /* blockquote; prose and poetry quotes */
    .note-leather .quoteblock,
    .note-leather .verseblock {
        @apply p-4 my-4 border-s-4 rounded border-primary-300 bg-primary-50 dark:border-primary-500 dark:bg-primary-700;
    }

    .note-leather .verseblock pre.content {
        @apply text-base font-sans;
    }

    .note-leather .attribution {
        @apply mt-3 italic clear-both;
    }

    .note-leather cite {
        @apply text-sm;
    }

    /* admonition */
    .note-leather .admonitionblock .title {
        @apply font-semibold;
    }

    .note-leather .admonitionblock table {
        @apply w-full border-collapse;
    }

    .note-leather .admonitionblock tr {
        @apply flex flex-col;
    }

    .note-leather .admonitionblock {
        @apply rounded overflow-hidden border;
    }

    .note-leather .admonitionblock .icon,
    .note-leather .admonitionblock .content {
        @apply p-4;
    }

    .note-leather .admonitionblock .content {
        @apply pt-0;
    }

    .note-leather .admonitionblock.tip {
        @apply rounded overflow-hidden border border-success-100 dark:border-success-800;
    }

    .note-leather .admonitionblock.tip .icon,
    .note-leather .admonitionblock.tip .content {
        @apply bg-success-100 dark:bg-success-800;
    }

    .note-leather .admonitionblock.note {
        @apply rounded overflow-hidden border border-info-100 dark:border-info-700;
    }

    .note-leather .admonitionblock.note .icon,
    .note-leather .admonitionblock.note .content {
        @apply bg-info-100 dark:bg-info-800;
    }

    .note-leather .admonitionblock.important {
        @apply rounded overflow-hidden border border-primary-200 dark:border-primary-700;
    }

    .note-leather .admonitionblock.important .icon,
    .note-leather .admonitionblock.important .content {
        @apply bg-primary-200 dark:bg-primary-700;
    }

    .note-leather .admonitionblock.caution {
        @apply rounded overflow-hidden border border-warning-200 dark:border-warning-700;
    }

    .note-leather .admonitionblock.caution .icon,
    .note-leather .admonitionblock.caution .content {
        @apply bg-warning-200 dark:bg-warning-700;
    }

    .note-leather .admonitionblock.warning {
        @apply rounded overflow-hidden border border-danger-200 dark:border-danger-800;
    }

    .note-leather .admonitionblock.warning .icon,
    .note-leather .admonitionblock.warning .content {
        @apply bg-danger-200 dark:bg-danger-800;
    }

    /* listingblock, literalblock */
    .note-leather .listingblock,
    .note-leather .literalblock {
        @apply p-4 rounded  bg-highlight dark:bg-primary-700;
    }

    .note-leather .sidebarblock .title,
    .note-leather .listingblock .title,
    .note-leather .literalblock .title {
        @apply font-semibold mb-1;
    }

    /* sidebar */
    .note-leather .sidebarblock {
        @apply p-4 rounded bg-info-100 dark:bg-info-800;
    }

    /* video */
    .videoblock .content {
        @apply w-full aspect-video;
    }

    .videoblock .content iframe,
    .videoblock .content video {
        @apply w-full h-full;
    }
}