@navette-js/panels 0.0.0-stage → 1.0.0-beta.1

package/resources/filament/packages/support/resources/css/utilities.css

@@ -0,0 +1,897 @@
+.fi-color-danger {
+    --color-50: var(--danger-50);
+    --color-100: var(--danger-100);
+    --color-200: var(--danger-200);
+    --color-300: var(--danger-300);
+    --color-400: var(--danger-400);
+    --color-500: var(--danger-500);
+    --color-600: var(--danger-600);
+    --color-700: var(--danger-700);
+    --color-800: var(--danger-800);
+    --color-900: var(--danger-900);
+    --color-950: var(--danger-950);
+}
+
+.fi-color-gray {
+    --color-50: var(--gray-50);
+    --color-100: var(--gray-100);
+    --color-200: var(--gray-200);
+    --color-300: var(--gray-300);
+    --color-400: var(--gray-400);
+    --color-500: var(--gray-500);
+    --color-600: var(--gray-600);
+    --color-700: var(--gray-700);
+    --color-800: var(--gray-800);
+    --color-900: var(--gray-900);
+    --color-950: var(--gray-950);
+}
+
+.fi-color-info {
+    --color-50: var(--info-50);
+    --color-100: var(--info-100);
+    --color-200: var(--info-200);
+    --color-300: var(--info-300);
+    --color-400: var(--info-400);
+    --color-500: var(--info-500);
+    --color-600: var(--info-600);
+    --color-700: var(--info-700);
+    --color-800: var(--info-800);
+    --color-900: var(--info-900);
+    --color-950: var(--info-950);
+}
+
+.fi-color-primary {
+    --color-50: var(--primary-50);
+    --color-100: var(--primary-100);
+    --color-200: var(--primary-200);
+    --color-300: var(--primary-300);
+    --color-400: var(--primary-400);
+    --color-500: var(--primary-500);
+    --color-600: var(--primary-600);
+    --color-700: var(--primary-700);
+    --color-800: var(--primary-800);
+    --color-900: var(--primary-900);
+    --color-950: var(--primary-950);
+}
+
+.fi-color-success {
+    --color-50: var(--success-50);
+    --color-100: var(--success-100);
+    --color-200: var(--success-200);
+    --color-300: var(--success-300);
+    --color-400: var(--success-400);
+    --color-500: var(--success-500);
+    --color-600: var(--success-600);
+    --color-700: var(--success-700);
+    --color-800: var(--success-800);
+    --color-900: var(--success-900);
+    --color-950: var(--success-950);
+}
+
+.fi-color-warning {
+    --color-50: var(--warning-50);
+    --color-100: var(--warning-100);
+    --color-200: var(--warning-200);
+    --color-300: var(--warning-300);
+    --color-400: var(--warning-400);
+    --color-500: var(--warning-500);
+    --color-600: var(--warning-600);
+    --color-700: var(--warning-700);
+    --color-800: var(--warning-800);
+    --color-900: var(--warning-900);
+    --color-950: var(--warning-950);
+}
+
+.fi-bg-color-50 {
+    --bg: var(--color-50);
+}
+
+.fi-bg-color-100 {
+    --bg: var(--color-100);
+}
+
+.fi-bg-color-200 {
+    --bg: var(--color-200);
+}
+
+.fi-bg-color-300 {
+    --bg: var(--color-300);
+}
+
+.fi-bg-color-400 {
+    --bg: var(--color-400);
+}
+
+.fi-bg-color-500 {
+    --bg: var(--color-500);
+}
+
+.fi-bg-color-600 {
+    --bg: var(--color-600);
+}
+
+.fi-bg-color-700 {
+    --bg: var(--color-700);
+}
+
+.fi-bg-color-800 {
+    --bg: var(--color-800);
+}
+
+.fi-bg-color-900 {
+    --bg: var(--color-900);
+}
+
+.fi-bg-color-950 {
+    --bg: var(--color-950);
+}
+
+.hover\:fi-bg-color-50 {
+    --hover-bg: var(--color-50);
+}
+
+.hover\:fi-bg-color-100 {
+    --hover-bg: var(--color-100);
+}
+
+.hover\:fi-bg-color-200 {
+    --hover-bg: var(--color-200);
+}
+
+.hover\:fi-bg-color-300 {
+    --hover-bg: var(--color-300);
+}
+
+.hover\:fi-bg-color-400 {
+    --hover-bg: var(--color-400);
+}
+
+.hover\:fi-bg-color-500 {
+    --hover-bg: var(--color-500);
+}
+
+.hover\:fi-bg-color-600 {
+    --hover-bg: var(--color-600);
+}
+
+.hover\:fi-bg-color-700 {
+    --hover-bg: var(--color-700);
+}
+
+.hover\:fi-bg-color-800 {
+    --hover-bg: var(--color-800);
+}
+
+.hover\:fi-bg-color-900 {
+    --hover-bg: var(--color-900);
+}
+
+.hover\:fi-bg-color-950 {
+    --hover-bg: var(--color-950);
+}
+
+.dark\:fi-bg-color-50 {
+    --dark-bg: var(--color-50);
+}
+
+.dark\:fi-bg-color-100 {
+    --dark-bg: var(--color-100);
+}
+
+.dark\:fi-bg-color-200 {
+    --dark-bg: var(--color-200);
+}
+
+.dark\:fi-bg-color-300 {
+    --dark-bg: var(--color-300);
+}
+
+.dark\:fi-bg-color-400 {
+    --dark-bg: var(--color-400);
+}
+
+.dark\:fi-bg-color-500 {
+    --dark-bg: var(--color-500);
+}
+
+.dark\:fi-bg-color-600 {
+    --dark-bg: var(--color-600);
+}
+
+.dark\:fi-bg-color-700 {
+    --dark-bg: var(--color-700);
+}
+
+.dark\:fi-bg-color-800 {
+    --dark-bg: var(--color-800);
+}
+
+.dark\:fi-bg-color-900 {
+    --dark-bg: var(--color-900);
+}
+
+.dark\:fi-bg-color-950 {
+    --dark-bg: var(--color-950);
+}
+
+.dark\:hover\:fi-bg-color-50 {
+    --dark-hover-bg: var(--color-50);
+}
+
+.dark\:hover\:fi-bg-color-100 {
+    --dark-hover-bg: var(--color-100);
+}
+
+.dark\:hover\:fi-bg-color-200 {
+    --dark-hover-bg: var(--color-200);
+}
+
+.dark\:hover\:fi-bg-color-300 {
+    --dark-hover-bg: var(--color-300);
+}
+
+.dark\:hover\:fi-bg-color-400 {
+    --dark-hover-bg: var(--color-400);
+}
+
+.dark\:hover\:fi-bg-color-500 {
+    --dark-hover-bg: var(--color-500);
+}
+
+.dark\:hover\:fi-bg-color-600 {
+    --dark-hover-bg: var(--color-600);
+}
+
+.dark\:hover\:fi-bg-color-700 {
+    --dark-hover-bg: var(--color-700);
+}
+
+.dark\:hover\:fi-bg-color-800 {
+    --dark-hover-bg: var(--color-800);
+}
+
+.dark\:hover\:fi-bg-color-900 {
+    --dark-hover-bg: var(--color-900);
+}
+
+.dark\:hover\:fi-bg-color-950 {
+    --dark-hover-bg: var(--color-950);
+}
+
+.fi-text-color-0 {
+    --text: oklch(1 0 0);
+}
+
+.fi-text-color-50 {
+    --text: var(--color-50);
+}
+
+.fi-text-color-100 {
+    --text: var(--color-100);
+}
+
+.fi-text-color-200 {
+    --text: var(--color-200);
+}
+
+.fi-text-color-300 {
+    --text: var(--color-300);
+}
+
+.fi-text-color-400 {
+    --text: var(--color-400);
+}
+
+.fi-text-color-500 {
+    --text: var(--color-500);
+}
+
+.fi-text-color-600 {
+    --text: var(--color-600);
+}
+
+.fi-text-color-700 {
+    --text: var(--color-700);
+}
+
+.fi-text-color-800 {
+    --text: var(--color-800);
+}
+
+.fi-text-color-900 {
+    --text: var(--color-900);
+}
+
+.fi-text-color-950 {
+    --text: var(--color-950);
+}
+
+.hover\:fi-text-color-0 {
+    --hover-text: oklch(1 0 0);
+}
+
+.hover\:fi-text-color-50 {
+    --hover-text: var(--color-50);
+}
+
+.hover\:fi-text-color-100 {
+    --hover-text: var(--color-100);
+}
+
+.hover\:fi-text-color-200 {
+    --hover-text: var(--color-200);
+}
+
+.hover\:fi-text-color-300 {
+    --hover-text: var(--color-300);
+}
+
+.hover\:fi-text-color-400 {
+    --hover-text: var(--color-400);
+}
+
+.hover\:fi-text-color-500 {
+    --hover-text: var(--color-500);
+}
+
+.hover\:fi-text-color-600 {
+    --hover-text: var(--color-600);
+}
+
+.hover\:fi-text-color-700 {
+    --hover-text: var(--color-700);
+}
+
+.hover\:fi-text-color-800 {
+    --hover-text: var(--color-800);
+}
+
+.hover\:fi-text-color-900 {
+    --hover-text: var(--color-900);
+}
+
+.hover\:fi-text-color-950 {
+    --hover-text: var(--color-950);
+}
+
+.dark\:fi-text-color-0 {
+    --dark-text: oklch(1 0 0);
+}
+
+.dark\:fi-text-color-50 {
+    --dark-text: var(--color-50);
+}
+
+.dark\:fi-text-color-100 {
+    --dark-text: var(--color-100);
+}
+
+.dark\:fi-text-color-200 {
+    --dark-text: var(--color-200);
+}
+
+.dark\:fi-text-color-300 {
+    --dark-text: var(--color-300);
+}
+
+.dark\:fi-text-color-400 {
+    --dark-text: var(--color-400);
+}
+
+.dark\:fi-text-color-500 {
+    --dark-text: var(--color-500);
+}
+
+.dark\:fi-text-color-600 {
+    --dark-text: var(--color-600);
+}
+
+.dark\:fi-text-color-700 {
+    --dark-text: var(--color-700);
+}
+
+.dark\:fi-text-color-800 {
+    --dark-text: var(--color-800);
+}
+
+.dark\:fi-text-color-900 {
+    --dark-text: var(--color-900);
+}
+
+.dark\:fi-text-color-950 {
+    --dark-text: var(--color-950);
+}
+
+.dark\:hover\:fi-text-color-0 {
+    --dark-hover-text: oklch(1 0 0);
+}
+
+.dark\:hover\:fi-text-color-50 {
+    --dark-hover-text: var(--color-50);
+}
+
+.dark\:hover\:fi-text-color-100 {
+    --dark-hover-text: var(--color-100);
+}
+
+.dark\:hover\:fi-text-color-200 {
+    --dark-hover-text: var(--color-200);
+}
+
+.dark\:hover\:fi-text-color-300 {
+    --dark-hover-text: var(--color-300);
+}
+
+.dark\:hover\:fi-text-color-400 {
+    --dark-hover-text: var(--color-400);
+}
+
+.dark\:hover\:fi-text-color-500 {
+    --dark-hover-text: var(--color-500);
+}
+
+.dark\:hover\:fi-text-color-600 {
+    --dark-hover-text: var(--color-600);
+}
+
+.dark\:hover\:fi-text-color-700 {
+    --dark-hover-text: var(--color-700);
+}
+
+.dark\:hover\:fi-text-color-800 {
+    --dark-hover-text: var(--color-800);
+}
+
+.dark\:hover\:fi-text-color-900 {
+    --dark-hover-text: var(--color-900);
+}
+
+.dark\:hover\:fi-text-color-950 {
+    --dark-hover-text: var(--color-950);
+}
+
+.fi-sr-only {
+    @apply sr-only;
+}
+
+.fi-prose {
+    --prose-color: var(--color-gray-700);
+    --prose-heading-color: var(--color-gray-950);
+    --prose-strong-color: var(--color-gray-950);
+    --prose-link-color: var(--color-gray-950);
+    --prose-code-color: var(--color-gray-950);
+    --prose-marker-color: color-mix(
+        in oklab,
+        var(--color-gray-700) 25%,
+        transparent
+    );
+    --prose-link-underline-color: var(--color-primary-400);
+    --prose-table-border-color: var(--color-gray-300);
+    --prose-tr-border-color: var(--color-gray-200);
+    --prose-hr-border-color: color-mix(
+        in oklab,
+        var(--color-gray-950) 5%,
+        transparent
+    );
+    --prose-blockquote-border-color: var(--color-gray-300);
+    --prose-pre-bg: var(--color-gray-100);
+
+    @variant dark {
+        --prose-color: var(--color-gray-300);
+        --prose-heading-color: var(--color-white);
+        --prose-strong-color: var(--color-white);
+        --prose-link-color: var(--color-white);
+        --prose-code-color: var(--color-white);
+        --prose-marker-color: color-mix(
+            in oklab,
+            var(--color-gray-300) 35%,
+            transparent
+        );
+        --prose-link-underline-color: var(--color-sky-400);
+        --prose-table-border-color: var(--color-gray-600);
+        --prose-tr-border-color: var(--color-gray-700);
+        --prose-hr-border-color: color-mix(
+            in oklab,
+            var(--color-white) 10%,
+            transparent
+        );
+        --prose-blockquote-border-color: var(--color-gray-600);
+        --prose-pre-bg: color-mix(
+            in oklab,
+            var(--color-gray-900) 40%,
+            transparent
+        );
+    }
+
+    color: var(--prose-color);
+    font-size: var(--text-sm);
+    line-height: 1.5;
+
+    img:where(:not(.fi-not-prose, .fi-not-prose *)) {
+        display: inline-block;
+    }
+
+    img + img {
+        margin-top: 0;
+    }
+
+    p img:where(:not(.fi-not-prose, .fi-not-prose *)) {
+        margin-top: 0;
+    }
+
+    *:where(:not(.fi-not-prose, .fi-not-prose *, br))
+        + *:where(:not(.fi-not-prose, .fi-not-prose *, br)) {
+        margin-top: calc(var(--spacing) * 4);
+    }
+
+    p br {
+        margin: 0;
+    }
+
+    h1:where(:not(.fi-not-prose, .fi-not-prose *)) {
+        font-size: var(--text-3xl);
+        line-height: calc(36 / 30);
+        letter-spacing: -0.025em;
+        color: var(--prose-heading-color);
+        font-weight: var(--font-weight-bold);
+    }
+
+    h2:where(:not(.fi-not-prose, .fi-not-prose *)) {
+        font-size: var(--text-2xl);
+        line-height: calc(32 / 24);
+        letter-spacing: -0.025em;
+        color: var(--prose-heading-color);
+        font-weight: var(--font-weight-bold);
+    }
+
+    h3:where(:not(.fi-not-prose, .fi-not-prose *)) {
+        font-size: var(--text-xl);
+        line-height: calc(28 / 20);
+        color: var(--prose-heading-color);
+        font-weight: var(--font-weight-bold);
+    }
+
+    h4:where(:not(.fi-not-prose, .fi-not-prose *)) {
+        font-size: var(--text-lg);
+        line-height: calc(28 / 18);
+        color: var(--prose-heading-color);
+        font-weight: var(--font-weight-bold);
+    }
+
+    h5:where(:not(.fi-not-prose, .fi-not-prose *)) {
+        font-size: var(--text-base);
+        line-height: calc(24 / 16);
+        color: var(--prose-heading-color);
+        font-weight: var(--font-weight-bold);
+    }
+
+    h6:where(:not(.fi-not-prose, .fi-not-prose *)) {
+        font-size: var(--text-sm);
+        line-height: calc(20 / 14);
+        color: var(--prose-heading-color);
+        font-weight: var(--font-weight-bold);
+    }
+
+    :is(h2, h3, h4, h5, h6):where(:not(.fi-not-prose, .fi-not-prose *)) {
+        scroll-margin-top: calc(
+            var(--topbar-height, 4rem) + var(--spacing) * 16
+        );
+        @variant lg {
+            scroll-margin-top: calc(
+                var(--topbar-height, 4rem) + var(--spacing) * 2
+            );
+        }
+    }
+
+    ol:where(:not(.fi-not-prose, .fi-not-prose *)) {
+        padding-inline-start: calc(var(--spacing) * 6);
+        list-style-type: decimal;
+    }
+
+    ul:where(:not(.fi-not-prose, .fi-not-prose *)) {
+        padding-inline-start: calc(var(--spacing) * 6);
+        list-style-type: disc;
+    }
+
+    ol li:where(:not(.fi-not-prose, .fi-not-prose *)),
+    ul li:where(:not(.fi-not-prose, .fi-not-prose *)) {
+        padding-inline-start: calc(var(--spacing) * 3);
+    }
+
+    ol li + li:where(:not(.fi-not-prose, .fi-not-prose *)),
+    ul li + li:where(:not(.fi-not-prose, .fi-not-prose *)),
+    li > ol:where(:not(.fi-not-prose, .fi-not-prose *)),
+    li > ul:where(:not(.fi-not-prose, .fi-not-prose *)),
+    li > * + p:where(:not(.fi-not-prose, .fi-not-prose *)),
+    li > * + blockquote:where(:not(.fi-not-prose, .fi-not-prose *)),
+    li blockquote > p + p:where(:not(.fi-not-prose, .fi-not-prose *)) {
+        margin-top: var(--spacing);
+    }
+
+    li > :is(pre, table, hr):where(:not(.fi-not-prose, .fi-not-prose *)) {
+        margin-block: calc(var(--spacing) * 4);
+
+        &:first-child {
+            margin-top: 0;
+        }
+
+        &:last-child {
+            margin-bottom: 0;
+        }
+    }
+
+    li > hr + h2:where(:not(.fi-not-prose, .fi-not-prose *)) {
+        margin-top: calc(var(--spacing) * 4);
+    }
+
+    ol li:where(:not(.fi-not-prose, .fi-not-prose *))::marker,
+    ul li:where(:not(.fi-not-prose, .fi-not-prose *))::marker {
+        color: var(--prose-marker-color);
+    }
+
+    a:not(:where(:is(h2, h3, h4, h5, h6) *)):where(
+            :not(.fi-not-prose, .fi-not-prose *)
+        ) {
+        color: var(--prose-link-color);
+        font-weight: var(--font-weight-semibold);
+        text-decoration: underline;
+        text-underline-offset: 3px;
+        text-decoration-color: var(--prose-link-underline-color);
+        text-decoration-thickness: 1px;
+        & code {
+            font-weight: var(--font-weight-semibold);
+        }
+    }
+
+    a:hover:where(:not(.fi-not-prose, .fi-not-prose *)) {
+        text-decoration-thickness: 2px;
+    }
+
+    strong:where(:not(.fi-not-prose, .fi-not-prose *)) {
+        color: var(--prose-strong-color);
+        font-weight: var(--font-weight-semibold);
+    }
+
+    code:where(:not(.fi-not-prose, .fi-not-prose *)) {
+        font-variant-ligatures: none;
+        font-family: var(--font-mono);
+        font-weight: var(--font-weight-medium);
+        color: var(--prose-code-color);
+    }
+
+    :where(h2, h3, h4, h5, h6)
+        code:where(:not(.fi-not-prose, .fi-not-prose *)) {
+        font-weight: var(--font-weight-semibold);
+    }
+
+    code:where(:not(.fi-not-prose, .fi-not-prose *))::before,
+    code:where(:not(.fi-not-prose, .fi-not-prose *))::after {
+        display: inline;
+        content: '`';
+    }
+
+    pre:where(:not(.fi-not-prose, .fi-not-prose *)) {
+        margin-top: calc(var(--spacing) * 4);
+        margin-bottom: calc(var(--spacing) * 10);
+        border-radius: var(--radius-lg);
+        padding-top: calc(var(--spacing) * 3);
+        padding-inline-end: calc(var(--spacing) * 4);
+        padding-bottom: calc(var(--spacing) * 3);
+        padding-inline-start: calc(var(--spacing) * 4);
+        background-color: var(--prose-pre-bg);
+    }
+
+    pre code * + *:where(:not(.fi-not-prose, .fi-not-prose *)) {
+        margin-top: 0;
+    }
+
+    pre code:where(:not(.fi-not-prose, .fi-not-prose *))::before,
+    pre code:where(:not(.fi-not-prose, .fi-not-prose *))::after {
+        content: none;
+    }
+
+    pre code:where(:not(.fi-not-prose, .fi-not-prose *)) {
+        font-variant-ligatures: none;
+        font-family: var(--font-mono);
+        font-size: var(--text-sm);
+        line-height: 2;
+    }
+
+    table:where(:not(.fi-not-prose, .fi-not-prose *)) {
+        width: 100%;
+        table-layout: auto;
+        margin-top: 2em;
+        margin-bottom: 2em;
+        font-size: var(--text-sm);
+        line-height: 1.4;
+    }
+
+    thead:where(:not(.fi-not-prose, .fi-not-prose *)) {
+        border-bottom-width: 1px;
+        border-bottom-color: var(--prose-table-border-color);
+    }
+
+    thead th:where(:not(.fi-not-prose, .fi-not-prose *)) {
+        color: var(--prose-heading-color);
+        font-weight: 600;
+        vertical-align: bottom;
+        padding-inline-end: 0.6em;
+        padding-bottom: 0.8em;
+        padding-inline-start: 0.6em;
+    }
+
+    thead th:first-child:where(:not(.fi-not-prose, .fi-not-prose *)) {
+        padding-inline-start: 0;
+    }
+
+    thead th:last-child:where(:not(.fi-not-prose, .fi-not-prose *)) {
+        padding-inline-end: 0;
+    }
+
+    tbody tr:where(:not(.fi-not-prose, .fi-not-prose *)) {
+        border-bottom-width: 1px;
+        border-bottom-color: var(--prose-tr-border-color);
+    }
+
+    tbody tr:last-child:where(:not(.fi-not-prose, .fi-not-prose *)) {
+        border-bottom-width: 0;
+    }
+
+    tbody td:where(:not(.fi-not-prose, .fi-not-prose *)) {
+        vertical-align: baseline;
+    }
+
+    tfoot:where(:not(.fi-not-prose, .fi-not-prose *)) {
+        border-top-width: 1px;
+        border-top-color: var(--prose-table-border-color);
+    }
+
+    tfoot td:where(:not(.fi-not-prose, .fi-not-prose *)) {
+        vertical-align: top;
+    }
+
+    tbody th:where(:not(.fi-not-prose, .fi-not-prose *)),
+    tbody td:where(:not(.fi-not-prose, .fi-not-prose *)),
+    tfoot td:where(:not(.fi-not-prose, .fi-not-prose *)) {
+        padding-top: 0.8em;
+        padding-inline-end: 0.6em;
+        padding-bottom: 0.8em;
+        padding-inline-start: 0.6em;
+    }
+
+    tbody th:first-child:where(:not(.fi-not-prose, .fi-not-prose *)),
+    tbody td:first-child:where(:not(.fi-not-prose, .fi-not-prose *)),
+    tfoot td:first-child:where(:not(.fi-not-prose, .fi-not-prose *)) {
+        padding-inline-start: 0;
+    }
+
+    tbody th:last-child:where(:not(.fi-not-prose, .fi-not-prose *)),
+    tbody td:last-child:where(:not(.fi-not-prose, .fi-not-prose *)),
+    tfoot td:last-child:where(:not(.fi-not-prose, .fi-not-prose *)) {
+        padding-inline-end: 0;
+    }
+
+    th:where(:not(.fi-not-prose, .fi-not-prose *)),
+    td:where(:not(.fi-not-prose, .fi-not-prose *)) {
+        text-align: start;
+    }
+
+    td code:where(:not(.fi-not-prose, .fi-not-prose *)) {
+        font-size: 0.8125rem;
+    }
+
+    hr:where(:not(.fi-not-prose, .fi-not-prose *)) {
+        border-color: var(--prose-hr-border-color);
+        margin-block: --spacing(8);
+        & + h2 {
+            margin-top: --spacing(8);
+        }
+    }
+
+    blockquote {
+        font-style: italic;
+        border-inline-start-width: 0.25rem;
+        border-inline-start-color: var(--prose-blockquote-border-color);
+        padding-inline-start: calc(var(--spacing) * 4);
+    }
+
+    blockquote p:first-of-type::before {
+        content: open-quote;
+    }
+
+    blockquote p:last-of-type::after {
+        content: close-quote;
+    }
+
+    figure:where(:not(.fi-not-prose, .fi-not-prose *)) {
+        figcaption:where(:not(.fi-not-prose, .fi-not-prose *)) {
+            margin-top: calc(var(--spacing) * 3);
+            text-align: center;
+            font-size: var(--text-sm);
+            line-height: var(--text-sm--line-height);
+            font-style: italic;
+            color: color-mix(in oklab, var(--prose-color) 75%, transparent);
+        }
+    }
+
+    :first-child:where(:not(.fi-not-prose, .fi-not-prose *)) {
+        margin-top: 0;
+    }
+
+    :last-child:where(:not(.fi-not-prose, .fi-not-prose *)) {
+        margin-bottom: 0;
+    }
+
+    & .color:where(:not(.fi-not-prose, .fi-not-prose *)) {
+        @apply text-(--color) dark:text-(--dark-color);
+    }
+
+    & .lead:where(:not(.fi-not-prose, .fi-not-prose *)) {
+        font-size: var(--text-base);
+    }
+
+    & span[data-type='mention']:where(:not(.fi-not-prose, .fi-not-prose *)),
+    & a[data-type='mention']:where(:not(.fi-not-prose, .fi-not-prose *)) {
+        display: inline-block;
+        margin-block: 0;
+        font-weight: var(--font-weight-semibold);
+        white-space: nowrap;
+    }
+
+    & .grid-layout:where(:not(.fi-not-prose, .fi-not-prose *)) {
+        @apply grid grid-cols-1 gap-4;
+
+        &[data-from-breakpoint='default'] {
+            @apply grid-cols-(--cols);
+
+            & > .grid-layout-col {
+                @apply col-(--col-span);
+            }
+        }
+
+        &[data-from-breakpoint='sm'] {
+            @apply sm:grid-cols-(--cols);
+
+            & > .grid-layout-col {
+                @apply sm:col-(--col-span);
+            }
+        }
+
+        &[data-from-breakpoint='md'] {
+            @apply md:grid-cols-(--cols);
+
+            & > .grid-layout-col {
+                @apply md:col-(--col-span);
+            }
+        }
+
+        &[data-from-breakpoint='lg'] {
+            @apply lg:grid-cols-(--cols);
+
+            & > .grid-layout-col {
+                @apply lg:col-(--col-span);
+            }
+        }
+
+        &[data-from-breakpoint='xl'] {
+            @apply xl:grid-cols-(--cols);
+
+            & > .grid-layout-col {
+                @apply xl:col-(--col-span);
+            }
+        }
+
+        &[data-from-breakpoint='2xl'] {
+            @apply 2xl:grid-cols-(--cols);
+
+            & > .grid-layout-col {
+                @apply 2xl:col-(--col-span);
+            }
+        }
+
+        & > .grid-layout-col {
+            margin-top: 0;
+            min-width: 0;
+        }
+    }
+}