@ebrains/components 3.1.0 → 3.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/color-primary-palette_6.cjs.entry.js +14 -14
- package/dist/cjs/components-section.cjs.entry.js +1 -1
- package/dist/cjs/components.cjs.js +1 -1
- package/dist/cjs/correct-use-of-colors.cjs.entry.js +1 -1
- package/dist/cjs/docs-palettes.cjs.entry.js +1 -1
- package/dist/cjs/docs-tokens.cjs.entry.js +1 -1
- package/dist/cjs/eds-accordion_53.cjs.entry.js +367 -248
- package/dist/cjs/eds-app-root.cjs.entry.js +1 -1
- package/dist/cjs/eds-cookies-preference.cjs.entry.js +1 -1
- package/dist/cjs/eds-frame.cjs.entry.js +1 -1
- package/dist/cjs/eds-gitlab-contributors.cjs.entry.js +26 -30
- package/dist/cjs/eds-icon-bluesky.cjs.entry.js +1 -1
- package/dist/cjs/eds-icon-eu.cjs.entry.js +1 -1
- package/dist/cjs/eds-icon-facebook.cjs.entry.js +1 -1
- package/dist/cjs/eds-icon-gitlab.cjs.entry.js +1 -1
- package/dist/cjs/eds-icon-linkedin.cjs.entry.js +1 -1
- package/dist/cjs/eds-icon-mastodon.cjs.entry.js +1 -1
- package/dist/cjs/eds-icon-twitter.cjs.entry.js +1 -1
- package/dist/cjs/eds-icon-youtube.cjs.entry.js +1 -1
- package/dist/cjs/eds-input-search.cjs.entry.js +1 -1
- package/dist/cjs/eds-modal.cjs.entry.js +18 -9
- package/dist/cjs/eds-pie.cjs.entry.js +2 -2
- package/dist/cjs/eds-section-core_2.cjs.entry.js +3 -3
- package/dist/cjs/eds-timeline.cjs.entry.js +1 -1
- package/dist/cjs/eds-toast-manager.cjs.entry.js +1 -1
- package/dist/cjs/eds-trl-badge.cjs.entry.js +14 -11
- package/dist/cjs/incorrect-use-of-colors.cjs.entry.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/logo-space.cjs.entry.js +58 -1
- package/dist/cjs/logo-variations-horizontal_2.cjs.entry.js +2 -2
- package/dist/cjs/logo-variations-tabs.cjs.entry.js +1 -1
- package/dist/cjs/logo-wrong-usage.cjs.entry.js +1 -1
- package/dist/cjs/svg-repository.cjs.entry.js +1 -1
- package/dist/cjs/token-list_3.cjs.entry.js +3 -3
- package/dist/cjs/token-ratios.cjs.entry.js +1 -1
- package/dist/cjs/token-spacing.cjs.entry.js +1 -1
- package/dist/cjs/token-typography.cjs.entry.js +8 -2
- package/dist/collection/components/eds-accordion/eds-accordion.js +2 -5
- package/dist/collection/components/eds-alert/eds-alert.css +14 -0
- package/dist/collection/components/eds-alert/eds-alert.js +2 -1
- package/dist/collection/components/eds-button/eds-button.js +6 -10
- package/dist/collection/components/eds-button/eds-button.stories.js +4 -1
- package/dist/collection/components/eds-cards/eds-card-app/eds-card-app.js +2 -5
- package/dist/collection/components/eds-cards/eds-card-composer/eds-card-title/eds-card-title.js +1 -1
- package/dist/collection/components/eds-cards/eds-card-cta/eds-card-cta.js +2 -5
- package/dist/collection/components/eds-cards/eds-card-cta/eds-card-cta.stories.js +4 -1
- package/dist/collection/components/eds-cards/eds-card-feature/eds-card-feature.js +2 -5
- package/dist/collection/components/eds-cards/eds-card-generic/eds-card-generic.js +2 -4
- package/dist/collection/components/eds-cards/eds-card-hero/eds-card-hero.js +6 -7
- package/dist/collection/components/eds-cards/eds-card-stat/eds-card-stat.js +6 -7
- package/dist/collection/components/eds-charts/eds-pie/eds-pie.js +2 -2
- package/dist/collection/components/eds-code-block/eds-code-block.css +72 -106
- package/dist/collection/components/eds-code-block/eds-code-block.js +1 -1
- package/dist/collection/components/eds-footer/eds-footer.js +23 -18
- package/dist/collection/components/eds-footer/eds-footer.stories.js +3 -4
- package/dist/collection/components/eds-form/eds-form.css +456 -0
- package/dist/collection/components/eds-form/eds-form.js +218 -14
- package/dist/collection/components/eds-form/eds-form.stories.js +110 -3
- package/dist/collection/components/eds-frame/eds-frame.js +1 -1
- package/dist/collection/components/eds-header/eds-header.js +1 -1
- package/dist/collection/components/eds-icons/eds-icon-eu/eds-icon-eu.js +1 -1
- package/dist/collection/components/eds-icons/eds-icon-gitlab/eds-icon-gitlab.js +1 -1
- package/dist/collection/components/eds-icons/social/eds-icon-bluesky/eds-icon-bluesky.js +1 -1
- package/dist/collection/components/eds-icons/social/eds-icon-facebook/eds-icon-facebook.js +1 -1
- package/dist/collection/components/eds-icons/social/eds-icon-linkedin/eds-icon-linkedin.js +1 -1
- package/dist/collection/components/eds-icons/social/eds-icon-mastodon/eds-icon-mastodon.js +1 -1
- package/dist/collection/components/eds-icons/social/eds-icon-twitter/eds-icon-twitter.js +1 -1
- package/dist/collection/components/eds-icons/social/eds-icon-youtube/eds-icon-youtube.js +1 -1
- package/dist/collection/components/eds-img/eds-img.js +2 -2
- package/dist/collection/components/eds-input-dropzone/eds-input-dropzone.js +7 -4
- package/dist/collection/components/eds-input-elements/eds-input/eds-input.js +2 -2
- package/dist/collection/components/eds-input-elements/eds-input-footer/eds-input-footer.css +10 -0
- package/dist/collection/components/eds-input-elements/eds-input-footer/eds-input-footer.js +1 -1
- package/dist/collection/components/eds-input-elements/eds-input-label/eds-input-label.css +17 -5
- package/dist/collection/components/eds-input-elements/eds-input-label/eds-input-label.js +1 -1
- package/dist/collection/components/eds-input-elements/eds-input-range/eds-input-range.js +15 -5
- package/dist/collection/components/eds-input-elements/eds-input-search/eds-input-search.js +1 -1
- package/dist/collection/components/eds-input-elements/eds-input-select/eds-input-select.js +6 -2
- package/dist/collection/components/eds-input-field/eds-input-field.css +219 -0
- package/dist/collection/components/eds-input-field/eds-input-field.js +7 -2
- package/dist/collection/components/eds-input-field/eds-input-field.stories.js +35 -7
- package/dist/collection/components/eds-input-file/eds-input-file.js +5 -3
- package/dist/collection/components/eds-link/eds-link.js +4 -8
- package/dist/collection/components/eds-logo/eds-logo.js +13 -66
- package/dist/collection/components/eds-logo/eds-logo.stories.js +36 -17
- package/dist/collection/components/eds-modal/eds-modal.js +18 -9
- package/dist/collection/components/eds-modal/eds-modal.stories.js +3 -1
- package/dist/collection/components/eds-nps/eds-nps.js +2 -2
- package/dist/collection/components/eds-pagination/eds-pagination.js +1 -1
- package/dist/collection/components/eds-progress-bar/eds-progress-bar.js +1 -8
- package/dist/collection/components/eds-rating/eds-rating.js +1 -1
- package/dist/collection/components/eds-section/eds-section-core/eds-section-core.js +1 -1
- package/dist/collection/components/eds-section/eds-section-heading/eds-section-heading.js +2 -2
- package/dist/collection/components/eds-social-networks/eds-social-networks.js +1 -1
- package/dist/collection/components/eds-spinner/eds-spinner.js +1 -1
- package/dist/collection/components/eds-steps/eds-steps.css +56 -25
- package/dist/collection/components/eds-steps/eds-steps.js +27 -7
- package/dist/collection/components/eds-steps-v2/eds-steps-v2.css +93 -28
- package/dist/collection/components/eds-steps-v2/eds-steps-v2.js +57 -10
- package/dist/collection/components/eds-steps-v2/eds-steps-v2.stories.js +80 -17
- package/dist/collection/components/eds-switch/eds-switch.css +26 -3
- package/dist/collection/components/eds-switch/eds-switch.js +10 -7
- package/dist/collection/components/eds-switch/eds-switch.stories.js +20 -1
- package/dist/collection/components/eds-table/eds-table.js +1 -3
- package/dist/collection/components/eds-table/eds-table.stories.js +2 -6
- package/dist/collection/components/eds-tabs/eds-tabs.js +4 -11
- package/dist/collection/components/eds-tabs/eds-tabs.stories.js +2 -2
- package/dist/collection/components/eds-tag/eds-tag.js +1 -1
- package/dist/collection/components/eds-timeline/eds-timeline.js +1 -1
- package/dist/collection/components/eds-toast/eds-toast.css +146 -0
- package/dist/collection/components/eds-toast/eds-toast.js +106 -4
- package/dist/collection/components/eds-toast/eds-toast.stories.js +102 -5
- package/dist/collection/components/eds-toast-manager/eds-toast-manager.js +1 -1
- package/dist/collection/components/eds-tooltip/eds-tooltip.js +1 -1
- package/dist/collection/components/eds-tooltip/eds-tooltip.stories.js +7 -1
- package/dist/collection/components/eds-user/eds-user.js +2 -5
- package/dist/collection/components/eds-user/eds-user.stories.js +8 -11
- package/dist/collection/eds-docs-ui/colors/color-palette/primary.js +1 -1
- package/dist/collection/eds-docs-ui/colors/color-palette/secondary.js +1 -1
- package/dist/collection/eds-docs-ui/colors/color-palette/support.js +1 -1
- package/dist/collection/eds-docs-ui/colors/gradient-palette/primary.js +1 -1
- package/dist/collection/eds-docs-ui/colors/gradient-palette/secondary.js +7 -7
- package/dist/collection/eds-docs-ui/colors/gradient-palette/support.js +3 -3
- package/dist/collection/eds-docs-ui/colors/use-of-colors/correct-use-of-colors.js +1 -1
- package/dist/collection/eds-docs-ui/colors/use-of-colors/incorrect-use-of-colors.js +1 -1
- package/dist/collection/eds-docs-ui/components-section/components-section.js +1 -1
- package/dist/collection/eds-docs-ui/design-tokens/docs-tokens/docs-tokens.js +1 -1
- package/dist/collection/eds-docs-ui/design-tokens/token-list/token-list.js +1 -1
- package/dist/collection/eds-docs-ui/design-tokens/token-radii/token-radii.js +1 -1
- package/dist/collection/eds-docs-ui/design-tokens/token-ratios/token-ratios.js +1 -1
- package/dist/collection/eds-docs-ui/design-tokens/token-shadows/token-shadows.js +1 -1
- package/dist/collection/eds-docs-ui/design-tokens/token-spacing/token-spacing.js +1 -1
- package/dist/collection/eds-docs-ui/design-tokens/token-typography/token-typography.js +8 -2
- package/dist/collection/eds-docs-ui/docs-palettes/docs-palettes.js +1 -1
- package/dist/collection/eds-docs-ui/logo/logo-space/logo-space.js +58 -1
- package/dist/collection/eds-docs-ui/logo/logo-variations/horizontal/logo-variations-horizontal.js +1 -1
- package/dist/collection/eds-docs-ui/logo/logo-variations/vertical/logo-variations-vertical.js +1 -1
- package/dist/collection/eds-docs-ui/logo/logo-variations-tabs/logo-variations.js +1 -1
- package/dist/collection/eds-docs-ui/logo/logo-wrong-usage/logo-wrong-usage.js +1 -1
- package/dist/collection/eds-docs-ui/svg-repository/svg-repository.js +1 -1
- package/dist/collection/shared-ui/eds-cookies-preference/eds-cookies-preference.js +1 -1
- package/dist/collection/shared-ui/eds-gitlab-contributors/eds-gitlab-contributors.js +26 -30
- package/dist/collection/shared-ui/eds-global-search/eds-global-search.js +18 -12
- package/dist/collection/shared-ui/eds-kg-learning-resources/eds-kg-learning-resources.js +15 -19
- package/dist/collection/shared-ui/eds-kg-web-services-select/eds-kg-web-services-select.js +2 -2
- package/dist/collection/shared-ui/eds-kg-web-services-select/eds-kg-web-services-select.stories.js +1 -3
- package/dist/collection/shared-ui/eds-matomo-notice/eds-matomo-notice.stories.js +1 -1
- package/dist/collection/shared-ui/eds-search-select/eds-search-select.css +11 -1
- package/dist/collection/shared-ui/eds-search-select/eds-search-select.js +37 -16
- package/dist/collection/shared-ui/eds-search-select/eds-search-select.stories.js +10 -5
- package/dist/collection/shared-ui/eds-trl-badge/eds-trl-badge.js +14 -11
- package/dist/collection/shared-ui/eds-trl-badge/eds-trl-badge.stories.js +4 -1
- package/dist/collection/shared-ui/examples/eds-app-root/eds-app-root.js +1 -1
- package/dist/collection/utils/eds-form/safeFormat.js +1 -5
- package/dist/components/components-section.js +1 -1
- package/dist/components/components.css +9 -7
- package/dist/components/components.esm.js +1 -1
- package/dist/components/correct-use-of-colors.js +1 -1
- package/dist/components/docs-palettes.js +1 -1
- package/dist/components/docs-tokens.js +1 -1
- package/dist/components/eds-accordion2.js +2 -5
- package/dist/components/eds-alert2.js +3 -2
- package/dist/components/eds-app-root.js +1 -1
- package/dist/components/eds-button2.js +5 -9
- package/dist/components/eds-card-app.js +2 -5
- package/dist/components/eds-card-cta.js +2 -5
- package/dist/components/eds-card-feature.js +2 -5
- package/dist/components/eds-card-generic2.js +2 -4
- package/dist/components/eds-card-hero.js +6 -7
- package/dist/components/eds-card-stat.js +6 -7
- package/dist/components/eds-card-title2.js +1 -1
- package/dist/components/eds-code-block2.js +2 -2
- package/dist/components/eds-cookies-preference.js +1 -1
- package/dist/components/eds-footer2.js +23 -18
- package/dist/components/eds-form.js +101 -38
- package/dist/components/eds-frame.js +1 -1
- package/dist/components/eds-gitlab-contributors.js +26 -30
- package/dist/components/eds-global-search.js +18 -12
- package/dist/components/eds-header.js +1 -1
- package/dist/components/eds-icon-bluesky.js +1 -1
- package/dist/components/eds-icon-eu.js +1 -1
- package/dist/components/eds-icon-facebook.js +1 -1
- package/dist/components/eds-icon-gitlab.js +1 -1
- package/dist/components/eds-icon-linkedin.js +1 -1
- package/dist/components/eds-icon-mastodon.js +1 -1
- package/dist/components/eds-icon-twitter.js +1 -1
- package/dist/components/eds-icon-youtube.js +1 -1
- package/dist/components/eds-img2.js +2 -2
- package/dist/components/eds-input-dropzone2.js +7 -4
- package/dist/components/eds-input-field2.js +8 -3
- package/dist/components/eds-input-file2.js +5 -3
- package/dist/components/eds-input-footer2.js +3 -7
- package/dist/components/eds-input-label2.js +2 -2
- package/dist/components/eds-input-range2.js +15 -5
- package/dist/components/eds-input-search.js +1 -1
- package/dist/components/eds-input-select2.js +6 -2
- package/dist/components/eds-input2.js +2 -2
- package/dist/components/eds-kg-learning-resources.js +15 -19
- package/dist/components/eds-kg-web-services-select2.js +2 -2
- package/dist/components/eds-link2.js +3 -7
- package/dist/components/eds-logo2.js +4 -22
- package/dist/components/eds-modal.js +18 -9
- package/dist/components/eds-nps2.js +2 -2
- package/dist/components/eds-pagination2.js +1 -1
- package/dist/components/eds-pie.js +2 -2
- package/dist/components/eds-progress-bar.js +1 -8
- package/dist/components/eds-rating2.js +1 -1
- package/dist/components/eds-search-select2.js +38 -17
- package/dist/components/eds-section-core2.js +1 -1
- package/dist/components/eds-section-heading2.js +2 -2
- package/dist/components/eds-social-networks2.js +1 -1
- package/dist/components/eds-spinner2.js +1 -1
- package/dist/components/eds-steps-v2.js +41 -11
- package/dist/components/eds-steps2.js +28 -8
- package/dist/components/eds-switch2.js +8 -5
- package/dist/components/eds-table2.js +1 -3
- package/dist/components/eds-tabs.js +4 -11
- package/dist/components/eds-tag2.js +1 -1
- package/dist/components/eds-timeline.js +1 -1
- package/dist/components/eds-toast-manager.js +1 -1
- package/dist/components/eds-toast2.js +39 -3
- package/dist/components/eds-tooltip2.js +1 -1
- package/dist/components/eds-trl-badge.js +14 -11
- package/dist/components/eds-user.js +1 -4
- package/dist/components/incorrect-use-of-colors.js +1 -1
- package/dist/components/logo-space.js +58 -1
- package/dist/components/logo-variations-horizontal2.js +1 -1
- package/dist/components/logo-variations-tabs.js +1 -1
- package/dist/components/logo-variations-vertical2.js +1 -1
- package/dist/components/logo-wrong-usage.js +1 -1
- package/dist/components/{p-d59d6fda.entry.js → p-05e96609.entry.js} +1 -1
- package/dist/components/p-0d778d10.entry.js +1 -0
- package/dist/components/{p-62f53e7a.entry.js → p-114f6d54.entry.js} +1 -1
- package/dist/components/p-1534204d.entry.js +1 -0
- package/dist/components/p-337d4ee3.entry.js +9 -0
- package/dist/components/p-340bc935.entry.js +1 -0
- package/dist/components/p-39dbb964.entry.js +1 -0
- package/dist/components/{p-25729ade.entry.js → p-3f66bc26.entry.js} +1 -1
- package/dist/components/p-43f9e64f.entry.js +1 -0
- package/dist/components/p-46cc6c1a.entry.js +1 -0
- package/dist/components/{p-e9e6ec19.entry.js → p-4b8a7979.entry.js} +1 -1
- package/dist/components/{p-bdcb71e1.entry.js → p-6b94b2ec.entry.js} +1 -1
- package/dist/components/p-6d965fef.entry.js +1 -0
- package/dist/components/{p-62580004.entry.js → p-6e370182.entry.js} +1 -1
- package/dist/components/p-6ffe581c.entry.js +1 -0
- package/dist/components/{p-e027bc90.entry.js → p-726637b1.entry.js} +1 -1
- package/dist/components/{p-8a483358.entry.js → p-86ccc09f.entry.js} +1 -1
- package/dist/components/{p-e71a4f29.entry.js → p-8755a21b.entry.js} +1 -1
- package/dist/components/{p-e4df206e.entry.js → p-8ab461e2.entry.js} +1 -1
- package/dist/components/p-8cb162b8.entry.js +1 -0
- package/dist/components/p-8cdbc280.entry.js +1 -0
- package/dist/components/{p-42791331.entry.js → p-8e034c4e.entry.js} +1 -1
- package/dist/components/p-9f649fa3.entry.js +1 -0
- package/dist/components/{p-f9a9fa34.entry.js → p-a26dad9b.entry.js} +1 -1
- package/dist/components/p-a2d6a9ca.entry.js +1 -0
- package/dist/components/p-afabe1be.entry.js +1 -0
- package/dist/components/{p-1fbcc480.entry.js → p-b1519098.entry.js} +1 -1
- package/dist/components/{p-12acc48d.entry.js → p-b4023b45.entry.js} +1 -1
- package/dist/components/p-c53b3563.entry.js +1 -0
- package/dist/components/p-c7d612d1.entry.js +1 -0
- package/dist/components/p-dc9aef22.entry.js +1 -0
- package/dist/components/{p-e339d0b5.entry.js → p-f66a7cf9.entry.js} +1 -1
- package/dist/components/{p-80a32e20.entry.js → p-f97f62f2.entry.js} +1 -1
- package/dist/components/primary.js +1 -1
- package/dist/components/primary2.js +1 -1
- package/dist/components/secondary.js +1 -1
- package/dist/components/secondary2.js +7 -7
- package/dist/components/support.js +1 -1
- package/dist/components/support2.js +3 -3
- package/dist/components/svg-repository.js +1 -1
- package/dist/components/token-list2.js +1 -1
- package/dist/components/token-radii2.js +1 -1
- package/dist/components/token-ratios.js +1 -1
- package/dist/components/token-shadows2.js +1 -1
- package/dist/components/token-spacing.js +1 -1
- package/dist/components/token-typography.js +8 -2
- package/dist/esm/color-primary-palette_6.entry.js +14 -14
- package/dist/esm/components-section.entry.js +1 -1
- package/dist/esm/components.js +1 -1
- package/dist/esm/correct-use-of-colors.entry.js +1 -1
- package/dist/esm/docs-palettes.entry.js +1 -1
- package/dist/esm/docs-tokens.entry.js +1 -1
- package/dist/esm/eds-accordion_53.entry.js +367 -248
- package/dist/esm/eds-app-root.entry.js +1 -1
- package/dist/esm/eds-cookies-preference.entry.js +1 -1
- package/dist/esm/eds-frame.entry.js +1 -1
- package/dist/esm/eds-gitlab-contributors.entry.js +26 -30
- package/dist/esm/eds-icon-bluesky.entry.js +1 -1
- package/dist/esm/eds-icon-eu.entry.js +1 -1
- package/dist/esm/eds-icon-facebook.entry.js +1 -1
- package/dist/esm/eds-icon-gitlab.entry.js +1 -1
- package/dist/esm/eds-icon-linkedin.entry.js +1 -1
- package/dist/esm/eds-icon-mastodon.entry.js +1 -1
- package/dist/esm/eds-icon-twitter.entry.js +1 -1
- package/dist/esm/eds-icon-youtube.entry.js +1 -1
- package/dist/esm/eds-input-search.entry.js +1 -1
- package/dist/esm/eds-modal.entry.js +18 -9
- package/dist/esm/eds-pie.entry.js +2 -2
- package/dist/esm/eds-section-core_2.entry.js +3 -3
- package/dist/esm/eds-timeline.entry.js +1 -1
- package/dist/esm/eds-toast-manager.entry.js +1 -1
- package/dist/esm/eds-trl-badge.entry.js +14 -11
- package/dist/esm/incorrect-use-of-colors.entry.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/logo-space.entry.js +58 -1
- package/dist/esm/logo-variations-horizontal_2.entry.js +2 -2
- package/dist/esm/logo-variations-tabs.entry.js +1 -1
- package/dist/esm/logo-wrong-usage.entry.js +1 -1
- package/dist/esm/svg-repository.entry.js +1 -1
- package/dist/esm/token-list_3.entry.js +3 -3
- package/dist/esm/token-ratios.entry.js +1 -1
- package/dist/esm/token-spacing.entry.js +1 -1
- package/dist/esm/token-typography.entry.js +8 -2
- package/dist/hydrate/index.js +572 -368
- package/dist/hydrate/index.mjs +572 -368
- package/dist/types/components/eds-form/eds-form.d.ts +56 -0
- package/dist/types/components/eds-form/eds-form.stories.d.ts +63 -0
- package/dist/types/components/eds-logo/eds-logo.d.ts +11 -28
- package/dist/types/components/eds-logo/eds-logo.stories.d.ts +22 -2
- package/dist/types/components/eds-steps/eds-steps.d.ts +7 -0
- package/dist/types/components/eds-steps-v2/eds-steps-v2.d.ts +14 -1
- package/dist/types/components/eds-steps-v2/eds-steps-v2.stories.d.ts +40 -9
- package/dist/types/components/eds-switch/eds-switch.d.ts +6 -2
- package/dist/types/components/eds-switch/eds-switch.stories.d.ts +8 -0
- package/dist/types/components/eds-toast/eds-toast.d.ts +33 -1
- package/dist/types/components/eds-toast/eds-toast.stories.d.ts +49 -1
- package/dist/types/components/eds-user/eds-user.d.ts +0 -2
- package/dist/types/components/eds-user/eds-user.stories.d.ts +5 -9
- package/dist/types/components.d.ts +210 -60
- package/package.json +1 -1
- package/dist/components/p-00ba405d.entry.js +0 -1
- package/dist/components/p-03342030.entry.js +0 -1
- package/dist/components/p-0e2bac0f.entry.js +0 -1
- package/dist/components/p-18399fe1.entry.js +0 -1
- package/dist/components/p-1e6f0572.entry.js +0 -1
- package/dist/components/p-27e093c3.entry.js +0 -1
- package/dist/components/p-3d1bb2fe.entry.js +0 -1
- package/dist/components/p-5ff4b1d0.entry.js +0 -1
- package/dist/components/p-6be1730a.entry.js +0 -1
- package/dist/components/p-786ff09b.entry.js +0 -1
- package/dist/components/p-85476a6f.entry.js +0 -9
- package/dist/components/p-c2127276.entry.js +0 -1
- package/dist/components/p-c3ee9163.entry.js +0 -1
- package/dist/components/p-c4cfbf98.entry.js +0 -1
- package/dist/components/p-c65082fe.entry.js +0 -1
- package/dist/components/p-cc096938.entry.js +0 -1
- package/dist/components/p-f4d2f882.entry.js +0 -1
package/dist/hydrate/index.js
CHANGED
|
@@ -2335,7 +2335,7 @@ class ColorPrimaryPalette {
|
|
|
2335
2335
|
];
|
|
2336
2336
|
}
|
|
2337
2337
|
render() {
|
|
2338
|
-
return (hAsync("ul", { key: '
|
|
2338
|
+
return (hAsync("ul", { key: '8358291e8f5aa8791abe4cd701ccb2d4ed6d7175', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, this.colors.map((color) => (hAsync("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, hAsync("div", { class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }, hAsync("div", { class: "grid" }, hAsync("span", { class: "f-body-02" }, color.rgb), hAsync("span", { class: "f-body-02 w-full" }, color.cmyk), hAsync("eds-code-block", { code: color.hex, style: { minWidth: '150px', marginRight: '5px' } })), hAsync("div", { class: "grid" }, hAsync("span", { class: "f-body-02" }, color.pantoneC), hAsync("span", { class: "f-body-02" }, color.pantoneU))))))));
|
|
2339
2339
|
}
|
|
2340
2340
|
static get cmpMeta() { return {
|
|
2341
2341
|
"$flags$": 0,
|
|
@@ -2407,7 +2407,7 @@ class ColorSecondaryPalette {
|
|
|
2407
2407
|
this.show = undefined;
|
|
2408
2408
|
}
|
|
2409
2409
|
render() {
|
|
2410
|
-
return (hAsync("ul", { key: '
|
|
2410
|
+
return (hAsync("ul", { key: '52cbd3ddc78dd2a33c695bee28b9458636709dc2', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, this.colors.map((color) => (hAsync("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, hAsync("div", { class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }, hAsync("div", { class: "grid" }, hAsync("span", { class: "f-body-02" }, color.rgb), hAsync("span", { class: "f-body-02 w-full" }, color.cmyk), hAsync("eds-code-block", { code: color.hex, style: { minWidth: '150px', marginRight: '5px' } })), hAsync("div", { class: "grid" }, hAsync("span", { class: "f-body-02" }, color.pantoneC), hAsync("span", { class: "f-body-02" }, color.pantoneU))))))));
|
|
2411
2411
|
}
|
|
2412
2412
|
static get cmpMeta() { return {
|
|
2413
2413
|
"$flags$": 0,
|
|
@@ -2481,7 +2481,7 @@ class ColorSupportPalette {
|
|
|
2481
2481
|
return 'text-default';
|
|
2482
2482
|
}
|
|
2483
2483
|
render() {
|
|
2484
|
-
return (hAsync("ul", { key: '
|
|
2484
|
+
return (hAsync("ul", { key: '9e6c8c637680b5159548a3ac78ca69041d172e42', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, this.colors.map((color) => {
|
|
2485
2485
|
// compute once
|
|
2486
2486
|
const textClass = this.getTextColor(color.background);
|
|
2487
2487
|
return (hAsync("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, hAsync("div", { class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }, hAsync("div", { class: "grid" }, hAsync("span", { class: `f-body-02 ${textClass}` }, color.cmyk), hAsync("eds-code-block", { code: color.hex, style: { minWidth: '150px', marginRight: '5px' }, class: textClass })), hAsync("div", { class: "grid" }, hAsync("span", { class: `f-body-02 ${textClass}` }, color.pantoneC), hAsync("span", { class: `f-body-02 ${textClass}` }, color.pantoneU)))));
|
|
@@ -2641,7 +2641,7 @@ class ComponentsSection {
|
|
|
2641
2641
|
}
|
|
2642
2642
|
}
|
|
2643
2643
|
render() {
|
|
2644
|
-
return hAsync("div", { key: '
|
|
2644
|
+
return hAsync("div", { key: 'bc06ee85e7b45c9d45afa416ecb839c0a10aa576', class: "container" }, this.renderContent());
|
|
2645
2645
|
}
|
|
2646
2646
|
static get cmpMeta() { return {
|
|
2647
2647
|
"$flags$": 0,
|
|
@@ -2719,7 +2719,7 @@ class CorrectUseOfColors {
|
|
|
2719
2719
|
registerInstance(this, hostRef);
|
|
2720
2720
|
}
|
|
2721
2721
|
render() {
|
|
2722
|
-
return (hAsync("div", { key: '
|
|
2722
|
+
return (hAsync("div", { key: 'afddc656b9217a2df98181fe7be846c779486efb', class: "container" }, hAsync("p", { key: '995cb777ef605d3cfb4a1fa8a8acf538a0522b74', class: "f-body-01" }, "This guide demonstrates the correct usage of the", hAsync("eds-link", { key: '5a14a5ea05e8b8bd58f2182594f4061986a9bfb0', label: "primary", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#primary-palette", "extra-class": "inline-block ml-4" }), "and", hAsync("eds-link", { key: '22b9d164e0b5d22a82813b22e00258b051fb5291', label: "support", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#support-palette", "extra-class": "inline-block ml-4" }), "color palettes."), hAsync("div", { key: '1bd417ab605d072d6c87b5fcb708a475b06c0b4d', class: "flex" }, hAsync("div", { key: 'e43e1e84710ac1fd52d7b9cc0deebd0c4d5a7e2e', class: "w-full" }, hAsync("ul", { key: '18a5a63c7beace0bd6ecf0fe315f227162d10483', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, primary$1.map((color) => (hAsync("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, hAsync("div", { class: "w-full min-h-[150px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))), hAsync("div", { key: 'f3055c180b296dfb59863a754ffe6a06d726a6ff', class: "w-full" }, hAsync("ul", { key: 'd341ddade09efdcc9d1af3964f9026a9707fbe0e', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, support.map((color) => (hAsync("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, hAsync("div", { class: "w-full min-h-[90px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }))))))), hAsync("p", { key: 'af0b4403b93fffceea6ea1e5f06967b598028a99', class: "f-body-01" }, "This guide demonstrates the correct usage of the", hAsync("eds-link", { key: '8ea91d6f8a9924da6a7f9bca61c127565aad9007', label: "purple", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#primary-palette", "extra-class": "inline-block ml-4" }), "and", hAsync("eds-link", { key: '50febc4ea15b0fa627d33d95ffc7095ac2d6c4ff', label: "support", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#support-palette", "extra-class": "inline-block ml-4" }), "color palettes."), hAsync("div", { key: '808176e6142ebf50f8f0b0202af6f3ef9af7a3b8', class: "flex" }, hAsync("div", { key: '6d848442a7c7bcde5ef10c56ae3ab6d34e5cadc6', class: "w-full" }, hAsync("ul", { key: '32578cc459e343292790a3ff842bed8ae807dd82', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, purple$1.map((color) => (hAsync("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, hAsync("div", { class: "w-full min-h-[225px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))), hAsync("div", { key: 'e12a82ccea09771605f012eadd6e84c34b26f185', class: "w-full" }, hAsync("ul", { key: 'f1ee5355e9f21f53289c2d5849e72dcd5a8d7031', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, support.map((color) => (hAsync("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, hAsync("div", { class: "w-full min-h-[90px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }))))))), hAsync("p", { key: '26077e0df6ae891c93681a7958f9edb20eaa818f', class: "f-body-01" }, "This guide demonstrates the correct usage of the", hAsync("eds-link", { key: '14cb5e7a55efaedeff39f32cfa15745ee1182a68', label: "blue", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#primary-palette", "extra-class": "inline-block ml-4" }), "and", hAsync("eds-link", { key: '0b05ada6b2a2791508aa7acb74f3b9df083fa316', label: "support", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#support-palette", "extra-class": "inline-block ml-4" }), "color palettes."), hAsync("div", { key: '39a0425ecb995d6bf8d0c6587127f702fb658440', class: "flex" }, hAsync("div", { key: 'ab4a5ffbcb73a88fea4ee67306be6bf30ea1dcff', class: "w-full" }, hAsync("ul", { key: '1117d4f1541cb02b915aecae6c54545f3242a4df', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, blue.map((color) => (hAsync("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, hAsync("div", { class: "w-full min-h-[225px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))), hAsync("div", { key: 'ffa7b0017bb21b6608e99b60788c0ea4509fddfc', class: "w-full" }, hAsync("ul", { key: '88517aeead68cb768814577987355c3f1421d3b3', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, support.map((color) => (hAsync("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, hAsync("div", { class: "w-full min-h-[90px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }))))))), hAsync("p", { key: '220bc12066e60ee1912fe194c849ad9569de8d69', class: "f-body-01" }, "This guide demonstrates the correct usage of the", hAsync("eds-link", { key: '51fb2578373998a1145c218d33f50c609fefc571', label: "redish", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#primary-palette", "extra-class": "inline-block ml-4" }), "and", hAsync("eds-link", { key: 'f11b329d33f72491c84b80b2094713673e0981b8', label: "support", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#support-palette", "extra-class": "inline-block ml-4" }), "color palettes."), hAsync("div", { key: '90c79cfa3aa9ca0c0ac9397d1f903ab3897e15ba', class: "flex" }, hAsync("div", { key: 'e645ea51aac869eebd84e2f2d48bbd51c365b44c', class: "w-full" }, hAsync("ul", { key: '7c7f731969f61d4b6005ee5c7855e1fe2f36e4b4', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, red$1.map((color) => (hAsync("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, hAsync("div", { class: "w-full min-h-[225px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))), hAsync("div", { key: '774507d20533e34dd712bea09b74858aff6d221a', class: "w-full" }, hAsync("ul", { key: 'd270efd5cc0cca95117977a98aae34c037de82d0', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, support.map((color) => (hAsync("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, hAsync("div", { class: "w-full min-h-[90px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))))));
|
|
2723
2723
|
}
|
|
2724
2724
|
static get cmpMeta() { return {
|
|
2725
2725
|
"$flags$": 0,
|
|
@@ -2758,7 +2758,7 @@ class DocsContent {
|
|
|
2758
2758
|
}
|
|
2759
2759
|
}
|
|
2760
2760
|
render() {
|
|
2761
|
-
return hAsync("div", { key: '
|
|
2761
|
+
return hAsync("div", { key: '8819d91f67b1df2f4e2a7da791bce550003eaa41', class: "container" }, this.renderContent());
|
|
2762
2762
|
}
|
|
2763
2763
|
static get cmpMeta() { return {
|
|
2764
2764
|
"$flags$": 0,
|
|
@@ -2791,7 +2791,7 @@ class DocsPalettes {
|
|
|
2791
2791
|
}
|
|
2792
2792
|
}
|
|
2793
2793
|
render() {
|
|
2794
|
-
return hAsync("div", { key: '
|
|
2794
|
+
return hAsync("div", { key: 'bebc4aab533ad7f61012cae48372420c7fef2e69', class: "container" }, this.renderContent());
|
|
2795
2795
|
}
|
|
2796
2796
|
static get cmpMeta() { return {
|
|
2797
2797
|
"$flags$": 0,
|
|
@@ -2914,11 +2914,8 @@ class EdsAccordion {
|
|
|
2914
2914
|
this.toggleIcon = this.expanded ? 'chevron-down' : 'chevron-right';
|
|
2915
2915
|
}
|
|
2916
2916
|
render() {
|
|
2917
|
-
const cardClasses = [
|
|
2918
|
-
|
|
2919
|
-
`accordion-card-${this.variant}`
|
|
2920
|
-
].join(' ');
|
|
2921
|
-
return (hAsync("div", { key: '08061b87dfd54b49f8aa782f29e2a9c5c8bcd2ef', class: cardClasses }, hAsync("div", { key: '728033232d8e6aa348bc98d028a5bd62d32fd934', class: "accordion-header", onClick: this.handleClick, onKeyDown: this.handleKeyDown, role: "button", tabindex: 0, "aria-expanded": String(this.isExpanded), "aria-controls": "accordionSection" }, this.icon && (hAsync("div", { key: 'eeb4260c955a2d4394bc3663dc749afc45b6f87f', class: "accordion-icon" }, hAsync("eds-icon-wrapper", { key: '0896625a235bda97a098ac7b9a4ebec00e5fa587', name: this.icon, size: 24 }))), hAsync("div", { key: '3e6b85780bc597a84dc0eb5d2526f9e54c16148d', class: "accordion-header-text" }, hAsync("h3", { key: 'b5c5c0023bc23dc225183736f02683134a40da93', class: "accordion-title" }, this.heading), this.description && (hAsync("p", { key: 'eb04c90cef03a838a4f852b988f3a9984e593120', class: `accordion-description ${!this.isExpanded && this.clampText ? 'line-clamp-1' : ''}` }, this.description))), hAsync("eds-icon-wrapper", { key: '583d0bcc82a178c2a47eef586aede9c87e8ea456', name: this.toggleIcon, size: 20, class: "accordion-chevron" })), hAsync("section", { key: '8f820377d639ced2d0a4fe505452b6b408640400', id: "accordionSection", "aria-hidden": String(!this.isExpanded), class: `accordion-panel ${this.isExpanded ? 'expanded' : ''}` }, hAsync("div", { key: 'd41dc9c3ef21f14df3ca25138440356703fa35ed', class: "accordion-panel-inner" }, hAsync("div", { key: '156c3c9b139efcb964525147338ecdeeca538123', class: "accordion-content" }, hAsync("slot", { key: 'b19b54c279cca1a32b4ed0f5b0a319d87b7bf937' }))))));
|
|
2917
|
+
const cardClasses = ['accordion-card', `accordion-card-${this.variant}`].join(' ');
|
|
2918
|
+
return (hAsync("div", { key: 'e437239cc58d208a41d178ad843b56b4cf96c868', class: cardClasses }, hAsync("div", { key: 'd8918b77de629a60332118da38969f237ef5f4a6', class: "accordion-header", onClick: this.handleClick, onKeyDown: this.handleKeyDown, role: "button", tabindex: 0, "aria-expanded": String(this.isExpanded), "aria-controls": "accordionSection" }, this.icon && (hAsync("div", { key: '56d74602ae6f5b2246a42047caae30fd7affd5eb', class: "accordion-icon" }, hAsync("eds-icon-wrapper", { key: '91dec34e9bec65648e943203dfbf7a2c2f85a239', name: this.icon, size: 24 }))), hAsync("div", { key: '3abdd978e4de24e892fe763a2ad42606915b7136', class: "accordion-header-text" }, hAsync("h3", { key: '7a6e750e6b9462577fd71c4a08d5e029c5c31c17', class: "accordion-title" }, this.heading), this.description && (hAsync("p", { key: '1b79cce1a659c8ec48f365c44bbd9593bb11769a', class: `accordion-description ${!this.isExpanded && this.clampText ? 'line-clamp-1' : ''}` }, this.description))), hAsync("eds-icon-wrapper", { key: 'a911f1daf7776c574ec42a7d007c2c21768d0b05', name: this.toggleIcon, size: 20, class: "accordion-chevron" })), hAsync("section", { key: 'fe743b5bffe37fd352d26f3a1660fd0e0a6633a7', id: "accordionSection", "aria-hidden": String(!this.isExpanded), class: `accordion-panel ${this.isExpanded ? 'expanded' : ''}` }, hAsync("div", { key: '0d9fc37345deb16c1a5793c7deeb41298c4cf209', class: "accordion-panel-inner" }, hAsync("div", { key: '697c71cdf914948ba9d017a2e92f42ce0e2ffc73', class: "accordion-content" }, hAsync("slot", { key: '156b2c0be11111d3876bdbc1852f51a8b44b0284' }))))));
|
|
2922
2919
|
}
|
|
2923
2920
|
get el() { return getElement(this); }
|
|
2924
2921
|
static get style() { return EdsAccordionStyle0; }
|
|
@@ -2942,7 +2939,7 @@ class EdsAccordion {
|
|
|
2942
2939
|
}; }
|
|
2943
2940
|
}
|
|
2944
2941
|
|
|
2945
|
-
const edsAlertCss = ":host{display:block;width:100%}*,::before,::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:currentColor}p{margin:0}.alert-card{position:relative;border-radius:16px;padding:1rem 1.25rem;display:flex;gap:0.75rem;width:100%;border:1px solid rgba(0, 0, 0, 0.1);overflow:hidden;font-family:var(--f-ui-01-fontFamily);font-weight:var(--f-ui-01-fontWeight);font-size:var(--f-ui-01-fontSize);line-height:var(--f-ui-01-lineHeight);letter-spacing:var(--f-ui-01-letterSpacing)}.alert-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px}.alert-default{background-color:var(--grey-light);color:var(--brand-black)}.alert-default::before{background-color:var(--grey-dark)}.alert-default .alert-icon{color:var(--grey-dark)}.alert-warning{background-color:var(--yellow-200);color:var(--brand-black)}.alert-warning::before{background-color:var(--yellow-600)}.alert-warning .alert-icon{color:var(--yellow-600)}.alert-error{background-color:var(--red-200);color:var(--brand-black)}.alert-error::before{background-color:var(--red-600)}.alert-error .alert-icon{color:var(--red-600)}.alert-success{background-color:var(--brand-green);color:var(--brand-black)}.alert-success::before{background-color:var(--green-700)}.alert-success .alert-icon{color:var(--green-700)}.alert-brand{background-color:var(--brand-black);color:var(--brand-green)}.alert-brand::before{background-color:var(--brand-green)}.alert-brand .alert-icon{color:var(--brand-green)}.alert-brand .alert-dismiss{color:var(--brand-green)}.alert-horizontal{flex-direction:row;align-items:center}.alert-vertical{flex-direction:column;align-items:flex-start}.alert-icon{flex-shrink:0;display:flex;align-items:center;justify-content:center}.alert-body{flex:1;min-width:0}.alert-message{margin:0}.alert-action{flex-shrink:0}.alert-dismiss{flex-shrink:0;display:flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;padding:0.25rem;border-radius:8px;color:inherit;opacity:0.7;transition:opacity 0.2s ease}.alert-dismiss:hover{opacity:1}.alert-dismiss:focus-visible{outline:2px solid var(--brand-green);outline-offset:2px}@media (max-width: 768px){.alert-card{padding:0.75rem 1rem;gap:0.5rem}.alert-horizontal{flex-direction:column;align-items:flex-start}}";
|
|
2942
|
+
const edsAlertCss = ":host{display:block;width:100%}*,::before,::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:currentColor}p{margin:0}.alert-card{position:relative;border-radius:16px;padding:1rem 1.25rem;display:flex;gap:0.75rem;width:100%;border:1px solid rgba(0, 0, 0, 0.1);overflow:hidden;font-family:var(--f-ui-01-fontFamily);font-weight:var(--f-ui-01-fontWeight);font-size:var(--f-ui-01-fontSize);line-height:var(--f-ui-01-lineHeight);letter-spacing:var(--f-ui-01-letterSpacing)}.alert-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px}.alert-default{background-color:var(--grey-light);color:var(--brand-black)}.alert-default::before{background-color:var(--grey-dark)}.alert-default .alert-icon{color:var(--grey-dark)}.alert-warning{background-color:var(--yellow-200);color:var(--brand-black)}.alert-warning::before{background-color:var(--yellow-600)}.alert-warning .alert-icon{color:var(--yellow-600)}.alert-error{background-color:var(--red-200);color:var(--brand-black)}.alert-error::before{background-color:var(--red-600)}.alert-error .alert-icon{color:var(--red-600)}.alert-success{background-color:var(--brand-green);color:var(--brand-black)}.alert-success::before{background-color:var(--green-700)}.alert-success .alert-icon{color:var(--green-700)}.alert-brand{background-color:var(--brand-black);color:var(--brand-green)}.alert-brand::before{background-color:var(--brand-green)}.alert-brand .alert-icon{color:var(--brand-green)}.alert-brand .alert-dismiss{color:var(--brand-green)}.alert-horizontal{flex-direction:row;align-items:center}.alert-vertical{flex-direction:column;align-items:flex-start}.alert-icon{flex-shrink:0;display:flex;align-items:center;justify-content:center}.alert-body{flex:1;min-width:0}.alert-message{margin:0}.alert-action{flex-shrink:0}.alert-dismiss{flex-shrink:0;display:flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;padding:0.25rem;border-radius:8px;color:inherit;opacity:0.7;transition:opacity 0.2s ease}.alert-dismiss:hover{opacity:1}.alert-dismiss:focus-visible{outline:2px solid var(--brand-green);outline-offset:2px}@media (max-width: 768px){.alert-card{padding:0.75rem 1rem;gap:0.5rem}.alert-horizontal{flex-direction:column;align-items:flex-start}.alert-dismiss{position:absolute;top:0.5rem;right:0.5rem;padding:0.125rem}.alert-card:has(.alert-dismiss){padding-right:2.25rem}}";
|
|
2946
2943
|
var EdsAlertStyle0 = edsAlertCss;
|
|
2947
2944
|
|
|
2948
2945
|
/**
|
|
@@ -2992,8 +2989,9 @@ class EdsAlert {
|
|
|
2992
2989
|
this.edsDismiss.emit();
|
|
2993
2990
|
}
|
|
2994
2991
|
render() {
|
|
2995
|
-
if (this.dismissed)
|
|
2992
|
+
if (this.dismissed) {
|
|
2996
2993
|
return null;
|
|
2994
|
+
}
|
|
2997
2995
|
const intent = this.normalizedIntent;
|
|
2998
2996
|
const ariaLabel = intent !== 'default' ? `${intent} alert` : 'alert';
|
|
2999
2997
|
return (hAsync("div", { class: `alert-card alert-${intent} alert-${this.direction}`, role: "alert", "aria-label": ariaLabel, "aria-live": intent === 'error' || intent === 'warning' ? 'assertive' : 'polite' }, this.intentIcon && (hAsync("div", { class: "alert-icon" }, hAsync("eds-icon-wrapper", { name: this.intentIcon, size: 20 }))), hAsync("div", { class: "alert-body" }, this.message ? (hAsync("p", { class: "alert-message" }, this.message)) : (hAsync("div", { class: "alert-message" }, hAsync("slot", null)))), this.withBtn && (hAsync("div", { class: "alert-action" }, this.pressableUrl ? (hAsync("eds-link", { label: this.pressableLabel, url: this.pressableUrl, intent: "strong" })) : (hAsync("eds-button", { label: this.pressableLabel, intent: "ghost", onClick: () => this.handleAction() })))), this.dismissible && (hAsync("button", { class: "alert-dismiss", onClick: () => this.handleDismiss(), "aria-label": "Dismiss alert" }, hAsync("eds-icon-wrapper", { name: "close", size: 20 })))));
|
|
@@ -3052,7 +3050,7 @@ class EdsAppRoot {
|
|
|
3052
3050
|
this.combinedInitPromise = Promise.all([initKeycloakPromise, authStatusPromise]);
|
|
3053
3051
|
}
|
|
3054
3052
|
render() {
|
|
3055
|
-
return (hAsync("div", { key: '
|
|
3053
|
+
return (hAsync("div", { key: 'c856dc661c22b74baee69d195ef92ab1e24bceae' }, hAsync("eds-splash-screen", { key: '62689cd4fdee56d667071bad596037342812b7a6', inverse: true, initPromise: this.combinedInitPromise }), hAsync("eds-login", { key: 'af2257c63a00025dbddbc2bd4bc7c08391ead2aa', "keycloak-url": "http://localhost:8080", "keycloak-realm": "nigeor-realm", "keycloak-client-id": "stencil-app" }), hAsync("main", { key: '8a2768437fb21855da535b8ea706f7cb3a17a36a' }, this.isAuthenticated ? hAsync("h1", null, "Welcome, authenticated user!") : hAsync("h1", null, "Please log in."))));
|
|
3056
3054
|
}
|
|
3057
3055
|
static get cmpMeta() { return {
|
|
3058
3056
|
"$flags$": 9,
|
|
@@ -3454,12 +3452,8 @@ class EdsButton {
|
|
|
3454
3452
|
brandLight: 'bg-brand-light text-default hover:bg-accent hover:text-default aria-disabled:shadow-none',
|
|
3455
3453
|
brandInverse: 'bg-accent text-default hover:bg-inverse hover:text-default aria-disabled:shadow-none',
|
|
3456
3454
|
neutral: 'bg-darker after:border-softest bg-inverse hover:bg-dark hover:text-light text-inverse aria-disabled:shadow-none',
|
|
3457
|
-
cta: [
|
|
3458
|
-
|
|
3459
|
-
],
|
|
3460
|
-
'cta-brand': [
|
|
3461
|
-
'cta-link-brand !px-0 !py-0 !min-h-0 !h-auto'
|
|
3462
|
-
]
|
|
3455
|
+
cta: ['cta-link !px-0 !py-0 !min-h-0 !h-auto'],
|
|
3456
|
+
'cta-brand': ['cta-link-brand !px-0 !py-0 !min-h-0 !h-auto']
|
|
3463
3457
|
},
|
|
3464
3458
|
loading: {
|
|
3465
3459
|
true: 'pointer-events-none',
|
|
@@ -3492,7 +3486,7 @@ class EdsButton {
|
|
|
3492
3486
|
fullWidth: {
|
|
3493
3487
|
true: 'w-full flex',
|
|
3494
3488
|
false: 'inline-flex w-auto'
|
|
3495
|
-
}
|
|
3489
|
+
}
|
|
3496
3490
|
},
|
|
3497
3491
|
compoundVariants: [
|
|
3498
3492
|
{
|
|
@@ -3644,10 +3638,10 @@ class EdsButton {
|
|
|
3644
3638
|
const loaderBottomColor = this.intent === 'primary' || this.intent === 'secondaryInverse'
|
|
3645
3639
|
? '#FFFFFF' // White for dark backgrounds
|
|
3646
3640
|
: '#07140D'; // Brand-black for light backgrounds (secondary, brand, etc.)
|
|
3647
|
-
return (hAsync(Host, { key: '
|
|
3641
|
+
return (hAsync(Host, { key: 'ad9bb3e0343e6c05c8f43ca9dc502ef28aa001d6' }, hAsync(ElementType, { key: '90b51743bb12a5b4f0b309bb9d38932401ff0fa9', tabindex: isInteractive ? '0' : '-1', "aria-label": this.label ? undefined : this.ariaLabel, "aria-disabled": this.disabled || this.loading ? 'true' : undefined, "aria-busy": this.loading ? 'true' : undefined, disabled: this.elementType === 'button' ? this.disabled || this.loading : undefined, role: this.elementType === 'a' ? 'button' : undefined, class: `${classes || ''}`, onClick: (event) => this.handleClick(event), onKeyDown: (event) => this.handleKeyDown(event) }, this.label && (hAsync("span", { key: '35c7fa9449b445ef16d1ac77cb3ed8036e857687', class: `${this.loading ? 'opacity-0' : ''} ${this.icon && this.intent !== 'cta' && this.intent !== 'cta-brand' ? (this.iconPos === 'right' ? (this.size === 'large' ? 'pr-4' : 'pr-2') : this.size === 'large' ? 'pl-4' : 'pl-2') : ''}`, "aria-hidden": this.loading ? 'true' : undefined }, this.label)), this.loading && (hAsync("span", { key: '5a6a5c78568dae1b77433147e1ae04f9139467de', class: "absolute inset-0 flex items-center justify-center", "aria-hidden": "true" }, hAsync("span", { key: 'e392714658931a190cbfcae756c16831f69f8f0d', class: "loader", style: {
|
|
3648
3642
|
border: `3px solid ${loaderBorderColor}`,
|
|
3649
3643
|
borderBottomColor: loaderBottomColor
|
|
3650
|
-
} }))), this.icon ? (hAsync("eds-icon-wrapper", { name: this.icon, size: 20, "aria-hidden": "true" })) : null)));
|
|
3644
|
+
} }))), this.icon ? (hAsync("eds-icon-wrapper", { name: this.icon, size: 20, "aria-hidden": "true", class: this.loading ? 'opacity-0' : '' })) : null)));
|
|
3651
3645
|
}
|
|
3652
3646
|
static get delegatesFocus() { return true; }
|
|
3653
3647
|
get el() { return getElement(this); }
|
|
@@ -3710,14 +3704,11 @@ class EdsCardApp {
|
|
|
3710
3704
|
return parseData(this.tags);
|
|
3711
3705
|
}
|
|
3712
3706
|
render() {
|
|
3713
|
-
const cardClasses = [
|
|
3714
|
-
'app-card',
|
|
3715
|
-
`app-card-${this.variant}`
|
|
3716
|
-
].join(' ');
|
|
3707
|
+
const cardClasses = ['app-card', `app-card-${this.variant}`].join(' ');
|
|
3717
3708
|
// Determine link and category tag intents based on variant
|
|
3718
3709
|
const linkIntent = this.variant === 'default' ? 'cta-brand' : 'cta';
|
|
3719
3710
|
const categoryTagIntent = this.variant === 'default' ? 'brand' : 'dark';
|
|
3720
|
-
return (hAsync("div", { key: '
|
|
3711
|
+
return (hAsync("div", { key: '84aa9bd8ccac7cd163a0295e53610d3f149d2fc7', class: cardClasses }, this.category && hAsync("eds-tag", { key: 'ff5f5fc550289df7dc13c9d77e9ee318692c54ef', label: this.category, intent: categoryTagIntent, size: "medium" }), hAsync("h3", { key: '7f3ed9e3c270cf7c7d99f084cd3f7dac93929676', class: "app-title" }, this.title), hAsync("p", { key: '969ed185ab45832e1e10a5446067f6926864696c', class: "app-description" }, this.description), this.parsedTags && this.parsedTags.length > 0 && (hAsync("div", { key: '4a619204bcfe0b85e3e69b58157269f7bed9f44b', class: "app-tags" }, this.parsedTags.map((tag, index) => (hAsync("span", { key: index, class: "app-tag" }, tag.label))))), this.url && (hAsync("eds-link", { key: 'd2f32c5114f60cf2b25e96db84e090d90fe1a9ed', label: this.linkText, url: this.url, intent: linkIntent, icon: "arrow-right", "icon-pos": "right" }))));
|
|
3721
3712
|
}
|
|
3722
3713
|
get el() { return getElement(this); }
|
|
3723
3714
|
static get style() { return EdsCardAppStyle0; }
|
|
@@ -3785,15 +3776,12 @@ class EdsCardCta {
|
|
|
3785
3776
|
return parseData(this.links);
|
|
3786
3777
|
}
|
|
3787
3778
|
render() {
|
|
3788
|
-
const containerClasses = [
|
|
3789
|
-
'cta-container',
|
|
3790
|
-
`cta-container-${this.variant}`
|
|
3791
|
-
].join(' ');
|
|
3779
|
+
const containerClasses = ['cta-container', `cta-container-${this.variant}`].join(' ');
|
|
3792
3780
|
// Determine button and link intents based on variant
|
|
3793
3781
|
const primaryButtonIntent = this.variant === 'default' ? 'brandInverse' : 'brand';
|
|
3794
3782
|
const secondaryButtonIntent = this.variant === 'default' ? 'secondaryInverse' : 'secondary';
|
|
3795
3783
|
const linkIntent = this.variant === 'default' ? 'cta' : 'underline';
|
|
3796
|
-
return (hAsync("div", { key: '
|
|
3784
|
+
return (hAsync("div", { key: '6a3ccb2ee1f3ad3cc7c3fc0c54381284a9a5190b', class: containerClasses }, hAsync("div", { key: '2a6ad1f084c3e7afea0a11a35c8b5e20d3a2c7ee', class: "cta-content" }, hAsync("h2", { key: '157f32d98283cf59a16f73def69974238e4dc938', class: "cta-title", innerHTML: this.title }), hAsync("p", { key: '660beebc8c10f93a7052c23e5eacb2481fb3bcd7', class: "cta-description" }, this.description), hAsync("div", { key: 'e7610c3e2738aace2ac921304c6b2a6e5f5a5952', class: "cta-actions" }, hAsync("slot", { key: '75113d5cc2d10aaaa2d6b7b4f0f16ea916a5a1ae', name: "actions" }, hAsync("eds-button", { key: '140823c45ce817555ebe0969f1f07787b5d40819', label: this.primaryButtonText, intent: primaryButtonIntent, icon: "arrow-right", "icon-pos": "right", size: "large", triggerClick: this.handlePrimaryClick }), this.secondaryButtonText && (hAsync("eds-button", { key: '8b2cd73793a85d6da3c138459f9ab864e9f2b9ab', label: this.secondaryButtonText, intent: secondaryButtonIntent, size: "large", triggerClick: this.handleSecondaryClick })))), this.parsedLinks && this.parsedLinks.length > 0 && (hAsync("div", { key: '10f5ebc9ed558a29e166325ff143f79b5324f130', class: "cta-links" }, this.parsedLinks.map((link, index) => (hAsync("eds-link", { key: index, label: link.label, url: link.url, intent: linkIntent }))))))));
|
|
3797
3785
|
}
|
|
3798
3786
|
get el() { return getElement(this); }
|
|
3799
3787
|
static get style() { return EdsCardCtaStyle0; }
|
|
@@ -3885,11 +3873,8 @@ class EdsCardFeature {
|
|
|
3885
3873
|
this.variant = 'default';
|
|
3886
3874
|
}
|
|
3887
3875
|
render() {
|
|
3888
|
-
const cardClasses = [
|
|
3889
|
-
|
|
3890
|
-
`feature-card-${this.variant}`
|
|
3891
|
-
].join(' ');
|
|
3892
|
-
return (hAsync("div", { key: 'f76c056bbca7b38892cdecf56291fe3882c9e3bb', class: cardClasses }, this.icon && (hAsync("div", { key: '9e22a5f6c5e30b55c4bac84f5f11f773b1b37ab9', class: "feature-icon" }, hAsync("eds-icon-wrapper", { key: '64154c38f3655cb55f14c2963a62ead699d8a533', name: this.icon, size: 24 }))), hAsync("h3", { key: '99ed95a90796dbb6baa3f73cb2830fcd0954328c', class: "feature-title" }, this.title), hAsync("p", { key: 'f91109a10f62a58d8b650987fbbf1a5a4f68beaa', class: "feature-description" }, this.description), this.url && (hAsync("eds-link", { key: 'b94b57e5385da9db54a3767d0413349000add755', label: this.linkText, url: this.url, intent: "cta", icon: "arrow-right", "icon-pos": "right" }))));
|
|
3876
|
+
const cardClasses = ['feature-card', `feature-card-${this.variant}`].join(' ');
|
|
3877
|
+
return (hAsync("div", { key: '585107ac2cfc2ea55fc560d2da9e6bfc0595b5ad', class: cardClasses }, this.icon && (hAsync("div", { key: '6dd26bd834d446872d0ab27e8a26e08488507686', class: "feature-icon" }, hAsync("eds-icon-wrapper", { key: 'e5502241c155784370a0e5f214b0bfd88aa634a7', name: this.icon, size: 24 }))), hAsync("h3", { key: '974e30754eb9d4aa37beddc7ed065228df704009', class: "feature-title" }, this.title), hAsync("p", { key: '605f476de2001a1b85ec95b5c11eaa8a3cfcb9f3', class: "feature-description" }, this.description), this.url && (hAsync("eds-link", { key: '5ee756a958973fc4f7daf6e0bdad4e42179becb3', label: this.linkText, url: this.url, intent: "cta", icon: "arrow-right", "icon-pos": "right" }))));
|
|
3893
3878
|
}
|
|
3894
3879
|
get el() { return getElement(this); }
|
|
3895
3880
|
static get style() { return EdsCardFeatureStyle0; }
|
|
@@ -3967,9 +3952,7 @@ class EdsCardGeneric {
|
|
|
3967
3952
|
else if (this.intent === 'dark') {
|
|
3968
3953
|
bgClass = 'bg-dark';
|
|
3969
3954
|
}
|
|
3970
|
-
const interactionClasses = this.url
|
|
3971
|
-
? 'cursor-pointer effect-shadow hover:shadow-hover'
|
|
3972
|
-
: 'cursor-default';
|
|
3955
|
+
const interactionClasses = this.url ? 'cursor-pointer effect-shadow hover:shadow-hover' : 'cursor-default';
|
|
3973
3956
|
return [
|
|
3974
3957
|
'h-auto',
|
|
3975
3958
|
bgClass,
|
|
@@ -4000,7 +3983,7 @@ class EdsCardGeneric {
|
|
|
4000
3983
|
this.isHovered = false;
|
|
4001
3984
|
}
|
|
4002
3985
|
render() {
|
|
4003
|
-
return (hAsync("article", { key: '
|
|
3986
|
+
return (hAsync("article", { key: '3757ce9c894928dc158e920f10fb5ffdc46a1f8d', class: this.articleClasses(), onClick: this.url ? () => this.handleClick() : undefined, onMouseEnter: this.url ? () => this.handleMouseEnter() : undefined, onMouseLeave: this.url ? () => this.handleMouseLeave() : undefined }, this.icon && (hAsync("div", { key: '70683a1435c967b26f1d8eae69b1aaccb29e0a75', class: "card-icon-wrapper" }, hAsync("eds-icon-wrapper", { key: '74386a2045b07aa177cd18b6c10f99cca870d228', name: this.icon, size: 32 }))), hAsync("div", { key: '38bfc9f2895eba37ced45b8cb8ec3e65bdae559e', class: "p-12 flex flex-col grow" }, this.parsedTags && this.parsedTags.length > 0 && (hAsync("div", { key: '33b736039f478cbdffd3322b2d2bb60754318140', class: "flex mb-12 gap-x-4" }, this.parsedTags.map((tag, index) => (hAsync("eds-tag", { key: index, intent: tag.intent, label: tag.label, size: tag.size }))))), hAsync("eds-card-title", { key: '57b16d2c6d579b143bb91af377bf6e8dc161b210', title: this.title, url: this.url, intent: this.intent, size: this.titleSize }), this.description && (hAsync("div", { key: '7fa96262badff009bbeaf21c200a0c49413ec37d', class: "mt-8" }, this.description && (hAsync("eds-card-desc", { key: '2a4381f7f709774591c944308f033ef49d59cf8d', "truncate-lines": "3", description: this.description, intent: this.intent })))), hAsync("slot", { key: 'bba602658c39a0332c9a1cf65b5c3b5f614d7bb5', name: "card" }), this.url && (hAsync("div", { key: 'c14cc16acd3d000cb550a3d8fa01eaf52da70893', class: `flex items-center justify-between mt-auto pt-16 ${this.getLearnMoreColor()}` }, hAsync("span", { key: '66b50d088e275373a4368962f70396342f0e0353', class: "f-ui-01" }, "Learn more"), hAsync("eds-icon-wrapper", { key: 'f2de3d43d1965815d24455b2c2b0a96f5feb64a1', name: this.isHovered ? 'arrow-right' : 'arrow-up-right', size: 32 }))))));
|
|
4004
3987
|
}
|
|
4005
3988
|
get el() { return getElement(this); }
|
|
4006
3989
|
static get style() { return EdsCardGenericStyle0; }
|
|
@@ -4058,8 +4041,9 @@ class EdsCardHero {
|
|
|
4058
4041
|
}
|
|
4059
4042
|
handleClick() {
|
|
4060
4043
|
var _a;
|
|
4061
|
-
if (!this.url)
|
|
4044
|
+
if (!this.url) {
|
|
4062
4045
|
return;
|
|
4046
|
+
}
|
|
4063
4047
|
sendAnalytics({
|
|
4064
4048
|
category: 'ui-component',
|
|
4065
4049
|
parentContext: this.parentContext,
|
|
@@ -4070,12 +4054,10 @@ class EdsCardHero {
|
|
|
4070
4054
|
window.location.href = this.url;
|
|
4071
4055
|
}
|
|
4072
4056
|
render() {
|
|
4073
|
-
const cardClasses = [
|
|
4074
|
-
|
|
4075
|
-
|
|
4076
|
-
|
|
4077
|
-
].filter(Boolean).join(' ');
|
|
4078
|
-
return (hAsync("div", { key: 'c92f2acc8065b4142b28ca213abbb646e61f44fc', class: cardClasses, onClick: () => this.handleClick() }, hAsync("div", { key: '38b8ec832d05a4891646ac31f24d32f62c5ac2e1', class: "card-category" }, this.category), hAsync("div", { key: 'd356e4651ed9d136c72c519ecb9b484570c9b3be', class: "card-title" }, this.title), this.description && (hAsync("div", { key: '52afdf7988667f73d8725e6a5f5b7816d4b38b30', class: "card-description" }, this.description)), this.parsedTags && this.parsedTags.length > 0 && (hAsync("div", { key: 'a50fb41278d3b98da7054e0bee52d2a98ab5d8f3', class: "card-tags" }, this.parsedTags.map((tag, index) => (hAsync("span", { key: index, class: "card-tag" }, tag.label)))))));
|
|
4057
|
+
const cardClasses = ['hero-card', `hero-card-${this.variant}`, this.url ? 'hero-card-clickable' : '']
|
|
4058
|
+
.filter(Boolean)
|
|
4059
|
+
.join(' ');
|
|
4060
|
+
return (hAsync("div", { key: 'c5b0745da99444ae9981161910e7248d50865d6c', class: cardClasses, onClick: () => this.handleClick() }, hAsync("div", { key: 'adb890d7bd56faff4bdeaea9a1550209a8e9847f', class: "card-category" }, this.category), hAsync("div", { key: 'c6d68b85a94c753e383f0dc92709cdbb859a9400', class: "card-title" }, this.title), this.description && hAsync("div", { key: '47d880f01f9e0d3feaa46bc3310e1018b71eb5da', class: "card-description" }, this.description), this.parsedTags && this.parsedTags.length > 0 && (hAsync("div", { key: '8f1060a78bebd9def4ac7a1e6ba79a12094363e0', class: "card-tags" }, this.parsedTags.map((tag, index) => (hAsync("span", { key: index, class: "card-tag" }, tag.label)))))));
|
|
4079
4061
|
}
|
|
4080
4062
|
get el() { return getElement(this); }
|
|
4081
4063
|
static get style() { return EdsCardHeroStyle0; }
|
|
@@ -4123,8 +4105,9 @@ class EdsCardStat {
|
|
|
4123
4105
|
}
|
|
4124
4106
|
handleClick() {
|
|
4125
4107
|
var _a;
|
|
4126
|
-
if (!this.url)
|
|
4108
|
+
if (!this.url) {
|
|
4127
4109
|
return;
|
|
4110
|
+
}
|
|
4128
4111
|
sendAnalytics({
|
|
4129
4112
|
category: 'ui-component',
|
|
4130
4113
|
parentContext: this.parentContext,
|
|
@@ -4135,12 +4118,10 @@ class EdsCardStat {
|
|
|
4135
4118
|
window.location.href = this.url;
|
|
4136
4119
|
}
|
|
4137
4120
|
render() {
|
|
4138
|
-
const cardClasses = [
|
|
4139
|
-
|
|
4140
|
-
|
|
4141
|
-
|
|
4142
|
-
].filter(Boolean).join(' ');
|
|
4143
|
-
const content = (hAsync("div", { key: 'f1dadeadd1d893b7a33aa92772baf7245954f6e7', class: cardClasses, onClick: () => this.handleClick() }, hAsync("div", { key: '6adb8cc68740cd2dabf0bacf0af446e1499171a8', class: "stat-number" }, this.number), hAsync("div", { key: 'adc7a8ffd44bceda51fcb98f68cfc8d7e454db5f', class: "stat-label" }, this.label), this.description && (hAsync("div", { key: 'f70549244277e2c08c7bd94a1d297c00655faff5', class: "stat-description" }, this.description))));
|
|
4121
|
+
const cardClasses = ['stat-card', `stat-card-${this.variant}`, this.url ? 'stat-card-clickable' : '']
|
|
4122
|
+
.filter(Boolean)
|
|
4123
|
+
.join(' ');
|
|
4124
|
+
const content = (hAsync("div", { key: '0c4dcd6130ae23813c7decf3dd6d3ce465a9b743', class: cardClasses, onClick: () => this.handleClick() }, hAsync("div", { key: '8c787c4ed6e96c9c0403a119edc534b8698e4296', class: "stat-number" }, this.number), hAsync("div", { key: '7d86e9731cf43d3ffa923bdf27403ba34ab4dc0a', class: "stat-label" }, this.label), this.description && hAsync("div", { key: 'aaf9942a61087f46dc883d64184e6b33a4cb4d71', class: "stat-description" }, this.description)));
|
|
4144
4125
|
return content;
|
|
4145
4126
|
}
|
|
4146
4127
|
get el() { return getElement(this); }
|
|
@@ -4199,7 +4180,7 @@ class EdsCardTitle {
|
|
|
4199
4180
|
return (hAsync("span", { class: titleClass }, hAsync("a", { class: `break-words after:absolute after:inset-0 after:z-10 after:content-[''] focus:outline-none ${textColorClass} cursor-pointer`, href: this.url, target: this.externalLink ? '_blank' : undefined, rel: this.externalLink ? 'noopener noreferrer' : undefined }, this.title)));
|
|
4200
4181
|
}
|
|
4201
4182
|
// No URL - render as plain text, no overlay, no pointer cursor
|
|
4202
|
-
return
|
|
4183
|
+
return hAsync("span", { class: `${titleClass} ${textColorClass} break-words` }, this.title);
|
|
4203
4184
|
}
|
|
4204
4185
|
static get style() { return EdsCardTitleStyle0; }
|
|
4205
4186
|
static get cmpMeta() { return {
|
|
@@ -6623,7 +6604,7 @@ Prism.languages.py = Prism.languages.python;
|
|
|
6623
6604
|
|
|
6624
6605
|
}(Prism));
|
|
6625
6606
|
|
|
6626
|
-
const edsCodeBlockCss = ":host{display:block}.
|
|
6607
|
+
const edsCodeBlockCss = ":host{display:block}.codewrap{position:relative;background:#08170f;border:1px solid rgba(255, 255, 255, 0.07);border-radius:12px;overflow:hidden}.codetop{display:flex;align-items:center;justify-content:space-between;padding:11px 13px;border-bottom:1px solid rgba(255, 255, 255, 0.07)}.langchip{font-family:'IBM Plex Mono', ui-monospace, monospace;font-size:9.5px;letter-spacing:0.1em;text-transform:uppercase;color:#00ff9d;background:rgba(0, 255, 157, 0.1);border:1px solid rgba(0, 255, 157, 0.25);border-radius:5px;padding:4px 8px;line-height:1}.copy{display:inline-flex;align-items:center;gap:7px;background:transparent;border:none;cursor:pointer;font-family:'IBM Plex Mono', ui-monospace, monospace;font-size:10.5px;letter-spacing:0.06em;text-transform:uppercase;color:rgba(235, 242, 238, 0.62);padding:5px 7px;border-radius:6px;transition:color 0.14s, background 0.14s}.copy:hover{color:#00ff9d;background:rgba(0, 255, 157, 0.08)}.copy eds-icon-wrapper{color:inherit;display:inline-flex}pre{margin:0;padding:16px 15px;overflow-x:auto;white-space:pre;font-family:'IBM Plex Mono', ui-monospace, monospace;font-size:12.5px;line-height:1.75;color:#cfe3d8}code{font-family:inherit;font-size:inherit;line-height:inherit}.token.tag{color:#ff7b9c}.token.attr-name{color:#9fe8ff}.token.attr-value{color:#00ff9d}.token.string{color:#00ff9d}.token.punctuation{color:#6f8579}.token.attr-value .token.punctuation{color:#00ff9d}.token.comment{color:#6f8579;font-style:italic}.token.keyword{color:#ff7b9c}.token.function{color:#9fe8ff}.token.operator{color:#9fe8ff}.token.number{color:#ffb87e}.token.boolean{color:#d18fff}.token.property{color:#9fe8ff}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}";
|
|
6627
6608
|
var EdsCodeBlockStyle0 = edsCodeBlockCss;
|
|
6628
6609
|
|
|
6629
6610
|
//import { sendAnalytics } from '../../utils/analytics';
|
|
@@ -6702,7 +6683,7 @@ class EdsCodeBlock {
|
|
|
6702
6683
|
return this.code; // Fallback if language is not provided or unsupported
|
|
6703
6684
|
}
|
|
6704
6685
|
render() {
|
|
6705
|
-
return (hAsync("div", { key: '
|
|
6686
|
+
return (hAsync("div", { key: '70292c4efd3cfaa9e825fe5f50ca4c04807bfbf6', class: "codewrap" }, hAsync("div", { key: '8af431690673102d18e43fe225267244ecf7ed1c', class: "codetop" }, hAsync("span", { key: '484e4eb6636cd91314a17a3f048f8486f7dccb0a', class: "langchip" }, this.language ? this.language.toUpperCase() : 'CODE'), hAsync("button", { key: '9a866e116ce719c59985b62850a351a4a87c30a8', type: "button", class: "copy", "aria-label": "Copy code", onClick: () => this.copyToClipboard() }, hAsync("eds-icon-wrapper", { key: 'bfb0c5fe395e5a1f814e32fe21edff4829394225', name: this.copied ? 'checkmark-filled' : 'copy', size: 16 }), this.copied ? 'Copied' : 'Copy')), hAsync("pre", { key: 'cda2b6d9eee175ea01ee99ce68912813efa12a48', class: this.language ? `language-${this.language}` : '', role: "region", "aria-label": this.language ? `Code block in ${this.language}` : 'Code block' }, hAsync("code", { key: '2ebb1b9ac0f24a6c3c82e486745a476a4b4d5b7c', innerHTML: this.getHighlightedCode() }))));
|
|
6706
6687
|
}
|
|
6707
6688
|
get el() { return getElement(this); }
|
|
6708
6689
|
static get style() { return EdsCodeBlockStyle0; }
|
|
@@ -6750,7 +6731,7 @@ class EdsCookiesPreference {
|
|
|
6750
6731
|
}
|
|
6751
6732
|
}
|
|
6752
6733
|
render() {
|
|
6753
|
-
return (hAsync("div", { key: '
|
|
6734
|
+
return (hAsync("div", { key: '660d6b9c21de37c5681e7678e062b8039c310bc3' }, hAsync("eds-link", { key: '3849b92ef42a578c1a59533b2281aa9df93bdfab', size: "small", intent: this.intent, label: this.buttonText, onClick: () => this.toggleCookiesPopup() }), this.showMatomoNotice && hAsync("eds-matomo-notice", { "force-show": true, key: this.noticeKey })));
|
|
6754
6735
|
}
|
|
6755
6736
|
static get style() { return EdsCookiesPreferenceStyle0; }
|
|
6756
6737
|
static get cmpMeta() { return {
|
|
@@ -7096,25 +7077,26 @@ const DEFAULT_COLUMNS = [
|
|
|
7096
7077
|
{ label: 'Documentation', href: 'https://design.ebrains.eu/get-started/', external: true },
|
|
7097
7078
|
{ label: 'Components', href: 'https://design.ebrains.eu/ui-components/', external: true },
|
|
7098
7079
|
{ label: 'Foundations', href: 'https://design.ebrains.eu/foundations/', external: true },
|
|
7099
|
-
{ label: 'Analytics', href: 'https://design.ebrains.eu/analytics/', external: true }
|
|
7100
|
-
]
|
|
7080
|
+
{ label: 'Analytics', href: 'https://design.ebrains.eu/analytics/', external: true }
|
|
7081
|
+
]
|
|
7101
7082
|
},
|
|
7102
7083
|
{
|
|
7103
7084
|
heading: 'Community',
|
|
7104
7085
|
links: [
|
|
7105
7086
|
{ label: 'GitLab', href: 'https://gitlab.ebrains.eu/ri/tech-hub/ebrains-ui-ecosystem/', external: true },
|
|
7106
7087
|
{ label: 'Storybook', href: 'https://storybook.design.ebrains.eu', external: true },
|
|
7107
|
-
{
|
|
7108
|
-
|
|
7109
|
-
|
|
7088
|
+
{
|
|
7089
|
+
label: 'Report Issues',
|
|
7090
|
+
href: 'https://gitlab.ebrains.eu/ri/tech-hub/ebrains-ui-ecosystem/-/issues',
|
|
7091
|
+
external: true
|
|
7092
|
+
},
|
|
7093
|
+
{ label: 'Contribute', href: 'https://design.ebrains.eu/get-started/contributing/', external: true }
|
|
7094
|
+
]
|
|
7110
7095
|
},
|
|
7111
7096
|
{
|
|
7112
7097
|
heading: 'Legal',
|
|
7113
|
-
links: [
|
|
7114
|
-
|
|
7115
|
-
{ label: 'Cookie Preferences', action: 'cookies' },
|
|
7116
|
-
],
|
|
7117
|
-
},
|
|
7098
|
+
links: [{ label: 'MIT License' }, { label: 'Cookie Preferences', action: 'cookies' }]
|
|
7099
|
+
}
|
|
7118
7100
|
];
|
|
7119
7101
|
/**
|
|
7120
7102
|
* `EdsFooter` is the EBRAINS-wide footer component.
|
|
@@ -7178,15 +7160,18 @@ class EdsFooter {
|
|
|
7178
7160
|
* keeps the footer working with sensible defaults.
|
|
7179
7161
|
*/
|
|
7180
7162
|
parseColumns(value) {
|
|
7181
|
-
if (value === undefined || value === null || value === '')
|
|
7163
|
+
if (value === undefined || value === null || value === '') {
|
|
7182
7164
|
return DEFAULT_COLUMNS;
|
|
7183
|
-
|
|
7165
|
+
}
|
|
7166
|
+
if (Array.isArray(value)) {
|
|
7184
7167
|
return value;
|
|
7168
|
+
}
|
|
7185
7169
|
if (typeof value === 'string') {
|
|
7186
7170
|
try {
|
|
7187
7171
|
const parsed = JSON.parse(value);
|
|
7188
|
-
if (Array.isArray(parsed))
|
|
7172
|
+
if (Array.isArray(parsed)) {
|
|
7189
7173
|
return parsed;
|
|
7174
|
+
}
|
|
7190
7175
|
console.warn('eds-footer: `columns` JSON parsed but is not an array; using defaults');
|
|
7191
7176
|
return DEFAULT_COLUMNS;
|
|
7192
7177
|
}
|
|
@@ -7202,8 +7187,9 @@ class EdsFooter {
|
|
|
7202
7187
|
this.backBtn = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#toTop');
|
|
7203
7188
|
}
|
|
7204
7189
|
handleScroll() {
|
|
7205
|
-
if (!this.backBtn)
|
|
7190
|
+
if (!this.backBtn) {
|
|
7206
7191
|
return;
|
|
7192
|
+
}
|
|
7207
7193
|
const shouldShow = window.scrollY > 100 && document.body.scrollHeight > window.innerHeight;
|
|
7208
7194
|
this.backBtn.style.opacity = shouldShow ? '1' : '0';
|
|
7209
7195
|
this.backBtn.style.pointerEvents = shouldShow ? 'auto' : 'none';
|
|
@@ -7221,8 +7207,9 @@ class EdsFooter {
|
|
|
7221
7207
|
*/
|
|
7222
7208
|
renderLink(link, index) {
|
|
7223
7209
|
if (link.action === 'cookies') {
|
|
7224
|
-
if (!this.enableCookiesSettings)
|
|
7210
|
+
if (!this.enableCookiesSettings) {
|
|
7225
7211
|
return null;
|
|
7212
|
+
}
|
|
7226
7213
|
return (hAsync("li", { key: `cookies-${index}` }, hAsync("a", { href: "javascript:void(0)", class: "footer-link", onClick: this.emitCookies, role: "button" }, this.cookiesPreferences || link.label)));
|
|
7227
7214
|
}
|
|
7228
7215
|
if (link.href) {
|
|
@@ -7239,9 +7226,8 @@ class EdsFooter {
|
|
|
7239
7226
|
// selector independently rather than relying on prop-based
|
|
7240
7227
|
// inline styles, so theme tokens stay overridable from outside
|
|
7241
7228
|
// via the host's CSS custom properties.
|
|
7242
|
-
const rootClasses = ['eds-footer-root', isInverse ? 'theme-inverse' : 'theme-default']
|
|
7243
|
-
|
|
7244
|
-
return (hAsync("footer", { key: 'b09063376e3bd78845302473a96884bd473cea09', class: rootClasses }, this.social ? (hAsync("div", { class: "footer-social" }, hAsync("div", { class: "footer-container" }, hAsync("eds-social-networks", { variant: this.variant })))) : null, hAsync("div", { key: '3aeb8f496bb4c3c73da907ba9b9fbb72841be213', class: "footer-container" }, hAsync("div", { key: 'e7e33ce7dee8079a9aff17d45963dfaff9576121', class: "footer-grid" }, hAsync("div", { key: 'e6fc738e086774e114c5ceef1b82fea2e2840990', class: "footer-brand" }, hAsync("div", { key: '96f7030269174c122ffe0117897a79b00020dd29', class: "footer-brand-row" }, hAsync("a", { key: '5967c33efff435ceee2a45c21cae67749b91b9ba', target: "_blank", rel: "noopener noreferrer", class: "footer-flag-link", href: "https://research-and-innovation.ec.europa.eu/funding/funding-opportunities/funding-programmes-and-open-calls/horizon-europe_en", "aria-label": "Learn about Horizon Europe funding" }, hAsync("svg", { key: '3de7debe64d431152e47a4daefb7c9facf7bf951', class: "footer-flag-svg", width: "63", height: "50", viewBox: "0 0 640 480", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, hAsync("path", { key: '50e3f0c5ae41e3e7cc5689ddf01a8944a6c5d2eb', d: "M0 0h640v480H0V0z", fill: "#039" }), hAsync("path", { key: '2c0f61e6de734d7214accd10cefd3a39e31f36a1', d: "M325.032 93.15l17.513-.398-14.401 9.972 5.789 16.53L320 108.639l-13.933 10.615 5.789-16.531-14.399-9.97 17.51.396L320 76.374l5.032 16.775zm0 284.444l17.513-.398-14.401 9.972 5.789 16.53L320 393.083l-13.933 10.615 5.789-16.531-14.399-9.97 17.51.397L320 360.818l5.032 16.776zm-147.25-158.983l5.029 16.761 17.511-.397-14.4 9.969 5.79 16.533-13.933-10.616-13.932 10.616 5.788-16.531-14.401-9.971 17.511.397 5.028-16.761.004-.015.001.003.001-.003.003.015zm77.885-105.334l17.511-.397-14.401 9.971 5.79 16.531-13.932-10.614-13.933 10.615 5.788-16.531-14.4-9.971h.005l-.003-.001 17.51.397 5.033-16.775 5.032 16.775zm-52.729 52.729l17.511-.398h.002l-14.402 9.971 5.79 16.531-13.933-10.615-13.932 10.615 5.789-16.532-14.4-9.97 17.51.397 5.033-16.776 5.032 16.777zm-5.001 125.803l5.027 16.759 17.513-.397-14.401 9.971 5.79 16.531-.005-.005.003.006-13.932-10.615-13.933 10.615 5.788-16.532-14.398-9.97 17.51.396 5.029-16.759.004-.016v.003l.002-.003.003.016zm51.445 47.71l5.027 16.76 17.513-.397-14.401 9.97 5.791 16.532-.004-.004.002.004-13.933-10.615-13.933 10.615 5.788-16.532-14.398-9.97 17.51.397 5.029-16.76.004-.016v.003l.002-.003.003.016zm217.873-104.147l17.511-.397-14.401 9.969 5.79 16.533-13.934-10.616-13.931 10.616 5.789-16.533-14.399-9.969 17.509.397 5.034-16.776 5.032 16.776zm-63.958-95.997l-5.786-16.522 14.401-9.972-17.511.398-5.033-16.778-5.034 16.777-17.51-.398 14.4 9.972-5.789 16.53 13.932-10.614 13.934 10.614-.004-.007zm38.797 42.122l13.934 10.614-.004-.007-5.787-16.524 14.401-9.971-17.51.399-5.033-16.778-5.033 16.777-17.51-.398h-.001l14.399 9.972-5.787 16.529 13.931-10.613zm5.007 127.071l17.51-.397-14.4 9.971 5.79 16.531-13.933-10.614-13.932 10.615 5.788-16.531-14.401-9.971h.005l-.003-.001 17.51.397 5.033-16.775 5.033 16.775zm-51.446 47.711l17.511-.397-14.4 9.97 5.79 16.532-13.933-10.615-13.933 10.615 5.789-16.531-14.401-9.971h.002l17.51.397 5.033-16.776 5.032 16.776z", fill: "#FC0" }))), hAsync("p", { key: '9ff8e10db0e213754bfc73bcce1b3dd36bc62e30', class: "footer-funded" }, this.fundedBy)), hAsync("p", { key: 'a24c4fbfe48c4c3c8d076f24da9c84b739a982d8', class: "footer-copyright" }, "\u00A9 ", rights)), this.resolvedColumns.map((col, ci) => (hAsync("div", { class: "footer-column", key: `col-${ci}` }, hAsync("h4", { class: "footer-column-heading" }, col.heading), hAsync("ul", { class: "footer-column-list" }, (col.links || []).map((link, li) => this.renderLink(link, li)))))))), this.enableScrollTop ? (hAsync("div", { id: "toTop", class: "footer-back-to-top" }, hAsync("eds-button", { id: "backToTop", "aria-label": this.backToTopAriaLabel, intent: isInverse ? 'ghostInverse' : 'ghost', size: "large", icon: "chevron-up", onClick: this.backToTop, tabindex: "-1" }))) : null));
|
|
7229
|
+
const rootClasses = ['eds-footer-root', isInverse ? 'theme-inverse' : 'theme-default'].join(' ');
|
|
7230
|
+
return (hAsync("footer", { key: 'e7d7584fcd2dcfd2e4e469c5e9e2621f010036fe', class: rootClasses }, this.social ? (hAsync("div", { class: "footer-social" }, hAsync("div", { class: "footer-container" }, hAsync("eds-social-networks", { variant: this.variant })))) : null, hAsync("div", { key: '4233c2f5665ff8fd49f1949ef450b87149f1d9ba', class: "footer-container" }, hAsync("div", { key: '6a90c75dc5a099727e58fb21c706e7d310c2e58f', class: "footer-grid" }, hAsync("div", { key: '450704c6200bf603a296c383872eecdf4ef94fd9', class: "footer-brand" }, hAsync("div", { key: '380ba7f532a8f94627e206e33480be697861dc57', class: "footer-brand-row" }, hAsync("a", { key: '2cbc262b8630d7106b1ff4c9b9e97f7421df05bd', target: "_blank", rel: "noopener noreferrer", class: "footer-flag-link", href: "https://research-and-innovation.ec.europa.eu/funding/funding-opportunities/funding-programmes-and-open-calls/horizon-europe_en", "aria-label": "Learn about Horizon Europe funding" }, hAsync("svg", { key: 'a1374ae892acdd10d5294e3197e9b37e8adb7b38', class: "footer-flag-svg", width: "63", height: "50", viewBox: "0 0 640 480", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, hAsync("path", { key: '11b83b7931271e829803de01822a6618e66c8b17', d: "M0 0h640v480H0V0z", fill: "#039" }), hAsync("path", { key: '2e5b724042df62f59964709ec2e6954767690805', d: "M325.032 93.15l17.513-.398-14.401 9.972 5.789 16.53L320 108.639l-13.933 10.615 5.789-16.531-14.399-9.97 17.51.396L320 76.374l5.032 16.775zm0 284.444l17.513-.398-14.401 9.972 5.789 16.53L320 393.083l-13.933 10.615 5.789-16.531-14.399-9.97 17.51.397L320 360.818l5.032 16.776zm-147.25-158.983l5.029 16.761 17.511-.397-14.4 9.969 5.79 16.533-13.933-10.616-13.932 10.616 5.788-16.531-14.401-9.971 17.511.397 5.028-16.761.004-.015.001.003.001-.003.003.015zm77.885-105.334l17.511-.397-14.401 9.971 5.79 16.531-13.932-10.614-13.933 10.615 5.788-16.531-14.4-9.971h.005l-.003-.001 17.51.397 5.033-16.775 5.032 16.775zm-52.729 52.729l17.511-.398h.002l-14.402 9.971 5.79 16.531-13.933-10.615-13.932 10.615 5.789-16.532-14.4-9.97 17.51.397 5.033-16.776 5.032 16.777zm-5.001 125.803l5.027 16.759 17.513-.397-14.401 9.971 5.79 16.531-.005-.005.003.006-13.932-10.615-13.933 10.615 5.788-16.532-14.398-9.97 17.51.396 5.029-16.759.004-.016v.003l.002-.003.003.016zm51.445 47.71l5.027 16.76 17.513-.397-14.401 9.97 5.791 16.532-.004-.004.002.004-13.933-10.615-13.933 10.615 5.788-16.532-14.398-9.97 17.51.397 5.029-16.76.004-.016v.003l.002-.003.003.016zm217.873-104.147l17.511-.397-14.401 9.969 5.79 16.533-13.934-10.616-13.931 10.616 5.789-16.533-14.399-9.969 17.509.397 5.034-16.776 5.032 16.776zm-63.958-95.997l-5.786-16.522 14.401-9.972-17.511.398-5.033-16.778-5.034 16.777-17.51-.398 14.4 9.972-5.789 16.53 13.932-10.614 13.934 10.614-.004-.007zm38.797 42.122l13.934 10.614-.004-.007-5.787-16.524 14.401-9.971-17.51.399-5.033-16.778-5.033 16.777-17.51-.398h-.001l14.399 9.972-5.787 16.529 13.931-10.613zm5.007 127.071l17.51-.397-14.4 9.971 5.79 16.531-13.933-10.614-13.932 10.615 5.788-16.531-14.401-9.971h.005l-.003-.001 17.51.397 5.033-16.775 5.033 16.775zm-51.446 47.711l17.511-.397-14.4 9.97 5.79 16.532-13.933-10.615-13.933 10.615 5.789-16.531-14.401-9.971h.002l17.51.397 5.033-16.776 5.032 16.776z", fill: "#FC0" }))), hAsync("p", { key: '20e15f10baf1ddf47bc35e4d339a8efaf4b4bb49', class: "footer-funded" }, this.fundedBy)), hAsync("p", { key: '126e04d4a993422b5554fb87dfb9b388e8d2a4af', class: "footer-copyright" }, "\u00A9 ", rights)), this.resolvedColumns.map((col, ci) => (hAsync("div", { class: "footer-column", key: `col-${ci}` }, hAsync("h4", { class: "footer-column-heading" }, col.heading), hAsync("ul", { class: "footer-column-list" }, (col.links || []).map((link, li) => this.renderLink(link, li)))))))), this.enableScrollTop ? (hAsync("div", { id: "toTop", class: "footer-back-to-top" }, hAsync("eds-button", { id: "backToTop", "aria-label": this.backToTopAriaLabel, intent: isInverse ? 'ghostInverse' : 'ghost', size: "large", icon: "chevron-up", onClick: this.backToTop, tabindex: "-1" }))) : null));
|
|
7245
7231
|
}
|
|
7246
7232
|
get el() { return getElement(this); }
|
|
7247
7233
|
static get watchers() { return {
|
|
@@ -7490,11 +7476,7 @@ function safeInlineFormat(text) {
|
|
|
7490
7476
|
if (!text) {
|
|
7491
7477
|
return '';
|
|
7492
7478
|
}
|
|
7493
|
-
let s = String(text)
|
|
7494
|
-
.replace(/&/g, '&')
|
|
7495
|
-
.replace(/</g, '<')
|
|
7496
|
-
.replace(/>/g, '>')
|
|
7497
|
-
.replace(/"/g, '"');
|
|
7479
|
+
let s = String(text).replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"');
|
|
7498
7480
|
// bold
|
|
7499
7481
|
s = s.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
|
|
7500
7482
|
// links — safe schemes only; otherwise drop to the plain label
|
|
@@ -7540,7 +7522,7 @@ function getFormInitData({ initData, parsedFields, currentValues
|
|
|
7540
7522
|
return { updatedValues };
|
|
7541
7523
|
}
|
|
7542
7524
|
|
|
7543
|
-
const edsFormCss = ".container{width:calc(var(--container-width, 100%) - (2 * var(--breakout-container-outer-gutter, var(--container-outer-gutter, var(--outer-gutter, 0)))));margin-right:auto;margin-left:auto}.container>*{--container-outer-gutter:0;--breakout-container-outer-gutter:0}.flex{display:flex}.flex-col{flex-direction:column}.f-body-01{font-family:var(--f-body-01-fontFamily);font-weight:var(--f-body-01-fontWeight);font-size:var(--f-body-01-fontSize);line-height:var(--f-body-01-lineHeight);letter-spacing:var(--f-body-01-letterSpacing)}.f-body-02{font-family:var(--f-body-02-fontFamily);font-weight:var(--f-body-02-fontWeight);font-size:var(--f-body-02-fontSize);line-height:var(--f-body-02-lineHeight);letter-spacing:var(--f-body-02-letterSpacing)}.f-body-01 b,.f-body-01 strong{font-weight:var(--f-body-01---bold-weight, bold)}.f-body-02 b,.f-body-02 strong{font-weight:var(--f-body-02---bold-weight, bold)}.f-heading-04{font-family:var(--f-heading-04-fontFamily);font-weight:600;font-size:var(--f-heading-04-fontSize);line-height:var(--f-heading-04-lineHeight);letter-spacing:var(--f-heading-04-letterSpacing)}.f-heading-05{font-family:var(--f-heading-05-fontFamily);font-weight:600;font-size:var(--f-heading-05-fontSize);line-height:var(--f-heading-05-lineHeight);letter-spacing:var(--f-heading-05-letterSpacing);overflow:visible}.text-light{color:var(--grey-dark)}.rounded-xs{border-radius:4px}.rounded-sm{border-radius:8px}.border-softer{border-color:rgba(0, 0, 0, .1)}.border-2{border-width:2px}.border-t-2{border-top-width:2px}.mt-20{margin-top:1.25rem}.mt-32{margin-top:2rem}.mt-64{margin-top:4rem}.mb-32{margin-bottom:2rem}.pt-28{padding-top:1.75rem}.pt-32{padding-top:2rem}.pt-64{padding-top:4rem}.pl-8{padding-left:0.5rem}.pl-16{padding-left:1rem}.border-l-2{border-left-width:2px}.gap-y-8{row-gap:0.5rem}.gap-y-16{row-gap:1rem}.gap-y-20{row-gap:1.25rem}.gap-y-24{row-gap:1.5rem}.border-group{border-left:1px solid var(--soft-color, #ddd);padding-left:1rem}.bg-inverse{background-color:var(--white)}.form-brand{box-shadow:0 2px 12px rgba(0, 0, 0, 0.08);border-left:4px solid var(--brand-green);animation:fadeInUp 0.6s ease}@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.effect-shadow{transition-property:box-shadow;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}.shadow-hover{--tw-shadow:0px 0px 16px rgba(0, 0, 0, 0.2);--tw-shadow-colored:0px 0px 16px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.cursor-pointer{cursor:pointer}.effect-focus-within{outline-width:3px;outline-offset:2px;outline-color:var(--brand-green)}.effect-focus-within:focus-within{outline-style:solid}.relative{position:relative}.rounded-sm{border-radius:8px}.rounded-lg{border-radius:16px}.px-16{padding-left:1rem;padding-right:1rem}.pb-4{padding-bottom:0.25rem}.pb-16{padding-bottom:1rem}.p-32{padding:2rem}.mr-auto{margin-right:auto}.ml-auto{margin-left:auto}.w-full{width:100%}.justify-between{justify-content:space-between}.items-center{align-items:center}@media (min-width: 750px){.md\\:flex-row-reverse{flex-direction:row-reverse}.md\\:justify-between{justify-content:space-between}.md\\:gap-y-0{row-gap:0}.md\\:w-auto{width:auto}.md\\:mt-64{margin-top:4rem}.md\\:pt-64{padding-top:4rem}}.eds-desc-link{position:relative;display:inline-block;color:var(--brand-black);text-decoration:none}.eds-desc-link::after{content:'';position:absolute;bottom:-2px;left:0;width:0;height:2px;background-color:var(--brand-green);transition:width 0.3s ease}.eds-desc-link:hover::after{width:100%}.eds-desc-link:focus-visible::after{width:0}.eds-content-block{line-height:1.5;color:var(--brand-black, #07140d)}.eds-content-block strong{font-weight:600}.eds-content-block .eds-desc-link{font-weight:600}";
|
|
7525
|
+
const edsFormCss = ".container{width:calc(var(--container-width, 100%) - (2 * var(--breakout-container-outer-gutter, var(--container-outer-gutter, var(--outer-gutter, 0)))));margin-right:auto;margin-left:auto}.container>*{--container-outer-gutter:0;--breakout-container-outer-gutter:0}.flex{display:flex}.flex-col{flex-direction:column}.f-body-01{font-family:var(--f-body-01-fontFamily);font-weight:var(--f-body-01-fontWeight);font-size:var(--f-body-01-fontSize);line-height:var(--f-body-01-lineHeight);letter-spacing:var(--f-body-01-letterSpacing)}.f-body-02{font-family:var(--f-body-02-fontFamily);font-weight:var(--f-body-02-fontWeight);font-size:var(--f-body-02-fontSize);line-height:var(--f-body-02-lineHeight);letter-spacing:var(--f-body-02-letterSpacing)}.f-body-01 b,.f-body-01 strong{font-weight:var(--f-body-01---bold-weight, bold)}.f-body-02 b,.f-body-02 strong{font-weight:var(--f-body-02---bold-weight, bold)}.f-heading-04{font-family:var(--f-heading-04-fontFamily);font-weight:600;font-size:var(--f-heading-04-fontSize);line-height:var(--f-heading-04-lineHeight);letter-spacing:var(--f-heading-04-letterSpacing)}.f-heading-05{font-family:var(--f-heading-05-fontFamily);font-weight:600;font-size:var(--f-heading-05-fontSize);line-height:var(--f-heading-05-lineHeight);letter-spacing:var(--f-heading-05-letterSpacing);overflow:visible}.text-light{color:var(--grey-dark)}.rounded-xs{border-radius:4px}.rounded-sm{border-radius:8px}.border-softer{border-color:rgba(0, 0, 0, .1)}.border-2{border-width:2px}.border-t-2{border-top-width:2px}.mt-20{margin-top:1.25rem}.mt-24{margin-top:1.5rem}.mt-32{margin-top:2rem}.mt-48{margin-top:3rem}.mt-64{margin-top:4rem}.mb-32{margin-bottom:2rem}.mb-48{margin-bottom:3rem}.pt-28{padding-top:1.75rem}.pt-32{padding-top:2rem}.pt-64{padding-top:4rem}.pl-8{padding-left:0.5rem}.pl-16{padding-left:1rem}.border-l-2{border-left-width:2px}.gap-y-8{row-gap:0.5rem}.gap-y-16{row-gap:1rem}.gap-y-20{row-gap:1.25rem}.gap-y-24{row-gap:1.5rem}.border-group{border-left:1px solid var(--soft-color, #ddd);padding-left:1rem}.bg-inverse{background-color:var(--white)}.form-brand{box-shadow:0 2px 12px rgba(0, 0, 0, 0.08);border-left:4px solid var(--brand-green);animation:fadeInUp 0.6s ease}.form-brand-card{--warn:#ffb22c;--warn-strong:#b26b00;--danger:#ff6b5b;--danger-strong:#c0392b;background:var(--white, #fff);border:1px solid var(--line-color, #e2e2e2);border-radius:20px;overflow:hidden;box-shadow:0 30px 60px -34px rgba(7, 20, 13, 0.32);animation:fadeInUp 0.6s ease}.form-brand-header{position:relative;overflow:hidden;background:var(--brand-black, #07140d);color:#fff;padding:38px 40px 34px}.fbh-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px),\n linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px);background-size:42px 42px;-webkit-mask-image:radial-gradient(130% 110% at 15% 0%, #000, transparent 72%);mask-image:radial-gradient(130% 110% at 15% 0%, #000, transparent 72%);opacity:0.5;pointer-events:none}.fbh-glow{position:absolute;top:-50%;right:-12%;width:420px;height:420px;background:radial-gradient(circle, rgba(0, 255, 157, 0.16), transparent 62%);pointer-events:none}.fbh-glow--expiring{background:radial-gradient(circle, rgba(255, 178, 44, 0.13), transparent 62%)}.fbh-glow--closed{background:radial-gradient(circle, rgba(192, 57, 43, 0.14), transparent 62%)}.fbh-in{position:relative}.fbh-brand{display:flex;align-items:center;gap:10px;margin-bottom:24px}.fbh-mark{width:30px;height:30px;border-radius:50%;background:linear-gradient(150deg, #00ff9d, #00c87b 55%, #0a8f5a);display:flex;align-items:center;justify-content:center}.fbh-mark svg{width:19px;height:19px}.fbh-word{font-weight:600;font-size:16px;letter-spacing:0.04em}.fbh-logo{width:150px;margin-bottom:22px}.fbh-eyebrow{font-family:'IBM Plex Mono', monospace;font-size:11px;letter-spacing:0.15em;text-transform:uppercase;color:var(--brand-green, #00ff9d);display:inline-flex;align-items:center;gap:7px}.fbh-eyebrow svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2;flex:0 0 12px}.fbh-eyebrow--expiring{color:var(--warn, #ffb22c)}.fbh-eyebrow--closed{color:var(--danger, #ff6b5b)}.fbh-title{font-weight:200;font-size:clamp(26px, 4vw, 36px);letter-spacing:-0.02em;line-height:1.08;margin-bottom:12px}.fbh-sub{font-size:14.5px;color:rgba(235, 242, 238, 0.62);font-weight:300;max-width:72ch;line-height:1.55}.fbh-meta{display:flex;gap:22px;margin-top:22px;flex-wrap:wrap}.fbh-meta span{display:inline-flex;align-items:center;gap:7px;font-family:'IBM Plex Mono', monospace;font-size:10.5px;letter-spacing:0.06em;text-transform:uppercase;color:rgba(235, 242, 238, 0.62)}.fbh-meta svg{width:13px;height:13px;stroke:var(--brand-green, #00ff9d);fill:none;stroke-width:1.8}.fbh-meta span.is-warn{color:var(--warn, #ffb22c)}.fbh-meta span.is-warn svg{stroke:var(--warn, #ffb22c)}.fbh-meta span.is-danger{color:var(--danger, #ff6b5b)}.fbh-meta span.is-danger svg{stroke:var(--danger, #ff6b5b)}.form-meta-time{display:inline-flex;align-items:center;gap:7px;width:fit-content;font-family:'IBM Plex Mono', monospace;font-size:10.5px;letter-spacing:0.06em;text-transform:uppercase;color:var(--grey-dark)}.form-meta-time svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.form-brand-body{padding:var(--eds-form-padding, 34px 40px 30px);--eds-field-accent:#00c87b}.form-brand-body--closed{opacity:0.55}.form-sect{margin-bottom:30px}.form-sect:last-child{margin-bottom:0}.form-sect-head{display:flex;align-items:center;gap:9px;margin-bottom:18px;padding-bottom:12px;border-bottom:1px solid var(--line-color, #e2e2e2)}.form-sect-glyph{color:#00c87b;display:inline-flex}.form-sect-glyph svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}.form-sect-label{font-family:'IBM Plex Mono', monospace;font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--brand-black, #07140d)}.form-brand-footer{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:24px 40px;border-top:1px solid var(--line-color, #e2e2e2);background:#fcfcfc;flex-wrap:wrap}.form-brand-footer-actions{display:flex;align-items:center;gap:12px}.req-note{font-family:'IBM Plex Mono', monospace;font-size:10.5px;letter-spacing:0.06em;text-transform:uppercase;color:#8a8c8a}.req-note b{color:#00c87b}.fbf-left{display:flex;align-items:center;gap:12px;min-width:0}.fbf-save{display:inline-flex;align-items:center;gap:9px;font-family:'IBM Plex Mono', monospace;font-size:10.5px;letter-spacing:0.07em;text-transform:uppercase;color:#8a8c8a;transition:color 0.2s;white-space:nowrap}.fbf-save-dot{width:7px;height:7px;border-radius:50%;background:#00c87b;flex:0 0 7px;transition:background 0.2s}.fbf-save--saving{color:#7a7b7a}.fbf-save--saving .fbf-save-dot{background:#7a7b7a;animation:fbfPulse 1s ease-in-out infinite}.fbf-save--error{color:var(--danger-strong, #c0392b)}.fbf-save--error .fbf-save-dot{background:var(--danger-strong, #c0392b)}@keyframes fbfPulse{0%,100%{opacity:1}50%{opacity:0.25}}.fbf-sep{width:1px;height:13px;background:var(--line-color, #e2e2e2);flex:0 0 1px}.fbf-clear{font-family:'IBM Plex Sans', system-ui, sans-serif;font-size:13.5px;color:var(--body-l, #5a5f5c);cursor:pointer;background:none;border:none;padding:6px 2px;transition:color 0.15s}.fbf-clear:hover:not(:disabled){color:var(--danger-strong, #c0392b)}.fbf-clear:disabled{opacity:0.4;cursor:not-allowed}.fbf-confirm{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.fbf-confirm-q{font-size:13.5px;color:var(--danger-strong, #c0392b);display:inline-flex;align-items:center;gap:8px}.fbf-confirm-q svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;flex:0 0 15px}.fbf-confirm-no{font-family:'IBM Plex Sans', system-ui, sans-serif;font-size:13.5px;color:var(--body-l, #5a5f5c);cursor:pointer;background:none;border:none}.fbf-confirm-no:hover{color:var(--brand-black, #07140d)}.fbf-confirm-yes{font-family:'IBM Plex Sans', system-ui, sans-serif;font-size:13.5px;font-weight:500;cursor:pointer;border-radius:999px;padding:9px 16px;background:#fdf0ee;color:var(--danger-strong, #c0392b);border:1px solid #f2cfc9;transition:0.15s}.fbf-confirm-yes:hover{background:var(--danger-strong, #c0392b);color:#fff;border-color:var(--danger-strong, #c0392b)}.req-note--closed{display:inline-flex;align-items:center;gap:7px;color:var(--danger-strong, #c0392b)}.req-note--closed svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;flex:0 0 13px}@media (max-width: 600px){.form-brand-header,.form-brand-footer{padding-left:24px;padding-right:24px}.form-brand-body{padding:var(--eds-form-padding, 28px 24px 28px)}.form-brand-footer{align-items:flex-start;flex-direction:column-reverse;gap:20px;padding-top:22px}.form-brand-footer-actions,.fbf-confirm{width:100%;justify-content:space-between}.fbf-left{flex-wrap:wrap;row-gap:8px;width:100%;padding-top:20px;border-top:1px solid var(--line-color, #e2e2e2)}}@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.effect-shadow{transition-property:box-shadow;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}.shadow-hover{--tw-shadow:0px 0px 16px rgba(0, 0, 0, 0.2);--tw-shadow-colored:0px 0px 16px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.cursor-pointer{cursor:pointer}.effect-focus-within{outline-width:3px;outline-offset:2px;outline-color:var(--brand-green)}.effect-focus-within:focus-within{outline-style:solid}.relative{position:relative}.rounded-sm{border-radius:8px}.rounded-lg{border-radius:16px}.px-16{padding-left:1rem;padding-right:1rem}.pb-4{padding-bottom:0.25rem}.pb-16{padding-bottom:1rem}.p-32{padding:2rem}.mr-auto{margin-right:auto}.ml-auto{margin-left:auto}.w-full{width:100%}.justify-between{justify-content:space-between}.items-center{align-items:center}@media (min-width: 750px){.md\\:flex-row-reverse{flex-direction:row-reverse}.md\\:justify-between{justify-content:space-between}.md\\:gap-y-0{row-gap:0}.md\\:w-auto{width:auto}.md\\:mt-64{margin-top:4rem}.md\\:pt-64{padding-top:4rem}}.eds-desc-link{position:relative;display:inline-block;color:var(--brand-black);text-decoration:none}.eds-desc-link::after{content:'';position:absolute;bottom:-2px;left:0;width:0;height:2px;background-color:var(--brand-green);transition:width 0.3s ease}.eds-desc-link:hover::after{width:100%}.eds-desc-link:focus-visible::after{width:0}.fbh-sub .eds-desc-link{color:#fff;font-weight:400}.eds-content-block{line-height:1.5;color:var(--brand-black, #07140d)}.eds-content-block strong{font-weight:600}.eds-content-block .eds-desc-link{font-weight:600}";
|
|
7544
7526
|
var EdsFormStyle0 = edsFormCss;
|
|
7545
7527
|
|
|
7546
7528
|
/**
|
|
@@ -7562,6 +7544,12 @@ class EdsForm {
|
|
|
7562
7544
|
this.name = 'eds-form';
|
|
7563
7545
|
this.title = 'Form Title';
|
|
7564
7546
|
this.description = 'Form Description';
|
|
7547
|
+
this.eyebrow = undefined;
|
|
7548
|
+
this.estimatedTime = undefined;
|
|
7549
|
+
this.progress = undefined;
|
|
7550
|
+
this.expires = undefined;
|
|
7551
|
+
this.policy = undefined;
|
|
7552
|
+
this.gdpr = false;
|
|
7565
7553
|
this.setFormUrl = true;
|
|
7566
7554
|
this.formBtn = true;
|
|
7567
7555
|
this.formBtnLabel = 'Submit';
|
|
@@ -7573,7 +7561,11 @@ class EdsForm {
|
|
|
7573
7561
|
this.groups = [];
|
|
7574
7562
|
this.initData = {};
|
|
7575
7563
|
this.formStyle = 'default';
|
|
7564
|
+
this.status = 'open';
|
|
7565
|
+
this.saveStatus = 'idle';
|
|
7566
|
+
this.saveLabel = undefined;
|
|
7576
7567
|
this.values = {};
|
|
7568
|
+
this.showClearConfirm = false;
|
|
7577
7569
|
this.isSubmitting = false;
|
|
7578
7570
|
this.hasError = false;
|
|
7579
7571
|
this.errors = {};
|
|
@@ -7932,6 +7924,10 @@ class EdsForm {
|
|
|
7932
7924
|
handleSubmit(e) {
|
|
7933
7925
|
var _a, _b;
|
|
7934
7926
|
e === null || e === void 0 ? void 0 : e.preventDefault();
|
|
7927
|
+
// A closed brand form is read-only — never submit.
|
|
7928
|
+
if (this.status === 'closed') {
|
|
7929
|
+
return;
|
|
7930
|
+
}
|
|
7935
7931
|
if (this.isSubmitting) {
|
|
7936
7932
|
return;
|
|
7937
7933
|
}
|
|
@@ -8014,11 +8010,13 @@ class EdsForm {
|
|
|
8014
8010
|
}
|
|
8015
8011
|
}
|
|
8016
8012
|
});
|
|
8017
|
-
// Emit event
|
|
8013
|
+
// Emit event. `cleared: true` lets the host skip autosaving the now-empty
|
|
8014
|
+
// form — so clearing never overwrites the last saved draft.
|
|
8018
8015
|
this.form.emit({
|
|
8019
8016
|
event: 'change',
|
|
8020
8017
|
message: 'Form cleared',
|
|
8021
|
-
success: true
|
|
8018
|
+
success: true,
|
|
8019
|
+
cleared: true
|
|
8022
8020
|
});
|
|
8023
8021
|
sendAnalytics({
|
|
8024
8022
|
category: 'ui-component',
|
|
@@ -8052,6 +8050,9 @@ class EdsForm {
|
|
|
8052
8050
|
if (!this.isFieldVisible(field)) {
|
|
8053
8051
|
return null;
|
|
8054
8052
|
}
|
|
8053
|
+
// A closed (expired / not-accepting) brand form is read-only: force every
|
|
8054
|
+
// field disabled regardless of its own config.
|
|
8055
|
+
const fieldDisabled = field.disabled || this.status === 'closed';
|
|
8055
8056
|
// 0) Presentational "Text Block" — static formatted text, NOT an input.
|
|
8056
8057
|
// It has no value, is never added to the submission (makeFormData only
|
|
8057
8058
|
// iterates this.values) and is never validated (see formValidators). The
|
|
@@ -8065,20 +8066,20 @@ class EdsForm {
|
|
|
8065
8066
|
if (field.type === 'rating') {
|
|
8066
8067
|
// pull the current value (or zero)
|
|
8067
8068
|
const val = this.values[field.name] || 0;
|
|
8068
|
-
return (hAsync("div", { class: "form-group rating-field", key: field.name }, hAsync("div", { class: "flex justify-between" }, field && (hAsync("eds-input-label", { name: `rating-${field.name}`, label: field.label, disabled:
|
|
8069
|
+
return (hAsync("div", { class: "form-group rating-field", key: field.name }, hAsync("div", { class: "flex justify-between" }, field && (hAsync("eds-input-label", { name: `rating-${field.name}`, label: field.label, disabled: fieldDisabled, required: field.required }))), hAsync("eds-rating", { id: `rating-${field.name}`, "rating-type": field.ratingType, "rating-count": field.ratingCount, "selected-rating": val, onRating: (e) => this.handleRating(e, field) }), hAsync("div", { class: "mt-6" }, hAsync("eds-input-footer", { id: `${field.name}-footer`, name: field.name, message: field.message, "error-message": (_c = this.errors[field.name]) === null || _c === void 0 ? void 0 : _c.join('<br/>'), error: !!this.errors[field.name], link: field.link }))));
|
|
8069
8070
|
}
|
|
8070
8071
|
else if (field.type === 'nps') {
|
|
8071
8072
|
// pull the current value (or null)
|
|
8072
8073
|
const val = this.values[field.name] !== undefined ? this.values[field.name] : null;
|
|
8073
|
-
return (hAsync("div", { class: "form-group nps-field", key: field.name }, hAsync("div", { class: "flex justify-between" }, field && (hAsync("eds-input-label", { name: `nps-${field.name}`, label: field.question, disabled:
|
|
8074
|
+
return (hAsync("div", { class: "form-group nps-field", key: field.name }, hAsync("div", { class: "flex justify-between" }, field && (hAsync("eds-input-label", { name: `nps-${field.name}`, label: field.question, disabled: fieldDisabled, required: field.required }))), hAsync("eds-nps", { id: `nps-${field.name}`, "right-label": field.rightLabel, "left-label": field.leftLabel, "selected-value": val, onNps: (e) => this.handleNPS(e, field) }), hAsync("div", { class: "mt-6" }, hAsync("eds-input-footer", { id: `${field.name}-footer`, name: field.name, "error-message": (_d = this.errors[field.name]) === null || _d === void 0 ? void 0 : _d.join('<br/>'), error: !!this.errors[field.name] }))));
|
|
8074
8075
|
}
|
|
8075
8076
|
else if (field.type === 'search-select') {
|
|
8076
|
-
return (hAsync("eds-search-select", { key: field.name, name: field.name, label: field.label, source: field.source, options: field.options, multiple: !!field.multiple, "api-base": field.apiBase || '/api/v1', placeholder: field.placeholder, required: field.required, disabled:
|
|
8077
|
+
return (hAsync("eds-search-select", { key: field.name, name: field.name, label: field.label, source: field.source, options: field.options, multiple: !!field.multiple, "api-base": field.apiBase || '/api/v1', placeholder: field.placeholder, required: field.required, disabled: fieldDisabled, hint: field.hint, message: field.message, error: !!this.errors[field.name], "error-message": (_e = this.errors[field.name]) === null || _e === void 0 ? void 0 : _e.join('<br/>'), value: this.values[field.name], onEdsinput: (e) => this.handleInput(e, field), onEdschange: (e) => this.handleChange(e, field) }));
|
|
8077
8078
|
}
|
|
8078
8079
|
else if (field.type === 'kg-web-service') {
|
|
8079
|
-
return (hAsync("eds-kg-web-services-select", { key: field.name, name: field.name, label: field.label, "api-endpoint": field.apiEndpoint || '/api/v1/kg/web-services/cached', placeholder: field.placeholder, required: field.required, disabled:
|
|
8080
|
+
return (hAsync("eds-kg-web-services-select", { key: field.name, name: field.name, label: field.label, "api-endpoint": field.apiEndpoint || '/api/v1/kg/web-services/cached', placeholder: field.placeholder, required: field.required, disabled: fieldDisabled, hint: field.hint, message: field.message, error: !!this.errors[field.name], "error-message": (_f = this.errors[field.name]) === null || _f === void 0 ? void 0 : _f.join('<br/>'), value: this.values[field.name], size: field.size || 500, onEdsinput: (e) => this.handleInput(e, field), onEdschange: (e) => this.handleChange(e, field) }));
|
|
8080
8081
|
}
|
|
8081
|
-
return (hAsync("eds-input-field", { key: field.name, name: field.name, label: field.label, placeholder: field.placeholder, type: field.type, value: this.values[field.name], required: field.required, hint: field.hint, message: field.message, link: field.link, error: !!this.errors[field.name], errorMessage: (_g = this.errors[field.name]) === null || _g === void 0 ? void 0 : _g.join('<br/>'), options: field.options, onInput: (e) => this.handleInput(e, field), onChangeNative: (e) => this.handleChange(e, field) }));
|
|
8082
|
+
return (hAsync("eds-input-field", { key: field.name, name: field.name, label: field.label, placeholder: field.placeholder, type: field.type, value: this.values[field.name], required: field.required, disabled: fieldDisabled, hint: field.hint, message: field.message, link: field.link, error: !!this.errors[field.name], errorMessage: (_g = this.errors[field.name]) === null || _g === void 0 ? void 0 : _g.join('<br/>'), options: field.options, onInput: (e) => this.handleInput(e, field), onChangeNative: (e) => this.handleChange(e, field) }));
|
|
8082
8083
|
}
|
|
8083
8084
|
async getData() {
|
|
8084
8085
|
return this.makeFormData();
|
|
@@ -8101,18 +8102,46 @@ class EdsForm {
|
|
|
8101
8102
|
const buckets = this.groupedFields;
|
|
8102
8103
|
// build the styling classes based on formStyle prop
|
|
8103
8104
|
let styleClasses = '';
|
|
8105
|
+
// No inner padding on the form card — spacing is provided by the surrounding
|
|
8106
|
+
// page/container. This keeps fields flush with the card edge (and, when the
|
|
8107
|
+
// form is slotted inside another container like a multi-step stepper, in line
|
|
8108
|
+
// with it) instead of double-padding.
|
|
8104
8109
|
if (this.formStyle === 'default') {
|
|
8105
|
-
styleClasses = 'bg-inverse border-softer relative rounded-xs border-2
|
|
8110
|
+
styleClasses = 'bg-inverse border-softer relative rounded-xs border-2';
|
|
8106
8111
|
}
|
|
8107
8112
|
else if (this.formStyle === 'shadow') {
|
|
8108
|
-
styleClasses = 'bg-inverse effect-shadow shadow-hover border-softer relative rounded-xs border-2
|
|
8113
|
+
styleClasses = 'bg-inverse effect-shadow shadow-hover border-softer relative rounded-xs border-2';
|
|
8109
8114
|
}
|
|
8110
8115
|
else if (this.formStyle === 'brand') {
|
|
8111
|
-
styleClasses = 'bg-inverse form-brand relative rounded-xs
|
|
8112
|
-
}
|
|
8113
|
-
|
|
8116
|
+
styleClasses = 'bg-inverse form-brand relative rounded-xs';
|
|
8117
|
+
}
|
|
8118
|
+
// ── Brand style: a self-contained card with a dark hero header, a light
|
|
8119
|
+
// sectioned body, and a footer. The page that hosts it is expected to be
|
|
8120
|
+
// chrome-less (the hero header is the page header). ──
|
|
8121
|
+
if (this.formStyle === 'brand') {
|
|
8122
|
+
const hasRequired = this.parsedFields.some((f) => f && f.required && f.type !== 'hidden');
|
|
8123
|
+
const groupSections = this.parsedGroups
|
|
8124
|
+
.filter((g) => Array.isArray(buckets[g.id]) && buckets[g.id].length > 0)
|
|
8125
|
+
.map((g) => (hAsync("div", { class: "form-sect", key: g.id }, hAsync("div", { class: "form-sect-head" }, hAsync("span", { class: "form-sect-glyph", "aria-hidden": "true" }, hAsync("svg", { viewBox: "0 0 24 24" }, hAsync("path", { d: "M6 4l13 7-5.5 1.5L11 18z", "stroke-linejoin": "round" }))), hAsync("span", { class: "form-sect-label" }, g.title)), hAsync("div", { class: "flex flex-col gap-y-24" }, buckets[g.id].map((f) => this.renderField(f))))));
|
|
8126
|
+
// Lifecycle: open (brand green) · expiring (amber) · closed (red, read-only).
|
|
8127
|
+
const isClosed = this.status === 'closed';
|
|
8128
|
+
const isExpiring = this.status === 'expiring';
|
|
8129
|
+
const statusSuffix = isClosed ? 'Closed' : isExpiring ? 'Closing soon' : '';
|
|
8130
|
+
const statusIcon = isClosed ? (hAsync("svg", { viewBox: "0 0 24 24" }, hAsync("circle", { cx: "12", cy: "12", r: "9" }), hAsync("path", { d: "M15 9l-6 6M9 9l6 6", "stroke-linecap": "round" }))) : isExpiring ? (hAsync("svg", { viewBox: "0 0 24 24" }, hAsync("circle", { cx: "12", cy: "12", r: "9" }), hAsync("path", { d: "M12 8v4.5M12 16h.01", "stroke-linecap": "round" }))) : null;
|
|
8131
|
+
const expiresChipClass = isClosed ? 'is-danger' : isExpiring ? 'is-warn' : '';
|
|
8132
|
+
return (hAsync("form", { class: `form-brand-card relative ${isClosed ? 'is-closed' : ''}`, ref: (el) => (this.formEl = el), autocomplete: "on", onSubmit: this.handleSubmit }, hAsync("div", { class: "form-brand-header" }, hAsync("div", { class: "fbh-grid", "aria-hidden": "true" }), hAsync("div", { class: `fbh-glow fbh-glow--${this.status}`, "aria-hidden": "true" }), hAsync("div", { class: "fbh-in" }, hAsync("div", { class: "fbh-logo" }, hAsync("eds-logo", { variant: "negative", href: "/" })), this.eyebrow && (hAsync("span", { class: `fbh-eyebrow fbh-eyebrow--${this.status}` }, statusIcon, this.eyebrow, statusSuffix ? ` · ${statusSuffix}` : '')), this.title && hAsync("h1", { class: "fbh-title" }, this.title), this.description && hAsync("p", { class: "fbh-sub", innerHTML: this.formatDescription(this.description) }), (this.progress != null || this.expires || this.policy || this.estimatedTime || this.gdpr) && (hAsync("div", { class: "fbh-meta" }, this.progress != null && (hAsync("span", null, hAsync("svg", { viewBox: "0 0 24 24" }, hAsync("circle", { cx: "12", cy: "12", r: "9" }), hAsync("path", { d: "M9 12.5l2 2 4-4" })), this.progress, "% complete")), this.expires && (hAsync("span", { class: expiresChipClass }, hAsync("svg", { viewBox: "0 0 24 24" }, hAsync("rect", { x: "4", y: "5", width: "16", height: "15", rx: "2" }), hAsync("path", { d: "M4 9h16M8 3v4M16 3v4" })), this.expires)), this.policy && (hAsync("span", null, hAsync("svg", { viewBox: "0 0 24 24" }, hAsync("path", { d: "M4 9a7 7 0 0112-4M20 15a7 7 0 01-12 4M16 5h4V1M8 19H4v4" })), this.policy)), this.estimatedTime && (hAsync("span", null, hAsync("svg", { viewBox: "0 0 24 24" }, hAsync("circle", { cx: "12", cy: "12", r: "9" }), hAsync("path", { d: "M12 8v4l3 2" })), this.estimatedTime)), this.gdpr && (hAsync("span", null, hAsync("svg", { viewBox: "0 0 24 24" }, hAsync("path", { d: "M12 3l7 3v5c0 4.4-3 8-7 10-4-2-7-5.6-7-10V6z" }), hAsync("path", { d: "M9 12l2 2 4-4" })), "GDPR compliant")))))), hAsync("div", { class: `form-brand-body ${isClosed ? 'form-brand-body--closed' : ''}` }, hiddenFields.map((field, index) => (hAsync("eds-input", { key: index, type: "hidden", name: field.name, value: field.value }))), groupSections, buckets['__ungrouped'] && buckets['__ungrouped'].length > 0 && (hAsync("div", { class: "form-sect form-sect--bare" }, hAsync("div", { class: "flex flex-col gap-y-24" }, buckets['__ungrouped'].map((f) => this.renderField(f)))))), isClosed ? (hAsync("div", { class: "form-brand-footer" }, hAsync("span", { class: "req-note req-note--closed" }, hAsync("svg", { viewBox: "0 0 24 24" }, hAsync("rect", { x: "5", y: "11", width: "14", height: "9", rx: "2" }), hAsync("path", { d: "M8 11V8a4 4 0 018 0v3" })), "Submissions closed"), hAsync("div", { class: "form-brand-footer-actions" }, hAsync("eds-button", { intent: "neutral", pill: true, label: this.formBtnLabel, disabled: true, icon: "arrow-right", size: "large" })))) : ((this.formBtn || this.clearBtn || hasRequired || this.saveLabel) && (hAsync("div", { class: "form-brand-footer" }, hAsync("div", { class: "fbf-left" }, this.saveLabel && (hAsync("span", { class: `fbf-save fbf-save--${this.saveStatus}`, role: "status", "aria-live": "polite" }, hAsync("span", { class: "fbf-save-dot", "aria-hidden": "true" }), this.saveLabel)), this.saveLabel && hasRequired && hAsync("span", { class: "fbf-sep", "aria-hidden": "true" }), hasRequired && (hAsync("span", { class: "req-note" }, hAsync("b", null, "*"), " Required fields"))), this.showClearConfirm ? (hAsync("div", { class: "fbf-confirm" }, hAsync("span", { class: "fbf-confirm-q" }, hAsync("svg", { viewBox: "0 0 24 24" }, hAsync("circle", { cx: "12", cy: "12", r: "9" }), hAsync("path", { d: "M12 8v4.5M12 16h.01", "stroke-linecap": "round" })), "Clear everything you've typed?"), hAsync("button", { type: "button", class: "fbf-confirm-no", onClick: () => (this.showClearConfirm = false) }, "Cancel"), hAsync("button", { type: "button", class: "fbf-confirm-yes", onClick: (e) => {
|
|
8133
|
+
this.showClearConfirm = false;
|
|
8134
|
+
this.handleClear(e);
|
|
8135
|
+
} }, "Yes, clear it"))) : (hAsync("div", { class: "form-brand-footer-actions" }, this.clearBtn && (hAsync("button", { type: "button", class: "fbf-clear", disabled: this.isSubmitting || !this.values || Object.keys(this.values).length === 0, onClick: () => (this.showClearConfirm = true) }, this.clearBtnLabel)), this.formBtn && (hAsync("eds-button", { intent: "brand", pill: true, label: this.formBtnLabel, disabled: this.isSubmitting, loading: this.isSubmitting, icon: "arrow-right", size: "large", onClick: () => this.handleSubmit() })))))))));
|
|
8136
|
+
}
|
|
8137
|
+
return (hAsync("form", { class: styleClasses,
|
|
8138
|
+
// Inner padding defaults to 2rem (the original p-32 look) but can be
|
|
8139
|
+
// overridden per-consumer via a CSS custom property, which inherits through
|
|
8140
|
+
// the shadow boundary. A form slotted inside an already-padded container
|
|
8141
|
+
// (e.g. a multi-step eds-steps card) sets `--eds-form-padding: 0` to sit flush.
|
|
8142
|
+
style: { padding: 'var(--eds-form-padding, 2rem)' }, ref: (el) => (this.formEl = el), autocomplete: "on", onSubmit: this.handleSubmit }, hAsync("div", { class: "flex flex-col gap-y-20 overflow-visible" }, this.estimatedTime && (hAsync("span", { class: "form-meta-time" }, hAsync("svg", { viewBox: "0 0 24 24", "aria-hidden": "true" }, hAsync("circle", { cx: "12", cy: "12", r: "9" }), hAsync("path", { d: "M12 8v4l3 2" })), this.estimatedTime)), this.title && (hAsync("span", { role: "heading", class: "f-heading-05 pb-4 block" }, this.title)), this.description && (hAsync("span", { class: "f-body-02 text-light", innerHTML: this.formatDescription(this.description) })), hAsync("slot", null)), hiddenFields.map((field, index) => (hAsync("eds-input", { key: index, type: "hidden", name: field.name, value: field.value }))), this.parsedGroups
|
|
8114
8143
|
.filter((g) => Array.isArray(buckets[g.id]) && buckets[g.id].length > 0)
|
|
8115
|
-
.map((g) => (hAsync("div", { class: "mt-
|
|
8144
|
+
.map((g) => (hAsync("div", { class: "mt-48", key: g.id }, hAsync("span", { class: "f-body-02" }, hAsync("b", null, g.title)), hAsync("div", { class: "border-group mt-24 mb-48 flex flex-col gap-y-24" }, buckets[g.id].map((f) => this.renderField(f)))))), hAsync("div", { class: "flex flex-col mt-32 gap-y-24" }, buckets['__ungrouped'].map((f) => this.renderField(f))), (this.formBtn || this.clearBtn) && (hAsync("div", { class: "mt-32 md:mt-64 flex flex-col items-center md:flex-row-reverse md:justify-between gap-y-16 md:gap-y-0" }, this.formBtn && (hAsync("eds-button", { intent: this.buttonIntent, pill: true, label: this.formBtnLabel, disabled: this.isSubmitting, loading: this.isSubmitting, icon: "arrow-right", size: "large", onClick: () => this.handleSubmit() })), this.clearBtn && (hAsync("eds-button", { intent: "neutral", pill: true, size: "large", label: this.clearBtnLabel, disabled: this.isSubmitting || !this.values || Object.keys(this.values).length === 0, onClick: (e) => this.handleClear(e) }))))));
|
|
8116
8145
|
}
|
|
8117
8146
|
get el() { return getElement(this); }
|
|
8118
8147
|
static get watchers() { return {
|
|
@@ -8127,6 +8156,12 @@ class EdsForm {
|
|
|
8127
8156
|
"name": [1],
|
|
8128
8157
|
"title": [1],
|
|
8129
8158
|
"description": [1],
|
|
8159
|
+
"eyebrow": [1],
|
|
8160
|
+
"estimatedTime": [1, "estimated-time"],
|
|
8161
|
+
"progress": [2],
|
|
8162
|
+
"expires": [1],
|
|
8163
|
+
"policy": [1],
|
|
8164
|
+
"gdpr": [4],
|
|
8130
8165
|
"setFormUrl": [4, "set-form-url"],
|
|
8131
8166
|
"formBtn": [4, "form-btn"],
|
|
8132
8167
|
"formBtnLabel": [1, "form-btn-label"],
|
|
@@ -8138,7 +8173,11 @@ class EdsForm {
|
|
|
8138
8173
|
"groups": [1],
|
|
8139
8174
|
"initData": [16],
|
|
8140
8175
|
"formStyle": [1, "form-style"],
|
|
8176
|
+
"status": [1],
|
|
8177
|
+
"saveStatus": [1, "save-status"],
|
|
8178
|
+
"saveLabel": [1, "save-label"],
|
|
8141
8179
|
"values": [32],
|
|
8180
|
+
"showClearConfirm": [32],
|
|
8142
8181
|
"isSubmitting": [32],
|
|
8143
8182
|
"hasError": [32],
|
|
8144
8183
|
"errors": [32],
|
|
@@ -8242,7 +8281,7 @@ class EdsFrame {
|
|
|
8242
8281
|
}
|
|
8243
8282
|
}
|
|
8244
8283
|
render() {
|
|
8245
|
-
return (hAsync("div", { key: '
|
|
8284
|
+
return (hAsync("div", { key: '397b0f9433b9339079774f0aa49b1451f9c0d45e', class: this.articleClasses() }, hAsync("div", { key: 'a70c2ec210a1de124a82c39d6f2592ddb9ff4572', class: "effect-height flex items-center justify-between py-8 px-12" }, hAsync("span", { key: '88d0732d0cf4b3fab14ed0e1b0797b78dd230585', class: "f-ui-02" }, this.frameLabel), !this.iframeError && this.url && this.urlLabel ? (hAsync("eds-link", { label: this.urlLabel, url: this.url, intent: this.intent, class: "ml-auto", external: true, disabled: false, icon: "arrow-up-right" })) : null), hAsync("div", { key: '85c0d453e85d23520e5a6a5bae2159285771677e', class: "border-softer" }, this.iframeError ? (hAsync("div", { class: "container ml-8 mr-8 mt-16" }, this.errorMessage)) : (hAsync("iframe", { src: this.frameSrc, width: "100%", height: this.getFrameHeight(), title: this.frameLabel, frameBorder: "0", allowFullScreen: true })))));
|
|
8246
8285
|
}
|
|
8247
8286
|
get el() { return getElement(this); }
|
|
8248
8287
|
static get style() { return EdsFrameStyle0; }
|
|
@@ -8495,8 +8534,8 @@ class EdsGitlabContributors {
|
|
|
8495
8534
|
getProjectIds() {
|
|
8496
8535
|
return this.projectId
|
|
8497
8536
|
.split(',')
|
|
8498
|
-
.map(id => id.trim())
|
|
8499
|
-
.filter(id => id.length > 0);
|
|
8537
|
+
.map((id) => id.trim())
|
|
8538
|
+
.filter((id) => id.length > 0);
|
|
8500
8539
|
}
|
|
8501
8540
|
/**
|
|
8502
8541
|
* Fetches commits by path and aggregates by author for a single project
|
|
@@ -8543,7 +8582,7 @@ class EdsGitlabContributors {
|
|
|
8543
8582
|
}
|
|
8544
8583
|
}
|
|
8545
8584
|
// Convert to GitLabContributor format
|
|
8546
|
-
return Array.from(authorMap.values()).map(author => ({
|
|
8585
|
+
return Array.from(authorMap.values()).map((author) => ({
|
|
8547
8586
|
name: author.name,
|
|
8548
8587
|
email: author.email,
|
|
8549
8588
|
commits: author.commits,
|
|
@@ -8563,18 +8602,16 @@ class EdsGitlabContributors {
|
|
|
8563
8602
|
// Fetch commits by path and aggregate by author (for monorepo)
|
|
8564
8603
|
return await this.fetchCommitsByPathForProject(projectId);
|
|
8565
8604
|
}
|
|
8566
|
-
|
|
8567
|
-
|
|
8568
|
-
|
|
8569
|
-
|
|
8570
|
-
'PRIVATE-TOKEN': this.accessToken
|
|
8571
|
-
}
|
|
8572
|
-
});
|
|
8573
|
-
if (!contributorsResponse.ok) {
|
|
8574
|
-
throw new Error(`GitLab API error: ${contributorsResponse.status} ${contributorsResponse.statusText}`);
|
|
8605
|
+
// Use contributors API for entire repository
|
|
8606
|
+
const contributorsResponse = await fetch(`${this.apiUrl}/projects/${encodeURIComponent(projectId)}/repository/contributors?per_page=100`, {
|
|
8607
|
+
headers: {
|
|
8608
|
+
'PRIVATE-TOKEN': this.accessToken
|
|
8575
8609
|
}
|
|
8576
|
-
|
|
8610
|
+
});
|
|
8611
|
+
if (!contributorsResponse.ok) {
|
|
8612
|
+
throw new Error(`GitLab API error: ${contributorsResponse.status} ${contributorsResponse.statusText}`);
|
|
8577
8613
|
}
|
|
8614
|
+
return await contributorsResponse.json();
|
|
8578
8615
|
}
|
|
8579
8616
|
/**
|
|
8580
8617
|
* Fetches contributors from GitLab API (supports multiple projects)
|
|
@@ -8589,29 +8626,24 @@ class EdsGitlabContributors {
|
|
|
8589
8626
|
this.loading = true;
|
|
8590
8627
|
this.error = '';
|
|
8591
8628
|
const projectIds = this.getProjectIds();
|
|
8592
|
-
|
|
8629
|
+
const allContributorsData = [];
|
|
8593
8630
|
// Fetch contributors from all projects
|
|
8594
8631
|
for (const projectId of projectIds) {
|
|
8595
8632
|
const contributorsData = await this.fetchContributorsForProject(projectId);
|
|
8596
8633
|
allContributorsData.push(...contributorsData);
|
|
8597
8634
|
}
|
|
8598
8635
|
// Filter by minimum commits and exclude bot contributors
|
|
8599
|
-
const filteredContributors = allContributorsData.filter(c => {
|
|
8636
|
+
const filteredContributors = allContributorsData.filter((c) => {
|
|
8600
8637
|
// Exclude if commits are below minimum
|
|
8601
|
-
if (c.commits < this.minCommits)
|
|
8638
|
+
if (c.commits < this.minCommits) {
|
|
8602
8639
|
return false;
|
|
8640
|
+
}
|
|
8603
8641
|
// Exclude GitLab CI and other bots
|
|
8604
8642
|
const email = c.email.toLowerCase();
|
|
8605
8643
|
const name = c.name.toLowerCase();
|
|
8606
8644
|
// Common bot identifiers
|
|
8607
|
-
const botPatterns = [
|
|
8608
|
-
|
|
8609
|
-
'gitlab ci',
|
|
8610
|
-
'noreply@gitlab',
|
|
8611
|
-
'bot@',
|
|
8612
|
-
'automation@'
|
|
8613
|
-
];
|
|
8614
|
-
return !botPatterns.some(pattern => email.includes(pattern) || name.includes(pattern));
|
|
8645
|
+
const botPatterns = ['gitlab-ci', 'gitlab ci', 'noreply@gitlab', 'bot@', 'automation@'];
|
|
8646
|
+
return !botPatterns.some((pattern) => email.includes(pattern) || name.includes(pattern));
|
|
8615
8647
|
});
|
|
8616
8648
|
// Aggregate duplicate contributors by username
|
|
8617
8649
|
const aggregatedContributors = this.aggregateContributors(filteredContributors);
|
|
@@ -8698,15 +8730,18 @@ class EdsGitlabContributors {
|
|
|
8698
8730
|
return (hAsync("div", { class: "loading", role: "status", "aria-live": "polite" }, hAsync("eds-spinner", { size: "sm", variant: "primary", background: "transparent", message: "Loading contributors..." })));
|
|
8699
8731
|
}
|
|
8700
8732
|
if (this.error) {
|
|
8701
|
-
return
|
|
8733
|
+
return hAsync("eds-alert", { message: "Error loading contributors", intent: "error" });
|
|
8702
8734
|
}
|
|
8703
8735
|
if (this.contributors.length === 0) {
|
|
8704
|
-
return
|
|
8705
|
-
}
|
|
8706
|
-
const gridClass = `grid gap-6 w-full ${this.columns === '2'
|
|
8707
|
-
|
|
8708
|
-
|
|
8709
|
-
|
|
8736
|
+
return hAsync("eds-alert", { message: "No contributors found for this project.", intent: "error" });
|
|
8737
|
+
}
|
|
8738
|
+
const gridClass = `grid gap-6 w-full ${this.columns === '2'
|
|
8739
|
+
? 'grid-cols-1 sm:grid-cols-2'
|
|
8740
|
+
: this.columns === '3'
|
|
8741
|
+
? 'grid-cols-1 sm:grid-cols-2 md:grid-cols-3'
|
|
8742
|
+
: this.columns === '4'
|
|
8743
|
+
? 'grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4'
|
|
8744
|
+
: 'grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5'}`;
|
|
8710
8745
|
return (hAsync("div", { class: "w-full" }, hAsync("div", { class: gridClass }, this.contributors.map((contributor) => {
|
|
8711
8746
|
const { firstName, lastName } = this.parseName(contributor.name);
|
|
8712
8747
|
return (hAsync("div", { class: "contributor-card flex flex-row gap-4 p-5 bg-white border border-gray-200 rounded-lg transition-all duration-200", key: contributor.email }, hAsync("div", { class: "flex-shrink-0" }, hAsync("eds-avatar", { firstName: firstName, lastName: lastName, color: "black" })), hAsync("div", { class: "min-w-0 flex flex-col gap-2" }, hAsync("span", { class: "f-ui-01 text-default pb-2 m-0 whitespace-nowrap overflow-hidden text-ellipsis" }, "@", contributor.username), hAsync("div", { class: "flex flex-col gap-2 mt-auto" }, hAsync("div", { class: "flex items-center gap-2 font-semibold" }, hAsync("span", { class: "text-light" }, this.formatNumber(contributor.commits)), hAsync("span", { class: "text-lighter" }, contributor.commits === 1 ? 'commit' : 'commits'))))));
|
|
@@ -8879,7 +8914,9 @@ class EdsGlobalSearch {
|
|
|
8879
8914
|
if (this.authToken) {
|
|
8880
8915
|
headers['Authorization'] = `Bearer ${this.authToken}`;
|
|
8881
8916
|
}
|
|
8882
|
-
const response = await fetch(`${this.apiEndpoint}?q=${encodeURIComponent(query)}&limit=${this.limit}`, {
|
|
8917
|
+
const response = await fetch(`${this.apiEndpoint}?q=${encodeURIComponent(query)}&limit=${this.limit}`, {
|
|
8918
|
+
headers
|
|
8919
|
+
});
|
|
8883
8920
|
if (!response.ok) {
|
|
8884
8921
|
throw new Error('Search failed');
|
|
8885
8922
|
}
|
|
@@ -8969,19 +9006,23 @@ class EdsGlobalSearch {
|
|
|
8969
9006
|
return this.hasSearched && !this.loading && !this.hasResults && this.query.trim();
|
|
8970
9007
|
}
|
|
8971
9008
|
render() {
|
|
8972
|
-
return (hAsync("div", { key: '
|
|
9009
|
+
return (hAsync("div", { key: '677355c6a3318ec1197965eac1b2cd92d1068730', class: "search-wrapper" }, hAsync("label", { key: 'f5cc85b9445df11e888428bb2a0b2b4114bdc3a9', class: `search-pill search-pill--${this.variant}`, htmlFor: "search-global" }, hAsync("svg", { key: 'b95972f32833c302166af4d496d62aabbbca6b96', class: "search-icon", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, hAsync("circle", { key: '916f6f24dc45b800fd024196cad8a5a7704715e0', cx: "11", cy: "11", r: "7" }), hAsync("line", { key: 'e73a37d14e3c5de75ff1d5e1ff3ac6dc17276884', x1: "20", y1: "20", x2: "16.5", y2: "16.5" })), hAsync("input", { key: 'e9c88b7577dbc32d700f4ccfc657ac3400c406a7', id: "search-global", class: "search-input", type: "search", name: "search-box-global", placeholder: this.placeholder, value: this.query, autoComplete: "off", onInput: this.handleInput, ref: (el) => (this.inputRef = el) }), this.query && this.query.length > 0 ? (hAsync("button", { type: "button", class: "search-clear", "aria-label": "Clear search", onMouseDown: (e) => e.preventDefault() /* keep focus in input */, onClick: () => this.handleClear() }, hAsync("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2.2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, hAsync("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), hAsync("line", { x1: "6", y1: "6", x2: "18", y2: "18" })))) : (hAsync("kbd", { class: "search-kbd", "aria-hidden": "true" }, "\u2318K"))), this.showDropdown && (hAsync("div", { key: 'bac2451a0d8e8fe44f4ee8205aac072866c071cc', class: "search-dropdown", ref: (el) => (this.dropdownRef = el) }, this.loading && (hAsync("div", { key: '2272670a68466fdcb7f7dbef9392c85524f26511', class: "flex text-center justify-center p-64" }, hAsync("eds-spinner", { key: 'ea08bc71e4e251110d63c1f7f0c9ec3cf4f02d31', variant: "primary", size: "sm" }))), this.error && !this.loading && (hAsync("div", { key: 'c54f235e8cf516715d83b830c13b7091ce10c8e5', class: "flex text-center justify-center p-16" }, hAsync("span", { key: '5e0164e70620b1b70acbd665f72e02627758d447', class: "text-error f-body-02" }, this.error))), this.showEmpty && (hAsync("div", { key: 'bc8c5dce2e1e9e0cdb46db53a94d4a06401f8c2f', class: "dropdown-state" }, hAsync("eds-icon-wrapper", { key: 'ddb1815134abfd538530de6d805006f2e629f423', name: "search" }), hAsync("div", { key: '0fe6b3742f59bf6a9745d0c3652caeed1c9fcd0c' }, hAsync("p", { key: '26751d170e283e85eb0fa914c7cd681281b79606', class: "f-body-02" }, "No results found"), hAsync("p", { key: '3c5117ba70272690647141c09105ad73142d2880', class: "f-ui-04 text-lightest" }, "Try different keywords")))), this.hasResults && !this.loading && (hAsync("ul", { key: 'ec4e905215fa05a2d29e3cb02325b898cc8e7e75', class: "dropdown-results" }, this.results.map((result, index) => (hAsync("li", { key: result.id, "data-index": index, class: {
|
|
8973
9010
|
'result-item': true,
|
|
8974
9011
|
'result-item--selected': index === this.selectedIndex
|
|
8975
|
-
}, onClick: () => this.selectResult(result), onMouseEnter: () => (this.selectedIndex = index) }, hAsync("div", { class: "result-header" }, hAsync("span", { class: "result-title f-body-02" }, result.title)), hAsync("div", { class: "result-meta" }, result.parent_software
|
|
8976
|
-
|
|
8977
|
-
|
|
8978
|
-
|
|
8979
|
-
|
|
8980
|
-
result.
|
|
8981
|
-
|
|
8982
|
-
|
|
8983
|
-
|
|
8984
|
-
|
|
9012
|
+
}, onClick: () => this.selectResult(result), onMouseEnter: () => (this.selectedIndex = index) }, hAsync("div", { class: "result-header" }, hAsync("span", { class: "result-title f-body-02" }, result.title)), hAsync("div", { class: "result-meta" }, result.parent_software
|
|
9013
|
+
? [
|
|
9014
|
+
hAsync("span", { class: "result-badge result-badge--parent" }, result.parent_software),
|
|
9015
|
+
result.section && hAsync("span", { class: "result-badge result-badge--lr" }, result.section)
|
|
9016
|
+
]
|
|
9017
|
+
: result.source === 'kg-services'
|
|
9018
|
+
? [
|
|
9019
|
+
hAsync("span", { class: "result-badge" }, "EBRAINS KG"),
|
|
9020
|
+
result.section && hAsync("span", { class: "result-badge" }, result.section)
|
|
9021
|
+
]
|
|
9022
|
+
: [
|
|
9023
|
+
hAsync("span", { class: "result-badge" }, result.source),
|
|
9024
|
+
result.section && hAsync("span", { class: "result-badge" }, result.section)
|
|
9025
|
+
], hAsync("span", { class: "result-url" }, result.url)), result.snippet && hAsync("p", { class: "result-snippet" }, this.stripHtml(result.snippet))))))), this.hasResults && !this.loading && (hAsync("div", { key: '8ba2b0905762d08201d770ef4ad555b5817a93d5', class: "dropdown-footer" }, hAsync("span", { key: '447177da436c4673c1530b63985069270eea9629', class: "footer-hint" }, hAsync("kbd", { key: 'eca68fd4c32ff1b05130322d55c6b40353d0d7e9' }, "\u2191"), " ", hAsync("kbd", { key: 'f0e8c800465276b7648e883f0de99389e144cbdf' }, "\u2193"), " navigate \u2022 ", hAsync("kbd", { key: 'a40bfd64de00d1e9e7770ae13221b84e7270a93e' }, "\u21B5"), " select \u2022 ", hAsync("kbd", { key: 'bbc53439fad27289cdd4705a7ddb61e8d3b578ee' }, "esc"), " close")))))));
|
|
8985
9026
|
}
|
|
8986
9027
|
get el() { return getElement(this); }
|
|
8987
9028
|
static get style() { return EdsGlobalSearchStyle0; }
|
|
@@ -9071,7 +9112,7 @@ class EdsHeader {
|
|
|
9071
9112
|
const logoType = this.variant === 'strong' ? 'negative' : 'positive';
|
|
9072
9113
|
// Link intent based on header variant
|
|
9073
9114
|
const linkIntent = this.variant === 'strong' ? 'underlineInverse' : 'underline';
|
|
9074
|
-
return (hAsync("header", { key: '
|
|
9115
|
+
return (hAsync("header", { key: '7b2039f33349e19ff3f6e8519e36c73008f636ff', role: "banner", class: `flex items-center justify-between relative z-10 ${classes}` }, hAsync("div", { key: '300470c050a9f50a08cc0d964b718327ecec598f', class: "w-[250px]" }, hAsync("div", { key: '4ff98957c7f838561b2a86b6fcf5a40a1f631d94', class: "p-[24px]" }, hAsync("eds-logo", { key: '610e8465379fbdc9cab1d315aa11940763ba4561', variant: logoType, href: this.url }))), this.parsedLinks && (hAsync("nav", { key: '97e14d79eea2d69fb37785984d29167e3056c2ec', role: "navigation", "aria-label": "Primary", class: "flex-1 flex justify-center items-center hidden md:flex" }, hAsync("ul", { key: '79a7dd5f647319b339078ad426160ebc21af733d', class: "flex gap-x-16" }, this.parsedLinks.map((link) => (hAsync("eds-link", { label: link.label, "aria-label": link.label, url: link.url, intent: linkIntent, size: "large", icon: link.icon, external: link.external })))))), hAsync("div", { key: '1da0a64c28395f3601e6e954f5ed9017525d4c2e', class: "w-[250px] flex justify-end items-center" }, hAsync("slot", { key: 'bae6c23ce8400bc5ff21c4aec71e915bde7b15f2', name: "actions" })), this.menu && (hAsync("div", { key: '9ab2466ce42dcf2136565a14522f734565bd2fbf', class: "md:hidden flex overflow-hidden px-16" }, hAsync("eds-button", { key: 'bd2e20f436a96bd28eea126e655f0c9c9976d32e', "aria-label": "Menu", intent: this.variant === 'strong' ? 'ghostInverse' : 'ghost', icon: "menu", size: "small", onClick: () => this.handleToggleMenu() })))));
|
|
9075
9116
|
}
|
|
9076
9117
|
get hostEl() { return getElement(this); }
|
|
9077
9118
|
static get style() { return EdsHeaderStyle0; }
|
|
@@ -9401,7 +9442,7 @@ class EdsIconBluesky {
|
|
|
9401
9442
|
this.class = '';
|
|
9402
9443
|
}
|
|
9403
9444
|
render() {
|
|
9404
|
-
return hAsync("span", { key: '
|
|
9445
|
+
return hAsync("span", { key: '5478b4eafaaa8df66ab3e172d1dae11a7bd8aab3', class: this.class, innerHTML: bluesky });
|
|
9405
9446
|
}
|
|
9406
9447
|
static get cmpMeta() { return {
|
|
9407
9448
|
"$flags$": 0,
|
|
@@ -9424,7 +9465,7 @@ class EdsIconEu {
|
|
|
9424
9465
|
this.class = '';
|
|
9425
9466
|
}
|
|
9426
9467
|
render() {
|
|
9427
|
-
return hAsync("span", { key: '
|
|
9468
|
+
return hAsync("span", { key: 'a449a7323e89e495479822dd750e2ec7935491f1', class: this.class, innerHTML: euSvg });
|
|
9428
9469
|
}
|
|
9429
9470
|
static get cmpMeta() { return {
|
|
9430
9471
|
"$flags$": 0,
|
|
@@ -9447,7 +9488,7 @@ class EdsIconFacebook {
|
|
|
9447
9488
|
this.class = '';
|
|
9448
9489
|
}
|
|
9449
9490
|
render() {
|
|
9450
|
-
return hAsync("span", { key: '
|
|
9491
|
+
return hAsync("span", { key: '44a7797929e643d63c492dfb0959d61b0513ce47', class: this.class, innerHTML: facebook });
|
|
9451
9492
|
}
|
|
9452
9493
|
static get cmpMeta() { return {
|
|
9453
9494
|
"$flags$": 0,
|
|
@@ -9470,7 +9511,7 @@ class EdsIconGitlab {
|
|
|
9470
9511
|
this.class = '';
|
|
9471
9512
|
}
|
|
9472
9513
|
render() {
|
|
9473
|
-
return hAsync("span", { key: '
|
|
9514
|
+
return hAsync("span", { key: '1dec6051705f876a5263741023164c02f49097e4', class: this.class, innerHTML: gitlabBlack });
|
|
9474
9515
|
}
|
|
9475
9516
|
static get cmpMeta() { return {
|
|
9476
9517
|
"$flags$": 0,
|
|
@@ -9493,7 +9534,7 @@ class EdsIconLinkedin {
|
|
|
9493
9534
|
this.class = '';
|
|
9494
9535
|
}
|
|
9495
9536
|
render() {
|
|
9496
|
-
return hAsync("span", { key: '
|
|
9537
|
+
return hAsync("span", { key: '39eaed2d3eec8d05b46d26a2d5a00be18d305b58', class: this.class, innerHTML: linkedin });
|
|
9497
9538
|
}
|
|
9498
9539
|
static get cmpMeta() { return {
|
|
9499
9540
|
"$flags$": 0,
|
|
@@ -9516,7 +9557,7 @@ class EdsIconMastodon {
|
|
|
9516
9557
|
this.class = '';
|
|
9517
9558
|
}
|
|
9518
9559
|
render() {
|
|
9519
|
-
return hAsync("span", { key: '
|
|
9560
|
+
return hAsync("span", { key: 'e51e5c0a49b1e85511113f649abd58cd110218e8', class: this.class, innerHTML: mastodon });
|
|
9520
9561
|
}
|
|
9521
9562
|
static get cmpMeta() { return {
|
|
9522
9563
|
"$flags$": 0,
|
|
@@ -9539,7 +9580,7 @@ class EdsIconTwitter {
|
|
|
9539
9580
|
this.class = '';
|
|
9540
9581
|
}
|
|
9541
9582
|
render() {
|
|
9542
|
-
return hAsync("span", { key: '
|
|
9583
|
+
return hAsync("span", { key: 'b5169c7ad799a7aa85362caf30d3868aead43fec', class: this.class, innerHTML: twitter });
|
|
9543
9584
|
}
|
|
9544
9585
|
static get cmpMeta() { return {
|
|
9545
9586
|
"$flags$": 0,
|
|
@@ -12014,7 +12055,7 @@ class EdsIconYoutube {
|
|
|
12014
12055
|
this.class = '';
|
|
12015
12056
|
}
|
|
12016
12057
|
render() {
|
|
12017
|
-
return hAsync("span", { key: '
|
|
12058
|
+
return hAsync("span", { key: '9c794891fbf5800cbd877731c1a9d1cd8782647b', class: this.class, innerHTML: youtube });
|
|
12018
12059
|
}
|
|
12019
12060
|
static get cmpMeta() { return {
|
|
12020
12061
|
"$flags$": 0,
|
|
@@ -12090,10 +12131,10 @@ class EdsImg {
|
|
|
12090
12131
|
imgOpts['loading'] = 'lazy';
|
|
12091
12132
|
imgOpts['decoding'] = 'async';
|
|
12092
12133
|
}
|
|
12093
|
-
return (hAsync("div", { key: '
|
|
12134
|
+
return (hAsync("div", { key: '2b9ac7ccd4ed8b525c368059ec0c99fce03e5367', class: {
|
|
12094
12135
|
'items-center justify-center': true,
|
|
12095
12136
|
'effect-bg-pattern': this.lazyload && this.showBg
|
|
12096
|
-
} }, hAsync("picture", { key: '
|
|
12137
|
+
} }, hAsync("picture", { key: 'fe98dc4ac3197c0cd363ce6ed34ff33ad655de3b' }, this.formats.map((format) => (hAsync("source", { type: format.type, srcSet: format.srcset, media: format.media, sizes: this.sizes }))), hAsync("img", Object.assign({ key: '48cd85fd0bbbf5155fdac71de07a20214399080b', ref: (el) => (this.img = el), class: {
|
|
12097
12138
|
'effect-opacity object-cover object-center': true,
|
|
12098
12139
|
'opacity-100': this.loaded,
|
|
12099
12140
|
'opacity-0': !this.loaded
|
|
@@ -12176,7 +12217,7 @@ class EdsInput {
|
|
|
12176
12217
|
render() {
|
|
12177
12218
|
const withIcon = !!this.icon;
|
|
12178
12219
|
const describedBy = this.hasMessage || this.error ? `${this.name}-error` : '';
|
|
12179
|
-
return (hAsync("div", { key: '
|
|
12220
|
+
return (hAsync("div", { key: '6456b8536db4d219eb307603c986e0aca4867a66', class: "relative flex items-center" }, this.type === 'textarea' ? (hAsync("textarea", { id: this.inputId || this.name, name: this.name, placeholder: this.placeholder, value: this.innerVal.toString(), required: this.required, disabled: this.disabled, class: `min-h-80 input input-textarea ${withIcon ? 'input-with-icon' : ''} ${this.error ? 'input-error' : ''} ${this.extraClass}`, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": describedBy, maxlength: this.maxLength, onInput: this.handleInput, onChange: this.handleInput })) : this.type === 'select' ? (hAsync("select", { id: this.inputId || this.name, name: this.name, required: this.required, disabled: this.disabled, class: `input input-select ${this.error ? 'input-error' : ''} ${this.extraClass}`, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": describedBy, onInput: this.handleInput, onChange: this.handleInput }, this.options.map((option) => (hAsync("option", { value: option.value, selected: option.value === this.innerVal, key: option.value }, option.label))))) : (hAsync("input", Object.assign({ id: this.inputId || this.name, name: this.name, placeholder: this.placeholder, value: this.innerVal.toString(), required: this.required, disabled: this.disabled, type: this.type, tabindex: this.inputTabIndex, checked: ['radio', 'checkbox'].includes(this.type) ? this.checked : undefined }, (this.type === 'number'
|
|
12180
12221
|
? {
|
|
12181
12222
|
min: this.min,
|
|
12182
12223
|
max: this.max,
|
|
@@ -12187,7 +12228,7 @@ class EdsInput {
|
|
|
12187
12228
|
input ${this.type === 'radio' ? 'input-radio' : this.type === 'checkbox' ? 'input-checkbox' : ''}
|
|
12188
12229
|
${withIcon && this.type !== 'radio' && this.type !== 'checkbox' ? 'input-icon pl-36' : ''}
|
|
12189
12230
|
${this.error ? 'input-error' : ''}
|
|
12190
|
-
`, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": describedBy, maxlength: this.maxLength, onInput: this.handleInput, onChange: this.handleInput }))), this.maxLength && this.type === 'textarea' && (hAsync("span", { key: '
|
|
12231
|
+
`, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": describedBy, maxlength: this.maxLength, onInput: this.handleInput, onChange: this.handleInput }))), this.maxLength && this.type === 'textarea' && (hAsync("span", { key: '216f52d80eefa2f89e388e020e597493015ae8d6', class: `input-counter f-ui-05 absolute bottom-8 right-8 ${this.maxLengthReached ? 'input-counter-error' : ''}` }, this.maxLength)), this.icon && (hAsync("eds-icon-wrapper", { key: 'd3771580564237c9a8ded4e07f4293517bc885fd', class: `absolute top-1/2 left-[12px] -translate-y-1/2 ${this.disabled ? 'text-lightest' : 'text-lightest'}`, name: this.icon }))));
|
|
12191
12232
|
}
|
|
12192
12233
|
get el() { return getElement(this); }
|
|
12193
12234
|
static get watchers() { return {
|
|
@@ -12239,8 +12280,9 @@ class EdsInputDropzone {
|
|
|
12239
12280
|
};
|
|
12240
12281
|
this.handleFileSelect = (event) => {
|
|
12241
12282
|
const input = event.target;
|
|
12242
|
-
if (!input.files)
|
|
12283
|
+
if (!input.files) {
|
|
12243
12284
|
return;
|
|
12285
|
+
}
|
|
12244
12286
|
this.addFiles(Array.from(input.files));
|
|
12245
12287
|
};
|
|
12246
12288
|
this.handleDragOver = (event) => {
|
|
@@ -12260,8 +12302,9 @@ class EdsInputDropzone {
|
|
|
12260
12302
|
event.preventDefault();
|
|
12261
12303
|
event.stopPropagation();
|
|
12262
12304
|
this.isDragging = false;
|
|
12263
|
-
if (this.disabled)
|
|
12305
|
+
if (this.disabled) {
|
|
12264
12306
|
return;
|
|
12307
|
+
}
|
|
12265
12308
|
const files = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.files;
|
|
12266
12309
|
if (files && files.length > 0) {
|
|
12267
12310
|
this.addFiles(Array.from(files));
|
|
@@ -12301,8 +12344,9 @@ class EdsInputDropzone {
|
|
|
12301
12344
|
this.edsfile.emit({ files });
|
|
12302
12345
|
}
|
|
12303
12346
|
formatFileSize(bytes) {
|
|
12304
|
-
if (bytes === 0)
|
|
12347
|
+
if (bytes === 0) {
|
|
12305
12348
|
return '0 B';
|
|
12349
|
+
}
|
|
12306
12350
|
const k = 1024;
|
|
12307
12351
|
const sizes = ['B', 'KB', 'MB', 'GB'];
|
|
12308
12352
|
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
|
@@ -12321,7 +12365,7 @@ class EdsInputDropzone {
|
|
|
12321
12365
|
}
|
|
12322
12366
|
render() {
|
|
12323
12367
|
const dropzoneClass = `eds-input-dropzone ${this.isDragging ? 'dragging' : ''} ${this.disabled ? 'disabled' : ''}`;
|
|
12324
|
-
return (hAsync("div", { key: '
|
|
12368
|
+
return (hAsync("div", { key: '3a6f1876c879e361934a9e8730afe9d14a50d8e2', class: "eds-input-dropzone-container" }, hAsync("input", { key: '293c9d66be6da5cf34b470f00468b3ede6abfb35', ref: (el) => (this.fileInputRef = el), type: "file", id: this.inputId || this.name, name: this.name, class: "eds-input-dropzone-hidden", disabled: this.disabled, required: this.required, multiple: this.multiple, accept: this.accept, onChange: this.handleFileSelect }), hAsync("div", { key: '56457ccacc1e643258447ee929bdeb6b0e6e4fe7', class: dropzoneClass, onClick: this.handleDropzoneClick, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, hAsync("svg", { key: '017fa615ec5b04dd3edd65d2e064ea58039d422b', class: "dropzone-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, hAsync("path", { key: '796dee372172d244dae644cab2136fce784e0865', d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }), hAsync("polyline", { key: 'cdd841be70c9a89c6040909797da1277b1ce244b', points: "17 8 12 3 7 8" }), hAsync("line", { key: 'b4a8af3db664bdebd0c9651e4c806811ea21d905', x1: "12", y1: "3", x2: "12", y2: "15" })), hAsync("div", { key: '5c799c8a751b06c743f4fc7c1810a91f35307d46', class: "dropzone-text" }, hAsync("p", { key: '0d3971953c6f472bbde247378fccb4171606872d', class: "dropzone-primary" }, this.primaryText), hAsync("p", { key: 'c64910c2d7ba60e6d315fa2831aca54faba84a79', class: "dropzone-secondary" }, this.secondaryText))), this.selectedFiles.length > 0 && (hAsync("div", { key: 'b6f19ccc0304ba8a4369c95e86a61ad084dd9256', class: "eds-input-dropzone-chips" }, this.selectedFiles.map((item) => (hAsync("div", { key: item.id, class: "eds-input-dropzone-chip" }, this.getFileIcon(item.file.name), hAsync("span", { class: "eds-input-dropzone-chip-name" }, item.file.name), hAsync("span", { class: "eds-input-dropzone-chip-size" }, this.formatFileSize(item.file.size)), hAsync("button", { type: "button", class: "eds-input-dropzone-chip-remove", onClick: () => this.handleRemoveFile(item.id), disabled: this.disabled, "aria-label": `Remove ${item.file.name}` }, hAsync("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, hAsync("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), hAsync("line", { x1: "6", y1: "6", x2: "18", y2: "18" }))))))))));
|
|
12325
12369
|
}
|
|
12326
12370
|
get hostEl() { return getElement(this); }
|
|
12327
12371
|
static get style() { return EdsInputDropzoneStyle0; }
|
|
@@ -12347,7 +12391,7 @@ class EdsInputDropzone {
|
|
|
12347
12391
|
}; }
|
|
12348
12392
|
}
|
|
12349
12393
|
|
|
12350
|
-
const edsInputFieldCss = ":root {\n font-optical-sizing: auto;\n}\nhtml,\nbody {\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n/*\n:focus[data-focus-method=\"mouse\"],\n:focus[data-focus-method=\"touch\"] {\n outline: none !important;\n}\n*/\n/*FADE*/\n.fade-enter-active,\n.fade-leave-active {\n transition-duration: 300ms;\n transition-timing-function: linear;\n transition-property: opacity;\n}\n.fade-enter-from,\n.fade-leave-to {\n opacity: 0;\n}\n/*FADE TRANSLATE Y*/\n.fade-down-enter-active,\n.fade-down-leave-active {\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n\n transition-property: opacity, transform;\n}\n.fade-down-enter-from,\n.fade-down-leave-to {\n opacity: 0;\n transform: translateY(12px);\n}\n/*SLIDE LEFT*/\n.slide-left-enter-active,\n.slide-left-leave-active {\n transition-duration: 500ms;\n transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);\n transition-property: opacity, transform;\n}\n.slide-left-enter-from,\n.slide-left-leave-to {\n transform: translateX(-110%);\n}\n/*SLIDE BOTTOM*/\n.slide-bottom-enter-active,\n.slide-bottom-leave-active {\n transition-duration: 500ms;\n transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);\n transition-property: opacity, transform;\n}\n.slide-bottom-enter-from,\n.slide-bottom-leave-to {\n transform: translateY(100%);\n}\n.slide-bottom-list-move,\n.slide-bottom-list-enter-active,\n.slide-bottom-list-leave-active {\n transition-duration: 500ms;\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n transition-property: opacity, transform;\n}\n.slide-bottom-list-enter-from,\n.slide-bottom-list-leave-to {\n opacity: 0;\n transform: translateY(100%);\n}\n.slide-bottom-list-leave-active {\n position: absolute;\n}\n/*COLLAPSE Y*/\n.collapseY-enter-active,\n.collapseY-leave-active {\n transition-duration: 300ms;\n transition-timing-function: linear;\n overflow: hidden;\n max-height: 500px;\n transition-property: max-height;\n}\n.collapseY-enter-from,\n.collapseY-leave-to {\n max-height: 0;\n}\n*, ::before, ::after {\n --tw-border-spacing-x: 0;\n --tw-border-spacing-y: 0;\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-rotate: 0;\n --tw-skew-x: 0;\n --tw-skew-y: 0;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n --tw-pan-x: ;\n --tw-pan-y: ;\n --tw-pinch-zoom: ;\n --tw-scroll-snap-strictness: proximity;\n --tw-gradient-from-position: ;\n --tw-gradient-via-position: ;\n --tw-gradient-to-position: ;\n --tw-ordinal: ;\n --tw-slashed-zero: ;\n --tw-numeric-figure: ;\n --tw-numeric-spacing: ;\n --tw-numeric-fraction: ;\n --tw-ring-inset: ;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-color: rgb(147 197 253 / 0.5);\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-ring-shadow: 0 0 #0000;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n --tw-blur: ;\n --tw-brightness: ;\n --tw-contrast: ;\n --tw-grayscale: ;\n --tw-hue-rotate: ;\n --tw-invert: ;\n --tw-saturate: ;\n --tw-sepia: ;\n --tw-drop-shadow: ;\n --tw-backdrop-blur: ;\n --tw-backdrop-brightness: ;\n --tw-backdrop-contrast: ;\n --tw-backdrop-grayscale: ;\n --tw-backdrop-hue-rotate: ;\n --tw-backdrop-invert: ;\n --tw-backdrop-opacity: ;\n --tw-backdrop-saturate: ;\n --tw-backdrop-sepia: ;\n --tw-contain-size: ;\n --tw-contain-layout: ;\n --tw-contain-paint: ;\n --tw-contain-style: ;\n}\n::backdrop {\n --tw-border-spacing-x: 0;\n --tw-border-spacing-y: 0;\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-rotate: 0;\n --tw-skew-x: 0;\n --tw-skew-y: 0;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n --tw-pan-x: ;\n --tw-pan-y: ;\n --tw-pinch-zoom: ;\n --tw-scroll-snap-strictness: proximity;\n --tw-gradient-from-position: ;\n --tw-gradient-via-position: ;\n --tw-gradient-to-position: ;\n --tw-ordinal: ;\n --tw-slashed-zero: ;\n --tw-numeric-figure: ;\n --tw-numeric-spacing: ;\n --tw-numeric-fraction: ;\n --tw-ring-inset: ;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-color: rgb(147 197 253 / 0.5);\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-ring-shadow: 0 0 #0000;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n --tw-blur: ;\n --tw-brightness: ;\n --tw-contrast: ;\n --tw-grayscale: ;\n --tw-hue-rotate: ;\n --tw-invert: ;\n --tw-saturate: ;\n --tw-sepia: ;\n --tw-drop-shadow: ;\n --tw-backdrop-blur: ;\n --tw-backdrop-brightness: ;\n --tw-backdrop-contrast: ;\n --tw-backdrop-grayscale: ;\n --tw-backdrop-hue-rotate: ;\n --tw-backdrop-invert: ;\n --tw-backdrop-opacity: ;\n --tw-backdrop-saturate: ;\n --tw-backdrop-sepia: ;\n --tw-contain-size: ;\n --tw-contain-layout: ;\n --tw-contain-paint: ;\n --tw-contain-style: ;\n}\n/*\n! tailwindcss v3.4.13 | MIT License | https://tailwindcss.com\n*/\n/*\n1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)\n2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)\n*/\n*,\n::before,\n::after {\n box-sizing: border-box; /* 1 */\n border-width: 0; /* 2 */\n border-style: solid; /* 2 */\n border-color: currentColor; /* 2 */\n}\n::before,\n::after {\n --tw-content: '';\n}\n/*\n1. Use a consistent sensible line-height in all browsers.\n2. Prevent adjustments of font size after orientation changes in iOS.\n3. Use a more readable tab size.\n4. Use the user's configured `sans` font-family by default.\n5. Use the user's configured `sans` font-feature-settings by default.\n6. Use the user's configured `sans` font-variation-settings by default.\n7. Disable tap highlights on iOS\n*/\nhtml,\n:host {\n line-height: 1.5; /* 1 */\n -webkit-text-size-adjust: 100%; /* 2 */\n -moz-tab-size: 4; /* 3 */\n -o-tab-size: 4;\n tab-size: 4; /* 3 */\n font-family: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"; /* 4 */\n font-feature-settings: normal; /* 5 */\n font-variation-settings: normal; /* 6 */\n -webkit-tap-highlight-color: transparent; /* 7 */\n}\n/*\n1. Remove the margin in all browsers.\n2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.\n*/\nbody {\n margin: 0; /* 1 */\n line-height: inherit; /* 2 */\n}\n/*\n1. Add the correct height in Firefox.\n2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)\n3. Ensure horizontal rules are visible by default.\n*/\nhr {\n height: 0; /* 1 */\n color: inherit; /* 2 */\n border-top-width: 1px; /* 3 */\n}\n/*\nAdd the correct text decoration in Chrome, Edge, and Safari.\n*/\nabbr:where([title]) {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n}\n/*\nRemove the default font size and weight for headings.\n*/\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n font-size: inherit;\n font-weight: inherit;\n}\n/*\nReset links to optimize for opt-in styling instead of opt-out.\n*/\na {\n color: inherit;\n text-decoration: inherit;\n}\n/*\nAdd the correct font weight in Edge and Safari.\n*/\nb,\nstrong {\n font-weight: bolder;\n}\n/*\n1. Use the user's configured `mono` font-family by default.\n2. Use the user's configured `mono` font-feature-settings by default.\n3. Use the user's configured `mono` font-variation-settings by default.\n4. Correct the odd `em` font sizing in all browsers.\n*/\ncode,\nkbd,\nsamp,\npre {\n font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace; /* 1 */\n font-feature-settings: normal; /* 2 */\n font-variation-settings: normal; /* 3 */\n font-size: 1em; /* 4 */\n}\n/*\nAdd the correct font size in all browsers.\n*/\nsmall {\n font-size: 80%;\n}\n/*\nPrevent `sub` and `sup` elements from affecting the line height in all browsers.\n*/\nsub,\nsup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n}\nsub {\n bottom: -0.25em;\n}\nsup {\n top: -0.5em;\n}\n/*\n1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)\n2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)\n3. Remove gaps between table borders by default.\n*/\ntable {\n text-indent: 0; /* 1 */\n border-color: inherit; /* 2 */\n border-collapse: collapse; /* 3 */\n}\n/*\n1. Change the font styles in all browsers.\n2. Remove the margin in Firefox and Safari.\n3. Remove default padding in all browsers.\n*/\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n font-family: inherit; /* 1 */\n font-feature-settings: inherit; /* 1 */\n font-variation-settings: inherit; /* 1 */\n font-size: 100%; /* 1 */\n font-weight: inherit; /* 1 */\n line-height: inherit; /* 1 */\n letter-spacing: inherit; /* 1 */\n color: inherit; /* 1 */\n margin: 0; /* 2 */\n padding: 0; /* 3 */\n}\n/*\nRemove the inheritance of text transform in Edge and Firefox.\n*/\nbutton,\nselect {\n text-transform: none;\n}\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Remove default button styles.\n*/\nbutton,\ninput:where([type='button']),\ninput:where([type='reset']),\ninput:where([type='submit']) {\n -webkit-appearance: button; /* 1 */\n background-color: transparent; /* 2 */\n background-image: none; /* 2 */\n}\n/*\nUse the modern Firefox focus style for all focusable elements.\n*/\n:-moz-focusring {\n outline: auto;\n}\n/*\nRemove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)\n*/\n:-moz-ui-invalid {\n box-shadow: none;\n}\n/*\nAdd the correct vertical alignment in Chrome and Firefox.\n*/\nprogress {\n vertical-align: baseline;\n}\n/*\nCorrect the cursor style of increment and decrement buttons in Safari.\n*/\n::-webkit-inner-spin-button,\n::-webkit-outer-spin-button {\n height: auto;\n}\n/*\n1. Correct the odd appearance in Chrome and Safari.\n2. Correct the outline style in Safari.\n*/\n[type='search'] {\n -webkit-appearance: textfield; /* 1 */\n outline-offset: -2px; /* 2 */\n}\n/*\nRemove the inner padding in Chrome and Safari on macOS.\n*/\n::-webkit-search-decoration {\n -webkit-appearance: none;\n}\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Change font properties to `inherit` in Safari.\n*/\n::-webkit-file-upload-button {\n -webkit-appearance: button; /* 1 */\n font: inherit; /* 2 */\n}\n/*\nAdd the correct display in Chrome and Safari.\n*/\nsummary {\n display: list-item;\n}\n/*\nRemoves the default spacing and border for appropriate elements.\n*/\nblockquote,\ndl,\ndd,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nhr,\nfigure,\np,\npre {\n margin: 0;\n}\nfieldset {\n margin: 0;\n padding: 0;\n}\nlegend {\n padding: 0;\n}\nol,\nul,\nmenu {\n list-style: none;\n margin: 0;\n padding: 0;\n}\n/*\nReset default styling for dialogs.\n*/\ndialog {\n padding: 0;\n}\n/*\nPrevent resizing textareas horizontally by default.\n*/\ntextarea {\n resize: vertical;\n}\n/*\n1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)\n2. Set the default placeholder color to the user's configured gray 400 color.\n*/\ninput::-moz-placeholder, textarea::-moz-placeholder {\n opacity: 1; /* 1 */\n color: #9ca3af; /* 2 */\n}\ninput::placeholder,\ntextarea::placeholder {\n opacity: 1; /* 1 */\n color: #9ca3af; /* 2 */\n}\n/*\nSet the default cursor for buttons.\n*/\nbutton,\n[role=\"button\"] {\n cursor: pointer;\n}\n/*\nMake sure disabled buttons don't get the pointer cursor.\n*/\n:disabled {\n cursor: default;\n}\n/*\n1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)\n2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)\n This can trigger a poorly considered lint error in some tools but is included by design.\n*/\nimg,\nsvg,\nvideo,\ncanvas,\naudio,\niframe,\nembed,\nobject {\n display: block; /* 1 */\n vertical-align: middle; /* 2 */\n}\n/*\nConstrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)\n*/\nimg,\nvideo {\n max-width: 100%;\n height: auto;\n}\n/* Make elements with the HTML hidden attribute stay hidden by default */\n[hidden] {\n display: none;\n}\n:root {\n --breakpoint: \"sm\";\n --container-width: unset;\n --inner-gutter: 8px;\n --outer-gutter: 16px;\n --grid-columns: 12;\n --env: \"dev\";\n --grid-column-bg: rgba(127, 255, 255, 0.25);\n}\n@media (min-width: 750px) {\n :root {\n --breakpoint: \"md\";\n --container-width: unset;\n --inner-gutter: 12px;\n --outer-gutter: 20px;\n --grid-columns: 12;\n }\n}\n@media (min-width: 900px) {\n :root {\n --breakpoint: \"lg\";\n --container-width: unset;\n --inner-gutter: 16px;\n --outer-gutter: 28px;\n --grid-columns: 12;\n }\n}\n@media (min-width: 1024px) {\n :root {\n --breakpoint: \"xl\";\n --container-width: unset;\n --inner-gutter: 16px;\n --outer-gutter: 28px;\n --grid-columns: 12;\n }\n}\n@media (min-width: 1280px) {\n :root {\n --breakpoint: \"xxl\";\n --container-width: unset;\n --inner-gutter: 16px;\n --outer-gutter: 28px;\n --grid-columns: 12;\n }\n}\n@media (min-width: 2200px) {\n :root {\n --breakpoint: \"xxxl\";\n --container-width: unset;\n --inner-gutter: 16px;\n --outer-gutter: 28px;\n --grid-columns: 12;\n }\n}\n.container {\n width: calc(var(--container-width, 100%) - (2 * var(--breakout-container-outer-gutter, var(--container-outer-gutter, var(--outer-gutter, 0)))));\n margin-right: auto;\n margin-left: auto;\n}\n.container > * {\n --container-outer-gutter: 0;\n --breakout-container-outer-gutter: 0;\n}\n[class*='scrollbar-track-'], [class*='scrollbar-thumb-'] {\n --scrollbar-bg: #fafafa;\n --scrollbar-fg: #c1c1c1;\n --scrollbar-border: #e8e8e8;\n scrollbar-color: var(--scrollbar-fg) var(--scrollbar-bg);\n}\n[class*='scrollbar-track-']::-webkit-scrollbar, [class*='scrollbar-thumb-']::-webkit-scrollbar {\n width: var(--scrollbar-width, 15px);\n height: var(--scrollbar-width, 15px);\n}\n[class*='scrollbar-track-']::-webkit-scrollbar-track, [class*='scrollbar-thumb-']::-webkit-scrollbar-track {\n background: var(--scrollbar-bg);\n}\n[class*='scrollbar-track-']::-webkit-scrollbar-track:horizontal, [class*='scrollbar-thumb-']::-webkit-scrollbar-track:horizontal {\n border-top: 1px solid var(--scrollbar-border);\n border-bottom: 1px solid var(--scrollbar-border);\n}\n[class*='scrollbar-track-']::-webkit-scrollbar-track:vertical, [class*='scrollbar-thumb-']::-webkit-scrollbar-track:vertical {\n border-inline-start: 1px solid var(--scrollbar-border);\n border-inline-end: 1px solid var(--scrollbar-border);\n}\n[class*='scrollbar-track-']::-webkit-scrollbar-thumb, [class*='scrollbar-thumb-']::-webkit-scrollbar-thumb {\n background: var(--scrollbar-fg);\n border-radius: 20px;\n border: var(--scrollbar-padding, 4px) solid transparent;\n background-clip: content-box;\n}\n:root {\n --spacing-space-01: 5rem;\n --spacing-space-02: 3.75rem;\n --spacing-space-03: 6.25rem;\n --spacing-space-04: 1.75rem;\n}\n@media (min-width: 900px) {\n :root {\n --spacing-space-01: 7.5rem;\n --spacing-space-02: 5rem;\n --spacing-space-03: 7.5rem;\n }\n}\n:root {\n --sans: Inter, Helvetica, Arial, sans-serif;\n --f-heading-01-fontFamily: var(--sans);\n --f-heading-01-fontWeight: 800;\n --f-heading-01-fontSize: 42px;\n --f-heading-01-lineHeight: 100%;\n --f-heading-01-letterSpacing: -0.01em;\n --f-heading-02-fontFamily: var(--sans);\n --f-heading-02-fontWeight: 800;\n --f-heading-02-fontSize: 36px;\n --f-heading-02-lineHeight: 100%;\n --f-heading-02-letterSpacing: -0.01em;\n --f-heading-03-fontFamily: var(--sans);\n --f-heading-03-fontWeight: 800;\n --f-heading-03-fontSize: 36px;\n --f-heading-03-lineHeight: 100%;\n --f-heading-03-letterSpacing: -0.01em;\n --f-heading-04-fontFamily: var(--sans);\n --f-heading-04-fontWeight: 800;\n --f-heading-04-fontSize: 28px;\n --f-heading-04-lineHeight: 100%;\n --f-heading-04-letterSpacing: -0.01em;\n --f-heading-05-fontFamily: var(--sans);\n --f-heading-05-fontWeight: 800;\n --f-heading-05-fontSize: 28px;\n --f-heading-05-lineHeight: 110%;\n --f-heading-05-letterSpacing: -0.01em;\n --f-heading-06-fontFamily: var(--sans);\n --f-heading-06-fontWeight: 800;\n --f-heading-06-fontSize: 22px;\n --f-heading-06-lineHeight: 120%;\n --f-body-01-fontFamily: var(--sans);\n --f-body-01-fontWeight: 600;\n --f-body-01-fontSize: 20px;\n --f-body-01-lineHeight: 140%;\n --f-body-01-letterSpacing: -0.01em;\n --f-body-02-fontFamily: var(--sans);\n --f-body-02-fontWeight: 600;\n --f-body-02-fontSize: 17px;\n --f-body-02-lineHeight: 150%;\n --f-ui-01-fontFamily: var(--sans);\n --f-ui-01-fontWeight: 800;\n --f-ui-01-fontSize: 18px;\n --f-ui-01-lineHeight: 110%;\n --f-ui-01-letterSpacing: -0.01em;\n --f-ui-02-fontFamily: var(--sans);\n --f-ui-02-fontWeight: 800;\n --f-ui-02-fontSize: 16px;\n --f-ui-02-lineHeight: 110%;\n --f-ui-02-letterSpacing: -0.01em;\n --f-ui-02-light-fontFamily: var(--sans);\n --f-ui-02-light-fontWeight: 600;\n --f-ui-02-light-fontSize: 16px;\n --f-ui-02-light-lineHeight: 110%;\n --f-ui-02-light-letterSpacing: -0.01em;\n --f-ui-03-fontFamily: var(--sans);\n --f-ui-03-fontWeight: 800;\n --f-ui-03-fontSize: 14px;\n --f-ui-03-lineHeight: 110%;\n --f-ui-03-letterSpacing: -0.01em;\n --f-ui-03-light-fontFamily: var(--sans);\n --f-ui-03-light-fontWeight: 600;\n --f-ui-03-light-fontSize: 14px;\n --f-ui-03-light-lineHeight: 130%;\n --f-ui-03-light-letterSpacing: -0.01em;\n --f-ui-04-fontFamily: var(--sans);\n --f-ui-04-fontWeight: 800;\n --f-ui-04-fontSize: 12px;\n --f-ui-04-lineHeight: 100%;\n --f-ui-04-letterSpacing: -0.01em;\n --f-ui-05-fontFamily: var(--sans);\n --f-ui-05-fontWeight: 800;\n --f-ui-05-fontSize: 10px;\n --f-ui-05-lineHeight: 110%;\n --f-ui-05-letterSpacing: -0.01em;\n --f-caption-fontFamily: var(--sans);\n --f-caption-fontWeight: 800;\n --f-caption-fontSize: 12px;\n --f-caption-lineHeight: 120%;\n --f-display-01-fontFamily: var(--sans);\n --f-display-01-fontWeight: 800;\n --f-display-01-fontSize: 120px;\n --f-display-01-lineHeight: 100%;\n --f-display-01-letterSpacing: -0.01em;\n}\n.f-heading-01 {\n font-family: var(--f-heading-01-fontFamily);\n font-weight: var(--f-heading-01-fontWeight);\n font-size: var(--f-heading-01-fontSize);\n line-height: var(--f-heading-01-lineHeight);\n letter-spacing: var(--f-heading-01-letterSpacing);\n}\n.f-heading-02 {\n font-family: var(--f-heading-02-fontFamily);\n font-weight: var(--f-heading-02-fontWeight);\n font-size: var(--f-heading-02-fontSize);\n line-height: var(--f-heading-02-lineHeight);\n letter-spacing: var(--f-heading-02-letterSpacing);\n}\n.f-heading-03 {\n font-family: var(--f-heading-03-fontFamily);\n font-weight: var(--f-heading-03-fontWeight);\n font-size: var(--f-heading-03-fontSize);\n line-height: var(--f-heading-03-lineHeight);\n letter-spacing: var(--f-heading-03-letterSpacing);\n}\n.f-heading-04 {\n font-family: var(--f-heading-04-fontFamily);\n font-weight: var(--f-heading-04-fontWeight);\n font-size: var(--f-heading-04-fontSize);\n line-height: var(--f-heading-04-lineHeight);\n letter-spacing: var(--f-heading-04-letterSpacing);\n}\n.f-heading-05 {\n font-family: var(--f-heading-05-fontFamily);\n font-weight: var(--f-heading-05-fontWeight);\n font-size: var(--f-heading-05-fontSize);\n line-height: var(--f-heading-05-lineHeight);\n letter-spacing: var(--f-heading-05-letterSpacing);\n}\n.f-heading-06 {\n font-family: var(--f-heading-06-fontFamily);\n font-weight: var(--f-heading-06-fontWeight);\n font-size: var(--f-heading-06-fontSize);\n line-height: var(--f-heading-06-lineHeight);\n letter-spacing: var(--f-heading-06-letterSpacing);\n}\n.f-body-01 {\n font-family: var(--f-body-01-fontFamily);\n font-weight: var(--f-body-01-fontWeight);\n font-size: var(--f-body-01-fontSize);\n line-height: var(--f-body-01-lineHeight);\n letter-spacing: var(--f-body-01-letterSpacing);\n}\n.f-body-02 {\n font-family: var(--f-body-02-fontFamily);\n font-weight: var(--f-body-02-fontWeight);\n font-size: var(--f-body-02-fontSize);\n line-height: var(--f-body-02-lineHeight);\n letter-spacing: var(--f-body-02-letterSpacing);\n}\n.f-ui-01 {\n font-family: var(--f-ui-01-fontFamily);\n font-weight: var(--f-ui-01-fontWeight);\n font-size: var(--f-ui-01-fontSize);\n line-height: var(--f-ui-01-lineHeight);\n letter-spacing: var(--f-ui-01-letterSpacing);\n}\n.f-ui-02 {\n font-family: var(--f-ui-02-fontFamily);\n font-weight: var(--f-ui-02-fontWeight);\n font-size: var(--f-ui-02-fontSize);\n line-height: var(--f-ui-02-lineHeight);\n letter-spacing: var(--f-ui-02-letterSpacing);\n}\n.f-ui-02-light {\n font-family: var(--f-ui-02-light-fontFamily);\n font-weight: var(--f-ui-02-light-fontWeight);\n font-size: var(--f-ui-02-light-fontSize);\n line-height: var(--f-ui-02-light-lineHeight);\n letter-spacing: var(--f-ui-02-light-letterSpacing);\n}\n.f-ui-03 {\n font-family: var(--f-ui-03-fontFamily);\n font-weight: var(--f-ui-03-fontWeight);\n font-size: var(--f-ui-03-fontSize);\n line-height: var(--f-ui-03-lineHeight);\n letter-spacing: var(--f-ui-03-letterSpacing);\n}\n.f-ui-03-light {\n font-family: var(--f-ui-03-light-fontFamily);\n font-weight: var(--f-ui-03-light-fontWeight);\n font-size: var(--f-ui-03-light-fontSize);\n line-height: var(--f-ui-03-light-lineHeight);\n letter-spacing: var(--f-ui-03-light-letterSpacing);\n}\n.f-ui-04 {\n font-family: var(--f-ui-04-fontFamily);\n font-weight: var(--f-ui-04-fontWeight);\n font-size: var(--f-ui-04-fontSize);\n line-height: var(--f-ui-04-lineHeight);\n letter-spacing: var(--f-ui-04-letterSpacing);\n}\n.f-ui-05 {\n font-family: var(--f-ui-05-fontFamily);\n font-weight: var(--f-ui-05-fontWeight);\n font-size: var(--f-ui-05-fontSize);\n line-height: var(--f-ui-05-lineHeight);\n letter-spacing: var(--f-ui-05-letterSpacing);\n}\n.f-caption {\n font-family: var(--f-caption-fontFamily);\n font-weight: var(--f-caption-fontWeight);\n font-size: var(--f-caption-fontSize);\n line-height: var(--f-caption-lineHeight);\n letter-spacing: var(--f-caption-letterSpacing);\n}\n.f-display-01 {\n font-family: var(--f-display-01-fontFamily);\n font-weight: var(--f-display-01-fontWeight);\n font-size: var(--f-display-01-fontSize);\n line-height: var(--f-display-01-lineHeight);\n letter-spacing: var(--f-display-01-letterSpacing);\n}\n@media (min-width: 750px) {\n :root {\n --f-heading-01-fontSize: 48px;\n }\n}\n@media (min-width: 900px) {\n :root {\n --f-heading-01-fontSize: 72px;\n --f-heading-02-fontSize: 48px;\n --f-display-01-fontSize: 150px;\n }\n}\n@media (min-width: 1024px) {\n :root {\n --f-heading-01-fontSize: 83px;\n --f-heading-02-fontSize: 60px;\n --f-heading-03-fontSize: 42px;\n --f-heading-04-fontSize: 36px;\n }\n}\n.f-heading-01 b, .f-heading-01 strong {\n font-weight: var(--f-heading-01---bold-weight, bold);\n}\n.f-heading-02 b, .f-heading-02 strong {\n font-weight: var(--f-heading-02---bold-weight, bold);\n}\n.f-heading-03 b, .f-heading-03 strong {\n font-weight: var(--f-heading-03---bold-weight, bold);\n}\n.f-heading-04 b, .f-heading-04 strong {\n font-weight: var(--f-heading-04---bold-weight, bold);\n}\n.f-heading-05 b, .f-heading-05 strong {\n font-weight: var(--f-heading-05---bold-weight, bold);\n}\n.f-heading-06 b, .f-heading-06 strong {\n font-weight: var(--f-heading-06---bold-weight, bold);\n}\n.f-body-01 b, .f-body-01 strong {\n font-weight: var(--f-body-01---bold-weight, bold);\n}\n.f-body-02 b, .f-body-02 strong {\n font-weight: var(--f-body-02---bold-weight, bold);\n}\n.f-ui-01 b, .f-ui-01 strong {\n font-weight: var(--f-ui-01---bold-weight, bold);\n}\n.f-ui-02 b, .f-ui-02 strong {\n font-weight: var(--f-ui-02---bold-weight, bold);\n}\n.f-ui-02-light b, .f-ui-02-light strong {\n font-weight: var(--f-ui-02-light---bold-weight, bold);\n}\n.f-ui-03 b, .f-ui-03 strong {\n font-weight: var(--f-ui-03---bold-weight, bold);\n}\n.f-ui-03-light b, .f-ui-03-light strong {\n font-weight: var(--f-ui-03-light---bold-weight, bold);\n}\n.f-ui-04 b, .f-ui-04 strong {\n font-weight: var(--f-ui-04---bold-weight, bold);\n}\n.f-ui-05 b, .f-ui-05 strong {\n font-weight: var(--f-ui-05---bold-weight, bold);\n}\n.f-caption b, .f-caption strong {\n font-weight: var(--f-caption---bold-weight, bold);\n}\n.f-display-01 b, .f-display-01 strong {\n font-weight: var(--f-display-01---bold-weight, bold);\n}\n:root {\n --grey-100: #f8f8f8;\n --grey-200: #f2f2f2;\n --grey-300: #e6e6e6;\n --grey-400: #d8d8d8;\n --grey-500: #8c8c8c;\n --grey-600: #6e6e6e;\n --grey-700: #666666;\n --grey-800: #4d4d4d;\n --grey-900: #242424;\n --green-100: #eaffee;\n --green-200: #d3ffdc;\n --green-300: #9dffb4;\n --green-400: #63fb92;\n --green-500: #00e766;\n --green-600: #00c959;\n --green-700: #009d45;\n --green-800: #007734;\n --green-900: #004f23;\n --yellow-100: #fefee5;\n --yellow-200: #ffffcb;\n --yellow-300: #fdfdaa;\n --yellow-400: #ffff8b;\n --yellow-500: #ffff51;\n --yellow-600: #f3f30a;\n --yellow-700: #d7d72b;\n --yellow-800: #9a9a1e;\n --yellow-900: #636313;\n --orange-100: #fff4ee;\n --orange-200: #ffeade;\n --orange-300: #ffdcc5;\n --orange-400: #ffcca9;\n --orange-500: #ffb87e;\n --orange-600: #ffa543;\n --orange-700: #cb7f28;\n --orange-800: #995f1e;\n --orange-900: #653f14;\n --red-100: #feefef;\n --red-200: #ffe0e1;\n --red-300: #ffc7c9;\n --red-400: #ff9ea2;\n --red-500: #ff7a7f;\n --red-600: #ff4d68;\n --red-700: #d01111;\n --red-800: #a3001a;\n --red-900: #6f0011;\n --purple-100: #f9f3ff;\n --purple-200: #f4e8ff;\n --purple-300: #e9ceff;\n --purple-400: #ddb1ff;\n --purple-500: #d18fff;\n --purple-600: #c461ff;\n --purple-700: #af56e4;\n --purple-800: #8337b1;\n --purple-900: #3d1e4f;\n --blue-100: #eff0ff;\n --blue-200: #dee0ff;\n --blue-300: #caceff;\n --blue-400: #b2b8ff;\n --blue-500: #7a89f5;\n --blue-600: #2b69fc;\n --blue-700: #0034cb;\n --blue-800: #002799;\n --blue-900: #001a65;\n --cyan-100: #E0EEFF;\n --cyan-200: #D3E6FF;\n --cyan-300: #B5D8FF;\n --cyan-400: #92C8FF;\n --cyan-500: #6CBFFE;\n --cyan-600: #3FA9F5;\n --cyan-700: #267FBE;\n --cyan-800: #1F689B;\n --cyan-900: #15496D;\n --black: #000000;\n --white: #ffffff;\n --transparent: transparent;\n --current: currentColor;\n}\n.grid-layout {\n display: grid;\n grid-template-columns: repeat(var(--container-grid-columns, var(--grid-columns)), 1fr);\n grid-gap: var(--inner-gutter);\n}\n.grid-col-span-2 {\n --container-grid-columns: 2;\n grid-column: span 2 / span 2;\n}\n.grid-col-span-3 {\n --container-grid-columns: 3;\n grid-column: span 3 / span 3;\n}\n.grid-col-span-4 {\n --container-grid-columns: 4;\n grid-column: span 4 / span 4;\n}\n.grid-col-span-6 {\n --container-grid-columns: 6;\n grid-column: span 6 / span 6;\n}\n.grid-col-span-8 {\n --container-grid-columns: 8;\n grid-column: span 8 / span 8;\n}\n.grid-col-span-10 {\n --container-grid-columns: 10;\n grid-column: span 10 / span 10;\n}\n.grid-col-span-12 {\n --container-grid-columns: 12;\n grid-column: span 12 / span 12;\n}\n.grid-col-start-1 {\n grid-column-start: 1;\n}\n.grid-col-start-2 {\n grid-column-start: 2;\n}\n.grid-col-start-3 {\n grid-column-start: 3;\n}\n.grid-col-start-4 {\n grid-column-start: 4;\n}\n.grid-col-start-5 {\n grid-column-start: 5;\n}\n.grid-col-start-6 {\n grid-column-start: 6;\n}\n.grid-col-start-7 {\n grid-column-start: 7;\n}\n.grid-col-start-8 {\n grid-column-start: 8;\n}\n.grid-col-start-9 {\n grid-column-start: 9;\n}\n.grid-col-start-10 {\n grid-column-start: 10;\n}\n.grid-col-start-11 {\n grid-column-start: 11;\n}\n.grid-col-start-12 {\n grid-column-start: 12;\n}\n[class*=\"grid-line-\"] > * {\n position: relative;\n}\n[class*=\"grid-line-\"] > *::before, [class*=\"grid-line-\"] > *::after {\n content: attr(👻);\n position: absolute;\n z-index: 0;\n pointer-events: none;\n}\n.grid-cols-1[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n}\n.grid-cols-1[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: 0;\n inset-inline-end: 0;\n}\n.grid-cols-1[class*=\"grid-line-x\"] > *:nth-child(1n+1)::before {\n inset-inline-end: 0;\n}\n.grid-cols-1[class*=\"grid-line-x\"] > *:nth-child(1n+1):nth-last-child(-n+1)::before {\n border-bottom-width: 0;\n}\n.grid-cols-1[class*=\"grid-line-x\"] > *:nth-child(1n+1):nth-last-child(-n+1) ~ *::before {\n border-bottom-width: 0;\n}\n.grid-cols-2[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n}\n.grid-cols-2[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n}\n.grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+1)::before {\n inset-inline-start: 0;\n}\n.grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+2)::before {\n inset-inline-end: 0;\n}\n.grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+1):nth-last-child(-n+2)::before {\n border-bottom-width: 0;\n}\n.grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+1):nth-last-child(-n+2) ~ *::before {\n border-bottom-width: 0;\n}\n.grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n}\n.grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(2n+2)::after {\n border-inline-end-width: 0;\n}\n.grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+2)::after {\n top: 0;\n}\n.grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(2n+1):nth-last-child(-n+2)::after {\n bottom: 0;\n}\n.grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(2n+1):nth-last-child(-n+2) ~ li::after {\n bottom: 0;\n}\n.grid-cols-3[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n}\n.grid-cols-3[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n}\n.grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+1)::before {\n inset-inline-start: 0;\n}\n.grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+3)::before {\n inset-inline-end: 0;\n}\n.grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+1):nth-last-child(-n+3)::before {\n border-bottom-width: 0;\n}\n.grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+1):nth-last-child(-n+3) ~ *::before {\n border-bottom-width: 0;\n}\n.grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n}\n.grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(3n+3)::after {\n border-inline-end-width: 0;\n}\n.grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+3)::after {\n top: 0;\n}\n.grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(3n+1):nth-last-child(-n+3)::after {\n bottom: 0;\n}\n.grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(3n+1):nth-last-child(-n+3) ~ li::after {\n bottom: 0;\n}\n.grid-cols-4[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n}\n.grid-cols-4[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n}\n.grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+1)::before {\n inset-inline-start: 0;\n}\n.grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+4)::before {\n inset-inline-end: 0;\n}\n.grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+1):nth-last-child(-n+4)::before {\n border-bottom-width: 0;\n}\n.grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+1):nth-last-child(-n+4) ~ *::before {\n border-bottom-width: 0;\n}\n.grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n}\n.grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(4n+4)::after {\n border-inline-end-width: 0;\n}\n.grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+4)::after {\n top: 0;\n}\n.grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(4n+1):nth-last-child(-n+4)::after {\n bottom: 0;\n}\n.grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(4n+1):nth-last-child(-n+4) ~ li::after {\n bottom: 0;\n}\n.grid-cols-5[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n}\n.grid-cols-5[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n}\n.grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+1)::before {\n inset-inline-start: 0;\n}\n.grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+5)::before {\n inset-inline-end: 0;\n}\n.grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+1):nth-last-child(-n+5)::before {\n border-bottom-width: 0;\n}\n.grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+1):nth-last-child(-n+5) ~ *::before {\n border-bottom-width: 0;\n}\n.grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n}\n.grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(5n+5)::after {\n border-inline-end-width: 0;\n}\n.grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+5)::after {\n top: 0;\n}\n.grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(5n+1):nth-last-child(-n+5)::after {\n bottom: 0;\n}\n.grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(5n+1):nth-last-child(-n+5) ~ li::after {\n bottom: 0;\n}\n.grid-cols-6[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n}\n.grid-cols-6[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n}\n.grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+1)::before {\n inset-inline-start: 0;\n}\n.grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+6)::before {\n inset-inline-end: 0;\n}\n.grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+1):nth-last-child(-n+6)::before {\n border-bottom-width: 0;\n}\n.grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+1):nth-last-child(-n+6) ~ *::before {\n border-bottom-width: 0;\n}\n.grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n}\n.grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(6n+6)::after {\n border-inline-end-width: 0;\n}\n.grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+6)::after {\n top: 0;\n}\n.grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(6n+1):nth-last-child(-n+6)::after {\n bottom: 0;\n}\n.grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(6n+1):nth-last-child(-n+6) ~ li::after {\n bottom: 0;\n}\n.grid-cols-7[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n}\n.grid-cols-7[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n}\n.grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+1)::before {\n inset-inline-start: 0;\n}\n.grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+7)::before {\n inset-inline-end: 0;\n}\n.grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+1):nth-last-child(-n+7)::before {\n border-bottom-width: 0;\n}\n.grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+1):nth-last-child(-n+7) ~ *::before {\n border-bottom-width: 0;\n}\n.grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n}\n.grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(7n+7)::after {\n border-inline-end-width: 0;\n}\n.grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+7)::after {\n top: 0;\n}\n.grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(7n+1):nth-last-child(-n+7)::after {\n bottom: 0;\n}\n.grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(7n+1):nth-last-child(-n+7) ~ li::after {\n bottom: 0;\n}\n.grid-cols-8[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n}\n.grid-cols-8[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n}\n.grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+1)::before {\n inset-inline-start: 0;\n}\n.grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+8)::before {\n inset-inline-end: 0;\n}\n.grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+1):nth-last-child(-n+8)::before {\n border-bottom-width: 0;\n}\n.grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+1):nth-last-child(-n+8) ~ *::before {\n border-bottom-width: 0;\n}\n.grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n}\n.grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(8n+8)::after {\n border-inline-end-width: 0;\n}\n.grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+8)::after {\n top: 0;\n}\n.grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(8n+1):nth-last-child(-n+8)::after {\n bottom: 0;\n}\n.grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(8n+1):nth-last-child(-n+8) ~ li::after {\n bottom: 0;\n}\n.grid-cols-9[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n}\n.grid-cols-9[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n}\n.grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+1)::before {\n inset-inline-start: 0;\n}\n.grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+9)::before {\n inset-inline-end: 0;\n}\n.grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+1):nth-last-child(-n+9)::before {\n border-bottom-width: 0;\n}\n.grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+1):nth-last-child(-n+9) ~ *::before {\n border-bottom-width: 0;\n}\n.grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n}\n.grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(9n+9)::after {\n border-inline-end-width: 0;\n}\n.grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+9)::after {\n top: 0;\n}\n.grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(9n+1):nth-last-child(-n+9)::after {\n bottom: 0;\n}\n.grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(9n+1):nth-last-child(-n+9) ~ li::after {\n bottom: 0;\n}\n.grid-cols-10[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n}\n.grid-cols-10[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n}\n.grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+1)::before {\n inset-inline-start: 0;\n}\n.grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+10)::before {\n inset-inline-end: 0;\n}\n.grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+1):nth-last-child(-n+10)::before {\n border-bottom-width: 0;\n}\n.grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+1):nth-last-child(-n+10) ~ *::before {\n border-bottom-width: 0;\n}\n.grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n}\n.grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(10n+10)::after {\n border-inline-end-width: 0;\n}\n.grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+10)::after {\n top: 0;\n}\n.grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(10n+1):nth-last-child(-n+10)::after {\n bottom: 0;\n}\n.grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(10n+1):nth-last-child(-n+10) ~ li::after {\n bottom: 0;\n}\n.grid-cols-11[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n}\n.grid-cols-11[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n}\n.grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+1)::before {\n inset-inline-start: 0;\n}\n.grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+11)::before {\n inset-inline-end: 0;\n}\n.grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+1):nth-last-child(-n+11)::before {\n border-bottom-width: 0;\n}\n.grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+1):nth-last-child(-n+11) ~ *::before {\n border-bottom-width: 0;\n}\n.grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n}\n.grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(11n+11)::after {\n border-inline-end-width: 0;\n}\n.grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+11)::after {\n top: 0;\n}\n.grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(11n+1):nth-last-child(-n+11)::after {\n bottom: 0;\n}\n.grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(11n+1):nth-last-child(-n+11) ~ li::after {\n bottom: 0;\n}\n.grid-cols-12[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n}\n.grid-cols-12[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n}\n.grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+1)::before {\n inset-inline-start: 0;\n}\n.grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+12)::before {\n inset-inline-end: 0;\n}\n.grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+1):nth-last-child(-n+12)::before {\n border-bottom-width: 0;\n}\n.grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+1):nth-last-child(-n+12) ~ *::before {\n border-bottom-width: 0;\n}\n.grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n}\n.grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(12n+12)::after {\n border-inline-end-width: 0;\n}\n.grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+12)::after {\n top: 0;\n}\n.grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(12n+1):nth-last-child(-n+12)::after {\n bottom: 0;\n}\n.grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(12n+1):nth-last-child(-n+12) ~ li::after {\n bottom: 0;\n}\n@media (min-width: 750px) {\n [class*=\"grid-line-\"] > * {\n position: relative;\n }\n [class*=\"grid-line-\"] > *::before, [class*=\"grid-line-\"] > *::after {\n content: attr(👻);\n position: absolute;\n z-index: 0;\n pointer-events: none;\n }\n .md\\:grid-line-x > *::before {\n content: attr(👻);\n inset-inline-start: 0;\n inset-inline-end: 0;\n top: 0;\n bottom: calc(var(--inner-gutter) / -2);\n border-top: 0 solid transparent;\n border-bottom: 0 solid transparent;\n }\n .md\\:grid-line-xfull > *::before {\n content: attr(👻);\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: 0;\n bottom: calc(var(--inner-gutter) / -2);\n border-top: 0 solid transparent;\n border-bottom: 0 solid transparent;\n }\n .md\\:grid-line-x-0 > *::before {\n content: none;\n }\n .md\\:grid-line-y > *::after {\n content: attr(👻);\n inset-inline-start: 0;\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: 0;\n bottom: 0;\n border-inline-start: 0 solid transparent;\n border-inline-end: 0 solid transparent;\n }\n .md\\:grid-line-yfull > *::after {\n content: attr(👻);\n inset-inline-start: 0;\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: calc(var(--inner-gutter) / -1);\n bottom: 0;\n border-inline-start: 0 solid transparent;\n border-inline-end: 0 solid transparent;\n }\n .md\\:grid-line-yfull[class*=\"grid-line-x\"] > *::after {\n inset-inline-start: 0;\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: calc(var(--inner-gutter) / -2);\n bottom: calc(var(--inner-gutter) / -2);\n border-inline-start: 0 solid transparent;\n border-inline-end: 0 solid transparent;\n }\n .md\\:grid-line-y-0 > *::after {\n content: none;\n }\n .md\\:grid-line-x-0[class*=\"grid-line-x-\"] > *::before {\n bottom: -0rem;\n }\n .md\\:grid-line-x-0[class*=\"grid-line-yfull\"] > *::after {\n top: -0rem;\n bottom: -0rem;\n }\n .md\\:grid-line-x-1[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.0625rem;\n }\n .md\\:grid-line-x-1[class*=\"grid-line-yfull\"] > *::after {\n top: -0.0625rem;\n bottom: -0.0625rem;\n }\n .md\\:grid-line-x-2[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.125rem;\n }\n .md\\:grid-line-x-2[class*=\"grid-line-yfull\"] > *::after {\n top: -0.125rem;\n bottom: -0.125rem;\n }\n .md\\:grid-line-x-3[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.1875rem;\n }\n .md\\:grid-line-x-3[class*=\"grid-line-yfull\"] > *::after {\n top: -0.1875rem;\n bottom: -0.1875rem;\n }\n .md\\:grid-line-x-4[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.25rem;\n }\n .md\\:grid-line-x-4[class*=\"grid-line-yfull\"] > *::after {\n top: -0.25rem;\n bottom: -0.25rem;\n }\n .md\\:grid-line-x-5[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.3125rem;\n }\n .md\\:grid-line-x-5[class*=\"grid-line-yfull\"] > *::after {\n top: -0.3125rem;\n bottom: -0.3125rem;\n }\n .md\\:grid-line-x-6[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.375rem;\n }\n .md\\:grid-line-x-6[class*=\"grid-line-yfull\"] > *::after {\n top: -0.375rem;\n bottom: -0.375rem;\n }\n .md\\:grid-line-x-7[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.4375rem;\n }\n .md\\:grid-line-x-7[class*=\"grid-line-yfull\"] > *::after {\n top: -0.4375rem;\n bottom: -0.4375rem;\n }\n .md\\:grid-line-x-8[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.5rem;\n }\n .md\\:grid-line-x-8[class*=\"grid-line-yfull\"] > *::after {\n top: -0.5rem;\n bottom: -0.5rem;\n }\n .md\\:grid-line-x-9[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.5625rem;\n }\n .md\\:grid-line-x-9[class*=\"grid-line-yfull\"] > *::after {\n top: -0.5625rem;\n bottom: -0.5625rem;\n }\n .md\\:grid-line-x-10[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.625rem;\n }\n .md\\:grid-line-x-10[class*=\"grid-line-yfull\"] > *::after {\n top: -0.625rem;\n bottom: -0.625rem;\n }\n .md\\:grid-line-x-12[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.75rem;\n }\n .md\\:grid-line-x-12[class*=\"grid-line-yfull\"] > *::after {\n top: -0.75rem;\n bottom: -0.75rem;\n }\n .md\\:grid-line-x-16[class*=\"grid-line-x-\"] > *::before {\n bottom: -1rem;\n }\n .md\\:grid-line-x-16[class*=\"grid-line-yfull\"] > *::after {\n top: -1rem;\n bottom: -1rem;\n }\n .md\\:grid-line-x-20[class*=\"grid-line-x-\"] > *::before {\n bottom: -1.25rem;\n }\n .md\\:grid-line-x-20[class*=\"grid-line-yfull\"] > *::after {\n top: -1.25rem;\n bottom: -1.25rem;\n }\n .md\\:grid-line-x-24[class*=\"grid-line-x-\"] > *::before {\n bottom: -1.5rem;\n }\n .md\\:grid-line-x-24[class*=\"grid-line-yfull\"] > *::after {\n top: -1.5rem;\n bottom: -1.5rem;\n }\n .md\\:grid-line-x-28[class*=\"grid-line-x-\"] > *::before {\n bottom: -1.75rem;\n }\n .md\\:grid-line-x-28[class*=\"grid-line-yfull\"] > *::after {\n top: -1.75rem;\n bottom: -1.75rem;\n }\n .md\\:grid-line-x-32[class*=\"grid-line-x-\"] > *::before {\n bottom: -2rem;\n }\n .md\\:grid-line-x-32[class*=\"grid-line-yfull\"] > *::after {\n top: -2rem;\n bottom: -2rem;\n }\n .md\\:grid-line-x-36[class*=\"grid-line-x-\"] > *::before {\n bottom: -2.25rem;\n }\n .md\\:grid-line-x-36[class*=\"grid-line-yfull\"] > *::after {\n top: -2.25rem;\n bottom: -2.25rem;\n }\n .md\\:grid-line-x-40[class*=\"grid-line-x-\"] > *::before {\n bottom: -2.5rem;\n }\n .md\\:grid-line-x-40[class*=\"grid-line-yfull\"] > *::after {\n top: -2.5rem;\n bottom: -2.5rem;\n }\n .md\\:grid-line-x-44[class*=\"grid-line-x-\"] > *::before {\n bottom: -2.75rem;\n }\n .md\\:grid-line-x-44[class*=\"grid-line-yfull\"] > *::after {\n top: -2.75rem;\n bottom: -2.75rem;\n }\n .md\\:grid-line-x-48[class*=\"grid-line-x-\"] > *::before {\n bottom: -3rem;\n }\n .md\\:grid-line-x-48[class*=\"grid-line-yfull\"] > *::after {\n top: -3rem;\n bottom: -3rem;\n }\n .md\\:grid-line-x-52[class*=\"grid-line-x-\"] > *::before {\n bottom: -3.25rem;\n }\n .md\\:grid-line-x-52[class*=\"grid-line-yfull\"] > *::after {\n top: -3.25rem;\n bottom: -3.25rem;\n }\n .md\\:grid-line-x-56[class*=\"grid-line-x-\"] > *::before {\n bottom: -3.5rem;\n }\n .md\\:grid-line-x-56[class*=\"grid-line-yfull\"] > *::after {\n top: -3.5rem;\n bottom: -3.5rem;\n }\n .md\\:grid-line-x-60[class*=\"grid-line-x-\"] > *::before {\n bottom: -3.75rem;\n }\n .md\\:grid-line-x-60[class*=\"grid-line-yfull\"] > *::after {\n top: -3.75rem;\n bottom: -3.75rem;\n }\n .md\\:grid-line-x-64[class*=\"grid-line-x-\"] > *::before {\n bottom: -4rem;\n }\n .md\\:grid-line-x-64[class*=\"grid-line-yfull\"] > *::after {\n top: -4rem;\n bottom: -4rem;\n }\n .md\\:grid-line-x-68[class*=\"grid-line-x-\"] > *::before {\n bottom: -4.25rem;\n }\n .md\\:grid-line-x-68[class*=\"grid-line-yfull\"] > *::after {\n top: -4.25rem;\n bottom: -4.25rem;\n }\n .md\\:grid-line-x-72[class*=\"grid-line-x-\"] > *::before {\n bottom: -4.5rem;\n }\n .md\\:grid-line-x-72[class*=\"grid-line-yfull\"] > *::after {\n top: -4.5rem;\n bottom: -4.5rem;\n }\n .md\\:grid-line-x-76[class*=\"grid-line-x-\"] > *::before {\n bottom: -4.75rem;\n }\n .md\\:grid-line-x-76[class*=\"grid-line-yfull\"] > *::after {\n top: -4.75rem;\n bottom: -4.75rem;\n }\n .md\\:grid-line-x-80[class*=\"grid-line-x-\"] > *::before {\n bottom: -5rem;\n }\n .md\\:grid-line-x-80[class*=\"grid-line-yfull\"] > *::after {\n top: -5rem;\n bottom: -5rem;\n }\n .md\\:grid-line-x-84[class*=\"grid-line-x-\"] > *::before {\n bottom: -5.25rem;\n }\n .md\\:grid-line-x-84[class*=\"grid-line-yfull\"] > *::after {\n top: -5.25rem;\n bottom: -5.25rem;\n }\n .md\\:grid-line-x-88[class*=\"grid-line-x-\"] > *::before {\n bottom: -5.5rem;\n }\n .md\\:grid-line-x-88[class*=\"grid-line-yfull\"] > *::after {\n top: -5.5rem;\n bottom: -5.5rem;\n }\n .md\\:grid-line-x-92[class*=\"grid-line-x-\"] > *::before {\n bottom: -5.75rem;\n }\n .md\\:grid-line-x-92[class*=\"grid-line-yfull\"] > *::after {\n top: -5.75rem;\n bottom: -5.75rem;\n }\n .md\\:grid-line-x-96[class*=\"grid-line-x-\"] > *::before {\n bottom: -6rem;\n }\n .md\\:grid-line-x-96[class*=\"grid-line-yfull\"] > *::after {\n top: -6rem;\n bottom: -6rem;\n }\n .md\\:grid-line-x-100[class*=\"grid-line-x-\"] > *::before {\n bottom: -6.25rem;\n }\n .md\\:grid-line-x-100[class*=\"grid-line-yfull\"] > *::after {\n top: -6.25rem;\n bottom: -6.25rem;\n }\n .md\\:grid-line-x-safe-top[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-top);\n }\n .md\\:grid-line-x-safe-top[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-top);\n bottom: -env(safe-area-inset-top);\n }\n .md\\:grid-line-x-safe-bottom[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-bottom);\n }\n .md\\:grid-line-x-safe-bottom[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-bottom);\n bottom: -env(safe-area-inset-bottom);\n }\n .md\\:grid-line-x-safe-left[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-left);\n }\n .md\\:grid-line-x-safe-left[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-left);\n bottom: -env(safe-area-inset-left);\n }\n .md\\:grid-line-x-safe-right[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-right);\n }\n .md\\:grid-line-x-safe-right[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-right);\n bottom: -env(safe-area-inset-right);\n }\n .md\\:grid-line-x-gutter[class*=\"grid-line-x-\"] > *::before {\n bottom: -var(--inner-gutter);\n }\n .md\\:grid-line-x-gutter[class*=\"grid-line-yfull\"] > *::after {\n top: -var(--inner-gutter);\n bottom: -var(--inner-gutter);\n }\n .md\\:grid-line-x-outer-gutter[class*=\"grid-line-x-\"] > *::before {\n bottom: -var(--outer-gutter, 0px);\n }\n .md\\:grid-line-x-outer-gutter[class*=\"grid-line-yfull\"] > *::after {\n top: -var(--outer-gutter, 0px);\n bottom: -var(--outer-gutter, 0px);\n }\n .md\\:grid-line-x-default[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--brand-black);\n }\n .md\\:grid-line-y-default[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--brand-black);\n }\n .md\\:grid-line-xy-default[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--brand-black);\n }\n .md\\:grid-line-xy-default[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--brand-black);\n }\n .md\\:grid-line-x-inverse[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--white);\n }\n .md\\:grid-line-y-inverse[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--white);\n }\n .md\\:grid-line-xy-inverse[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--white);\n }\n .md\\:grid-line-xy-inverse[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--white);\n }\n .md\\:grid-line-x-inverse-soft[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.3);\n }\n .md\\:grid-line-y-inverse-soft[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.3);\n }\n .md\\:grid-line-xy-inverse-soft[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.3);\n }\n .md\\:grid-line-xy-inverse-soft[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.3);\n }\n .md\\:grid-line-x-inverse-softer[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.15);\n }\n .md\\:grid-line-y-inverse-softer[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.15);\n }\n .md\\:grid-line-xy-inverse-softer[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.15);\n }\n .md\\:grid-line-xy-inverse-softer[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.15);\n }\n .md\\:grid-line-x-soft[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .15 );\n }\n .md\\:grid-line-y-soft[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .15 );\n }\n .md\\:grid-line-xy-soft[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .15 );\n }\n .md\\:grid-line-xy-soft[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .15 );\n }\n .md\\:grid-line-x-softer[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .1 );\n }\n .md\\:grid-line-y-softer[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .1 );\n }\n .md\\:grid-line-xy-softer[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .1 );\n }\n .md\\:grid-line-xy-softer[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .1 );\n }\n .md\\:grid-line-x-softest[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .05 );\n }\n .md\\:grid-line-y-softest[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .05 );\n }\n .md\\:grid-line-xy-softest[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .05 );\n }\n .md\\:grid-line-xy-softest[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .05 );\n }\n .md\\:grid-line-x-accent[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--brand-green);\n }\n .md\\:grid-line-y-accent[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--brand-green);\n }\n .md\\:grid-line-xy-accent[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--brand-green);\n }\n .md\\:grid-line-xy-accent[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--brand-green);\n }\n .md\\:grid-line-x-error[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--red-700);\n }\n .md\\:grid-line-y-error[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--red-700);\n }\n .md\\:grid-line-xy-error[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--red-700);\n }\n .md\\:grid-line-xy-error[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--red-700);\n }\n .md\\:grid-line-x-current[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: currentColor;\n }\n .md\\:grid-line-y-current[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: currentColor;\n }\n .md\\:grid-line-xy-current[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: currentColor;\n }\n .md\\:grid-line-xy-current[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: currentColor;\n }\n .md\\:grid-line-x-transparent[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--transparent);\n }\n .md\\:grid-line-y-transparent[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--transparent);\n }\n .md\\:grid-line-xy-transparent[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--transparent);\n }\n .md\\:grid-line-xy-transparent[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--transparent);\n }\n .md\\:grid-cols-1[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .md\\:grid-cols-1[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: 0;\n inset-inline-end: 0;\n }\n .md\\:grid-cols-1[class*=\"grid-line-x\"] > *:nth-child(1n+1)::before {\n inset-inline-end: 0;\n }\n .md\\:grid-cols-1[class*=\"grid-line-x\"] > *:nth-child(1n+1):nth-last-child(-n+1)::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-1[class*=\"grid-line-x\"] > *:nth-child(1n+1):nth-last-child(-n+1) ~ *::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-2[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .md\\:grid-cols-2[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .md\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+1)::before {\n inset-inline-start: 0;\n }\n .md\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+2)::before {\n inset-inline-end: 0;\n }\n .md\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+1):nth-last-child(-n+2)::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+1):nth-last-child(-n+2) ~ *::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .md\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(2n+2)::after {\n border-inline-end-width: 0;\n }\n .md\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+2)::after {\n top: 0;\n }\n .md\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(2n+1):nth-last-child(-n+2)::after {\n bottom: 0;\n }\n .md\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(2n+1):nth-last-child(-n+2) ~ li::after {\n bottom: 0;\n }\n .md\\:grid-cols-3[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .md\\:grid-cols-3[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .md\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+1)::before {\n inset-inline-start: 0;\n }\n .md\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+3)::before {\n inset-inline-end: 0;\n }\n .md\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+1):nth-last-child(-n+3)::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+1):nth-last-child(-n+3) ~ *::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .md\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(3n+3)::after {\n border-inline-end-width: 0;\n }\n .md\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+3)::after {\n top: 0;\n }\n .md\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(3n+1):nth-last-child(-n+3)::after {\n bottom: 0;\n }\n .md\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(3n+1):nth-last-child(-n+3) ~ li::after {\n bottom: 0;\n }\n .md\\:grid-cols-4[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .md\\:grid-cols-4[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .md\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+1)::before {\n inset-inline-start: 0;\n }\n .md\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+4)::before {\n inset-inline-end: 0;\n }\n .md\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+1):nth-last-child(-n+4)::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+1):nth-last-child(-n+4) ~ *::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .md\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(4n+4)::after {\n border-inline-end-width: 0;\n }\n .md\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+4)::after {\n top: 0;\n }\n .md\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(4n+1):nth-last-child(-n+4)::after {\n bottom: 0;\n }\n .md\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(4n+1):nth-last-child(-n+4) ~ li::after {\n bottom: 0;\n }\n .md\\:grid-cols-5[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .md\\:grid-cols-5[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .md\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+1)::before {\n inset-inline-start: 0;\n }\n .md\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+5)::before {\n inset-inline-end: 0;\n }\n .md\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+1):nth-last-child(-n+5)::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+1):nth-last-child(-n+5) ~ *::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .md\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(5n+5)::after {\n border-inline-end-width: 0;\n }\n .md\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+5)::after {\n top: 0;\n }\n .md\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(5n+1):nth-last-child(-n+5)::after {\n bottom: 0;\n }\n .md\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(5n+1):nth-last-child(-n+5) ~ li::after {\n bottom: 0;\n }\n .md\\:grid-cols-6[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .md\\:grid-cols-6[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .md\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+1)::before {\n inset-inline-start: 0;\n }\n .md\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+6)::before {\n inset-inline-end: 0;\n }\n .md\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+1):nth-last-child(-n+6)::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+1):nth-last-child(-n+6) ~ *::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .md\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(6n+6)::after {\n border-inline-end-width: 0;\n }\n .md\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+6)::after {\n top: 0;\n }\n .md\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(6n+1):nth-last-child(-n+6)::after {\n bottom: 0;\n }\n .md\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(6n+1):nth-last-child(-n+6) ~ li::after {\n bottom: 0;\n }\n .md\\:grid-cols-7[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .md\\:grid-cols-7[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .md\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+1)::before {\n inset-inline-start: 0;\n }\n .md\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+7)::before {\n inset-inline-end: 0;\n }\n .md\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+1):nth-last-child(-n+7)::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+1):nth-last-child(-n+7) ~ *::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .md\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(7n+7)::after {\n border-inline-end-width: 0;\n }\n .md\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+7)::after {\n top: 0;\n }\n .md\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(7n+1):nth-last-child(-n+7)::after {\n bottom: 0;\n }\n .md\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(7n+1):nth-last-child(-n+7) ~ li::after {\n bottom: 0;\n }\n .md\\:grid-cols-8[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .md\\:grid-cols-8[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .md\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+1)::before {\n inset-inline-start: 0;\n }\n .md\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+8)::before {\n inset-inline-end: 0;\n }\n .md\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+1):nth-last-child(-n+8)::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+1):nth-last-child(-n+8) ~ *::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .md\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(8n+8)::after {\n border-inline-end-width: 0;\n }\n .md\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+8)::after {\n top: 0;\n }\n .md\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(8n+1):nth-last-child(-n+8)::after {\n bottom: 0;\n }\n .md\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(8n+1):nth-last-child(-n+8) ~ li::after {\n bottom: 0;\n }\n .md\\:grid-cols-9[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .md\\:grid-cols-9[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .md\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+1)::before {\n inset-inline-start: 0;\n }\n .md\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+9)::before {\n inset-inline-end: 0;\n }\n .md\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+1):nth-last-child(-n+9)::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+1):nth-last-child(-n+9) ~ *::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .md\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(9n+9)::after {\n border-inline-end-width: 0;\n }\n .md\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+9)::after {\n top: 0;\n }\n .md\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(9n+1):nth-last-child(-n+9)::after {\n bottom: 0;\n }\n .md\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(9n+1):nth-last-child(-n+9) ~ li::after {\n bottom: 0;\n }\n .md\\:grid-cols-10[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .md\\:grid-cols-10[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .md\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+1)::before {\n inset-inline-start: 0;\n }\n .md\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+10)::before {\n inset-inline-end: 0;\n }\n .md\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+1):nth-last-child(-n+10)::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+1):nth-last-child(-n+10) ~ *::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .md\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(10n+10)::after {\n border-inline-end-width: 0;\n }\n .md\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+10)::after {\n top: 0;\n }\n .md\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(10n+1):nth-last-child(-n+10)::after {\n bottom: 0;\n }\n .md\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(10n+1):nth-last-child(-n+10) ~ li::after {\n bottom: 0;\n }\n .md\\:grid-cols-11[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .md\\:grid-cols-11[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .md\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+1)::before {\n inset-inline-start: 0;\n }\n .md\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+11)::before {\n inset-inline-end: 0;\n }\n .md\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+1):nth-last-child(-n+11)::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+1):nth-last-child(-n+11) ~ *::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .md\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(11n+11)::after {\n border-inline-end-width: 0;\n }\n .md\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+11)::after {\n top: 0;\n }\n .md\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(11n+1):nth-last-child(-n+11)::after {\n bottom: 0;\n }\n .md\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(11n+1):nth-last-child(-n+11) ~ li::after {\n bottom: 0;\n }\n .md\\:grid-cols-12[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .md\\:grid-cols-12[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .md\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+1)::before {\n inset-inline-start: 0;\n }\n .md\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+12)::before {\n inset-inline-end: 0;\n }\n .md\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+1):nth-last-child(-n+12)::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+1):nth-last-child(-n+12) ~ *::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .md\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(12n+12)::after {\n border-inline-end-width: 0;\n }\n .md\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+12)::after {\n top: 0;\n }\n .md\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(12n+1):nth-last-child(-n+12)::after {\n bottom: 0;\n }\n .md\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(12n+1):nth-last-child(-n+12) ~ li::after {\n bottom: 0;\n }\n}\n@media (min-width: 900px) {\n [class*=\"grid-line-\"] > * {\n position: relative;\n }\n [class*=\"grid-line-\"] > *::before, [class*=\"grid-line-\"] > *::after {\n content: attr(👻);\n position: absolute;\n z-index: 0;\n pointer-events: none;\n }\n .lg\\:grid-line-x > *::before {\n content: attr(👻);\n inset-inline-start: 0;\n inset-inline-end: 0;\n top: 0;\n bottom: calc(var(--inner-gutter) / -2);\n border-top: 0 solid transparent;\n border-bottom: 0 solid transparent;\n }\n .lg\\:grid-line-xfull > *::before {\n content: attr(👻);\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: 0;\n bottom: calc(var(--inner-gutter) / -2);\n border-top: 0 solid transparent;\n border-bottom: 0 solid transparent;\n }\n .lg\\:grid-line-x-0 > *::before {\n content: none;\n }\n .lg\\:grid-line-y > *::after {\n content: attr(👻);\n inset-inline-start: 0;\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: 0;\n bottom: 0;\n border-inline-start: 0 solid transparent;\n border-inline-end: 0 solid transparent;\n }\n .lg\\:grid-line-yfull > *::after {\n content: attr(👻);\n inset-inline-start: 0;\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: calc(var(--inner-gutter) / -1);\n bottom: 0;\n border-inline-start: 0 solid transparent;\n border-inline-end: 0 solid transparent;\n }\n .lg\\:grid-line-yfull[class*=\"grid-line-x\"] > *::after {\n inset-inline-start: 0;\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: calc(var(--inner-gutter) / -2);\n bottom: calc(var(--inner-gutter) / -2);\n border-inline-start: 0 solid transparent;\n border-inline-end: 0 solid transparent;\n }\n .lg\\:grid-line-y-0 > *::after {\n content: none;\n }\n .lg\\:grid-line-x-0[class*=\"grid-line-x-\"] > *::before {\n bottom: -0rem;\n }\n .lg\\:grid-line-x-0[class*=\"grid-line-yfull\"] > *::after {\n top: -0rem;\n bottom: -0rem;\n }\n .lg\\:grid-line-x-1[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.0625rem;\n }\n .lg\\:grid-line-x-1[class*=\"grid-line-yfull\"] > *::after {\n top: -0.0625rem;\n bottom: -0.0625rem;\n }\n .lg\\:grid-line-x-2[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.125rem;\n }\n .lg\\:grid-line-x-2[class*=\"grid-line-yfull\"] > *::after {\n top: -0.125rem;\n bottom: -0.125rem;\n }\n .lg\\:grid-line-x-3[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.1875rem;\n }\n .lg\\:grid-line-x-3[class*=\"grid-line-yfull\"] > *::after {\n top: -0.1875rem;\n bottom: -0.1875rem;\n }\n .lg\\:grid-line-x-4[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.25rem;\n }\n .lg\\:grid-line-x-4[class*=\"grid-line-yfull\"] > *::after {\n top: -0.25rem;\n bottom: -0.25rem;\n }\n .lg\\:grid-line-x-5[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.3125rem;\n }\n .lg\\:grid-line-x-5[class*=\"grid-line-yfull\"] > *::after {\n top: -0.3125rem;\n bottom: -0.3125rem;\n }\n .lg\\:grid-line-x-6[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.375rem;\n }\n .lg\\:grid-line-x-6[class*=\"grid-line-yfull\"] > *::after {\n top: -0.375rem;\n bottom: -0.375rem;\n }\n .lg\\:grid-line-x-7[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.4375rem;\n }\n .lg\\:grid-line-x-7[class*=\"grid-line-yfull\"] > *::after {\n top: -0.4375rem;\n bottom: -0.4375rem;\n }\n .lg\\:grid-line-x-8[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.5rem;\n }\n .lg\\:grid-line-x-8[class*=\"grid-line-yfull\"] > *::after {\n top: -0.5rem;\n bottom: -0.5rem;\n }\n .lg\\:grid-line-x-9[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.5625rem;\n }\n .lg\\:grid-line-x-9[class*=\"grid-line-yfull\"] > *::after {\n top: -0.5625rem;\n bottom: -0.5625rem;\n }\n .lg\\:grid-line-x-10[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.625rem;\n }\n .lg\\:grid-line-x-10[class*=\"grid-line-yfull\"] > *::after {\n top: -0.625rem;\n bottom: -0.625rem;\n }\n .lg\\:grid-line-x-12[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.75rem;\n }\n .lg\\:grid-line-x-12[class*=\"grid-line-yfull\"] > *::after {\n top: -0.75rem;\n bottom: -0.75rem;\n }\n .lg\\:grid-line-x-16[class*=\"grid-line-x-\"] > *::before {\n bottom: -1rem;\n }\n .lg\\:grid-line-x-16[class*=\"grid-line-yfull\"] > *::after {\n top: -1rem;\n bottom: -1rem;\n }\n .lg\\:grid-line-x-20[class*=\"grid-line-x-\"] > *::before {\n bottom: -1.25rem;\n }\n .lg\\:grid-line-x-20[class*=\"grid-line-yfull\"] > *::after {\n top: -1.25rem;\n bottom: -1.25rem;\n }\n .lg\\:grid-line-x-24[class*=\"grid-line-x-\"] > *::before {\n bottom: -1.5rem;\n }\n .lg\\:grid-line-x-24[class*=\"grid-line-yfull\"] > *::after {\n top: -1.5rem;\n bottom: -1.5rem;\n }\n .lg\\:grid-line-x-28[class*=\"grid-line-x-\"] > *::before {\n bottom: -1.75rem;\n }\n .lg\\:grid-line-x-28[class*=\"grid-line-yfull\"] > *::after {\n top: -1.75rem;\n bottom: -1.75rem;\n }\n .lg\\:grid-line-x-32[class*=\"grid-line-x-\"] > *::before {\n bottom: -2rem;\n }\n .lg\\:grid-line-x-32[class*=\"grid-line-yfull\"] > *::after {\n top: -2rem;\n bottom: -2rem;\n }\n .lg\\:grid-line-x-36[class*=\"grid-line-x-\"] > *::before {\n bottom: -2.25rem;\n }\n .lg\\:grid-line-x-36[class*=\"grid-line-yfull\"] > *::after {\n top: -2.25rem;\n bottom: -2.25rem;\n }\n .lg\\:grid-line-x-40[class*=\"grid-line-x-\"] > *::before {\n bottom: -2.5rem;\n }\n .lg\\:grid-line-x-40[class*=\"grid-line-yfull\"] > *::after {\n top: -2.5rem;\n bottom: -2.5rem;\n }\n .lg\\:grid-line-x-44[class*=\"grid-line-x-\"] > *::before {\n bottom: -2.75rem;\n }\n .lg\\:grid-line-x-44[class*=\"grid-line-yfull\"] > *::after {\n top: -2.75rem;\n bottom: -2.75rem;\n }\n .lg\\:grid-line-x-48[class*=\"grid-line-x-\"] > *::before {\n bottom: -3rem;\n }\n .lg\\:grid-line-x-48[class*=\"grid-line-yfull\"] > *::after {\n top: -3rem;\n bottom: -3rem;\n }\n .lg\\:grid-line-x-52[class*=\"grid-line-x-\"] > *::before {\n bottom: -3.25rem;\n }\n .lg\\:grid-line-x-52[class*=\"grid-line-yfull\"] > *::after {\n top: -3.25rem;\n bottom: -3.25rem;\n }\n .lg\\:grid-line-x-56[class*=\"grid-line-x-\"] > *::before {\n bottom: -3.5rem;\n }\n .lg\\:grid-line-x-56[class*=\"grid-line-yfull\"] > *::after {\n top: -3.5rem;\n bottom: -3.5rem;\n }\n .lg\\:grid-line-x-60[class*=\"grid-line-x-\"] > *::before {\n bottom: -3.75rem;\n }\n .lg\\:grid-line-x-60[class*=\"grid-line-yfull\"] > *::after {\n top: -3.75rem;\n bottom: -3.75rem;\n }\n .lg\\:grid-line-x-64[class*=\"grid-line-x-\"] > *::before {\n bottom: -4rem;\n }\n .lg\\:grid-line-x-64[class*=\"grid-line-yfull\"] > *::after {\n top: -4rem;\n bottom: -4rem;\n }\n .lg\\:grid-line-x-68[class*=\"grid-line-x-\"] > *::before {\n bottom: -4.25rem;\n }\n .lg\\:grid-line-x-68[class*=\"grid-line-yfull\"] > *::after {\n top: -4.25rem;\n bottom: -4.25rem;\n }\n .lg\\:grid-line-x-72[class*=\"grid-line-x-\"] > *::before {\n bottom: -4.5rem;\n }\n .lg\\:grid-line-x-72[class*=\"grid-line-yfull\"] > *::after {\n top: -4.5rem;\n bottom: -4.5rem;\n }\n .lg\\:grid-line-x-76[class*=\"grid-line-x-\"] > *::before {\n bottom: -4.75rem;\n }\n .lg\\:grid-line-x-76[class*=\"grid-line-yfull\"] > *::after {\n top: -4.75rem;\n bottom: -4.75rem;\n }\n .lg\\:grid-line-x-80[class*=\"grid-line-x-\"] > *::before {\n bottom: -5rem;\n }\n .lg\\:grid-line-x-80[class*=\"grid-line-yfull\"] > *::after {\n top: -5rem;\n bottom: -5rem;\n }\n .lg\\:grid-line-x-84[class*=\"grid-line-x-\"] > *::before {\n bottom: -5.25rem;\n }\n .lg\\:grid-line-x-84[class*=\"grid-line-yfull\"] > *::after {\n top: -5.25rem;\n bottom: -5.25rem;\n }\n .lg\\:grid-line-x-88[class*=\"grid-line-x-\"] > *::before {\n bottom: -5.5rem;\n }\n .lg\\:grid-line-x-88[class*=\"grid-line-yfull\"] > *::after {\n top: -5.5rem;\n bottom: -5.5rem;\n }\n .lg\\:grid-line-x-92[class*=\"grid-line-x-\"] > *::before {\n bottom: -5.75rem;\n }\n .lg\\:grid-line-x-92[class*=\"grid-line-yfull\"] > *::after {\n top: -5.75rem;\n bottom: -5.75rem;\n }\n .lg\\:grid-line-x-96[class*=\"grid-line-x-\"] > *::before {\n bottom: -6rem;\n }\n .lg\\:grid-line-x-96[class*=\"grid-line-yfull\"] > *::after {\n top: -6rem;\n bottom: -6rem;\n }\n .lg\\:grid-line-x-100[class*=\"grid-line-x-\"] > *::before {\n bottom: -6.25rem;\n }\n .lg\\:grid-line-x-100[class*=\"grid-line-yfull\"] > *::after {\n top: -6.25rem;\n bottom: -6.25rem;\n }\n .lg\\:grid-line-x-safe-top[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-top);\n }\n .lg\\:grid-line-x-safe-top[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-top);\n bottom: -env(safe-area-inset-top);\n }\n .lg\\:grid-line-x-safe-bottom[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-bottom);\n }\n .lg\\:grid-line-x-safe-bottom[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-bottom);\n bottom: -env(safe-area-inset-bottom);\n }\n .lg\\:grid-line-x-safe-left[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-left);\n }\n .lg\\:grid-line-x-safe-left[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-left);\n bottom: -env(safe-area-inset-left);\n }\n .lg\\:grid-line-x-safe-right[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-right);\n }\n .lg\\:grid-line-x-safe-right[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-right);\n bottom: -env(safe-area-inset-right);\n }\n .lg\\:grid-line-x-gutter[class*=\"grid-line-x-\"] > *::before {\n bottom: -var(--inner-gutter);\n }\n .lg\\:grid-line-x-gutter[class*=\"grid-line-yfull\"] > *::after {\n top: -var(--inner-gutter);\n bottom: -var(--inner-gutter);\n }\n .lg\\:grid-line-x-outer-gutter[class*=\"grid-line-x-\"] > *::before {\n bottom: -var(--outer-gutter, 0px);\n }\n .lg\\:grid-line-x-outer-gutter[class*=\"grid-line-yfull\"] > *::after {\n top: -var(--outer-gutter, 0px);\n bottom: -var(--outer-gutter, 0px);\n }\n .lg\\:grid-line-x-default[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--brand-black);\n }\n .lg\\:grid-line-y-default[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--brand-black);\n }\n .lg\\:grid-line-xy-default[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--brand-black);\n }\n .lg\\:grid-line-xy-default[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--brand-black);\n }\n .lg\\:grid-line-x-inverse[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--white);\n }\n .lg\\:grid-line-y-inverse[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--white);\n }\n .lg\\:grid-line-xy-inverse[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--white);\n }\n .lg\\:grid-line-xy-inverse[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--white);\n }\n .lg\\:grid-line-x-inverse-soft[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.3);\n }\n .lg\\:grid-line-y-inverse-soft[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.3);\n }\n .lg\\:grid-line-xy-inverse-soft[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.3);\n }\n .lg\\:grid-line-xy-inverse-soft[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.3);\n }\n .lg\\:grid-line-x-inverse-softer[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.15);\n }\n .lg\\:grid-line-y-inverse-softer[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.15);\n }\n .lg\\:grid-line-xy-inverse-softer[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.15);\n }\n .lg\\:grid-line-xy-inverse-softer[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.15);\n }\n .lg\\:grid-line-x-soft[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .15 );\n }\n .lg\\:grid-line-y-soft[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .15 );\n }\n .lg\\:grid-line-xy-soft[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .15 );\n }\n .lg\\:grid-line-xy-soft[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .15 );\n }\n .lg\\:grid-line-x-softer[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .1 );\n }\n .lg\\:grid-line-y-softer[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .1 );\n }\n .lg\\:grid-line-xy-softer[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .1 );\n }\n .lg\\:grid-line-xy-softer[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .1 );\n }\n .lg\\:grid-line-x-softest[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .05 );\n }\n .lg\\:grid-line-y-softest[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .05 );\n }\n .lg\\:grid-line-xy-softest[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .05 );\n }\n .lg\\:grid-line-xy-softest[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .05 );\n }\n .lg\\:grid-line-x-accent[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--brand-green);\n }\n .lg\\:grid-line-y-accent[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--brand-green);\n }\n .lg\\:grid-line-xy-accent[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--brand-green);\n }\n .lg\\:grid-line-xy-accent[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--brand-green);\n }\n .lg\\:grid-line-x-error[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--red-700);\n }\n .lg\\:grid-line-y-error[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--red-700);\n }\n .lg\\:grid-line-xy-error[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--red-700);\n }\n .lg\\:grid-line-xy-error[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--red-700);\n }\n .lg\\:grid-line-x-current[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: currentColor;\n }\n .lg\\:grid-line-y-current[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: currentColor;\n }\n .lg\\:grid-line-xy-current[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: currentColor;\n }\n .lg\\:grid-line-xy-current[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: currentColor;\n }\n .lg\\:grid-line-x-transparent[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--transparent);\n }\n .lg\\:grid-line-y-transparent[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--transparent);\n }\n .lg\\:grid-line-xy-transparent[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--transparent);\n }\n .lg\\:grid-line-xy-transparent[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--transparent);\n }\n .lg\\:grid-cols-1[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .lg\\:grid-cols-1[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: 0;\n inset-inline-end: 0;\n }\n .lg\\:grid-cols-1[class*=\"grid-line-x\"] > *:nth-child(1n+1)::before {\n inset-inline-end: 0;\n }\n .lg\\:grid-cols-1[class*=\"grid-line-x\"] > *:nth-child(1n+1):nth-last-child(-n+1)::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-1[class*=\"grid-line-x\"] > *:nth-child(1n+1):nth-last-child(-n+1) ~ *::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-2[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .lg\\:grid-cols-2[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .lg\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+1)::before {\n inset-inline-start: 0;\n }\n .lg\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+2)::before {\n inset-inline-end: 0;\n }\n .lg\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+1):nth-last-child(-n+2)::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+1):nth-last-child(-n+2) ~ *::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .lg\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(2n+2)::after {\n border-inline-end-width: 0;\n }\n .lg\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+2)::after {\n top: 0;\n }\n .lg\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(2n+1):nth-last-child(-n+2)::after {\n bottom: 0;\n }\n .lg\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(2n+1):nth-last-child(-n+2) ~ li::after {\n bottom: 0;\n }\n .lg\\:grid-cols-3[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .lg\\:grid-cols-3[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .lg\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+1)::before {\n inset-inline-start: 0;\n }\n .lg\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+3)::before {\n inset-inline-end: 0;\n }\n .lg\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+1):nth-last-child(-n+3)::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+1):nth-last-child(-n+3) ~ *::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .lg\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(3n+3)::after {\n border-inline-end-width: 0;\n }\n .lg\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+3)::after {\n top: 0;\n }\n .lg\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(3n+1):nth-last-child(-n+3)::after {\n bottom: 0;\n }\n .lg\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(3n+1):nth-last-child(-n+3) ~ li::after {\n bottom: 0;\n }\n .lg\\:grid-cols-4[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .lg\\:grid-cols-4[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .lg\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+1)::before {\n inset-inline-start: 0;\n }\n .lg\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+4)::before {\n inset-inline-end: 0;\n }\n .lg\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+1):nth-last-child(-n+4)::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+1):nth-last-child(-n+4) ~ *::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .lg\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(4n+4)::after {\n border-inline-end-width: 0;\n }\n .lg\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+4)::after {\n top: 0;\n }\n .lg\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(4n+1):nth-last-child(-n+4)::after {\n bottom: 0;\n }\n .lg\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(4n+1):nth-last-child(-n+4) ~ li::after {\n bottom: 0;\n }\n .lg\\:grid-cols-5[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .lg\\:grid-cols-5[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .lg\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+1)::before {\n inset-inline-start: 0;\n }\n .lg\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+5)::before {\n inset-inline-end: 0;\n }\n .lg\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+1):nth-last-child(-n+5)::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+1):nth-last-child(-n+5) ~ *::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .lg\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(5n+5)::after {\n border-inline-end-width: 0;\n }\n .lg\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+5)::after {\n top: 0;\n }\n .lg\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(5n+1):nth-last-child(-n+5)::after {\n bottom: 0;\n }\n .lg\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(5n+1):nth-last-child(-n+5) ~ li::after {\n bottom: 0;\n }\n .lg\\:grid-cols-6[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .lg\\:grid-cols-6[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .lg\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+1)::before {\n inset-inline-start: 0;\n }\n .lg\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+6)::before {\n inset-inline-end: 0;\n }\n .lg\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+1):nth-last-child(-n+6)::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+1):nth-last-child(-n+6) ~ *::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .lg\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(6n+6)::after {\n border-inline-end-width: 0;\n }\n .lg\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+6)::after {\n top: 0;\n }\n .lg\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(6n+1):nth-last-child(-n+6)::after {\n bottom: 0;\n }\n .lg\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(6n+1):nth-last-child(-n+6) ~ li::after {\n bottom: 0;\n }\n .lg\\:grid-cols-7[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .lg\\:grid-cols-7[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .lg\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+1)::before {\n inset-inline-start: 0;\n }\n .lg\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+7)::before {\n inset-inline-end: 0;\n }\n .lg\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+1):nth-last-child(-n+7)::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+1):nth-last-child(-n+7) ~ *::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .lg\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(7n+7)::after {\n border-inline-end-width: 0;\n }\n .lg\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+7)::after {\n top: 0;\n }\n .lg\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(7n+1):nth-last-child(-n+7)::after {\n bottom: 0;\n }\n .lg\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(7n+1):nth-last-child(-n+7) ~ li::after {\n bottom: 0;\n }\n .lg\\:grid-cols-8[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .lg\\:grid-cols-8[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .lg\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+1)::before {\n inset-inline-start: 0;\n }\n .lg\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+8)::before {\n inset-inline-end: 0;\n }\n .lg\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+1):nth-last-child(-n+8)::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+1):nth-last-child(-n+8) ~ *::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .lg\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(8n+8)::after {\n border-inline-end-width: 0;\n }\n .lg\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+8)::after {\n top: 0;\n }\n .lg\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(8n+1):nth-last-child(-n+8)::after {\n bottom: 0;\n }\n .lg\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(8n+1):nth-last-child(-n+8) ~ li::after {\n bottom: 0;\n }\n .lg\\:grid-cols-9[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .lg\\:grid-cols-9[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .lg\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+1)::before {\n inset-inline-start: 0;\n }\n .lg\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+9)::before {\n inset-inline-end: 0;\n }\n .lg\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+1):nth-last-child(-n+9)::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+1):nth-last-child(-n+9) ~ *::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .lg\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(9n+9)::after {\n border-inline-end-width: 0;\n }\n .lg\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+9)::after {\n top: 0;\n }\n .lg\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(9n+1):nth-last-child(-n+9)::after {\n bottom: 0;\n }\n .lg\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(9n+1):nth-last-child(-n+9) ~ li::after {\n bottom: 0;\n }\n .lg\\:grid-cols-10[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .lg\\:grid-cols-10[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .lg\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+1)::before {\n inset-inline-start: 0;\n }\n .lg\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+10)::before {\n inset-inline-end: 0;\n }\n .lg\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+1):nth-last-child(-n+10)::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+1):nth-last-child(-n+10) ~ *::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .lg\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(10n+10)::after {\n border-inline-end-width: 0;\n }\n .lg\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+10)::after {\n top: 0;\n }\n .lg\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(10n+1):nth-last-child(-n+10)::after {\n bottom: 0;\n }\n .lg\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(10n+1):nth-last-child(-n+10) ~ li::after {\n bottom: 0;\n }\n .lg\\:grid-cols-11[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .lg\\:grid-cols-11[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .lg\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+1)::before {\n inset-inline-start: 0;\n }\n .lg\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+11)::before {\n inset-inline-end: 0;\n }\n .lg\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+1):nth-last-child(-n+11)::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+1):nth-last-child(-n+11) ~ *::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .lg\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(11n+11)::after {\n border-inline-end-width: 0;\n }\n .lg\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+11)::after {\n top: 0;\n }\n .lg\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(11n+1):nth-last-child(-n+11)::after {\n bottom: 0;\n }\n .lg\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(11n+1):nth-last-child(-n+11) ~ li::after {\n bottom: 0;\n }\n .lg\\:grid-cols-12[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .lg\\:grid-cols-12[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .lg\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+1)::before {\n inset-inline-start: 0;\n }\n .lg\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+12)::before {\n inset-inline-end: 0;\n }\n .lg\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+1):nth-last-child(-n+12)::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+1):nth-last-child(-n+12) ~ *::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .lg\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(12n+12)::after {\n border-inline-end-width: 0;\n }\n .lg\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+12)::after {\n top: 0;\n }\n .lg\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(12n+1):nth-last-child(-n+12)::after {\n bottom: 0;\n }\n .lg\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(12n+1):nth-last-child(-n+12) ~ li::after {\n bottom: 0;\n }\n}\n@media (min-width: 1024px) {\n [class*=\"grid-line-\"] > * {\n position: relative;\n }\n [class*=\"grid-line-\"] > *::before, [class*=\"grid-line-\"] > *::after {\n content: attr(👻);\n position: absolute;\n z-index: 0;\n pointer-events: none;\n }\n .xl\\:grid-line-x > *::before {\n content: attr(👻);\n inset-inline-start: 0;\n inset-inline-end: 0;\n top: 0;\n bottom: calc(var(--inner-gutter) / -2);\n border-top: 0 solid transparent;\n border-bottom: 0 solid transparent;\n }\n .xl\\:grid-line-xfull > *::before {\n content: attr(👻);\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: 0;\n bottom: calc(var(--inner-gutter) / -2);\n border-top: 0 solid transparent;\n border-bottom: 0 solid transparent;\n }\n .xl\\:grid-line-x-0 > *::before {\n content: none;\n }\n .xl\\:grid-line-y > *::after {\n content: attr(👻);\n inset-inline-start: 0;\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: 0;\n bottom: 0;\n border-inline-start: 0 solid transparent;\n border-inline-end: 0 solid transparent;\n }\n .xl\\:grid-line-yfull > *::after {\n content: attr(👻);\n inset-inline-start: 0;\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: calc(var(--inner-gutter) / -1);\n bottom: 0;\n border-inline-start: 0 solid transparent;\n border-inline-end: 0 solid transparent;\n }\n .xl\\:grid-line-yfull[class*=\"grid-line-x\"] > *::after {\n inset-inline-start: 0;\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: calc(var(--inner-gutter) / -2);\n bottom: calc(var(--inner-gutter) / -2);\n border-inline-start: 0 solid transparent;\n border-inline-end: 0 solid transparent;\n }\n .xl\\:grid-line-y-0 > *::after {\n content: none;\n }\n .xl\\:grid-line-x-0[class*=\"grid-line-x-\"] > *::before {\n bottom: -0rem;\n }\n .xl\\:grid-line-x-0[class*=\"grid-line-yfull\"] > *::after {\n top: -0rem;\n bottom: -0rem;\n }\n .xl\\:grid-line-x-1[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.0625rem;\n }\n .xl\\:grid-line-x-1[class*=\"grid-line-yfull\"] > *::after {\n top: -0.0625rem;\n bottom: -0.0625rem;\n }\n .xl\\:grid-line-x-2[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.125rem;\n }\n .xl\\:grid-line-x-2[class*=\"grid-line-yfull\"] > *::after {\n top: -0.125rem;\n bottom: -0.125rem;\n }\n .xl\\:grid-line-x-3[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.1875rem;\n }\n .xl\\:grid-line-x-3[class*=\"grid-line-yfull\"] > *::after {\n top: -0.1875rem;\n bottom: -0.1875rem;\n }\n .xl\\:grid-line-x-4[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.25rem;\n }\n .xl\\:grid-line-x-4[class*=\"grid-line-yfull\"] > *::after {\n top: -0.25rem;\n bottom: -0.25rem;\n }\n .xl\\:grid-line-x-5[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.3125rem;\n }\n .xl\\:grid-line-x-5[class*=\"grid-line-yfull\"] > *::after {\n top: -0.3125rem;\n bottom: -0.3125rem;\n }\n .xl\\:grid-line-x-6[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.375rem;\n }\n .xl\\:grid-line-x-6[class*=\"grid-line-yfull\"] > *::after {\n top: -0.375rem;\n bottom: -0.375rem;\n }\n .xl\\:grid-line-x-7[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.4375rem;\n }\n .xl\\:grid-line-x-7[class*=\"grid-line-yfull\"] > *::after {\n top: -0.4375rem;\n bottom: -0.4375rem;\n }\n .xl\\:grid-line-x-8[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.5rem;\n }\n .xl\\:grid-line-x-8[class*=\"grid-line-yfull\"] > *::after {\n top: -0.5rem;\n bottom: -0.5rem;\n }\n .xl\\:grid-line-x-9[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.5625rem;\n }\n .xl\\:grid-line-x-9[class*=\"grid-line-yfull\"] > *::after {\n top: -0.5625rem;\n bottom: -0.5625rem;\n }\n .xl\\:grid-line-x-10[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.625rem;\n }\n .xl\\:grid-line-x-10[class*=\"grid-line-yfull\"] > *::after {\n top: -0.625rem;\n bottom: -0.625rem;\n }\n .xl\\:grid-line-x-12[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.75rem;\n }\n .xl\\:grid-line-x-12[class*=\"grid-line-yfull\"] > *::after {\n top: -0.75rem;\n bottom: -0.75rem;\n }\n .xl\\:grid-line-x-16[class*=\"grid-line-x-\"] > *::before {\n bottom: -1rem;\n }\n .xl\\:grid-line-x-16[class*=\"grid-line-yfull\"] > *::after {\n top: -1rem;\n bottom: -1rem;\n }\n .xl\\:grid-line-x-20[class*=\"grid-line-x-\"] > *::before {\n bottom: -1.25rem;\n }\n .xl\\:grid-line-x-20[class*=\"grid-line-yfull\"] > *::after {\n top: -1.25rem;\n bottom: -1.25rem;\n }\n .xl\\:grid-line-x-24[class*=\"grid-line-x-\"] > *::before {\n bottom: -1.5rem;\n }\n .xl\\:grid-line-x-24[class*=\"grid-line-yfull\"] > *::after {\n top: -1.5rem;\n bottom: -1.5rem;\n }\n .xl\\:grid-line-x-28[class*=\"grid-line-x-\"] > *::before {\n bottom: -1.75rem;\n }\n .xl\\:grid-line-x-28[class*=\"grid-line-yfull\"] > *::after {\n top: -1.75rem;\n bottom: -1.75rem;\n }\n .xl\\:grid-line-x-32[class*=\"grid-line-x-\"] > *::before {\n bottom: -2rem;\n }\n .xl\\:grid-line-x-32[class*=\"grid-line-yfull\"] > *::after {\n top: -2rem;\n bottom: -2rem;\n }\n .xl\\:grid-line-x-36[class*=\"grid-line-x-\"] > *::before {\n bottom: -2.25rem;\n }\n .xl\\:grid-line-x-36[class*=\"grid-line-yfull\"] > *::after {\n top: -2.25rem;\n bottom: -2.25rem;\n }\n .xl\\:grid-line-x-40[class*=\"grid-line-x-\"] > *::before {\n bottom: -2.5rem;\n }\n .xl\\:grid-line-x-40[class*=\"grid-line-yfull\"] > *::after {\n top: -2.5rem;\n bottom: -2.5rem;\n }\n .xl\\:grid-line-x-44[class*=\"grid-line-x-\"] > *::before {\n bottom: -2.75rem;\n }\n .xl\\:grid-line-x-44[class*=\"grid-line-yfull\"] > *::after {\n top: -2.75rem;\n bottom: -2.75rem;\n }\n .xl\\:grid-line-x-48[class*=\"grid-line-x-\"] > *::before {\n bottom: -3rem;\n }\n .xl\\:grid-line-x-48[class*=\"grid-line-yfull\"] > *::after {\n top: -3rem;\n bottom: -3rem;\n }\n .xl\\:grid-line-x-52[class*=\"grid-line-x-\"] > *::before {\n bottom: -3.25rem;\n }\n .xl\\:grid-line-x-52[class*=\"grid-line-yfull\"] > *::after {\n top: -3.25rem;\n bottom: -3.25rem;\n }\n .xl\\:grid-line-x-56[class*=\"grid-line-x-\"] > *::before {\n bottom: -3.5rem;\n }\n .xl\\:grid-line-x-56[class*=\"grid-line-yfull\"] > *::after {\n top: -3.5rem;\n bottom: -3.5rem;\n }\n .xl\\:grid-line-x-60[class*=\"grid-line-x-\"] > *::before {\n bottom: -3.75rem;\n }\n .xl\\:grid-line-x-60[class*=\"grid-line-yfull\"] > *::after {\n top: -3.75rem;\n bottom: -3.75rem;\n }\n .xl\\:grid-line-x-64[class*=\"grid-line-x-\"] > *::before {\n bottom: -4rem;\n }\n .xl\\:grid-line-x-64[class*=\"grid-line-yfull\"] > *::after {\n top: -4rem;\n bottom: -4rem;\n }\n .xl\\:grid-line-x-68[class*=\"grid-line-x-\"] > *::before {\n bottom: -4.25rem;\n }\n .xl\\:grid-line-x-68[class*=\"grid-line-yfull\"] > *::after {\n top: -4.25rem;\n bottom: -4.25rem;\n }\n .xl\\:grid-line-x-72[class*=\"grid-line-x-\"] > *::before {\n bottom: -4.5rem;\n }\n .xl\\:grid-line-x-72[class*=\"grid-line-yfull\"] > *::after {\n top: -4.5rem;\n bottom: -4.5rem;\n }\n .xl\\:grid-line-x-76[class*=\"grid-line-x-\"] > *::before {\n bottom: -4.75rem;\n }\n .xl\\:grid-line-x-76[class*=\"grid-line-yfull\"] > *::after {\n top: -4.75rem;\n bottom: -4.75rem;\n }\n .xl\\:grid-line-x-80[class*=\"grid-line-x-\"] > *::before {\n bottom: -5rem;\n }\n .xl\\:grid-line-x-80[class*=\"grid-line-yfull\"] > *::after {\n top: -5rem;\n bottom: -5rem;\n }\n .xl\\:grid-line-x-84[class*=\"grid-line-x-\"] > *::before {\n bottom: -5.25rem;\n }\n .xl\\:grid-line-x-84[class*=\"grid-line-yfull\"] > *::after {\n top: -5.25rem;\n bottom: -5.25rem;\n }\n .xl\\:grid-line-x-88[class*=\"grid-line-x-\"] > *::before {\n bottom: -5.5rem;\n }\n .xl\\:grid-line-x-88[class*=\"grid-line-yfull\"] > *::after {\n top: -5.5rem;\n bottom: -5.5rem;\n }\n .xl\\:grid-line-x-92[class*=\"grid-line-x-\"] > *::before {\n bottom: -5.75rem;\n }\n .xl\\:grid-line-x-92[class*=\"grid-line-yfull\"] > *::after {\n top: -5.75rem;\n bottom: -5.75rem;\n }\n .xl\\:grid-line-x-96[class*=\"grid-line-x-\"] > *::before {\n bottom: -6rem;\n }\n .xl\\:grid-line-x-96[class*=\"grid-line-yfull\"] > *::after {\n top: -6rem;\n bottom: -6rem;\n }\n .xl\\:grid-line-x-100[class*=\"grid-line-x-\"] > *::before {\n bottom: -6.25rem;\n }\n .xl\\:grid-line-x-100[class*=\"grid-line-yfull\"] > *::after {\n top: -6.25rem;\n bottom: -6.25rem;\n }\n .xl\\:grid-line-x-safe-top[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-top);\n }\n .xl\\:grid-line-x-safe-top[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-top);\n bottom: -env(safe-area-inset-top);\n }\n .xl\\:grid-line-x-safe-bottom[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-bottom);\n }\n .xl\\:grid-line-x-safe-bottom[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-bottom);\n bottom: -env(safe-area-inset-bottom);\n }\n .xl\\:grid-line-x-safe-left[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-left);\n }\n .xl\\:grid-line-x-safe-left[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-left);\n bottom: -env(safe-area-inset-left);\n }\n .xl\\:grid-line-x-safe-right[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-right);\n }\n .xl\\:grid-line-x-safe-right[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-right);\n bottom: -env(safe-area-inset-right);\n }\n .xl\\:grid-line-x-gutter[class*=\"grid-line-x-\"] > *::before {\n bottom: -var(--inner-gutter);\n }\n .xl\\:grid-line-x-gutter[class*=\"grid-line-yfull\"] > *::after {\n top: -var(--inner-gutter);\n bottom: -var(--inner-gutter);\n }\n .xl\\:grid-line-x-outer-gutter[class*=\"grid-line-x-\"] > *::before {\n bottom: -var(--outer-gutter, 0px);\n }\n .xl\\:grid-line-x-outer-gutter[class*=\"grid-line-yfull\"] > *::after {\n top: -var(--outer-gutter, 0px);\n bottom: -var(--outer-gutter, 0px);\n }\n .xl\\:grid-line-x-default[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--brand-black);\n }\n .xl\\:grid-line-y-default[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--brand-black);\n }\n .xl\\:grid-line-xy-default[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--brand-black);\n }\n .xl\\:grid-line-xy-default[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--brand-black);\n }\n .xl\\:grid-line-x-inverse[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--white);\n }\n .xl\\:grid-line-y-inverse[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--white);\n }\n .xl\\:grid-line-xy-inverse[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--white);\n }\n .xl\\:grid-line-xy-inverse[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--white);\n }\n .xl\\:grid-line-x-inverse-soft[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.3);\n }\n .xl\\:grid-line-y-inverse-soft[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.3);\n }\n .xl\\:grid-line-xy-inverse-soft[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.3);\n }\n .xl\\:grid-line-xy-inverse-soft[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.3);\n }\n .xl\\:grid-line-x-inverse-softer[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.15);\n }\n .xl\\:grid-line-y-inverse-softer[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.15);\n }\n .xl\\:grid-line-xy-inverse-softer[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.15);\n }\n .xl\\:grid-line-xy-inverse-softer[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.15);\n }\n .xl\\:grid-line-x-soft[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .15 );\n }\n .xl\\:grid-line-y-soft[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .15 );\n }\n .xl\\:grid-line-xy-soft[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .15 );\n }\n .xl\\:grid-line-xy-soft[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .15 );\n }\n .xl\\:grid-line-x-softer[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .1 );\n }\n .xl\\:grid-line-y-softer[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .1 );\n }\n .xl\\:grid-line-xy-softer[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .1 );\n }\n .xl\\:grid-line-xy-softer[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .1 );\n }\n .xl\\:grid-line-x-softest[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .05 );\n }\n .xl\\:grid-line-y-softest[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .05 );\n }\n .xl\\:grid-line-xy-softest[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .05 );\n }\n .xl\\:grid-line-xy-softest[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .05 );\n }\n .xl\\:grid-line-x-accent[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--brand-green);\n }\n .xl\\:grid-line-y-accent[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--brand-green);\n }\n .xl\\:grid-line-xy-accent[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--brand-green);\n }\n .xl\\:grid-line-xy-accent[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--brand-green);\n }\n .xl\\:grid-line-x-error[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--red-700);\n }\n .xl\\:grid-line-y-error[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--red-700);\n }\n .xl\\:grid-line-xy-error[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--red-700);\n }\n .xl\\:grid-line-xy-error[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--red-700);\n }\n .xl\\:grid-line-x-current[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: currentColor;\n }\n .xl\\:grid-line-y-current[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: currentColor;\n }\n .xl\\:grid-line-xy-current[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: currentColor;\n }\n .xl\\:grid-line-xy-current[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: currentColor;\n }\n .xl\\:grid-line-x-transparent[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--transparent);\n }\n .xl\\:grid-line-y-transparent[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--transparent);\n }\n .xl\\:grid-line-xy-transparent[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--transparent);\n }\n .xl\\:grid-line-xy-transparent[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--transparent);\n }\n .xl\\:grid-cols-1[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xl\\:grid-cols-1[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: 0;\n inset-inline-end: 0;\n }\n .xl\\:grid-cols-1[class*=\"grid-line-x\"] > *:nth-child(1n+1)::before {\n inset-inline-end: 0;\n }\n .xl\\:grid-cols-1[class*=\"grid-line-x\"] > *:nth-child(1n+1):nth-last-child(-n+1)::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-1[class*=\"grid-line-x\"] > *:nth-child(1n+1):nth-last-child(-n+1) ~ *::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-2[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xl\\:grid-cols-2[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xl\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+1)::before {\n inset-inline-start: 0;\n }\n .xl\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+2)::before {\n inset-inline-end: 0;\n }\n .xl\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+1):nth-last-child(-n+2)::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+1):nth-last-child(-n+2) ~ *::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xl\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(2n+2)::after {\n border-inline-end-width: 0;\n }\n .xl\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+2)::after {\n top: 0;\n }\n .xl\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(2n+1):nth-last-child(-n+2)::after {\n bottom: 0;\n }\n .xl\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(2n+1):nth-last-child(-n+2) ~ li::after {\n bottom: 0;\n }\n .xl\\:grid-cols-3[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xl\\:grid-cols-3[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xl\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+1)::before {\n inset-inline-start: 0;\n }\n .xl\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+3)::before {\n inset-inline-end: 0;\n }\n .xl\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+1):nth-last-child(-n+3)::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+1):nth-last-child(-n+3) ~ *::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xl\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(3n+3)::after {\n border-inline-end-width: 0;\n }\n .xl\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+3)::after {\n top: 0;\n }\n .xl\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(3n+1):nth-last-child(-n+3)::after {\n bottom: 0;\n }\n .xl\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(3n+1):nth-last-child(-n+3) ~ li::after {\n bottom: 0;\n }\n .xl\\:grid-cols-4[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xl\\:grid-cols-4[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xl\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+1)::before {\n inset-inline-start: 0;\n }\n .xl\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+4)::before {\n inset-inline-end: 0;\n }\n .xl\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+1):nth-last-child(-n+4)::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+1):nth-last-child(-n+4) ~ *::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xl\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(4n+4)::after {\n border-inline-end-width: 0;\n }\n .xl\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+4)::after {\n top: 0;\n }\n .xl\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(4n+1):nth-last-child(-n+4)::after {\n bottom: 0;\n }\n .xl\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(4n+1):nth-last-child(-n+4) ~ li::after {\n bottom: 0;\n }\n .xl\\:grid-cols-5[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xl\\:grid-cols-5[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xl\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+1)::before {\n inset-inline-start: 0;\n }\n .xl\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+5)::before {\n inset-inline-end: 0;\n }\n .xl\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+1):nth-last-child(-n+5)::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+1):nth-last-child(-n+5) ~ *::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xl\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(5n+5)::after {\n border-inline-end-width: 0;\n }\n .xl\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+5)::after {\n top: 0;\n }\n .xl\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(5n+1):nth-last-child(-n+5)::after {\n bottom: 0;\n }\n .xl\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(5n+1):nth-last-child(-n+5) ~ li::after {\n bottom: 0;\n }\n .xl\\:grid-cols-6[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xl\\:grid-cols-6[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xl\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+1)::before {\n inset-inline-start: 0;\n }\n .xl\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+6)::before {\n inset-inline-end: 0;\n }\n .xl\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+1):nth-last-child(-n+6)::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+1):nth-last-child(-n+6) ~ *::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xl\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(6n+6)::after {\n border-inline-end-width: 0;\n }\n .xl\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+6)::after {\n top: 0;\n }\n .xl\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(6n+1):nth-last-child(-n+6)::after {\n bottom: 0;\n }\n .xl\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(6n+1):nth-last-child(-n+6) ~ li::after {\n bottom: 0;\n }\n .xl\\:grid-cols-7[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xl\\:grid-cols-7[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xl\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+1)::before {\n inset-inline-start: 0;\n }\n .xl\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+7)::before {\n inset-inline-end: 0;\n }\n .xl\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+1):nth-last-child(-n+7)::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+1):nth-last-child(-n+7) ~ *::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xl\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(7n+7)::after {\n border-inline-end-width: 0;\n }\n .xl\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+7)::after {\n top: 0;\n }\n .xl\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(7n+1):nth-last-child(-n+7)::after {\n bottom: 0;\n }\n .xl\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(7n+1):nth-last-child(-n+7) ~ li::after {\n bottom: 0;\n }\n .xl\\:grid-cols-8[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xl\\:grid-cols-8[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xl\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+1)::before {\n inset-inline-start: 0;\n }\n .xl\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+8)::before {\n inset-inline-end: 0;\n }\n .xl\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+1):nth-last-child(-n+8)::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+1):nth-last-child(-n+8) ~ *::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xl\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(8n+8)::after {\n border-inline-end-width: 0;\n }\n .xl\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+8)::after {\n top: 0;\n }\n .xl\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(8n+1):nth-last-child(-n+8)::after {\n bottom: 0;\n }\n .xl\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(8n+1):nth-last-child(-n+8) ~ li::after {\n bottom: 0;\n }\n .xl\\:grid-cols-9[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xl\\:grid-cols-9[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xl\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+1)::before {\n inset-inline-start: 0;\n }\n .xl\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+9)::before {\n inset-inline-end: 0;\n }\n .xl\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+1):nth-last-child(-n+9)::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+1):nth-last-child(-n+9) ~ *::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xl\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(9n+9)::after {\n border-inline-end-width: 0;\n }\n .xl\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+9)::after {\n top: 0;\n }\n .xl\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(9n+1):nth-last-child(-n+9)::after {\n bottom: 0;\n }\n .xl\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(9n+1):nth-last-child(-n+9) ~ li::after {\n bottom: 0;\n }\n .xl\\:grid-cols-10[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xl\\:grid-cols-10[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xl\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+1)::before {\n inset-inline-start: 0;\n }\n .xl\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+10)::before {\n inset-inline-end: 0;\n }\n .xl\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+1):nth-last-child(-n+10)::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+1):nth-last-child(-n+10) ~ *::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xl\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(10n+10)::after {\n border-inline-end-width: 0;\n }\n .xl\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+10)::after {\n top: 0;\n }\n .xl\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(10n+1):nth-last-child(-n+10)::after {\n bottom: 0;\n }\n .xl\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(10n+1):nth-last-child(-n+10) ~ li::after {\n bottom: 0;\n }\n .xl\\:grid-cols-11[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xl\\:grid-cols-11[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xl\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+1)::before {\n inset-inline-start: 0;\n }\n .xl\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+11)::before {\n inset-inline-end: 0;\n }\n .xl\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+1):nth-last-child(-n+11)::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+1):nth-last-child(-n+11) ~ *::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xl\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(11n+11)::after {\n border-inline-end-width: 0;\n }\n .xl\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+11)::after {\n top: 0;\n }\n .xl\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(11n+1):nth-last-child(-n+11)::after {\n bottom: 0;\n }\n .xl\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(11n+1):nth-last-child(-n+11) ~ li::after {\n bottom: 0;\n }\n .xl\\:grid-cols-12[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xl\\:grid-cols-12[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xl\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+1)::before {\n inset-inline-start: 0;\n }\n .xl\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+12)::before {\n inset-inline-end: 0;\n }\n .xl\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+1):nth-last-child(-n+12)::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+1):nth-last-child(-n+12) ~ *::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xl\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(12n+12)::after {\n border-inline-end-width: 0;\n }\n .xl\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+12)::after {\n top: 0;\n }\n .xl\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(12n+1):nth-last-child(-n+12)::after {\n bottom: 0;\n }\n .xl\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(12n+1):nth-last-child(-n+12) ~ li::after {\n bottom: 0;\n }\n}\n@media (min-width: 1280px) {\n [class*=\"grid-line-\"] > * {\n position: relative;\n }\n [class*=\"grid-line-\"] > *::before, [class*=\"grid-line-\"] > *::after {\n content: attr(👻);\n position: absolute;\n z-index: 0;\n pointer-events: none;\n }\n .xxl\\:grid-line-x > *::before {\n content: attr(👻);\n inset-inline-start: 0;\n inset-inline-end: 0;\n top: 0;\n bottom: calc(var(--inner-gutter) / -2);\n border-top: 0 solid transparent;\n border-bottom: 0 solid transparent;\n }\n .xxl\\:grid-line-xfull > *::before {\n content: attr(👻);\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: 0;\n bottom: calc(var(--inner-gutter) / -2);\n border-top: 0 solid transparent;\n border-bottom: 0 solid transparent;\n }\n .xxl\\:grid-line-x-0 > *::before {\n content: none;\n }\n .xxl\\:grid-line-y > *::after {\n content: attr(👻);\n inset-inline-start: 0;\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: 0;\n bottom: 0;\n border-inline-start: 0 solid transparent;\n border-inline-end: 0 solid transparent;\n }\n .xxl\\:grid-line-yfull > *::after {\n content: attr(👻);\n inset-inline-start: 0;\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: calc(var(--inner-gutter) / -1);\n bottom: 0;\n border-inline-start: 0 solid transparent;\n border-inline-end: 0 solid transparent;\n }\n .xxl\\:grid-line-yfull[class*=\"grid-line-x\"] > *::after {\n inset-inline-start: 0;\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: calc(var(--inner-gutter) / -2);\n bottom: calc(var(--inner-gutter) / -2);\n border-inline-start: 0 solid transparent;\n border-inline-end: 0 solid transparent;\n }\n .xxl\\:grid-line-y-0 > *::after {\n content: none;\n }\n .xxl\\:grid-line-x-0[class*=\"grid-line-x-\"] > *::before {\n bottom: -0rem;\n }\n .xxl\\:grid-line-x-0[class*=\"grid-line-yfull\"] > *::after {\n top: -0rem;\n bottom: -0rem;\n }\n .xxl\\:grid-line-x-1[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.0625rem;\n }\n .xxl\\:grid-line-x-1[class*=\"grid-line-yfull\"] > *::after {\n top: -0.0625rem;\n bottom: -0.0625rem;\n }\n .xxl\\:grid-line-x-2[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.125rem;\n }\n .xxl\\:grid-line-x-2[class*=\"grid-line-yfull\"] > *::after {\n top: -0.125rem;\n bottom: -0.125rem;\n }\n .xxl\\:grid-line-x-3[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.1875rem;\n }\n .xxl\\:grid-line-x-3[class*=\"grid-line-yfull\"] > *::after {\n top: -0.1875rem;\n bottom: -0.1875rem;\n }\n .xxl\\:grid-line-x-4[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.25rem;\n }\n .xxl\\:grid-line-x-4[class*=\"grid-line-yfull\"] > *::after {\n top: -0.25rem;\n bottom: -0.25rem;\n }\n .xxl\\:grid-line-x-5[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.3125rem;\n }\n .xxl\\:grid-line-x-5[class*=\"grid-line-yfull\"] > *::after {\n top: -0.3125rem;\n bottom: -0.3125rem;\n }\n .xxl\\:grid-line-x-6[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.375rem;\n }\n .xxl\\:grid-line-x-6[class*=\"grid-line-yfull\"] > *::after {\n top: -0.375rem;\n bottom: -0.375rem;\n }\n .xxl\\:grid-line-x-7[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.4375rem;\n }\n .xxl\\:grid-line-x-7[class*=\"grid-line-yfull\"] > *::after {\n top: -0.4375rem;\n bottom: -0.4375rem;\n }\n .xxl\\:grid-line-x-8[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.5rem;\n }\n .xxl\\:grid-line-x-8[class*=\"grid-line-yfull\"] > *::after {\n top: -0.5rem;\n bottom: -0.5rem;\n }\n .xxl\\:grid-line-x-9[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.5625rem;\n }\n .xxl\\:grid-line-x-9[class*=\"grid-line-yfull\"] > *::after {\n top: -0.5625rem;\n bottom: -0.5625rem;\n }\n .xxl\\:grid-line-x-10[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.625rem;\n }\n .xxl\\:grid-line-x-10[class*=\"grid-line-yfull\"] > *::after {\n top: -0.625rem;\n bottom: -0.625rem;\n }\n .xxl\\:grid-line-x-12[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.75rem;\n }\n .xxl\\:grid-line-x-12[class*=\"grid-line-yfull\"] > *::after {\n top: -0.75rem;\n bottom: -0.75rem;\n }\n .xxl\\:grid-line-x-16[class*=\"grid-line-x-\"] > *::before {\n bottom: -1rem;\n }\n .xxl\\:grid-line-x-16[class*=\"grid-line-yfull\"] > *::after {\n top: -1rem;\n bottom: -1rem;\n }\n .xxl\\:grid-line-x-20[class*=\"grid-line-x-\"] > *::before {\n bottom: -1.25rem;\n }\n .xxl\\:grid-line-x-20[class*=\"grid-line-yfull\"] > *::after {\n top: -1.25rem;\n bottom: -1.25rem;\n }\n .xxl\\:grid-line-x-24[class*=\"grid-line-x-\"] > *::before {\n bottom: -1.5rem;\n }\n .xxl\\:grid-line-x-24[class*=\"grid-line-yfull\"] > *::after {\n top: -1.5rem;\n bottom: -1.5rem;\n }\n .xxl\\:grid-line-x-28[class*=\"grid-line-x-\"] > *::before {\n bottom: -1.75rem;\n }\n .xxl\\:grid-line-x-28[class*=\"grid-line-yfull\"] > *::after {\n top: -1.75rem;\n bottom: -1.75rem;\n }\n .xxl\\:grid-line-x-32[class*=\"grid-line-x-\"] > *::before {\n bottom: -2rem;\n }\n .xxl\\:grid-line-x-32[class*=\"grid-line-yfull\"] > *::after {\n top: -2rem;\n bottom: -2rem;\n }\n .xxl\\:grid-line-x-36[class*=\"grid-line-x-\"] > *::before {\n bottom: -2.25rem;\n }\n .xxl\\:grid-line-x-36[class*=\"grid-line-yfull\"] > *::after {\n top: -2.25rem;\n bottom: -2.25rem;\n }\n .xxl\\:grid-line-x-40[class*=\"grid-line-x-\"] > *::before {\n bottom: -2.5rem;\n }\n .xxl\\:grid-line-x-40[class*=\"grid-line-yfull\"] > *::after {\n top: -2.5rem;\n bottom: -2.5rem;\n }\n .xxl\\:grid-line-x-44[class*=\"grid-line-x-\"] > *::before {\n bottom: -2.75rem;\n }\n .xxl\\:grid-line-x-44[class*=\"grid-line-yfull\"] > *::after {\n top: -2.75rem;\n bottom: -2.75rem;\n }\n .xxl\\:grid-line-x-48[class*=\"grid-line-x-\"] > *::before {\n bottom: -3rem;\n }\n .xxl\\:grid-line-x-48[class*=\"grid-line-yfull\"] > *::after {\n top: -3rem;\n bottom: -3rem;\n }\n .xxl\\:grid-line-x-52[class*=\"grid-line-x-\"] > *::before {\n bottom: -3.25rem;\n }\n .xxl\\:grid-line-x-52[class*=\"grid-line-yfull\"] > *::after {\n top: -3.25rem;\n bottom: -3.25rem;\n }\n .xxl\\:grid-line-x-56[class*=\"grid-line-x-\"] > *::before {\n bottom: -3.5rem;\n }\n .xxl\\:grid-line-x-56[class*=\"grid-line-yfull\"] > *::after {\n top: -3.5rem;\n bottom: -3.5rem;\n }\n .xxl\\:grid-line-x-60[class*=\"grid-line-x-\"] > *::before {\n bottom: -3.75rem;\n }\n .xxl\\:grid-line-x-60[class*=\"grid-line-yfull\"] > *::after {\n top: -3.75rem;\n bottom: -3.75rem;\n }\n .xxl\\:grid-line-x-64[class*=\"grid-line-x-\"] > *::before {\n bottom: -4rem;\n }\n .xxl\\:grid-line-x-64[class*=\"grid-line-yfull\"] > *::after {\n top: -4rem;\n bottom: -4rem;\n }\n .xxl\\:grid-line-x-68[class*=\"grid-line-x-\"] > *::before {\n bottom: -4.25rem;\n }\n .xxl\\:grid-line-x-68[class*=\"grid-line-yfull\"] > *::after {\n top: -4.25rem;\n bottom: -4.25rem;\n }\n .xxl\\:grid-line-x-72[class*=\"grid-line-x-\"] > *::before {\n bottom: -4.5rem;\n }\n .xxl\\:grid-line-x-72[class*=\"grid-line-yfull\"] > *::after {\n top: -4.5rem;\n bottom: -4.5rem;\n }\n .xxl\\:grid-line-x-76[class*=\"grid-line-x-\"] > *::before {\n bottom: -4.75rem;\n }\n .xxl\\:grid-line-x-76[class*=\"grid-line-yfull\"] > *::after {\n top: -4.75rem;\n bottom: -4.75rem;\n }\n .xxl\\:grid-line-x-80[class*=\"grid-line-x-\"] > *::before {\n bottom: -5rem;\n }\n .xxl\\:grid-line-x-80[class*=\"grid-line-yfull\"] > *::after {\n top: -5rem;\n bottom: -5rem;\n }\n .xxl\\:grid-line-x-84[class*=\"grid-line-x-\"] > *::before {\n bottom: -5.25rem;\n }\n .xxl\\:grid-line-x-84[class*=\"grid-line-yfull\"] > *::after {\n top: -5.25rem;\n bottom: -5.25rem;\n }\n .xxl\\:grid-line-x-88[class*=\"grid-line-x-\"] > *::before {\n bottom: -5.5rem;\n }\n .xxl\\:grid-line-x-88[class*=\"grid-line-yfull\"] > *::after {\n top: -5.5rem;\n bottom: -5.5rem;\n }\n .xxl\\:grid-line-x-92[class*=\"grid-line-x-\"] > *::before {\n bottom: -5.75rem;\n }\n .xxl\\:grid-line-x-92[class*=\"grid-line-yfull\"] > *::after {\n top: -5.75rem;\n bottom: -5.75rem;\n }\n .xxl\\:grid-line-x-96[class*=\"grid-line-x-\"] > *::before {\n bottom: -6rem;\n }\n .xxl\\:grid-line-x-96[class*=\"grid-line-yfull\"] > *::after {\n top: -6rem;\n bottom: -6rem;\n }\n .xxl\\:grid-line-x-100[class*=\"grid-line-x-\"] > *::before {\n bottom: -6.25rem;\n }\n .xxl\\:grid-line-x-100[class*=\"grid-line-yfull\"] > *::after {\n top: -6.25rem;\n bottom: -6.25rem;\n }\n .xxl\\:grid-line-x-safe-top[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-top);\n }\n .xxl\\:grid-line-x-safe-top[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-top);\n bottom: -env(safe-area-inset-top);\n }\n .xxl\\:grid-line-x-safe-bottom[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-bottom);\n }\n .xxl\\:grid-line-x-safe-bottom[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-bottom);\n bottom: -env(safe-area-inset-bottom);\n }\n .xxl\\:grid-line-x-safe-left[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-left);\n }\n .xxl\\:grid-line-x-safe-left[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-left);\n bottom: -env(safe-area-inset-left);\n }\n .xxl\\:grid-line-x-safe-right[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-right);\n }\n .xxl\\:grid-line-x-safe-right[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-right);\n bottom: -env(safe-area-inset-right);\n }\n .xxl\\:grid-line-x-gutter[class*=\"grid-line-x-\"] > *::before {\n bottom: -var(--inner-gutter);\n }\n .xxl\\:grid-line-x-gutter[class*=\"grid-line-yfull\"] > *::after {\n top: -var(--inner-gutter);\n bottom: -var(--inner-gutter);\n }\n .xxl\\:grid-line-x-outer-gutter[class*=\"grid-line-x-\"] > *::before {\n bottom: -var(--outer-gutter, 0px);\n }\n .xxl\\:grid-line-x-outer-gutter[class*=\"grid-line-yfull\"] > *::after {\n top: -var(--outer-gutter, 0px);\n bottom: -var(--outer-gutter, 0px);\n }\n .xxl\\:grid-line-x-default[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--brand-black);\n }\n .xxl\\:grid-line-y-default[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--brand-black);\n }\n .xxl\\:grid-line-xy-default[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--brand-black);\n }\n .xxl\\:grid-line-xy-default[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--brand-black);\n }\n .xxl\\:grid-line-x-inverse[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--white);\n }\n .xxl\\:grid-line-y-inverse[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--white);\n }\n .xxl\\:grid-line-xy-inverse[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--white);\n }\n .xxl\\:grid-line-xy-inverse[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--white);\n }\n .xxl\\:grid-line-x-inverse-soft[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.3);\n }\n .xxl\\:grid-line-y-inverse-soft[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.3);\n }\n .xxl\\:grid-line-xy-inverse-soft[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.3);\n }\n .xxl\\:grid-line-xy-inverse-soft[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.3);\n }\n .xxl\\:grid-line-x-inverse-softer[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.15);\n }\n .xxl\\:grid-line-y-inverse-softer[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.15);\n }\n .xxl\\:grid-line-xy-inverse-softer[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.15);\n }\n .xxl\\:grid-line-xy-inverse-softer[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.15);\n }\n .xxl\\:grid-line-x-soft[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .15 );\n }\n .xxl\\:grid-line-y-soft[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .15 );\n }\n .xxl\\:grid-line-xy-soft[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .15 );\n }\n .xxl\\:grid-line-xy-soft[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .15 );\n }\n .xxl\\:grid-line-x-softer[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .1 );\n }\n .xxl\\:grid-line-y-softer[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .1 );\n }\n .xxl\\:grid-line-xy-softer[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .1 );\n }\n .xxl\\:grid-line-xy-softer[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .1 );\n }\n .xxl\\:grid-line-x-softest[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .05 );\n }\n .xxl\\:grid-line-y-softest[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .05 );\n }\n .xxl\\:grid-line-xy-softest[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .05 );\n }\n .xxl\\:grid-line-xy-softest[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .05 );\n }\n .xxl\\:grid-line-x-accent[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--brand-green);\n }\n .xxl\\:grid-line-y-accent[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--brand-green);\n }\n .xxl\\:grid-line-xy-accent[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--brand-green);\n }\n .xxl\\:grid-line-xy-accent[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--brand-green);\n }\n .xxl\\:grid-line-x-error[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--red-700);\n }\n .xxl\\:grid-line-y-error[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--red-700);\n }\n .xxl\\:grid-line-xy-error[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--red-700);\n }\n .xxl\\:grid-line-xy-error[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--red-700);\n }\n .xxl\\:grid-line-x-current[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: currentColor;\n }\n .xxl\\:grid-line-y-current[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: currentColor;\n }\n .xxl\\:grid-line-xy-current[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: currentColor;\n }\n .xxl\\:grid-line-xy-current[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: currentColor;\n }\n .xxl\\:grid-line-x-transparent[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--transparent);\n }\n .xxl\\:grid-line-y-transparent[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--transparent);\n }\n .xxl\\:grid-line-xy-transparent[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--transparent);\n }\n .xxl\\:grid-line-xy-transparent[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--transparent);\n }\n .xxl\\:grid-cols-1[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxl\\:grid-cols-1[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: 0;\n inset-inline-end: 0;\n }\n .xxl\\:grid-cols-1[class*=\"grid-line-x\"] > *:nth-child(1n+1)::before {\n inset-inline-end: 0;\n }\n .xxl\\:grid-cols-1[class*=\"grid-line-x\"] > *:nth-child(1n+1):nth-last-child(-n+1)::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-1[class*=\"grid-line-x\"] > *:nth-child(1n+1):nth-last-child(-n+1) ~ *::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-2[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxl\\:grid-cols-2[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxl\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+1)::before {\n inset-inline-start: 0;\n }\n .xxl\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+2)::before {\n inset-inline-end: 0;\n }\n .xxl\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+1):nth-last-child(-n+2)::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+1):nth-last-child(-n+2) ~ *::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxl\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(2n+2)::after {\n border-inline-end-width: 0;\n }\n .xxl\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+2)::after {\n top: 0;\n }\n .xxl\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(2n+1):nth-last-child(-n+2)::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(2n+1):nth-last-child(-n+2) ~ li::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-3[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxl\\:grid-cols-3[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxl\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+1)::before {\n inset-inline-start: 0;\n }\n .xxl\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+3)::before {\n inset-inline-end: 0;\n }\n .xxl\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+1):nth-last-child(-n+3)::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+1):nth-last-child(-n+3) ~ *::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxl\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(3n+3)::after {\n border-inline-end-width: 0;\n }\n .xxl\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+3)::after {\n top: 0;\n }\n .xxl\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(3n+1):nth-last-child(-n+3)::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(3n+1):nth-last-child(-n+3) ~ li::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-4[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxl\\:grid-cols-4[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxl\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+1)::before {\n inset-inline-start: 0;\n }\n .xxl\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+4)::before {\n inset-inline-end: 0;\n }\n .xxl\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+1):nth-last-child(-n+4)::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+1):nth-last-child(-n+4) ~ *::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxl\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(4n+4)::after {\n border-inline-end-width: 0;\n }\n .xxl\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+4)::after {\n top: 0;\n }\n .xxl\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(4n+1):nth-last-child(-n+4)::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(4n+1):nth-last-child(-n+4) ~ li::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-5[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxl\\:grid-cols-5[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxl\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+1)::before {\n inset-inline-start: 0;\n }\n .xxl\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+5)::before {\n inset-inline-end: 0;\n }\n .xxl\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+1):nth-last-child(-n+5)::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+1):nth-last-child(-n+5) ~ *::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxl\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(5n+5)::after {\n border-inline-end-width: 0;\n }\n .xxl\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+5)::after {\n top: 0;\n }\n .xxl\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(5n+1):nth-last-child(-n+5)::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(5n+1):nth-last-child(-n+5) ~ li::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-6[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxl\\:grid-cols-6[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxl\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+1)::before {\n inset-inline-start: 0;\n }\n .xxl\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+6)::before {\n inset-inline-end: 0;\n }\n .xxl\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+1):nth-last-child(-n+6)::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+1):nth-last-child(-n+6) ~ *::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxl\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(6n+6)::after {\n border-inline-end-width: 0;\n }\n .xxl\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+6)::after {\n top: 0;\n }\n .xxl\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(6n+1):nth-last-child(-n+6)::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(6n+1):nth-last-child(-n+6) ~ li::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-7[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxl\\:grid-cols-7[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxl\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+1)::before {\n inset-inline-start: 0;\n }\n .xxl\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+7)::before {\n inset-inline-end: 0;\n }\n .xxl\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+1):nth-last-child(-n+7)::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+1):nth-last-child(-n+7) ~ *::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxl\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(7n+7)::after {\n border-inline-end-width: 0;\n }\n .xxl\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+7)::after {\n top: 0;\n }\n .xxl\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(7n+1):nth-last-child(-n+7)::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(7n+1):nth-last-child(-n+7) ~ li::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-8[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxl\\:grid-cols-8[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxl\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+1)::before {\n inset-inline-start: 0;\n }\n .xxl\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+8)::before {\n inset-inline-end: 0;\n }\n .xxl\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+1):nth-last-child(-n+8)::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+1):nth-last-child(-n+8) ~ *::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxl\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(8n+8)::after {\n border-inline-end-width: 0;\n }\n .xxl\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+8)::after {\n top: 0;\n }\n .xxl\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(8n+1):nth-last-child(-n+8)::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(8n+1):nth-last-child(-n+8) ~ li::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-9[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxl\\:grid-cols-9[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxl\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+1)::before {\n inset-inline-start: 0;\n }\n .xxl\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+9)::before {\n inset-inline-end: 0;\n }\n .xxl\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+1):nth-last-child(-n+9)::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+1):nth-last-child(-n+9) ~ *::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxl\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(9n+9)::after {\n border-inline-end-width: 0;\n }\n .xxl\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+9)::after {\n top: 0;\n }\n .xxl\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(9n+1):nth-last-child(-n+9)::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(9n+1):nth-last-child(-n+9) ~ li::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-10[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxl\\:grid-cols-10[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxl\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+1)::before {\n inset-inline-start: 0;\n }\n .xxl\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+10)::before {\n inset-inline-end: 0;\n }\n .xxl\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+1):nth-last-child(-n+10)::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+1):nth-last-child(-n+10) ~ *::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxl\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(10n+10)::after {\n border-inline-end-width: 0;\n }\n .xxl\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+10)::after {\n top: 0;\n }\n .xxl\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(10n+1):nth-last-child(-n+10)::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(10n+1):nth-last-child(-n+10) ~ li::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-11[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxl\\:grid-cols-11[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxl\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+1)::before {\n inset-inline-start: 0;\n }\n .xxl\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+11)::before {\n inset-inline-end: 0;\n }\n .xxl\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+1):nth-last-child(-n+11)::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+1):nth-last-child(-n+11) ~ *::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxl\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(11n+11)::after {\n border-inline-end-width: 0;\n }\n .xxl\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+11)::after {\n top: 0;\n }\n .xxl\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(11n+1):nth-last-child(-n+11)::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(11n+1):nth-last-child(-n+11) ~ li::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-12[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxl\\:grid-cols-12[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxl\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+1)::before {\n inset-inline-start: 0;\n }\n .xxl\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+12)::before {\n inset-inline-end: 0;\n }\n .xxl\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+1):nth-last-child(-n+12)::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+1):nth-last-child(-n+12) ~ *::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxl\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(12n+12)::after {\n border-inline-end-width: 0;\n }\n .xxl\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+12)::after {\n top: 0;\n }\n .xxl\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(12n+1):nth-last-child(-n+12)::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(12n+1):nth-last-child(-n+12) ~ li::after {\n bottom: 0;\n }\n}\n@media (min-width: 2200px) {\n [class*=\"grid-line-\"] > * {\n position: relative;\n }\n [class*=\"grid-line-\"] > *::before, [class*=\"grid-line-\"] > *::after {\n content: attr(👻);\n position: absolute;\n z-index: 0;\n pointer-events: none;\n }\n .xxxl\\:grid-line-x > *::before {\n content: attr(👻);\n inset-inline-start: 0;\n inset-inline-end: 0;\n top: 0;\n bottom: calc(var(--inner-gutter) / -2);\n border-top: 0 solid transparent;\n border-bottom: 0 solid transparent;\n }\n .xxxl\\:grid-line-xfull > *::before {\n content: attr(👻);\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: 0;\n bottom: calc(var(--inner-gutter) / -2);\n border-top: 0 solid transparent;\n border-bottom: 0 solid transparent;\n }\n .xxxl\\:grid-line-x-0 > *::before {\n content: none;\n }\n .xxxl\\:grid-line-y > *::after {\n content: attr(👻);\n inset-inline-start: 0;\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: 0;\n bottom: 0;\n border-inline-start: 0 solid transparent;\n border-inline-end: 0 solid transparent;\n }\n .xxxl\\:grid-line-yfull > *::after {\n content: attr(👻);\n inset-inline-start: 0;\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: calc(var(--inner-gutter) / -1);\n bottom: 0;\n border-inline-start: 0 solid transparent;\n border-inline-end: 0 solid transparent;\n }\n .xxxl\\:grid-line-yfull[class*=\"grid-line-x\"] > *::after {\n inset-inline-start: 0;\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: calc(var(--inner-gutter) / -2);\n bottom: calc(var(--inner-gutter) / -2);\n border-inline-start: 0 solid transparent;\n border-inline-end: 0 solid transparent;\n }\n .xxxl\\:grid-line-y-0 > *::after {\n content: none;\n }\n .xxxl\\:grid-line-x-0[class*=\"grid-line-x-\"] > *::before {\n bottom: -0rem;\n }\n .xxxl\\:grid-line-x-0[class*=\"grid-line-yfull\"] > *::after {\n top: -0rem;\n bottom: -0rem;\n }\n .xxxl\\:grid-line-x-1[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.0625rem;\n }\n .xxxl\\:grid-line-x-1[class*=\"grid-line-yfull\"] > *::after {\n top: -0.0625rem;\n bottom: -0.0625rem;\n }\n .xxxl\\:grid-line-x-2[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.125rem;\n }\n .xxxl\\:grid-line-x-2[class*=\"grid-line-yfull\"] > *::after {\n top: -0.125rem;\n bottom: -0.125rem;\n }\n .xxxl\\:grid-line-x-3[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.1875rem;\n }\n .xxxl\\:grid-line-x-3[class*=\"grid-line-yfull\"] > *::after {\n top: -0.1875rem;\n bottom: -0.1875rem;\n }\n .xxxl\\:grid-line-x-4[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.25rem;\n }\n .xxxl\\:grid-line-x-4[class*=\"grid-line-yfull\"] > *::after {\n top: -0.25rem;\n bottom: -0.25rem;\n }\n .xxxl\\:grid-line-x-5[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.3125rem;\n }\n .xxxl\\:grid-line-x-5[class*=\"grid-line-yfull\"] > *::after {\n top: -0.3125rem;\n bottom: -0.3125rem;\n }\n .xxxl\\:grid-line-x-6[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.375rem;\n }\n .xxxl\\:grid-line-x-6[class*=\"grid-line-yfull\"] > *::after {\n top: -0.375rem;\n bottom: -0.375rem;\n }\n .xxxl\\:grid-line-x-7[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.4375rem;\n }\n .xxxl\\:grid-line-x-7[class*=\"grid-line-yfull\"] > *::after {\n top: -0.4375rem;\n bottom: -0.4375rem;\n }\n .xxxl\\:grid-line-x-8[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.5rem;\n }\n .xxxl\\:grid-line-x-8[class*=\"grid-line-yfull\"] > *::after {\n top: -0.5rem;\n bottom: -0.5rem;\n }\n .xxxl\\:grid-line-x-9[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.5625rem;\n }\n .xxxl\\:grid-line-x-9[class*=\"grid-line-yfull\"] > *::after {\n top: -0.5625rem;\n bottom: -0.5625rem;\n }\n .xxxl\\:grid-line-x-10[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.625rem;\n }\n .xxxl\\:grid-line-x-10[class*=\"grid-line-yfull\"] > *::after {\n top: -0.625rem;\n bottom: -0.625rem;\n }\n .xxxl\\:grid-line-x-12[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.75rem;\n }\n .xxxl\\:grid-line-x-12[class*=\"grid-line-yfull\"] > *::after {\n top: -0.75rem;\n bottom: -0.75rem;\n }\n .xxxl\\:grid-line-x-16[class*=\"grid-line-x-\"] > *::before {\n bottom: -1rem;\n }\n .xxxl\\:grid-line-x-16[class*=\"grid-line-yfull\"] > *::after {\n top: -1rem;\n bottom: -1rem;\n }\n .xxxl\\:grid-line-x-20[class*=\"grid-line-x-\"] > *::before {\n bottom: -1.25rem;\n }\n .xxxl\\:grid-line-x-20[class*=\"grid-line-yfull\"] > *::after {\n top: -1.25rem;\n bottom: -1.25rem;\n }\n .xxxl\\:grid-line-x-24[class*=\"grid-line-x-\"] > *::before {\n bottom: -1.5rem;\n }\n .xxxl\\:grid-line-x-24[class*=\"grid-line-yfull\"] > *::after {\n top: -1.5rem;\n bottom: -1.5rem;\n }\n .xxxl\\:grid-line-x-28[class*=\"grid-line-x-\"] > *::before {\n bottom: -1.75rem;\n }\n .xxxl\\:grid-line-x-28[class*=\"grid-line-yfull\"] > *::after {\n top: -1.75rem;\n bottom: -1.75rem;\n }\n .xxxl\\:grid-line-x-32[class*=\"grid-line-x-\"] > *::before {\n bottom: -2rem;\n }\n .xxxl\\:grid-line-x-32[class*=\"grid-line-yfull\"] > *::after {\n top: -2rem;\n bottom: -2rem;\n }\n .xxxl\\:grid-line-x-36[class*=\"grid-line-x-\"] > *::before {\n bottom: -2.25rem;\n }\n .xxxl\\:grid-line-x-36[class*=\"grid-line-yfull\"] > *::after {\n top: -2.25rem;\n bottom: -2.25rem;\n }\n .xxxl\\:grid-line-x-40[class*=\"grid-line-x-\"] > *::before {\n bottom: -2.5rem;\n }\n .xxxl\\:grid-line-x-40[class*=\"grid-line-yfull\"] > *::after {\n top: -2.5rem;\n bottom: -2.5rem;\n }\n .xxxl\\:grid-line-x-44[class*=\"grid-line-x-\"] > *::before {\n bottom: -2.75rem;\n }\n .xxxl\\:grid-line-x-44[class*=\"grid-line-yfull\"] > *::after {\n top: -2.75rem;\n bottom: -2.75rem;\n }\n .xxxl\\:grid-line-x-48[class*=\"grid-line-x-\"] > *::before {\n bottom: -3rem;\n }\n .xxxl\\:grid-line-x-48[class*=\"grid-line-yfull\"] > *::after {\n top: -3rem;\n bottom: -3rem;\n }\n .xxxl\\:grid-line-x-52[class*=\"grid-line-x-\"] > *::before {\n bottom: -3.25rem;\n }\n .xxxl\\:grid-line-x-52[class*=\"grid-line-yfull\"] > *::after {\n top: -3.25rem;\n bottom: -3.25rem;\n }\n .xxxl\\:grid-line-x-56[class*=\"grid-line-x-\"] > *::before {\n bottom: -3.5rem;\n }\n .xxxl\\:grid-line-x-56[class*=\"grid-line-yfull\"] > *::after {\n top: -3.5rem;\n bottom: -3.5rem;\n }\n .xxxl\\:grid-line-x-60[class*=\"grid-line-x-\"] > *::before {\n bottom: -3.75rem;\n }\n .xxxl\\:grid-line-x-60[class*=\"grid-line-yfull\"] > *::after {\n top: -3.75rem;\n bottom: -3.75rem;\n }\n .xxxl\\:grid-line-x-64[class*=\"grid-line-x-\"] > *::before {\n bottom: -4rem;\n }\n .xxxl\\:grid-line-x-64[class*=\"grid-line-yfull\"] > *::after {\n top: -4rem;\n bottom: -4rem;\n }\n .xxxl\\:grid-line-x-68[class*=\"grid-line-x-\"] > *::before {\n bottom: -4.25rem;\n }\n .xxxl\\:grid-line-x-68[class*=\"grid-line-yfull\"] > *::after {\n top: -4.25rem;\n bottom: -4.25rem;\n }\n .xxxl\\:grid-line-x-72[class*=\"grid-line-x-\"] > *::before {\n bottom: -4.5rem;\n }\n .xxxl\\:grid-line-x-72[class*=\"grid-line-yfull\"] > *::after {\n top: -4.5rem;\n bottom: -4.5rem;\n }\n .xxxl\\:grid-line-x-76[class*=\"grid-line-x-\"] > *::before {\n bottom: -4.75rem;\n }\n .xxxl\\:grid-line-x-76[class*=\"grid-line-yfull\"] > *::after {\n top: -4.75rem;\n bottom: -4.75rem;\n }\n .xxxl\\:grid-line-x-80[class*=\"grid-line-x-\"] > *::before {\n bottom: -5rem;\n }\n .xxxl\\:grid-line-x-80[class*=\"grid-line-yfull\"] > *::after {\n top: -5rem;\n bottom: -5rem;\n }\n .xxxl\\:grid-line-x-84[class*=\"grid-line-x-\"] > *::before {\n bottom: -5.25rem;\n }\n .xxxl\\:grid-line-x-84[class*=\"grid-line-yfull\"] > *::after {\n top: -5.25rem;\n bottom: -5.25rem;\n }\n .xxxl\\:grid-line-x-88[class*=\"grid-line-x-\"] > *::before {\n bottom: -5.5rem;\n }\n .xxxl\\:grid-line-x-88[class*=\"grid-line-yfull\"] > *::after {\n top: -5.5rem;\n bottom: -5.5rem;\n }\n .xxxl\\:grid-line-x-92[class*=\"grid-line-x-\"] > *::before {\n bottom: -5.75rem;\n }\n .xxxl\\:grid-line-x-92[class*=\"grid-line-yfull\"] > *::after {\n top: -5.75rem;\n bottom: -5.75rem;\n }\n .xxxl\\:grid-line-x-96[class*=\"grid-line-x-\"] > *::before {\n bottom: -6rem;\n }\n .xxxl\\:grid-line-x-96[class*=\"grid-line-yfull\"] > *::after {\n top: -6rem;\n bottom: -6rem;\n }\n .xxxl\\:grid-line-x-100[class*=\"grid-line-x-\"] > *::before {\n bottom: -6.25rem;\n }\n .xxxl\\:grid-line-x-100[class*=\"grid-line-yfull\"] > *::after {\n top: -6.25rem;\n bottom: -6.25rem;\n }\n .xxxl\\:grid-line-x-safe-top[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-top);\n }\n .xxxl\\:grid-line-x-safe-top[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-top);\n bottom: -env(safe-area-inset-top);\n }\n .xxxl\\:grid-line-x-safe-bottom[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-bottom);\n }\n .xxxl\\:grid-line-x-safe-bottom[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-bottom);\n bottom: -env(safe-area-inset-bottom);\n }\n .xxxl\\:grid-line-x-safe-left[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-left);\n }\n .xxxl\\:grid-line-x-safe-left[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-left);\n bottom: -env(safe-area-inset-left);\n }\n .xxxl\\:grid-line-x-safe-right[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-right);\n }\n .xxxl\\:grid-line-x-safe-right[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-right);\n bottom: -env(safe-area-inset-right);\n }\n .xxxl\\:grid-line-x-gutter[class*=\"grid-line-x-\"] > *::before {\n bottom: -var(--inner-gutter);\n }\n .xxxl\\:grid-line-x-gutter[class*=\"grid-line-yfull\"] > *::after {\n top: -var(--inner-gutter);\n bottom: -var(--inner-gutter);\n }\n .xxxl\\:grid-line-x-outer-gutter[class*=\"grid-line-x-\"] > *::before {\n bottom: -var(--outer-gutter, 0px);\n }\n .xxxl\\:grid-line-x-outer-gutter[class*=\"grid-line-yfull\"] > *::after {\n top: -var(--outer-gutter, 0px);\n bottom: -var(--outer-gutter, 0px);\n }\n .xxxl\\:grid-line-x-default[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--brand-black);\n }\n .xxxl\\:grid-line-y-default[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--brand-black);\n }\n .xxxl\\:grid-line-xy-default[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--brand-black);\n }\n .xxxl\\:grid-line-xy-default[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--brand-black);\n }\n .xxxl\\:grid-line-x-inverse[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--white);\n }\n .xxxl\\:grid-line-y-inverse[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--white);\n }\n .xxxl\\:grid-line-xy-inverse[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--white);\n }\n .xxxl\\:grid-line-xy-inverse[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--white);\n }\n .xxxl\\:grid-line-x-inverse-soft[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.3);\n }\n .xxxl\\:grid-line-y-inverse-soft[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.3);\n }\n .xxxl\\:grid-line-xy-inverse-soft[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.3);\n }\n .xxxl\\:grid-line-xy-inverse-soft[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.3);\n }\n .xxxl\\:grid-line-x-inverse-softer[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.15);\n }\n .xxxl\\:grid-line-y-inverse-softer[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.15);\n }\n .xxxl\\:grid-line-xy-inverse-softer[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.15);\n }\n .xxxl\\:grid-line-xy-inverse-softer[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.15);\n }\n .xxxl\\:grid-line-x-soft[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .15 );\n }\n .xxxl\\:grid-line-y-soft[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .15 );\n }\n .xxxl\\:grid-line-xy-soft[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .15 );\n }\n .xxxl\\:grid-line-xy-soft[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .15 );\n }\n .xxxl\\:grid-line-x-softer[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .1 );\n }\n .xxxl\\:grid-line-y-softer[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .1 );\n }\n .xxxl\\:grid-line-xy-softer[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .1 );\n }\n .xxxl\\:grid-line-xy-softer[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .1 );\n }\n .xxxl\\:grid-line-x-softest[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .05 );\n }\n .xxxl\\:grid-line-y-softest[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .05 );\n }\n .xxxl\\:grid-line-xy-softest[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .05 );\n }\n .xxxl\\:grid-line-xy-softest[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .05 );\n }\n .xxxl\\:grid-line-x-accent[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--brand-green);\n }\n .xxxl\\:grid-line-y-accent[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--brand-green);\n }\n .xxxl\\:grid-line-xy-accent[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--brand-green);\n }\n .xxxl\\:grid-line-xy-accent[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--brand-green);\n }\n .xxxl\\:grid-line-x-error[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--red-700);\n }\n .xxxl\\:grid-line-y-error[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--red-700);\n }\n .xxxl\\:grid-line-xy-error[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--red-700);\n }\n .xxxl\\:grid-line-xy-error[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--red-700);\n }\n .xxxl\\:grid-line-x-current[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: currentColor;\n }\n .xxxl\\:grid-line-y-current[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: currentColor;\n }\n .xxxl\\:grid-line-xy-current[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: currentColor;\n }\n .xxxl\\:grid-line-xy-current[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: currentColor;\n }\n .xxxl\\:grid-line-x-transparent[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--transparent);\n }\n .xxxl\\:grid-line-y-transparent[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--transparent);\n }\n .xxxl\\:grid-line-xy-transparent[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--transparent);\n }\n .xxxl\\:grid-line-xy-transparent[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--transparent);\n }\n .xxxl\\:grid-cols-1[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxxl\\:grid-cols-1[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: 0;\n inset-inline-end: 0;\n }\n .xxxl\\:grid-cols-1[class*=\"grid-line-x\"] > *:nth-child(1n+1)::before {\n inset-inline-end: 0;\n }\n .xxxl\\:grid-cols-1[class*=\"grid-line-x\"] > *:nth-child(1n+1):nth-last-child(-n+1)::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-1[class*=\"grid-line-x\"] > *:nth-child(1n+1):nth-last-child(-n+1) ~ *::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-2[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxxl\\:grid-cols-2[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxxl\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+1)::before {\n inset-inline-start: 0;\n }\n .xxxl\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+2)::before {\n inset-inline-end: 0;\n }\n .xxxl\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+1):nth-last-child(-n+2)::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+1):nth-last-child(-n+2) ~ *::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxxl\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(2n+2)::after {\n border-inline-end-width: 0;\n }\n .xxxl\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+2)::after {\n top: 0;\n }\n .xxxl\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(2n+1):nth-last-child(-n+2)::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(2n+1):nth-last-child(-n+2) ~ li::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-3[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxxl\\:grid-cols-3[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxxl\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+1)::before {\n inset-inline-start: 0;\n }\n .xxxl\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+3)::before {\n inset-inline-end: 0;\n }\n .xxxl\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+1):nth-last-child(-n+3)::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+1):nth-last-child(-n+3) ~ *::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxxl\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(3n+3)::after {\n border-inline-end-width: 0;\n }\n .xxxl\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+3)::after {\n top: 0;\n }\n .xxxl\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(3n+1):nth-last-child(-n+3)::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(3n+1):nth-last-child(-n+3) ~ li::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-4[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxxl\\:grid-cols-4[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxxl\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+1)::before {\n inset-inline-start: 0;\n }\n .xxxl\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+4)::before {\n inset-inline-end: 0;\n }\n .xxxl\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+1):nth-last-child(-n+4)::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+1):nth-last-child(-n+4) ~ *::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxxl\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(4n+4)::after {\n border-inline-end-width: 0;\n }\n .xxxl\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+4)::after {\n top: 0;\n }\n .xxxl\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(4n+1):nth-last-child(-n+4)::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(4n+1):nth-last-child(-n+4) ~ li::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-5[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxxl\\:grid-cols-5[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxxl\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+1)::before {\n inset-inline-start: 0;\n }\n .xxxl\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+5)::before {\n inset-inline-end: 0;\n }\n .xxxl\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+1):nth-last-child(-n+5)::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+1):nth-last-child(-n+5) ~ *::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxxl\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(5n+5)::after {\n border-inline-end-width: 0;\n }\n .xxxl\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+5)::after {\n top: 0;\n }\n .xxxl\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(5n+1):nth-last-child(-n+5)::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(5n+1):nth-last-child(-n+5) ~ li::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-6[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxxl\\:grid-cols-6[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxxl\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+1)::before {\n inset-inline-start: 0;\n }\n .xxxl\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+6)::before {\n inset-inline-end: 0;\n }\n .xxxl\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+1):nth-last-child(-n+6)::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+1):nth-last-child(-n+6) ~ *::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxxl\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(6n+6)::after {\n border-inline-end-width: 0;\n }\n .xxxl\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+6)::after {\n top: 0;\n }\n .xxxl\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(6n+1):nth-last-child(-n+6)::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(6n+1):nth-last-child(-n+6) ~ li::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-7[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxxl\\:grid-cols-7[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxxl\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+1)::before {\n inset-inline-start: 0;\n }\n .xxxl\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+7)::before {\n inset-inline-end: 0;\n }\n .xxxl\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+1):nth-last-child(-n+7)::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+1):nth-last-child(-n+7) ~ *::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxxl\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(7n+7)::after {\n border-inline-end-width: 0;\n }\n .xxxl\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+7)::after {\n top: 0;\n }\n .xxxl\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(7n+1):nth-last-child(-n+7)::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(7n+1):nth-last-child(-n+7) ~ li::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-8[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxxl\\:grid-cols-8[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxxl\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+1)::before {\n inset-inline-start: 0;\n }\n .xxxl\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+8)::before {\n inset-inline-end: 0;\n }\n .xxxl\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+1):nth-last-child(-n+8)::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+1):nth-last-child(-n+8) ~ *::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxxl\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(8n+8)::after {\n border-inline-end-width: 0;\n }\n .xxxl\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+8)::after {\n top: 0;\n }\n .xxxl\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(8n+1):nth-last-child(-n+8)::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(8n+1):nth-last-child(-n+8) ~ li::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-9[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxxl\\:grid-cols-9[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxxl\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+1)::before {\n inset-inline-start: 0;\n }\n .xxxl\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+9)::before {\n inset-inline-end: 0;\n }\n .xxxl\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+1):nth-last-child(-n+9)::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+1):nth-last-child(-n+9) ~ *::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxxl\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(9n+9)::after {\n border-inline-end-width: 0;\n }\n .xxxl\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+9)::after {\n top: 0;\n }\n .xxxl\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(9n+1):nth-last-child(-n+9)::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(9n+1):nth-last-child(-n+9) ~ li::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-10[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxxl\\:grid-cols-10[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxxl\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+1)::before {\n inset-inline-start: 0;\n }\n .xxxl\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+10)::before {\n inset-inline-end: 0;\n }\n .xxxl\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+1):nth-last-child(-n+10)::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+1):nth-last-child(-n+10) ~ *::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxxl\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(10n+10)::after {\n border-inline-end-width: 0;\n }\n .xxxl\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+10)::after {\n top: 0;\n }\n .xxxl\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(10n+1):nth-last-child(-n+10)::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(10n+1):nth-last-child(-n+10) ~ li::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-11[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxxl\\:grid-cols-11[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxxl\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+1)::before {\n inset-inline-start: 0;\n }\n .xxxl\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+11)::before {\n inset-inline-end: 0;\n }\n .xxxl\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+1):nth-last-child(-n+11)::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+1):nth-last-child(-n+11) ~ *::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxxl\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(11n+11)::after {\n border-inline-end-width: 0;\n }\n .xxxl\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+11)::after {\n top: 0;\n }\n .xxxl\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(11n+1):nth-last-child(-n+11)::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(11n+1):nth-last-child(-n+11) ~ li::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-12[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxxl\\:grid-cols-12[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxxl\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+1)::before {\n inset-inline-start: 0;\n }\n .xxxl\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+12)::before {\n inset-inline-end: 0;\n }\n .xxxl\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+1):nth-last-child(-n+12)::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+1):nth-last-child(-n+12) ~ *::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxxl\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(12n+12)::after {\n border-inline-end-width: 0;\n }\n .xxxl\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+12)::after {\n top: 0;\n }\n .xxxl\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(12n+1):nth-last-child(-n+12)::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(12n+1):nth-last-child(-n+12) ~ li::after {\n bottom: 0;\n }\n}\n.cols-container > .ml-0 {\n margin-left: 0;\n}\n.w-12-cols {\n width: calc(((12 / var(--container-grid-columns, var(--grid-columns))) * 100%) - (var(--inner-gutter) - (12 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))));\n}\n.cols-container > .w-12-cols {\n width: calc(((12 / var(--container-grid-columns, var(--grid-columns))) * (100% - var(--inner-gutter))) - (var(--inner-gutter) - (12 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))));\n}\n.w-12-cols > * {\n --container-grid-columns: 12;\n}\n.border-inside {\n position: relative;\n\n &::after {\n pointer-events: none;\n }\n\n &::after {\n position: absolute;\n }\n\n &::after {\n inset: 0rem;\n }\n\n &::after {\n z-index: 1;\n }\n\n &::after {\n border-radius: 8px;\n }\n\n &::after {\n border-width: 1px;\n }\n\n &::after {\n border-width: 2px;\n }\n\n &::after {\n border-color: rgba(0, 0, 0, .1 );\n }\n\n &::after {\n content: '';\n }\n}\n.border-inside-inverse {\n &::after {\n border-color: rgba(255, 255, 255, 0.3);\n }\n &::after {\n content: '';\n }\n }\n.border-inside-pill {\n &::after {\n border-radius: 100px;\n }\n &::after {\n content: '';\n }\n }\n.input-label-options {\n font-family: var(--f-ui-03-fontFamily);\n font-size: var(--f-ui-03-fontSize);\n line-height: var(--f-ui-03-lineHeight);\n letter-spacing: var(--f-ui-03-letterSpacing);\n}\n.input-label {\n font-family: var(--f-ui-04-fontFamily);\n font-weight: var(--f-ui-04-fontWeight);\n font-size: var(--f-ui-04-fontSize);\n line-height: var(--f-ui-04-lineHeight);\n letter-spacing: var(--f-ui-04-letterSpacing);\n}\n.input-label b,.input-label strong {\n font-weight: var(--f-ui-04---bold-weight, bold);\n}\n.input {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n display: flex;\n min-height: 2.5rem;\n width: 100%;\n align-items: center;\n padding-top: 10px;\n padding-bottom: 10px;\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n border-radius: 8px;\n border-width: 2px;\n border-color: rgba(0, 0, 0, .1 );\n}\n.input:hover {\n border-color: var(--brand-black);\n}\n.input:active {\n border-color: var(--brand-black);\n}\n.input {\n font-family: var(--f-ui-02-light-fontFamily);\n font-weight: var(--f-ui-02-light-fontWeight);\n font-size: var(--f-ui-02-light-fontSize);\n line-height: var(--f-ui-02-light-lineHeight);\n letter-spacing: var(--f-ui-02-light-letterSpacing);\n}\n.input b,.input strong {\n font-weight: var(--f-ui-02-light---bold-weight, bold);\n}\n.input::-moz-placeholder {\n color: var(--grey-500);\n}\n.input::placeholder {\n color: var(--grey-500);\n}\n.input {\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n outline-width: 3px;\n outline-offset: 2px;\n outline-color: var(--brand-green);\n}\n.input:focus-visible {\n outline-style: solid;\n}\n.input:disabled {\n cursor: not-allowed;\n background-color: var(--grey-300);\n color: var(--grey-500);\n}\n.input:disabled:hover {\n border-color: rgba(0, 0, 0, .1 );\n}\n.input:disabled:active {\n border-color: rgba(0, 0, 0, .1 );\n}\n.input-with-icon {\n padding-right: 34px;\n}\n.input-checkbox {\n position: relative;\n height: 1rem;\n min-height: auto;\n width: 1rem;\n padding: 0rem;\n border-radius: 4px;\n border-color: rgba(0, 0, 0, .15 );\n}\n.input-checkbox::after {\n --tw-content: '';\n content: var(--tw-content);\n position: absolute;\n top: 0rem;\n left: 50%;\n --tw-translate-x: -50%;\n height: 10px;\n width: 6px;\n --tw-rotate: 45deg;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n border-bottom-width: 2px;\n border-right-width: 2px;\n border-color: var(--transparent);\n}\n.input-checkbox:checked {\n border-color: var(--brand-black);\n background-color: var(--brand-black);\n}\n.input-checkbox:checked::after {\n border-color: var(--white);\n}\n.input-checkbox:checked:disabled {\n border-color: rgba(0, 0, 0, .15 );\n background-color: var(--grey-300);\n}\n.input-checkbox:checked:disabled::after {\n border-color: rgba(0, 0, 0, .15 );\n}\n.input-radio {\n position: relative;\n height: 1rem;\n min-height: auto;\n width: 1rem;\n padding: 0rem;\n border-radius: 9999px;\n border-color: rgba(0, 0, 0, .15 );\n}\n.input-radio::after {\n --tw-content: '';\n content: var(--tw-content);\n position: absolute;\n top: 50%;\n left: 50%;\n --tw-translate-x: -50%;\n --tw-translate-y: -50%;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n height: 6px;\n width: 6px;\n border-radius: 9999px;\n background-color: var(--transparent);\n}\n.input-radio:checked {\n border-color: var(--brand-black);\n background-color: var(--brand-black);\n}\n.input-radio:checked::after {\n background-color: var(--white);\n}\n.input-radio:checked:disabled::after {\n background-color: var(--white);\n}\n.input-error {\n border-color: var(--red-700);\n}\n.input-counter {\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n color: var(--grey-500);\n\n &.input-counter-error {\n color: var(--red-700);\n }\n}\ninput[type=\"range\"]::-webkit-slider-thumb {\n height: 1.5rem;\n width: 1.5rem;\n border-radius: 9999px;\n outline: 2px solid var(--brand-green); /* This adds an outline */\n background-color: var(--brand-green-dark);\n -webkit-appearance: none;\n appearance: none; /* Ensure the thumb can be styled */\n}\n.loader {\n box-sizing: border-box;\n display: inline-block;\n height: 1rem;\n width: 1rem;\n}\n@keyframes spin {\n to {\n transform: rotate(360deg);\n }\n}\n.loader {\n animation: spin 1s linear infinite;\n border-radius: 9999px;\n border: 3px solid rgba(0, 0, 0, .3);\n border-bottom-color: #000;\n}\n.scroller-x {\n -ms-overflow-style: none;\n scrollbar-width: none;\n}\n.scroller-x::-webkit-scrollbar {\n display: none;\n}\n.scroller-x {\n overflow: auto;\n overscroll-behavior-x: contain;\n}\n/** region TRANSITIONS */\n.effect-color {\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n}\n.effect-opacity {\n transition-property: opacity;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n}\n.effect-background {\n transition-property: background;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n}\n.effect-height {\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n transition-property: height;\n}\n.effect-shadow {\n transition-property: box-shadow;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n}\n/** endregion */\n/* region FOCUS */\n.effect-focus {\n outline-width: 3px;\n outline-offset: 2px;\n outline-color: var(--brand-green);\n}\n.effect-focus:focus-visible {\n outline-style: solid;\n}\n.effect-focus-within {\n outline-width: 3px;\n outline-offset: 2px;\n outline-color: var(--brand-green);\n}\n.effect-focus-within:focus-within {\n outline-style: solid;\n}\n/* endregion */\n/* region BG */\n.effect-bg-pattern {\n position: relative;\n z-index: 1;\n\n &::before {\n position: absolute;\n content: '';\n z-index: -1;\n inset: 0;\n background-color: rgba(208, 208, 208, 0.75);\n opacity: 0.75;\n background-image: repeating-linear-gradient(45deg, #F5F5F5 25%, transparent 25%, transparent 75%, #F5F5F5 75%, #F5F5F5), repeating-linear-gradient(45deg, #F5F5F5 25%, #D0D0D0 25%, #D0D0D0 75%, #F5F5F5 75%, #F5F5F5);\n background-position: 0 0, 8px 8px;\n background-size: 16px 16px;\n }\n }\n.effect-bg-behind {\n position: relative;\n}\n.effect-bg-behind::before {\n position: absolute;\n inset: 0rem;\n z-index: -1;\n --tw-content: '';\n content: var(--tw-content);\n}\n.effect-bg-behind {\n\n &:before {\n background-size: calc(100% + 6px) calc(100% + 6px) !important;\n background-position: -4px -4px !important;\n background-repeat: no-repeat !important;\n }\n }\n.effect-bg-behind-link {\n position: relative;\n}\n.effect-bg-behind-link::before {\n position: absolute;\n top: 0rem;\n bottom: 0rem;\n left: -0.5rem;\n right: 0rem;\n z-index: 0;\n border-radius: 8px;\n background-color: var(--grey-400);\n --tw-content: '';\n content: var(--tw-content);\n}\n.effect-bg-behind-link[aria-disabled=\"true\"]::before {\n background-color: var(--transparent);\n}\n/* endregion */\n/*region shadow*/\n/*endregion*/\n.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n}\n.pointer-events-none {\n pointer-events: none;\n}\n.visible {\n visibility: visible;\n}\n.collapse {\n visibility: collapse;\n}\n.static {\n position: static;\n}\n.fixed {\n position: fixed;\n}\n.absolute {\n position: absolute;\n}\n.relative {\n position: relative;\n}\n.sticky {\n position: sticky;\n}\n.inset-0 {\n inset: 0rem;\n}\n.inset-x-16 {\n left: 1rem;\n right: 1rem;\n}\n.-top-1 {\n top: -0.0625rem;\n}\n.bottom-0 {\n bottom: 0rem;\n}\n.bottom-20 {\n bottom: 1.25rem;\n}\n.bottom-4 {\n bottom: 0.25rem;\n}\n.bottom-8 {\n bottom: 0.5rem;\n}\n.left-0 {\n left: 0rem;\n}\n.left-1\\/2 {\n left: 50%;\n}\n.left-20 {\n left: 1.25rem;\n}\n.left-4 {\n left: 0.25rem;\n}\n.left-\\[12px\\] {\n left: 12px;\n}\n.right-0 {\n right: 0rem;\n}\n.right-20 {\n right: 1.25rem;\n}\n.right-4 {\n right: 0.25rem;\n}\n.right-8 {\n right: 0.5rem;\n}\n.right-\\[4px\\] {\n right: 4px;\n}\n.right-\\[6px\\] {\n right: 6px;\n}\n.top-0 {\n top: 0rem;\n}\n.top-1\\/2 {\n top: 50%;\n}\n.top-16 {\n top: 1rem;\n}\n.top-20 {\n top: 1.25rem;\n}\n.top-full {\n top: 100%;\n}\n.z-0 {\n z-index: 0;\n}\n.z-1 {\n z-index: 1;\n}\n.z-10 {\n z-index: 10;\n}\n.z-50 {\n z-index: 50;\n}\n.z-\\[1\\] {\n z-index: 1;\n}\n.z-\\[999999\\] {\n z-index: 999999;\n}\n.z-focus {\n z-index: 99;\n}\n.z-on-top {\n z-index: 99999;\n}\n.order-first {\n order: -9999;\n}\n.order-last {\n order: 9999;\n}\n.m-0 {\n margin: 0rem;\n}\n.m-32 {\n margin: 2rem;\n}\n.mx-auto {\n margin-left: auto;\n margin-right: auto;\n}\n.my-16 {\n margin-top: 1rem;\n margin-bottom: 1rem;\n}\n.my-20 {\n margin-top: 1.25rem;\n margin-bottom: 1.25rem;\n}\n.my-4 {\n margin-top: 0.25rem;\n margin-bottom: 0.25rem;\n}\n.my-8 {\n margin-top: 0.5rem;\n margin-bottom: 0.5rem;\n}\n.-ml-16 {\n margin-left: -1rem;\n}\n.-mr-16 {\n margin-right: -1rem;\n}\n.mb-10 {\n margin-bottom: 0.625rem;\n}\n.mb-12 {\n margin-bottom: 0.75rem;\n}\n.mb-28 {\n margin-bottom: 1.75rem;\n}\n.mb-4 {\n margin-bottom: 0.25rem;\n}\n.ml-0 {\n margin-left: 0rem;\n}\n.ml-4 {\n margin-left: 0.25rem;\n}\n.ml-64 {\n margin-left: 4rem;\n}\n.ml-8 {\n margin-left: 0.5rem;\n}\n.ml-auto {\n margin-left: auto;\n}\n.mr-4 {\n margin-right: 0.25rem;\n}\n.mr-8 {\n margin-right: 0.5rem;\n}\n.mr-auto {\n margin-right: auto;\n}\n.mt-12 {\n margin-top: 0.75rem;\n}\n.mt-16 {\n margin-top: 1rem;\n}\n.mt-2 {\n margin-top: 0.125rem;\n}\n.mt-20 {\n margin-top: 1.25rem;\n}\n.mt-28 {\n margin-top: 1.75rem;\n}\n.mt-32 {\n margin-top: 2rem;\n}\n.mt-4 {\n margin-top: 0.25rem;\n}\n.mt-6 {\n margin-top: 0.375rem;\n}\n.mt-8 {\n margin-top: 0.5rem;\n}\n.mt-auto {\n margin-top: auto;\n}\n.line-clamp-1 {\n overflow: hidden;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 1;\n}\n.line-clamp-2 {\n overflow: hidden;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n}\n.line-clamp-3 {\n overflow: hidden;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 3;\n}\n.line-clamp-4 {\n overflow: hidden;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 4;\n}\n.block {\n display: block;\n}\n.inline-block {\n display: inline-block;\n}\n.inline {\n display: inline;\n}\n.flex {\n display: flex;\n}\n.inline-flex {\n display: inline-flex;\n}\n.table {\n display: table;\n}\n.grid {\n display: grid;\n}\n.hidden {\n display: none;\n}\n.aspect-16x9 {\n aspect-ratio: 16/9;\n}\n.aspect-1x1 {\n aspect-ratio: 1/1;\n}\n.aspect-21x9 {\n aspect-ratio: 21/9;\n}\n.aspect-3x2 {\n aspect-ratio: 3/2;\n}\n.aspect-4x3 {\n aspect-ratio: 4/3;\n}\n.aspect-4x5 {\n aspect-ratio: 4/5;\n}\n.h-0 {\n height: 0rem;\n}\n.h-12 {\n height: 0.75rem;\n}\n.h-16 {\n height: 1rem;\n}\n.h-2 {\n height: 0.125rem;\n}\n.h-20 {\n height: 1.25rem;\n}\n.h-24 {\n height: 1.5rem;\n}\n.h-28 {\n height: 1.75rem;\n}\n.h-32 {\n height: 2rem;\n}\n.h-36 {\n height: 2.25rem;\n}\n.h-4 {\n height: 0.25rem;\n}\n.h-40 {\n height: 2.5rem;\n}\n.h-44 {\n height: 2.75rem;\n}\n.h-48 {\n height: 3rem;\n}\n.h-64 {\n height: 4rem;\n}\n.h-8 {\n height: 0.5rem;\n}\n.h-96 {\n height: 6rem;\n}\n.h-\\[85px\\] {\n height: 85px;\n}\n.h-auto {\n height: auto;\n}\n.h-full {\n height: 100%;\n}\n.\\!min-h-20 {\n min-height: 1.25rem !important;\n}\n.min-h-156 {\n min-height: 156px;\n}\n.min-h-36 {\n min-height: 2.25rem;\n}\n.min-h-44 {\n min-height: 2.75rem;\n}\n.min-h-56 {\n min-height: 3.5rem;\n}\n.min-h-80 {\n min-height: 5rem;\n}\n.min-h-\\[150px\\] {\n min-height: 150px;\n}\n.min-h-\\[225px\\] {\n min-height: 225px;\n}\n.min-h-\\[90px\\] {\n min-height: 90px;\n}\n.min-h-full {\n min-height: 100%;\n}\n.min-h-screen {\n min-height: 100vh;\n}\n.w-1\\/2 {\n width: 50%;\n}\n.w-20 {\n width: 1.25rem;\n}\n.w-28 {\n width: 1.75rem;\n}\n.w-32 {\n width: 2rem;\n}\n.w-4 {\n width: 0.25rem;\n}\n.w-44 {\n width: 2.75rem;\n}\n.w-\\[200px\\] {\n width: 200px;\n}\n.w-\\[300px\\] {\n width: 300px;\n}\n.w-\\[54px\\] {\n width: 54px;\n}\n.w-auto {\n width: auto;\n}\n.w-fit {\n width: -moz-fit-content;\n width: fit-content;\n}\n.w-full {\n width: 100%;\n}\n.min-w-\\[200px\\] {\n min-width: 200px;\n}\n.min-w-\\[210px\\] {\n min-width: 210px;\n}\n.min-w-\\[250px\\] {\n min-width: 250px;\n}\n.min-w-\\[280px\\] {\n min-width: 280px;\n}\n.max-w-120 {\n max-width: 120px;\n}\n.max-w-full {\n max-width: 100%;\n}\n.max-w-sidebar {\n max-width: 1224px;\n}\n.max-w-xxxl {\n max-width: 2200px;\n}\n.flex-none {\n flex: none;\n}\n.grow {\n flex-grow: 1;\n}\n.-translate-x-1\\/2 {\n --tw-translate-x: -50%;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.-translate-y-1\\/2 {\n --tw-translate-y: -50%;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.transform {\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.cursor-pointer {\n cursor: pointer;\n}\n.resize {\n resize: both;\n}\n.appearance-none {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n}\n.grid-cols-1 {\n grid-template-columns: repeat(1, minmax(0, 1fr));\n}\n.grid-cols-10 {\n grid-template-columns: repeat(10, minmax(0, 1fr));\n}\n.grid-cols-11 {\n grid-template-columns: repeat(11, minmax(0, 1fr));\n}\n.grid-cols-12 {\n grid-template-columns: repeat(12, minmax(0, 1fr));\n}\n.grid-cols-2 {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n}\n.grid-cols-3 {\n grid-template-columns: repeat(3, minmax(0, 1fr));\n}\n.grid-cols-4 {\n grid-template-columns: repeat(4, minmax(0, 1fr));\n}\n.grid-cols-5 {\n grid-template-columns: repeat(5, minmax(0, 1fr));\n}\n.grid-cols-6 {\n grid-template-columns: repeat(6, minmax(0, 1fr));\n}\n.grid-cols-7 {\n grid-template-columns: repeat(7, minmax(0, 1fr));\n}\n.grid-cols-8 {\n grid-template-columns: repeat(8, minmax(0, 1fr));\n}\n.grid-cols-9 {\n grid-template-columns: repeat(9, minmax(0, 1fr));\n}\n.flex-row {\n flex-direction: row;\n}\n.flex-row-reverse {\n flex-direction: row-reverse;\n}\n.flex-col {\n flex-direction: column;\n}\n.flex-wrap {\n flex-wrap: wrap;\n}\n.items-start {\n align-items: flex-start;\n}\n.items-center {\n align-items: center;\n}\n.justify-center {\n justify-content: center;\n}\n.justify-between {\n justify-content: space-between;\n}\n.gap-1 {\n gap: 0.0625rem;\n}\n.gap-12 {\n gap: 0.75rem;\n}\n.gap-20 {\n gap: 1.25rem;\n}\n.gap-4 {\n gap: 0.25rem;\n}\n.gap-x-12 {\n -moz-column-gap: 0.75rem;\n column-gap: 0.75rem;\n}\n.gap-x-16 {\n -moz-column-gap: 1rem;\n column-gap: 1rem;\n}\n.gap-x-2 {\n -moz-column-gap: 0.125rem;\n column-gap: 0.125rem;\n}\n.gap-x-4 {\n -moz-column-gap: 0.25rem;\n column-gap: 0.25rem;\n}\n.gap-x-8 {\n -moz-column-gap: 0.5rem;\n column-gap: 0.5rem;\n}\n.gap-y-12 {\n row-gap: 0.75rem;\n}\n.gap-y-16 {\n row-gap: 1rem;\n}\n.gap-y-4 {\n row-gap: 0.25rem;\n}\n.gap-y-8 {\n row-gap: 0.5rem;\n}\n.space-x-1 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-x-reverse: 0;\n margin-right: calc(0.0625rem * var(--tw-space-x-reverse));\n margin-left: calc(0.0625rem * calc(1 - var(--tw-space-x-reverse)));\n}\n.space-x-2 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-x-reverse: 0;\n margin-right: calc(0.125rem * var(--tw-space-x-reverse));\n margin-left: calc(0.125rem * calc(1 - var(--tw-space-x-reverse)));\n}\n.space-y-12 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));\n}\n.space-y-16 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(1rem * var(--tw-space-y-reverse));\n}\n.space-y-2 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(0.125rem * var(--tw-space-y-reverse));\n}\n.space-y-4 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));\n}\n.space-y-8 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));\n}\n.overflow-hidden {\n overflow: hidden;\n}\n.overflow-x-auto {\n overflow-x: auto;\n}\n.overflow-x-hidden {\n overflow-x: hidden;\n}\n.overflow-y-scroll {\n overflow-y: scroll;\n}\n.truncate {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.text-ellipsis {\n text-overflow: ellipsis;\n}\n.whitespace-nowrap {\n white-space: nowrap;\n}\n.break-words {\n overflow-wrap: break-word;\n}\n.rounded {\n border-radius: 0.25rem;\n}\n.rounded-full {\n border-radius: 9999px;\n}\n.rounded-lg {\n border-radius: 16px;\n}\n.rounded-md {\n border-radius: 12px;\n}\n.rounded-pill {\n border-radius: 100px;\n}\n.rounded-sm {\n border-radius: 8px;\n}\n.rounded-xs {\n border-radius: 4px;\n}\n.rounded-xxs {\n border-radius: 2px;\n}\n.rounded-t-lg {\n border-top-left-radius: 16px;\n border-top-right-radius: 16px;\n}\n.rounded-tl-lg {\n border-top-left-radius: 16px;\n}\n.rounded-tr-lg {\n border-top-right-radius: 16px;\n}\n.border {\n border-width: 1px;\n}\n.border-0 {\n border-width: 0px;\n}\n.border-2 {\n border-width: 2px;\n}\n.border-3 {\n border-width: 3px;\n}\n.border-b-2 {\n border-bottom-width: 2px;\n}\n.border-l-0 {\n border-left-width: 0px;\n}\n.border-r-0 {\n border-right-width: 0px;\n}\n.border-t-2 {\n border-top-width: 2px;\n}\n.border-\\[\\#0034CB\\] {\n --tw-border-opacity: 1;\n border-color: rgb(0 52 203 / var(--tw-border-opacity));\n}\n.border-\\[\\#d2d2d2\\] {\n --tw-border-opacity: 1;\n border-color: rgb(210 210 210 / var(--tw-border-opacity));\n}\n.border-accent {\n border-color: var(--brand-green);\n}\n.border-current {\n border-color: currentColor;\n}\n.border-default {\n border-color: var(--brand-black);\n}\n.border-error {\n border-color: var(--red-700);\n}\n.border-inverse {\n border-color: var(--white);\n}\n.border-inverse-soft {\n border-color: rgba(255, 255, 255, 0.3);\n}\n.border-inverse-softer {\n border-color: rgba(255, 255, 255, 0.15);\n}\n.border-soft {\n border-color: rgba(0, 0, 0, .15 );\n}\n.border-softer {\n border-color: rgba(0, 0, 0, .1 );\n}\n.border-softest {\n border-color: var(--grey-light);\n}\n.border-transparent {\n border-color: var(--transparent);\n}\n.border-b-softer {\n border-bottom-color: rgba(0, 0, 0, .1 );\n}\n.\\!bg-accent-dark {\n background-color: var(--green-600) !important;\n}\n.\\!bg-darker {\n background-color: var(--grey-400) !important;\n}\n.\\!bg-strong-dark {\n background-color: var(--grey-800) !important;\n}\n.bg-accent {\n background-color: var(--brand-green);\n}\n.bg-accent-dark {\n background-color: var(--green-600);\n}\n.bg-accent-darker {\n background-color: var(--green-800);\n}\n.bg-current {\n background-color: currentColor;\n}\n.bg-dark {\n background-color: var(--grey-300);\n}\n.bg-darker {\n background-color: var(--grey-400);\n}\n.bg-default {\n background-color: var(--grey-light);\n}\n.bg-error {\n background-color: var(--red-200);\n}\n.bg-inverse {\n background-color: var(--white);\n}\n.bg-inverse-soft {\n background-color: rgba(255, 255, 255, .2);\n}\n.bg-inverse-softer {\n background-color: rgba(255, 255, 255, .15);\n}\n.bg-on-dark {\n background-color: rgba(255, 255, 255, 0.2);\n}\n.bg-on-gradient {\n background-color: rgba(0, 0, 0, 0.1);\n}\n.bg-overlay {\n background-color: rgba(0, 0, 0, 0.25);\n}\n.bg-strong {\n background-color: var(--grey-700);\n}\n.bg-strong-dark {\n background-color: var(--grey-800);\n}\n.bg-stronger {\n background-color: var(--grey-900);\n}\n.bg-strongest {\n background-color: var(--brand-black);\n}\n.bg-strongest-soft {\n background-color: rgba(0, 0, 0, .05);\n}\n.bg-success {\n background-color: var(--green-200);\n}\n.bg-transparent {\n background-color: var(--transparent);\n}\n.bg-warning {\n background-color: var(--yellow-200);\n}\n.bg-opacity-90 {\n --tw-bg-opacity: 0.9;\n}\n.object-cover {\n -o-object-fit: cover;\n object-fit: cover;\n}\n.object-center {\n -o-object-position: center;\n object-position: center;\n}\n.\\!p-8 {\n padding: 0.5rem !important;\n}\n.p-0 {\n padding: 0rem;\n}\n.p-12 {\n padding: 0.75rem;\n}\n.p-16 {\n padding: 1rem;\n}\n.p-2 {\n padding: 0.125rem;\n}\n.p-20 {\n padding: 1.25rem;\n}\n.p-32 {\n padding: 2rem;\n}\n.p-4 {\n padding: 0.25rem;\n}\n.p-6 {\n padding: 0.375rem;\n}\n.p-8 {\n padding: 0.5rem;\n}\n.\\!px-0 {\n padding-left: 0rem !important;\n padding-right: 0rem !important;\n}\n.\\!py-0 {\n padding-top: 0rem !important;\n padding-bottom: 0rem !important;\n}\n.\\!py-4 {\n padding-top: 0.25rem !important;\n padding-bottom: 0.25rem !important;\n}\n.px-12 {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n}\n.px-16 {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n.px-2 {\n padding-left: 0.125rem;\n padding-right: 0.125rem;\n}\n.px-20 {\n padding-left: 1.25rem;\n padding-right: 1.25rem;\n}\n.px-4 {\n padding-left: 0.25rem;\n padding-right: 0.25rem;\n}\n.px-6 {\n padding-left: 0.375rem;\n padding-right: 0.375rem;\n}\n.py-1 {\n padding-top: 0.0625rem;\n padding-bottom: 0.0625rem;\n}\n.py-12 {\n padding-top: 0.75rem;\n padding-bottom: 0.75rem;\n}\n.py-16 {\n padding-top: 1rem;\n padding-bottom: 1rem;\n}\n.py-20 {\n padding-top: 1.25rem;\n padding-bottom: 1.25rem;\n}\n.py-4 {\n padding-top: 0.25rem;\n padding-bottom: 0.25rem;\n}\n.py-6 {\n padding-top: 0.375rem;\n padding-bottom: 0.375rem;\n}\n.py-8 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n.pb-16 {\n padding-bottom: 1rem;\n}\n.pb-20 {\n padding-bottom: 1.25rem;\n}\n.pb-28 {\n padding-bottom: 1.75rem;\n}\n.pb-60 {\n padding-bottom: 3.75rem;\n}\n.pb-8 {\n padding-bottom: 0.5rem;\n}\n.pl-12 {\n padding-left: 0.75rem;\n}\n.pl-28 {\n padding-left: 1.75rem;\n}\n.pl-32 {\n padding-left: 2rem;\n}\n.pl-36 {\n padding-left: 2.25rem;\n}\n.pl-4 {\n padding-left: 0.25rem;\n}\n.pl-8 {\n padding-left: 0.5rem;\n}\n.pr-12 {\n padding-right: 0.75rem;\n}\n.pr-28 {\n padding-right: 1.75rem;\n}\n.pr-32 {\n padding-right: 2rem;\n}\n.pr-4 {\n padding-right: 0.25rem;\n}\n.pr-8 {\n padding-right: 0.5rem;\n}\n.pt-12 {\n padding-top: 0.75rem;\n}\n.pt-20 {\n padding-top: 1.25rem;\n}\n.pt-28 {\n padding-top: 1.75rem;\n}\n.pt-32 {\n padding-top: 2rem;\n}\n.pt-40 {\n padding-top: 2.5rem;\n}\n.pt-48 {\n padding-top: 3rem;\n}\n.pt-8 {\n padding-top: 0.5rem;\n}\n.text-left {\n text-align: left;\n}\n.text-center {\n text-align: center;\n}\n.text-2xl {\n font-size: 1.5rem;\n line-height: 2rem;\n}\n.text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem;\n}\n.font-bold {\n font-weight: 700;\n}\n.uppercase {\n text-transform: uppercase;\n}\n.lowercase {\n text-transform: lowercase;\n}\n.\\!text-current {\n color: currentColor !important;\n}\n.text-\\[\\#0034CB\\] {\n --tw-text-opacity: 1;\n color: rgb(0 52 203 / var(--tw-text-opacity));\n}\n.text-accent {\n color: var(--brand-green);\n}\n.text-current {\n color: currentColor;\n}\n.text-default {\n color: var(--brand-black);\n}\n.text-error {\n color: var(--red-700);\n}\n.text-extra-light {\n color: var(--grey-300);\n}\n.text-inverse {\n color: var(--white);\n}\n.text-light {\n color: var(--grey-700);\n}\n.text-lighter {\n color: var(--grey-600);\n}\n.text-lightest {\n color: var(--grey-500);\n}\n.text-on-gradient {\n color: rgba(0, 0, 0, 0.55);\n}\n.text-success {\n color: var(--green-800);\n}\n.text-transparent {\n color: var(--transparent);\n}\n.text-warning {\n color: var(--yellow-900);\n}\n.underline {\n text-decoration-line: underline;\n}\n.\\!no-underline {\n text-decoration-line: none !important;\n}\n.decoration-\\[\\#0034CB\\] {\n text-decoration-color: #0034CB;\n}\n.decoration-accent {\n text-decoration-color: var(--brand-green);\n}\n.decoration-2 {\n text-decoration-thickness: 2px;\n}\n.underline-offset-4 {\n text-underline-offset: 4px;\n}\n.opacity-0 {\n opacity: 0;\n}\n.opacity-100 {\n opacity: 1;\n}\n.shadow {\n --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-accent {\n --tw-shadow: 0px 0px 12px rgba(0, 201, 89, 0.6);\n --tw-shadow-colored: 0px 0px 12px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-lg {\n --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-md {\n --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-small {\n --tw-shadow: 0px 1.5px 2px rgba(0, 0, 0, 0.1);\n --tw-shadow-colored: 0px 1.5px 2px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.outline-none {\n outline: 2px solid transparent;\n outline-offset: 2px;\n}\n.outline {\n outline-style: solid;\n}\n.filter {\n filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n.backdrop-blur {\n --tw-backdrop-blur: blur(8px);\n -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);\n backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);\n}\n.transition-all {\n transition-property: all;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.transition-colors {\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.duration-300 {\n transition-duration: 300ms;\n}\n[class*=\"keyline-\"] {\n position: relative;\n}\n[class*=\"keyline-\"]::before {\n content: attr(👻);\n position: absolute;\n z-index: 0;\n inset-inline-start: calc(var(--inner-gutter) / -2 - 1px);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: 0;\n bottom: 0;\n border: 1px solid transparent;\n pointer-events: none;\n}\n[class*=\"keyline-0\"]::before {\n border-inline-end-color: transparent;\n border-inline-start-color: transparent;\n}\n.ratio {\n --ratio: 100%;\n display: block;\n position: relative;\n overflow: hidden;\n}\n.ratio::before {\n content: attr(👻);\n display: block;\n width: 100%;\n height: 0;\n padding-bottom: var(--ratio);\n}\n.ratio > [class*=\"ratio-content\"] {\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n width: 100%;\n height: 100%;\n}\n[class*=underline-] {\n text-decoration-line: underline;\n}\n.underline-offset-4 {\n text-underline-offset: 0.2em;\n}\n.\\@container {\n container-type: inline-size;\n}\n.bg-gradient-01-top {\n background: linear-gradient(to bottom, #00E766, ease-in-out, #E6E6E6);\n }\n.bg-gradient-01-bottom {\n background: linear-gradient(to top, #00E766, ease-in-out, #E6E6E6);\n }\n.bg-gradient-02-top {\n background: linear-gradient(to bottom, #F3F30A, ease-in-out, #E6E6E6);\n }\n.bg-gradient-02-bottom {\n background: linear-gradient(to top, #F3F30A, ease-in-out, #E6E6E6);\n }\n.bg-gradient-03-top {\n background: linear-gradient(to bottom, #C461FF, ease-in-out, #E6E6E6);\n }\n.bg-gradient-03-bottom {\n background: linear-gradient(to top, #C461FF, ease-in-out, #E6E6E6);\n }\n.bg-gradient-04-top {\n background: linear-gradient(to bottom, #2B69FC, ease-in-out, #E6E6E6);\n }\n.bg-gradient-04-bottom {\n background: linear-gradient(to top, #2B69FC, ease-in-out, #E6E6E6);\n }\n.after\\:effect-opacity::after {\n transition-property: opacity;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n}\n.before\\:effect-opacity::before {\n transition-property: opacity;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n}\n@media (min-width: 750px) {\n .md\\:grid-col-span-4 {\n --container-grid-columns: 4;\n grid-column: span 4 / span 4;\n }\n .md\\:grid-col-span-6 {\n --container-grid-columns: 6;\n grid-column: span 6 / span 6;\n }\n .md\\:w-10-cols {\n width: calc(((10 / var(--container-grid-columns, var(--grid-columns))) * 100%) - (var(--inner-gutter) - (10 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))));\n }\n .cols-container > .md\\:w-10-cols {\n width: calc(((10 / var(--container-grid-columns, var(--grid-columns))) * (100% - var(--inner-gutter))) - (var(--inner-gutter) - (10 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))));\n }\n .md\\:w-10-cols > * {\n --container-grid-columns: 10;\n }\n}\n@media (min-width: 900px) {\n .lg\\:grid-col-span-5 {\n --container-grid-columns: 5;\n grid-column: span 5 / span 5;\n }\n .lg\\:grid-col-span-6 {\n --container-grid-columns: 6;\n grid-column: span 6 / span 6;\n }\n .lg\\:grid-col-start-7 {\n grid-column-start: 7;\n }\n .lg\\:w-8-cols {\n width: calc(((8 / var(--container-grid-columns, var(--grid-columns))) * 100%) - (var(--inner-gutter) - (8 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))));\n }\n .cols-container > .lg\\:w-8-cols {\n width: calc(((8 / var(--container-grid-columns, var(--grid-columns))) * (100% - var(--inner-gutter))) - (var(--inner-gutter) - (8 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))));\n }\n .lg\\:w-8-cols > * {\n --container-grid-columns: 8;\n }\n .lg\\:w-10-cols {\n width: calc(((10 / var(--container-grid-columns, var(--grid-columns))) * 100%) - (var(--inner-gutter) - (10 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))));\n }\n .cols-container > .lg\\:w-10-cols {\n width: calc(((10 / var(--container-grid-columns, var(--grid-columns))) * (100% - var(--inner-gutter))) - (var(--inner-gutter) - (10 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))));\n }\n .lg\\:w-10-cols > * {\n --container-grid-columns: 10;\n }\n}\n.even\\:bg-inverse-softer:nth-child(even) {\n background-color: rgba(255, 255, 255, .15);\n}\n.invalid\\:text-lightest:invalid {\n color: var(--grey-500);\n}\n.focus-within\\:bg-transparent:focus-within {\n background-color: var(--transparent);\n}\n.hover\\:bg-accent-dark:hover {\n background-color: var(--green-600);\n}\n.hover\\:bg-dark:hover {\n background-color: var(--grey-300);\n}\n.hover\\:bg-darker:hover {\n background-color: var(--grey-400);\n}\n.hover\\:bg-default:hover {\n background-color: var(--grey-light);\n}\n.hover\\:bg-inverse:hover {\n background-color: var(--white);\n}\n.hover\\:bg-strong-dark:hover {\n background-color: var(--grey-800);\n}\n.hover\\:bg-transparent:hover {\n background-color: var(--transparent);\n}\n.hover\\:text-default:hover {\n color: var(--brand-black);\n}\n.hover\\:text-lighter:hover {\n color: var(--grey-600);\n}\n.hover\\:\\!underline:hover {\n text-decoration-line: underline !important;\n}\n.hover\\:no-underline:hover {\n text-decoration-line: none;\n}\n.hover\\:shadow-hover:hover {\n --tw-shadow: 0px 0px 16px rgba(0, 0, 0, 0.2);\n --tw-shadow-colored: 0px 0px 16px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.focus\\:shadow-none:focus {\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.focus\\:outline-none:focus {\n outline: 2px solid transparent;\n outline-offset: 2px;\n}\n.focus-visible\\:rounded-xs:focus-visible {\n border-radius: 4px;\n}\n.focus-visible\\:text-default:focus-visible {\n color: var(--brand-black);\n}\n.focus-visible\\:outline-none:focus-visible {\n outline: 2px solid transparent;\n outline-offset: 2px;\n}\n.disabled\\:cursor-not-allowed:disabled {\n cursor: not-allowed;\n}\n.disabled\\:bg-dark:disabled {\n background-color: var(--grey-300);\n}\n.disabled\\:text-lightest:disabled {\n color: var(--grey-500);\n}\n.aria-disabled\\:cursor-not-allowed[aria-disabled=\"true\"] {\n cursor: not-allowed;\n}\n.aria-disabled\\:\\!border-transparent[aria-disabled=\"true\"] {\n border-color: var(--transparent) !important;\n}\n.aria-disabled\\:bg-dark[aria-disabled=\"true\"] {\n background-color: var(--grey-300);\n}\n.aria-disabled\\:bg-transparent[aria-disabled=\"true\"] {\n background-color: var(--transparent);\n}\n.aria-disabled\\:text-light[aria-disabled=\"true\"] {\n color: var(--grey-700);\n}\n.aria-disabled\\:text-lightest[aria-disabled=\"true\"] {\n color: var(--grey-500);\n}\n.aria-disabled\\:line-through[aria-disabled=\"true\"] {\n text-decoration-line: line-through;\n}\n.aria-disabled\\:shadow-none[aria-disabled=\"true\"] {\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.aria-current-page\\:bg-darker[aria-current=\"page\"] {\n background-color: var(--grey-400);\n}\n.after\\:absolute::after {\n position: absolute;\n}\n.after\\:inset-0::after {\n inset: 0rem;\n}\n.after\\:inset-x-0::after {\n left: 0rem;\n right: 0rem;\n}\n.after\\:bottom-0::after {\n bottom: 0rem;\n}\n.after\\:left-16::after {\n left: 1rem;\n}\n.after\\:right-16::after {\n right: 1rem;\n}\n.after\\:z-10::after {\n z-index: 10;\n}\n.after\\:rounded-lg::after {\n border-radius: 16px;\n}\n.after\\:rounded-t-lg::after {\n border-top-left-radius: 16px;\n border-top-right-radius: 16px;\n}\n.after\\:border-3::after {\n border-width: 3px;\n}\n.after\\:border-b-2::after {\n border-bottom-width: 2px;\n}\n.after\\:\\!border-transparent::after {\n border-color: var(--transparent) !important;\n}\n.after\\:border-accent::after {\n border-color: var(--brand-green);\n}\n.after\\:border-softest::after {\n border-color: var(--grey-light);\n}\n.after\\:opacity-0::after {\n opacity: 0;\n}\n.after\\:content-\\[\\'\\'\\]::after {\n --tw-content: '';\n content: var(--tw-content);\n}\n.hover\\:after\\:\\!border-transparent:hover::after {\n border-color: var(--transparent) !important;\n}\n.hover\\:after\\:opacity-100:hover::after {\n opacity: 1;\n}\n.focus-visible\\:after\\:opacity-100:focus-visible::after {\n opacity: 1;\n}\n.aria-disabled\\:after\\:\\!border-transparent[aria-disabled=\"true\"]::after {\n border-color: var(--transparent) !important;\n}\n.before\\:absolute::before {\n position: absolute;\n}\n.before\\:inset-x-0::before {\n left: 0rem;\n right: 0rem;\n}\n.before\\:-bottom-2::before {\n bottom: -0.125rem;\n}\n.before\\:bottom-0::before {\n bottom: 0rem;\n}\n.before\\:h-12::before {\n height: 0.75rem;\n}\n.before\\:h-3::before {\n height: 0.1875rem;\n}\n.before\\:rounded-lg::before {\n border-radius: 16px;\n}\n.before\\:border-2::before {\n border-width: 2px;\n}\n.before\\:border-softest::before {\n border-color: var(--grey-light);\n}\n.before\\:bg-default::before {\n background-color: var(--grey-light);\n}\n.before\\:bg-inverse-softer::before {\n background-color: rgba(255, 255, 255, .15);\n}\n.before\\:\\!opacity-100::before {\n opacity: 1 !important;\n}\n.before\\:opacity-0::before {\n opacity: 0;\n}\n.before\\:opacity-5::before {\n opacity: 0.05;\n}\n.before\\:content-\\[\\'\\'\\]::before {\n --tw-content: '';\n content: var(--tw-content);\n}\n.before\\:bg-gradient-y::before {\n background: linear-gradient(to bottom, transparent, ease-in-out, black);\n }\n.before\\:bg-gradient-01-top::before {\n background: linear-gradient(to bottom, #00E766, ease-in-out, #E6E6E6);\n }\n.before\\:bg-gradient-01-bottom::before {\n background: linear-gradient(to top, #00E766, ease-in-out, #E6E6E6);\n }\n.before\\:bg-gradient-02-top::before {\n background: linear-gradient(to bottom, #F3F30A, ease-in-out, #E6E6E6);\n }\n.before\\:bg-gradient-02-bottom::before {\n background: linear-gradient(to top, #F3F30A, ease-in-out, #E6E6E6);\n }\n.before\\:bg-gradient-03-top::before {\n background: linear-gradient(to bottom, #C461FF, ease-in-out, #E6E6E6);\n }\n.before\\:bg-gradient-03-bottom::before {\n background: linear-gradient(to top, #C461FF, ease-in-out, #E6E6E6);\n }\n.before\\:bg-gradient-04-top::before {\n background: linear-gradient(to bottom, #2B69FC, ease-in-out, #E6E6E6);\n }\n.before\\:bg-gradient-04-bottom::before {\n background: linear-gradient(to top, #2B69FC, ease-in-out, #E6E6E6);\n }\n.hover\\:before\\:opacity-100:hover::before {\n opacity: 1;\n}\n.focus-visible\\:before\\:\\!opacity-0:focus-visible::before {\n opacity: 0 !important;\n}\n.focus-visible\\:before\\:opacity-0:focus-visible::before {\n opacity: 0;\n}\n@container (min-width: 46.875rem) {\n .\\@md\\:max-w-192 {\n max-width: 192px;\n }\n}\n@media (min-width: 0px) {\n .sm\\:mb-4 {\n margin-bottom: 0.25rem;\n }\n .sm\\:max-w-\\[200px\\] {\n max-width: 200px;\n }\n}\n@media (min-width: 750px) {\n .md\\:left-1\\/2 {\n left: 50%;\n }\n .md\\:flex {\n display: flex;\n }\n .md\\:hidden {\n display: none;\n }\n .md\\:w-\\[300px\\] {\n width: 300px;\n }\n .md\\:-translate-x-1\\/2 {\n --tw-translate-x: -50%;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n }\n .md\\:-translate-y-1\\/2 {\n --tw-translate-y: -50%;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n }\n .md\\:gap-y-12 {\n row-gap: 0.75rem;\n }\n .md\\:pt-28 {\n padding-top: 1.75rem;\n }\n}\n@media (min-width: 900px) {\n .lg\\:order-last {\n order: 9999;\n }\n .lg\\:order-none {\n order: 0;\n }\n .lg\\:mt-0 {\n margin-top: 0rem;\n }\n .lg\\:block {\n display: block;\n }\n .lg\\:flex {\n display: flex;\n }\n .lg\\:hidden {\n display: none;\n }\n .lg\\:w-\\[500px\\] {\n width: 500px;\n }\n .lg\\:w-auto {\n width: auto;\n }\n .lg\\:max-w-\\[720px\\] {\n max-width: 720px;\n }\n .lg\\:flex-row {\n flex-direction: row;\n }\n .lg\\:flex-nowrap {\n flex-wrap: nowrap;\n }\n .lg\\:gap-y-16 {\n row-gap: 1rem;\n }\n .lg\\:px-28 {\n padding-left: 1.75rem;\n padding-right: 1.75rem;\n }\n .lg\\:\\!pl-12 {\n padding-left: 0.75rem !important;\n }\n .lg\\:\\!pr-12 {\n padding-right: 0.75rem !important;\n }\n}\n@media (min-width: 1024px) {\n .xl\\:pb-40 {\n padding-bottom: 2.5rem;\n }\n}\n@media (min-width: 2200px) {\n .xxxl\\:px-0 {\n padding-left: 0rem;\n padding-right: 0rem;\n }\n}\n\n";
|
|
12394
|
+
const edsInputFieldCss = ":root {\n font-optical-sizing: auto;\n}\nhtml,\nbody {\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n/*\n:focus[data-focus-method=\"mouse\"],\n:focus[data-focus-method=\"touch\"] {\n outline: none !important;\n}\n*/\n/*FADE*/\n.fade-enter-active,\n.fade-leave-active {\n transition-duration: 300ms;\n transition-timing-function: linear;\n transition-property: opacity;\n}\n.fade-enter-from,\n.fade-leave-to {\n opacity: 0;\n}\n/*FADE TRANSLATE Y*/\n.fade-down-enter-active,\n.fade-down-leave-active {\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n\n transition-property: opacity, transform;\n}\n.fade-down-enter-from,\n.fade-down-leave-to {\n opacity: 0;\n transform: translateY(12px);\n}\n/*SLIDE LEFT*/\n.slide-left-enter-active,\n.slide-left-leave-active {\n transition-duration: 500ms;\n transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);\n transition-property: opacity, transform;\n}\n.slide-left-enter-from,\n.slide-left-leave-to {\n transform: translateX(-110%);\n}\n/*SLIDE BOTTOM*/\n.slide-bottom-enter-active,\n.slide-bottom-leave-active {\n transition-duration: 500ms;\n transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);\n transition-property: opacity, transform;\n}\n.slide-bottom-enter-from,\n.slide-bottom-leave-to {\n transform: translateY(100%);\n}\n.slide-bottom-list-move,\n.slide-bottom-list-enter-active,\n.slide-bottom-list-leave-active {\n transition-duration: 500ms;\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n transition-property: opacity, transform;\n}\n.slide-bottom-list-enter-from,\n.slide-bottom-list-leave-to {\n opacity: 0;\n transform: translateY(100%);\n}\n.slide-bottom-list-leave-active {\n position: absolute;\n}\n/*COLLAPSE Y*/\n.collapseY-enter-active,\n.collapseY-leave-active {\n transition-duration: 300ms;\n transition-timing-function: linear;\n overflow: hidden;\n max-height: 500px;\n transition-property: max-height;\n}\n.collapseY-enter-from,\n.collapseY-leave-to {\n max-height: 0;\n}\n*, ::before, ::after {\n --tw-border-spacing-x: 0;\n --tw-border-spacing-y: 0;\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-rotate: 0;\n --tw-skew-x: 0;\n --tw-skew-y: 0;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n --tw-pan-x: ;\n --tw-pan-y: ;\n --tw-pinch-zoom: ;\n --tw-scroll-snap-strictness: proximity;\n --tw-gradient-from-position: ;\n --tw-gradient-via-position: ;\n --tw-gradient-to-position: ;\n --tw-ordinal: ;\n --tw-slashed-zero: ;\n --tw-numeric-figure: ;\n --tw-numeric-spacing: ;\n --tw-numeric-fraction: ;\n --tw-ring-inset: ;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-color: rgb(147 197 253 / 0.5);\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-ring-shadow: 0 0 #0000;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n --tw-blur: ;\n --tw-brightness: ;\n --tw-contrast: ;\n --tw-grayscale: ;\n --tw-hue-rotate: ;\n --tw-invert: ;\n --tw-saturate: ;\n --tw-sepia: ;\n --tw-drop-shadow: ;\n --tw-backdrop-blur: ;\n --tw-backdrop-brightness: ;\n --tw-backdrop-contrast: ;\n --tw-backdrop-grayscale: ;\n --tw-backdrop-hue-rotate: ;\n --tw-backdrop-invert: ;\n --tw-backdrop-opacity: ;\n --tw-backdrop-saturate: ;\n --tw-backdrop-sepia: ;\n --tw-contain-size: ;\n --tw-contain-layout: ;\n --tw-contain-paint: ;\n --tw-contain-style: ;\n}\n::backdrop {\n --tw-border-spacing-x: 0;\n --tw-border-spacing-y: 0;\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-rotate: 0;\n --tw-skew-x: 0;\n --tw-skew-y: 0;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n --tw-pan-x: ;\n --tw-pan-y: ;\n --tw-pinch-zoom: ;\n --tw-scroll-snap-strictness: proximity;\n --tw-gradient-from-position: ;\n --tw-gradient-via-position: ;\n --tw-gradient-to-position: ;\n --tw-ordinal: ;\n --tw-slashed-zero: ;\n --tw-numeric-figure: ;\n --tw-numeric-spacing: ;\n --tw-numeric-fraction: ;\n --tw-ring-inset: ;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-color: rgb(147 197 253 / 0.5);\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-ring-shadow: 0 0 #0000;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n --tw-blur: ;\n --tw-brightness: ;\n --tw-contrast: ;\n --tw-grayscale: ;\n --tw-hue-rotate: ;\n --tw-invert: ;\n --tw-saturate: ;\n --tw-sepia: ;\n --tw-drop-shadow: ;\n --tw-backdrop-blur: ;\n --tw-backdrop-brightness: ;\n --tw-backdrop-contrast: ;\n --tw-backdrop-grayscale: ;\n --tw-backdrop-hue-rotate: ;\n --tw-backdrop-invert: ;\n --tw-backdrop-opacity: ;\n --tw-backdrop-saturate: ;\n --tw-backdrop-sepia: ;\n --tw-contain-size: ;\n --tw-contain-layout: ;\n --tw-contain-paint: ;\n --tw-contain-style: ;\n}\n/*\n! tailwindcss v3.4.13 | MIT License | https://tailwindcss.com\n*/\n/*\n1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)\n2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)\n*/\n*,\n::before,\n::after {\n box-sizing: border-box; /* 1 */\n border-width: 0; /* 2 */\n border-style: solid; /* 2 */\n border-color: currentColor; /* 2 */\n}\n::before,\n::after {\n --tw-content: '';\n}\n/*\n1. Use a consistent sensible line-height in all browsers.\n2. Prevent adjustments of font size after orientation changes in iOS.\n3. Use a more readable tab size.\n4. Use the user's configured `sans` font-family by default.\n5. Use the user's configured `sans` font-feature-settings by default.\n6. Use the user's configured `sans` font-variation-settings by default.\n7. Disable tap highlights on iOS\n*/\nhtml,\n:host {\n line-height: 1.5; /* 1 */\n -webkit-text-size-adjust: 100%; /* 2 */\n -moz-tab-size: 4; /* 3 */\n -o-tab-size: 4;\n tab-size: 4; /* 3 */\n font-family: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"; /* 4 */\n font-feature-settings: normal; /* 5 */\n font-variation-settings: normal; /* 6 */\n -webkit-tap-highlight-color: transparent; /* 7 */\n}\n/*\n1. Remove the margin in all browsers.\n2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.\n*/\nbody {\n margin: 0; /* 1 */\n line-height: inherit; /* 2 */\n}\n/*\n1. Add the correct height in Firefox.\n2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)\n3. Ensure horizontal rules are visible by default.\n*/\nhr {\n height: 0; /* 1 */\n color: inherit; /* 2 */\n border-top-width: 1px; /* 3 */\n}\n/*\nAdd the correct text decoration in Chrome, Edge, and Safari.\n*/\nabbr:where([title]) {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n}\n/*\nRemove the default font size and weight for headings.\n*/\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n font-size: inherit;\n font-weight: inherit;\n}\n/*\nReset links to optimize for opt-in styling instead of opt-out.\n*/\na {\n color: inherit;\n text-decoration: inherit;\n}\n/*\nAdd the correct font weight in Edge and Safari.\n*/\nb,\nstrong {\n font-weight: bolder;\n}\n/*\n1. Use the user's configured `mono` font-family by default.\n2. Use the user's configured `mono` font-feature-settings by default.\n3. Use the user's configured `mono` font-variation-settings by default.\n4. Correct the odd `em` font sizing in all browsers.\n*/\ncode,\nkbd,\nsamp,\npre {\n font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace; /* 1 */\n font-feature-settings: normal; /* 2 */\n font-variation-settings: normal; /* 3 */\n font-size: 1em; /* 4 */\n}\n/*\nAdd the correct font size in all browsers.\n*/\nsmall {\n font-size: 80%;\n}\n/*\nPrevent `sub` and `sup` elements from affecting the line height in all browsers.\n*/\nsub,\nsup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n}\nsub {\n bottom: -0.25em;\n}\nsup {\n top: -0.5em;\n}\n/*\n1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)\n2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)\n3. Remove gaps between table borders by default.\n*/\ntable {\n text-indent: 0; /* 1 */\n border-color: inherit; /* 2 */\n border-collapse: collapse; /* 3 */\n}\n/*\n1. Change the font styles in all browsers.\n2. Remove the margin in Firefox and Safari.\n3. Remove default padding in all browsers.\n*/\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n font-family: inherit; /* 1 */\n font-feature-settings: inherit; /* 1 */\n font-variation-settings: inherit; /* 1 */\n font-size: 100%; /* 1 */\n font-weight: inherit; /* 1 */\n line-height: inherit; /* 1 */\n letter-spacing: inherit; /* 1 */\n color: inherit; /* 1 */\n margin: 0; /* 2 */\n padding: 0; /* 3 */\n}\n/*\nRemove the inheritance of text transform in Edge and Firefox.\n*/\nbutton,\nselect {\n text-transform: none;\n}\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Remove default button styles.\n*/\nbutton,\ninput:where([type='button']),\ninput:where([type='reset']),\ninput:where([type='submit']) {\n -webkit-appearance: button; /* 1 */\n background-color: transparent; /* 2 */\n background-image: none; /* 2 */\n}\n/*\nUse the modern Firefox focus style for all focusable elements.\n*/\n:-moz-focusring {\n outline: auto;\n}\n/*\nRemove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)\n*/\n:-moz-ui-invalid {\n box-shadow: none;\n}\n/*\nAdd the correct vertical alignment in Chrome and Firefox.\n*/\nprogress {\n vertical-align: baseline;\n}\n/*\nCorrect the cursor style of increment and decrement buttons in Safari.\n*/\n::-webkit-inner-spin-button,\n::-webkit-outer-spin-button {\n height: auto;\n}\n/*\n1. Correct the odd appearance in Chrome and Safari.\n2. Correct the outline style in Safari.\n*/\n[type='search'] {\n -webkit-appearance: textfield; /* 1 */\n outline-offset: -2px; /* 2 */\n}\n/*\nRemove the inner padding in Chrome and Safari on macOS.\n*/\n::-webkit-search-decoration {\n -webkit-appearance: none;\n}\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Change font properties to `inherit` in Safari.\n*/\n::-webkit-file-upload-button {\n -webkit-appearance: button; /* 1 */\n font: inherit; /* 2 */\n}\n/*\nAdd the correct display in Chrome and Safari.\n*/\nsummary {\n display: list-item;\n}\n/*\nRemoves the default spacing and border for appropriate elements.\n*/\nblockquote,\ndl,\ndd,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nhr,\nfigure,\np,\npre {\n margin: 0;\n}\nfieldset {\n margin: 0;\n padding: 0;\n}\nlegend {\n padding: 0;\n}\nol,\nul,\nmenu {\n list-style: none;\n margin: 0;\n padding: 0;\n}\n/*\nReset default styling for dialogs.\n*/\ndialog {\n padding: 0;\n}\n/*\nPrevent resizing textareas horizontally by default.\n*/\ntextarea {\n resize: vertical;\n}\n/*\n1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)\n2. Set the default placeholder color to the user's configured gray 400 color.\n*/\ninput::-moz-placeholder, textarea::-moz-placeholder {\n opacity: 1; /* 1 */\n color: #9ca3af; /* 2 */\n}\ninput::placeholder,\ntextarea::placeholder {\n opacity: 1; /* 1 */\n color: #9ca3af; /* 2 */\n}\n/*\nSet the default cursor for buttons.\n*/\nbutton,\n[role=\"button\"] {\n cursor: pointer;\n}\n/*\nMake sure disabled buttons don't get the pointer cursor.\n*/\n:disabled {\n cursor: default;\n}\n/*\n1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)\n2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)\n This can trigger a poorly considered lint error in some tools but is included by design.\n*/\nimg,\nsvg,\nvideo,\ncanvas,\naudio,\niframe,\nembed,\nobject {\n display: block; /* 1 */\n vertical-align: middle; /* 2 */\n}\n/*\nConstrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)\n*/\nimg,\nvideo {\n max-width: 100%;\n height: auto;\n}\n/* Make elements with the HTML hidden attribute stay hidden by default */\n[hidden] {\n display: none;\n}\n:root {\n --breakpoint: \"sm\";\n --container-width: unset;\n --inner-gutter: 8px;\n --outer-gutter: 16px;\n --grid-columns: 12;\n --env: \"dev\";\n --grid-column-bg: rgba(127, 255, 255, 0.25);\n}\n@media (min-width: 750px) {\n :root {\n --breakpoint: \"md\";\n --container-width: unset;\n --inner-gutter: 12px;\n --outer-gutter: 20px;\n --grid-columns: 12;\n }\n}\n@media (min-width: 900px) {\n :root {\n --breakpoint: \"lg\";\n --container-width: unset;\n --inner-gutter: 16px;\n --outer-gutter: 28px;\n --grid-columns: 12;\n }\n}\n@media (min-width: 1024px) {\n :root {\n --breakpoint: \"xl\";\n --container-width: unset;\n --inner-gutter: 16px;\n --outer-gutter: 28px;\n --grid-columns: 12;\n }\n}\n@media (min-width: 1280px) {\n :root {\n --breakpoint: \"xxl\";\n --container-width: unset;\n --inner-gutter: 16px;\n --outer-gutter: 28px;\n --grid-columns: 12;\n }\n}\n@media (min-width: 2200px) {\n :root {\n --breakpoint: \"xxxl\";\n --container-width: unset;\n --inner-gutter: 16px;\n --outer-gutter: 28px;\n --grid-columns: 12;\n }\n}\n.container {\n width: calc(var(--container-width, 100%) - (2 * var(--breakout-container-outer-gutter, var(--container-outer-gutter, var(--outer-gutter, 0)))));\n margin-right: auto;\n margin-left: auto;\n}\n.container > * {\n --container-outer-gutter: 0;\n --breakout-container-outer-gutter: 0;\n}\n[class*='scrollbar-track-'], [class*='scrollbar-thumb-'] {\n --scrollbar-bg: #fafafa;\n --scrollbar-fg: #c1c1c1;\n --scrollbar-border: #e8e8e8;\n scrollbar-color: var(--scrollbar-fg) var(--scrollbar-bg);\n}\n[class*='scrollbar-track-']::-webkit-scrollbar, [class*='scrollbar-thumb-']::-webkit-scrollbar {\n width: var(--scrollbar-width, 15px);\n height: var(--scrollbar-width, 15px);\n}\n[class*='scrollbar-track-']::-webkit-scrollbar-track, [class*='scrollbar-thumb-']::-webkit-scrollbar-track {\n background: var(--scrollbar-bg);\n}\n[class*='scrollbar-track-']::-webkit-scrollbar-track:horizontal, [class*='scrollbar-thumb-']::-webkit-scrollbar-track:horizontal {\n border-top: 1px solid var(--scrollbar-border);\n border-bottom: 1px solid var(--scrollbar-border);\n}\n[class*='scrollbar-track-']::-webkit-scrollbar-track:vertical, [class*='scrollbar-thumb-']::-webkit-scrollbar-track:vertical {\n border-inline-start: 1px solid var(--scrollbar-border);\n border-inline-end: 1px solid var(--scrollbar-border);\n}\n[class*='scrollbar-track-']::-webkit-scrollbar-thumb, [class*='scrollbar-thumb-']::-webkit-scrollbar-thumb {\n background: var(--scrollbar-fg);\n border-radius: 20px;\n border: var(--scrollbar-padding, 4px) solid transparent;\n background-clip: content-box;\n}\n:root {\n --spacing-space-01: 5rem;\n --spacing-space-02: 3.75rem;\n --spacing-space-03: 6.25rem;\n --spacing-space-04: 1.75rem;\n}\n@media (min-width: 900px) {\n :root {\n --spacing-space-01: 7.5rem;\n --spacing-space-02: 5rem;\n --spacing-space-03: 7.5rem;\n }\n}\n:root {\n --sans: Inter, Helvetica, Arial, sans-serif;\n --f-heading-01-fontFamily: var(--sans);\n --f-heading-01-fontWeight: 800;\n --f-heading-01-fontSize: 42px;\n --f-heading-01-lineHeight: 100%;\n --f-heading-01-letterSpacing: -0.01em;\n --f-heading-02-fontFamily: var(--sans);\n --f-heading-02-fontWeight: 800;\n --f-heading-02-fontSize: 36px;\n --f-heading-02-lineHeight: 100%;\n --f-heading-02-letterSpacing: -0.01em;\n --f-heading-03-fontFamily: var(--sans);\n --f-heading-03-fontWeight: 800;\n --f-heading-03-fontSize: 36px;\n --f-heading-03-lineHeight: 100%;\n --f-heading-03-letterSpacing: -0.01em;\n --f-heading-04-fontFamily: var(--sans);\n --f-heading-04-fontWeight: 800;\n --f-heading-04-fontSize: 28px;\n --f-heading-04-lineHeight: 100%;\n --f-heading-04-letterSpacing: -0.01em;\n --f-heading-05-fontFamily: var(--sans);\n --f-heading-05-fontWeight: 800;\n --f-heading-05-fontSize: 28px;\n --f-heading-05-lineHeight: 110%;\n --f-heading-05-letterSpacing: -0.01em;\n --f-heading-06-fontFamily: var(--sans);\n --f-heading-06-fontWeight: 800;\n --f-heading-06-fontSize: 22px;\n --f-heading-06-lineHeight: 120%;\n --f-body-01-fontFamily: var(--sans);\n --f-body-01-fontWeight: 600;\n --f-body-01-fontSize: 20px;\n --f-body-01-lineHeight: 140%;\n --f-body-01-letterSpacing: -0.01em;\n --f-body-02-fontFamily: var(--sans);\n --f-body-02-fontWeight: 600;\n --f-body-02-fontSize: 17px;\n --f-body-02-lineHeight: 150%;\n --f-ui-01-fontFamily: var(--sans);\n --f-ui-01-fontWeight: 800;\n --f-ui-01-fontSize: 18px;\n --f-ui-01-lineHeight: 110%;\n --f-ui-01-letterSpacing: -0.01em;\n --f-ui-02-fontFamily: var(--sans);\n --f-ui-02-fontWeight: 800;\n --f-ui-02-fontSize: 16px;\n --f-ui-02-lineHeight: 110%;\n --f-ui-02-letterSpacing: -0.01em;\n --f-ui-02-light-fontFamily: var(--sans);\n --f-ui-02-light-fontWeight: 600;\n --f-ui-02-light-fontSize: 16px;\n --f-ui-02-light-lineHeight: 110%;\n --f-ui-02-light-letterSpacing: -0.01em;\n --f-ui-03-fontFamily: var(--sans);\n --f-ui-03-fontWeight: 800;\n --f-ui-03-fontSize: 14px;\n --f-ui-03-lineHeight: 110%;\n --f-ui-03-letterSpacing: -0.01em;\n --f-ui-03-light-fontFamily: var(--sans);\n --f-ui-03-light-fontWeight: 600;\n --f-ui-03-light-fontSize: 14px;\n --f-ui-03-light-lineHeight: 130%;\n --f-ui-03-light-letterSpacing: -0.01em;\n --f-ui-04-fontFamily: var(--sans);\n --f-ui-04-fontWeight: 800;\n --f-ui-04-fontSize: 12px;\n --f-ui-04-lineHeight: 100%;\n --f-ui-04-letterSpacing: -0.01em;\n --f-ui-05-fontFamily: var(--sans);\n --f-ui-05-fontWeight: 800;\n --f-ui-05-fontSize: 10px;\n --f-ui-05-lineHeight: 110%;\n --f-ui-05-letterSpacing: -0.01em;\n --f-caption-fontFamily: var(--sans);\n --f-caption-fontWeight: 800;\n --f-caption-fontSize: 12px;\n --f-caption-lineHeight: 120%;\n --f-display-01-fontFamily: var(--sans);\n --f-display-01-fontWeight: 800;\n --f-display-01-fontSize: 120px;\n --f-display-01-lineHeight: 100%;\n --f-display-01-letterSpacing: -0.01em;\n}\n.f-heading-01 {\n font-family: var(--f-heading-01-fontFamily);\n font-weight: var(--f-heading-01-fontWeight);\n font-size: var(--f-heading-01-fontSize);\n line-height: var(--f-heading-01-lineHeight);\n letter-spacing: var(--f-heading-01-letterSpacing);\n}\n.f-heading-02 {\n font-family: var(--f-heading-02-fontFamily);\n font-weight: var(--f-heading-02-fontWeight);\n font-size: var(--f-heading-02-fontSize);\n line-height: var(--f-heading-02-lineHeight);\n letter-spacing: var(--f-heading-02-letterSpacing);\n}\n.f-heading-03 {\n font-family: var(--f-heading-03-fontFamily);\n font-weight: var(--f-heading-03-fontWeight);\n font-size: var(--f-heading-03-fontSize);\n line-height: var(--f-heading-03-lineHeight);\n letter-spacing: var(--f-heading-03-letterSpacing);\n}\n.f-heading-04 {\n font-family: var(--f-heading-04-fontFamily);\n font-weight: var(--f-heading-04-fontWeight);\n font-size: var(--f-heading-04-fontSize);\n line-height: var(--f-heading-04-lineHeight);\n letter-spacing: var(--f-heading-04-letterSpacing);\n}\n.f-heading-05 {\n font-family: var(--f-heading-05-fontFamily);\n font-weight: var(--f-heading-05-fontWeight);\n font-size: var(--f-heading-05-fontSize);\n line-height: var(--f-heading-05-lineHeight);\n letter-spacing: var(--f-heading-05-letterSpacing);\n}\n.f-heading-06 {\n font-family: var(--f-heading-06-fontFamily);\n font-weight: var(--f-heading-06-fontWeight);\n font-size: var(--f-heading-06-fontSize);\n line-height: var(--f-heading-06-lineHeight);\n letter-spacing: var(--f-heading-06-letterSpacing);\n}\n.f-body-01 {\n font-family: var(--f-body-01-fontFamily);\n font-weight: var(--f-body-01-fontWeight);\n font-size: var(--f-body-01-fontSize);\n line-height: var(--f-body-01-lineHeight);\n letter-spacing: var(--f-body-01-letterSpacing);\n}\n.f-body-02 {\n font-family: var(--f-body-02-fontFamily);\n font-weight: var(--f-body-02-fontWeight);\n font-size: var(--f-body-02-fontSize);\n line-height: var(--f-body-02-lineHeight);\n letter-spacing: var(--f-body-02-letterSpacing);\n}\n.f-ui-01 {\n font-family: var(--f-ui-01-fontFamily);\n font-weight: var(--f-ui-01-fontWeight);\n font-size: var(--f-ui-01-fontSize);\n line-height: var(--f-ui-01-lineHeight);\n letter-spacing: var(--f-ui-01-letterSpacing);\n}\n.f-ui-02 {\n font-family: var(--f-ui-02-fontFamily);\n font-weight: var(--f-ui-02-fontWeight);\n font-size: var(--f-ui-02-fontSize);\n line-height: var(--f-ui-02-lineHeight);\n letter-spacing: var(--f-ui-02-letterSpacing);\n}\n.f-ui-02-light {\n font-family: var(--f-ui-02-light-fontFamily);\n font-weight: var(--f-ui-02-light-fontWeight);\n font-size: var(--f-ui-02-light-fontSize);\n line-height: var(--f-ui-02-light-lineHeight);\n letter-spacing: var(--f-ui-02-light-letterSpacing);\n}\n.f-ui-03 {\n font-family: var(--f-ui-03-fontFamily);\n font-weight: var(--f-ui-03-fontWeight);\n font-size: var(--f-ui-03-fontSize);\n line-height: var(--f-ui-03-lineHeight);\n letter-spacing: var(--f-ui-03-letterSpacing);\n}\n.f-ui-03-light {\n font-family: var(--f-ui-03-light-fontFamily);\n font-weight: var(--f-ui-03-light-fontWeight);\n font-size: var(--f-ui-03-light-fontSize);\n line-height: var(--f-ui-03-light-lineHeight);\n letter-spacing: var(--f-ui-03-light-letterSpacing);\n}\n.f-ui-04 {\n font-family: var(--f-ui-04-fontFamily);\n font-weight: var(--f-ui-04-fontWeight);\n font-size: var(--f-ui-04-fontSize);\n line-height: var(--f-ui-04-lineHeight);\n letter-spacing: var(--f-ui-04-letterSpacing);\n}\n.f-ui-05 {\n font-family: var(--f-ui-05-fontFamily);\n font-weight: var(--f-ui-05-fontWeight);\n font-size: var(--f-ui-05-fontSize);\n line-height: var(--f-ui-05-lineHeight);\n letter-spacing: var(--f-ui-05-letterSpacing);\n}\n.f-caption {\n font-family: var(--f-caption-fontFamily);\n font-weight: var(--f-caption-fontWeight);\n font-size: var(--f-caption-fontSize);\n line-height: var(--f-caption-lineHeight);\n letter-spacing: var(--f-caption-letterSpacing);\n}\n.f-display-01 {\n font-family: var(--f-display-01-fontFamily);\n font-weight: var(--f-display-01-fontWeight);\n font-size: var(--f-display-01-fontSize);\n line-height: var(--f-display-01-lineHeight);\n letter-spacing: var(--f-display-01-letterSpacing);\n}\n@media (min-width: 750px) {\n :root {\n --f-heading-01-fontSize: 48px;\n }\n}\n@media (min-width: 900px) {\n :root {\n --f-heading-01-fontSize: 72px;\n --f-heading-02-fontSize: 48px;\n --f-display-01-fontSize: 150px;\n }\n}\n@media (min-width: 1024px) {\n :root {\n --f-heading-01-fontSize: 83px;\n --f-heading-02-fontSize: 60px;\n --f-heading-03-fontSize: 42px;\n --f-heading-04-fontSize: 36px;\n }\n}\n.f-heading-01 b, .f-heading-01 strong {\n font-weight: var(--f-heading-01---bold-weight, bold);\n}\n.f-heading-02 b, .f-heading-02 strong {\n font-weight: var(--f-heading-02---bold-weight, bold);\n}\n.f-heading-03 b, .f-heading-03 strong {\n font-weight: var(--f-heading-03---bold-weight, bold);\n}\n.f-heading-04 b, .f-heading-04 strong {\n font-weight: var(--f-heading-04---bold-weight, bold);\n}\n.f-heading-05 b, .f-heading-05 strong {\n font-weight: var(--f-heading-05---bold-weight, bold);\n}\n.f-heading-06 b, .f-heading-06 strong {\n font-weight: var(--f-heading-06---bold-weight, bold);\n}\n.f-body-01 b, .f-body-01 strong {\n font-weight: var(--f-body-01---bold-weight, bold);\n}\n.f-body-02 b, .f-body-02 strong {\n font-weight: var(--f-body-02---bold-weight, bold);\n}\n.f-ui-01 b, .f-ui-01 strong {\n font-weight: var(--f-ui-01---bold-weight, bold);\n}\n.f-ui-02 b, .f-ui-02 strong {\n font-weight: var(--f-ui-02---bold-weight, bold);\n}\n.f-ui-02-light b, .f-ui-02-light strong {\n font-weight: var(--f-ui-02-light---bold-weight, bold);\n}\n.f-ui-03 b, .f-ui-03 strong {\n font-weight: var(--f-ui-03---bold-weight, bold);\n}\n.f-ui-03-light b, .f-ui-03-light strong {\n font-weight: var(--f-ui-03-light---bold-weight, bold);\n}\n.f-ui-04 b, .f-ui-04 strong {\n font-weight: var(--f-ui-04---bold-weight, bold);\n}\n.f-ui-05 b, .f-ui-05 strong {\n font-weight: var(--f-ui-05---bold-weight, bold);\n}\n.f-caption b, .f-caption strong {\n font-weight: var(--f-caption---bold-weight, bold);\n}\n.f-display-01 b, .f-display-01 strong {\n font-weight: var(--f-display-01---bold-weight, bold);\n}\n:root {\n --grey-100: #f8f8f8;\n --grey-200: #f2f2f2;\n --grey-300: #e6e6e6;\n --grey-400: #d8d8d8;\n --grey-500: #8c8c8c;\n --grey-600: #6e6e6e;\n --grey-700: #666666;\n --grey-800: #4d4d4d;\n --grey-900: #242424;\n --green-100: #eaffee;\n --green-200: #d3ffdc;\n --green-300: #9dffb4;\n --green-400: #63fb92;\n --green-500: #00e766;\n --green-600: #00c959;\n --green-700: #009d45;\n --green-800: #007734;\n --green-900: #004f23;\n --yellow-100: #fefee5;\n --yellow-200: #ffffcb;\n --yellow-300: #fdfdaa;\n --yellow-400: #ffff8b;\n --yellow-500: #ffff51;\n --yellow-600: #f3f30a;\n --yellow-700: #d7d72b;\n --yellow-800: #9a9a1e;\n --yellow-900: #636313;\n --orange-100: #fff4ee;\n --orange-200: #ffeade;\n --orange-300: #ffdcc5;\n --orange-400: #ffcca9;\n --orange-500: #ffb87e;\n --orange-600: #ffa543;\n --orange-700: #cb7f28;\n --orange-800: #995f1e;\n --orange-900: #653f14;\n --red-100: #feefef;\n --red-200: #ffe0e1;\n --red-300: #ffc7c9;\n --red-400: #ff9ea2;\n --red-500: #ff7a7f;\n --red-600: #ff4d68;\n --red-700: #d01111;\n --red-800: #a3001a;\n --red-900: #6f0011;\n --purple-100: #f9f3ff;\n --purple-200: #f4e8ff;\n --purple-300: #e9ceff;\n --purple-400: #ddb1ff;\n --purple-500: #d18fff;\n --purple-600: #c461ff;\n --purple-700: #af56e4;\n --purple-800: #8337b1;\n --purple-900: #3d1e4f;\n --blue-100: #eff0ff;\n --blue-200: #dee0ff;\n --blue-300: #caceff;\n --blue-400: #b2b8ff;\n --blue-500: #7a89f5;\n --blue-600: #2b69fc;\n --blue-700: #0034cb;\n --blue-800: #002799;\n --blue-900: #001a65;\n --cyan-100: #E0EEFF;\n --cyan-200: #D3E6FF;\n --cyan-300: #B5D8FF;\n --cyan-400: #92C8FF;\n --cyan-500: #6CBFFE;\n --cyan-600: #3FA9F5;\n --cyan-700: #267FBE;\n --cyan-800: #1F689B;\n --cyan-900: #15496D;\n --black: #000000;\n --white: #ffffff;\n --transparent: transparent;\n --current: currentColor;\n}\n.grid-layout {\n display: grid;\n grid-template-columns: repeat(var(--container-grid-columns, var(--grid-columns)), 1fr);\n grid-gap: var(--inner-gutter);\n}\n.grid-col-span-2 {\n --container-grid-columns: 2;\n grid-column: span 2 / span 2;\n}\n.grid-col-span-3 {\n --container-grid-columns: 3;\n grid-column: span 3 / span 3;\n}\n.grid-col-span-4 {\n --container-grid-columns: 4;\n grid-column: span 4 / span 4;\n}\n.grid-col-span-6 {\n --container-grid-columns: 6;\n grid-column: span 6 / span 6;\n}\n.grid-col-span-8 {\n --container-grid-columns: 8;\n grid-column: span 8 / span 8;\n}\n.grid-col-span-10 {\n --container-grid-columns: 10;\n grid-column: span 10 / span 10;\n}\n.grid-col-span-12 {\n --container-grid-columns: 12;\n grid-column: span 12 / span 12;\n}\n.grid-col-start-1 {\n grid-column-start: 1;\n}\n.grid-col-start-2 {\n grid-column-start: 2;\n}\n.grid-col-start-3 {\n grid-column-start: 3;\n}\n.grid-col-start-4 {\n grid-column-start: 4;\n}\n.grid-col-start-5 {\n grid-column-start: 5;\n}\n.grid-col-start-6 {\n grid-column-start: 6;\n}\n.grid-col-start-7 {\n grid-column-start: 7;\n}\n.grid-col-start-8 {\n grid-column-start: 8;\n}\n.grid-col-start-9 {\n grid-column-start: 9;\n}\n.grid-col-start-10 {\n grid-column-start: 10;\n}\n.grid-col-start-11 {\n grid-column-start: 11;\n}\n.grid-col-start-12 {\n grid-column-start: 12;\n}\n[class*=\"grid-line-\"] > * {\n position: relative;\n}\n[class*=\"grid-line-\"] > *::before, [class*=\"grid-line-\"] > *::after {\n content: attr(👻);\n position: absolute;\n z-index: 0;\n pointer-events: none;\n}\n.grid-cols-1[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n}\n.grid-cols-1[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: 0;\n inset-inline-end: 0;\n}\n.grid-cols-1[class*=\"grid-line-x\"] > *:nth-child(1n+1)::before {\n inset-inline-end: 0;\n}\n.grid-cols-1[class*=\"grid-line-x\"] > *:nth-child(1n+1):nth-last-child(-n+1)::before {\n border-bottom-width: 0;\n}\n.grid-cols-1[class*=\"grid-line-x\"] > *:nth-child(1n+1):nth-last-child(-n+1) ~ *::before {\n border-bottom-width: 0;\n}\n.grid-cols-2[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n}\n.grid-cols-2[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n}\n.grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+1)::before {\n inset-inline-start: 0;\n}\n.grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+2)::before {\n inset-inline-end: 0;\n}\n.grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+1):nth-last-child(-n+2)::before {\n border-bottom-width: 0;\n}\n.grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+1):nth-last-child(-n+2) ~ *::before {\n border-bottom-width: 0;\n}\n.grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n}\n.grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(2n+2)::after {\n border-inline-end-width: 0;\n}\n.grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+2)::after {\n top: 0;\n}\n.grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(2n+1):nth-last-child(-n+2)::after {\n bottom: 0;\n}\n.grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(2n+1):nth-last-child(-n+2) ~ li::after {\n bottom: 0;\n}\n.grid-cols-3[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n}\n.grid-cols-3[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n}\n.grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+1)::before {\n inset-inline-start: 0;\n}\n.grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+3)::before {\n inset-inline-end: 0;\n}\n.grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+1):nth-last-child(-n+3)::before {\n border-bottom-width: 0;\n}\n.grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+1):nth-last-child(-n+3) ~ *::before {\n border-bottom-width: 0;\n}\n.grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n}\n.grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(3n+3)::after {\n border-inline-end-width: 0;\n}\n.grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+3)::after {\n top: 0;\n}\n.grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(3n+1):nth-last-child(-n+3)::after {\n bottom: 0;\n}\n.grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(3n+1):nth-last-child(-n+3) ~ li::after {\n bottom: 0;\n}\n.grid-cols-4[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n}\n.grid-cols-4[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n}\n.grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+1)::before {\n inset-inline-start: 0;\n}\n.grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+4)::before {\n inset-inline-end: 0;\n}\n.grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+1):nth-last-child(-n+4)::before {\n border-bottom-width: 0;\n}\n.grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+1):nth-last-child(-n+4) ~ *::before {\n border-bottom-width: 0;\n}\n.grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n}\n.grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(4n+4)::after {\n border-inline-end-width: 0;\n}\n.grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+4)::after {\n top: 0;\n}\n.grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(4n+1):nth-last-child(-n+4)::after {\n bottom: 0;\n}\n.grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(4n+1):nth-last-child(-n+4) ~ li::after {\n bottom: 0;\n}\n.grid-cols-5[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n}\n.grid-cols-5[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n}\n.grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+1)::before {\n inset-inline-start: 0;\n}\n.grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+5)::before {\n inset-inline-end: 0;\n}\n.grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+1):nth-last-child(-n+5)::before {\n border-bottom-width: 0;\n}\n.grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+1):nth-last-child(-n+5) ~ *::before {\n border-bottom-width: 0;\n}\n.grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n}\n.grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(5n+5)::after {\n border-inline-end-width: 0;\n}\n.grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+5)::after {\n top: 0;\n}\n.grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(5n+1):nth-last-child(-n+5)::after {\n bottom: 0;\n}\n.grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(5n+1):nth-last-child(-n+5) ~ li::after {\n bottom: 0;\n}\n.grid-cols-6[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n}\n.grid-cols-6[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n}\n.grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+1)::before {\n inset-inline-start: 0;\n}\n.grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+6)::before {\n inset-inline-end: 0;\n}\n.grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+1):nth-last-child(-n+6)::before {\n border-bottom-width: 0;\n}\n.grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+1):nth-last-child(-n+6) ~ *::before {\n border-bottom-width: 0;\n}\n.grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n}\n.grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(6n+6)::after {\n border-inline-end-width: 0;\n}\n.grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+6)::after {\n top: 0;\n}\n.grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(6n+1):nth-last-child(-n+6)::after {\n bottom: 0;\n}\n.grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(6n+1):nth-last-child(-n+6) ~ li::after {\n bottom: 0;\n}\n.grid-cols-7[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n}\n.grid-cols-7[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n}\n.grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+1)::before {\n inset-inline-start: 0;\n}\n.grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+7)::before {\n inset-inline-end: 0;\n}\n.grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+1):nth-last-child(-n+7)::before {\n border-bottom-width: 0;\n}\n.grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+1):nth-last-child(-n+7) ~ *::before {\n border-bottom-width: 0;\n}\n.grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n}\n.grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(7n+7)::after {\n border-inline-end-width: 0;\n}\n.grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+7)::after {\n top: 0;\n}\n.grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(7n+1):nth-last-child(-n+7)::after {\n bottom: 0;\n}\n.grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(7n+1):nth-last-child(-n+7) ~ li::after {\n bottom: 0;\n}\n.grid-cols-8[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n}\n.grid-cols-8[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n}\n.grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+1)::before {\n inset-inline-start: 0;\n}\n.grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+8)::before {\n inset-inline-end: 0;\n}\n.grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+1):nth-last-child(-n+8)::before {\n border-bottom-width: 0;\n}\n.grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+1):nth-last-child(-n+8) ~ *::before {\n border-bottom-width: 0;\n}\n.grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n}\n.grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(8n+8)::after {\n border-inline-end-width: 0;\n}\n.grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+8)::after {\n top: 0;\n}\n.grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(8n+1):nth-last-child(-n+8)::after {\n bottom: 0;\n}\n.grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(8n+1):nth-last-child(-n+8) ~ li::after {\n bottom: 0;\n}\n.grid-cols-9[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n}\n.grid-cols-9[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n}\n.grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+1)::before {\n inset-inline-start: 0;\n}\n.grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+9)::before {\n inset-inline-end: 0;\n}\n.grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+1):nth-last-child(-n+9)::before {\n border-bottom-width: 0;\n}\n.grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+1):nth-last-child(-n+9) ~ *::before {\n border-bottom-width: 0;\n}\n.grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n}\n.grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(9n+9)::after {\n border-inline-end-width: 0;\n}\n.grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+9)::after {\n top: 0;\n}\n.grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(9n+1):nth-last-child(-n+9)::after {\n bottom: 0;\n}\n.grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(9n+1):nth-last-child(-n+9) ~ li::after {\n bottom: 0;\n}\n.grid-cols-10[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n}\n.grid-cols-10[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n}\n.grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+1)::before {\n inset-inline-start: 0;\n}\n.grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+10)::before {\n inset-inline-end: 0;\n}\n.grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+1):nth-last-child(-n+10)::before {\n border-bottom-width: 0;\n}\n.grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+1):nth-last-child(-n+10) ~ *::before {\n border-bottom-width: 0;\n}\n.grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n}\n.grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(10n+10)::after {\n border-inline-end-width: 0;\n}\n.grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+10)::after {\n top: 0;\n}\n.grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(10n+1):nth-last-child(-n+10)::after {\n bottom: 0;\n}\n.grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(10n+1):nth-last-child(-n+10) ~ li::after {\n bottom: 0;\n}\n.grid-cols-11[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n}\n.grid-cols-11[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n}\n.grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+1)::before {\n inset-inline-start: 0;\n}\n.grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+11)::before {\n inset-inline-end: 0;\n}\n.grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+1):nth-last-child(-n+11)::before {\n border-bottom-width: 0;\n}\n.grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+1):nth-last-child(-n+11) ~ *::before {\n border-bottom-width: 0;\n}\n.grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n}\n.grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(11n+11)::after {\n border-inline-end-width: 0;\n}\n.grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+11)::after {\n top: 0;\n}\n.grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(11n+1):nth-last-child(-n+11)::after {\n bottom: 0;\n}\n.grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(11n+1):nth-last-child(-n+11) ~ li::after {\n bottom: 0;\n}\n.grid-cols-12[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n}\n.grid-cols-12[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n}\n.grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+1)::before {\n inset-inline-start: 0;\n}\n.grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+12)::before {\n inset-inline-end: 0;\n}\n.grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+1):nth-last-child(-n+12)::before {\n border-bottom-width: 0;\n}\n.grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+1):nth-last-child(-n+12) ~ *::before {\n border-bottom-width: 0;\n}\n.grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n}\n.grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(12n+12)::after {\n border-inline-end-width: 0;\n}\n.grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+12)::after {\n top: 0;\n}\n.grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(12n+1):nth-last-child(-n+12)::after {\n bottom: 0;\n}\n.grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(12n+1):nth-last-child(-n+12) ~ li::after {\n bottom: 0;\n}\n@media (min-width: 750px) {\n [class*=\"grid-line-\"] > * {\n position: relative;\n }\n [class*=\"grid-line-\"] > *::before, [class*=\"grid-line-\"] > *::after {\n content: attr(👻);\n position: absolute;\n z-index: 0;\n pointer-events: none;\n }\n .md\\:grid-line-x > *::before {\n content: attr(👻);\n inset-inline-start: 0;\n inset-inline-end: 0;\n top: 0;\n bottom: calc(var(--inner-gutter) / -2);\n border-top: 0 solid transparent;\n border-bottom: 0 solid transparent;\n }\n .md\\:grid-line-xfull > *::before {\n content: attr(👻);\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: 0;\n bottom: calc(var(--inner-gutter) / -2);\n border-top: 0 solid transparent;\n border-bottom: 0 solid transparent;\n }\n .md\\:grid-line-x-0 > *::before {\n content: none;\n }\n .md\\:grid-line-y > *::after {\n content: attr(👻);\n inset-inline-start: 0;\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: 0;\n bottom: 0;\n border-inline-start: 0 solid transparent;\n border-inline-end: 0 solid transparent;\n }\n .md\\:grid-line-yfull > *::after {\n content: attr(👻);\n inset-inline-start: 0;\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: calc(var(--inner-gutter) / -1);\n bottom: 0;\n border-inline-start: 0 solid transparent;\n border-inline-end: 0 solid transparent;\n }\n .md\\:grid-line-yfull[class*=\"grid-line-x\"] > *::after {\n inset-inline-start: 0;\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: calc(var(--inner-gutter) / -2);\n bottom: calc(var(--inner-gutter) / -2);\n border-inline-start: 0 solid transparent;\n border-inline-end: 0 solid transparent;\n }\n .md\\:grid-line-y-0 > *::after {\n content: none;\n }\n .md\\:grid-line-x-0[class*=\"grid-line-x-\"] > *::before {\n bottom: -0rem;\n }\n .md\\:grid-line-x-0[class*=\"grid-line-yfull\"] > *::after {\n top: -0rem;\n bottom: -0rem;\n }\n .md\\:grid-line-x-1[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.0625rem;\n }\n .md\\:grid-line-x-1[class*=\"grid-line-yfull\"] > *::after {\n top: -0.0625rem;\n bottom: -0.0625rem;\n }\n .md\\:grid-line-x-2[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.125rem;\n }\n .md\\:grid-line-x-2[class*=\"grid-line-yfull\"] > *::after {\n top: -0.125rem;\n bottom: -0.125rem;\n }\n .md\\:grid-line-x-3[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.1875rem;\n }\n .md\\:grid-line-x-3[class*=\"grid-line-yfull\"] > *::after {\n top: -0.1875rem;\n bottom: -0.1875rem;\n }\n .md\\:grid-line-x-4[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.25rem;\n }\n .md\\:grid-line-x-4[class*=\"grid-line-yfull\"] > *::after {\n top: -0.25rem;\n bottom: -0.25rem;\n }\n .md\\:grid-line-x-5[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.3125rem;\n }\n .md\\:grid-line-x-5[class*=\"grid-line-yfull\"] > *::after {\n top: -0.3125rem;\n bottom: -0.3125rem;\n }\n .md\\:grid-line-x-6[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.375rem;\n }\n .md\\:grid-line-x-6[class*=\"grid-line-yfull\"] > *::after {\n top: -0.375rem;\n bottom: -0.375rem;\n }\n .md\\:grid-line-x-7[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.4375rem;\n }\n .md\\:grid-line-x-7[class*=\"grid-line-yfull\"] > *::after {\n top: -0.4375rem;\n bottom: -0.4375rem;\n }\n .md\\:grid-line-x-8[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.5rem;\n }\n .md\\:grid-line-x-8[class*=\"grid-line-yfull\"] > *::after {\n top: -0.5rem;\n bottom: -0.5rem;\n }\n .md\\:grid-line-x-9[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.5625rem;\n }\n .md\\:grid-line-x-9[class*=\"grid-line-yfull\"] > *::after {\n top: -0.5625rem;\n bottom: -0.5625rem;\n }\n .md\\:grid-line-x-10[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.625rem;\n }\n .md\\:grid-line-x-10[class*=\"grid-line-yfull\"] > *::after {\n top: -0.625rem;\n bottom: -0.625rem;\n }\n .md\\:grid-line-x-12[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.75rem;\n }\n .md\\:grid-line-x-12[class*=\"grid-line-yfull\"] > *::after {\n top: -0.75rem;\n bottom: -0.75rem;\n }\n .md\\:grid-line-x-16[class*=\"grid-line-x-\"] > *::before {\n bottom: -1rem;\n }\n .md\\:grid-line-x-16[class*=\"grid-line-yfull\"] > *::after {\n top: -1rem;\n bottom: -1rem;\n }\n .md\\:grid-line-x-20[class*=\"grid-line-x-\"] > *::before {\n bottom: -1.25rem;\n }\n .md\\:grid-line-x-20[class*=\"grid-line-yfull\"] > *::after {\n top: -1.25rem;\n bottom: -1.25rem;\n }\n .md\\:grid-line-x-24[class*=\"grid-line-x-\"] > *::before {\n bottom: -1.5rem;\n }\n .md\\:grid-line-x-24[class*=\"grid-line-yfull\"] > *::after {\n top: -1.5rem;\n bottom: -1.5rem;\n }\n .md\\:grid-line-x-28[class*=\"grid-line-x-\"] > *::before {\n bottom: -1.75rem;\n }\n .md\\:grid-line-x-28[class*=\"grid-line-yfull\"] > *::after {\n top: -1.75rem;\n bottom: -1.75rem;\n }\n .md\\:grid-line-x-32[class*=\"grid-line-x-\"] > *::before {\n bottom: -2rem;\n }\n .md\\:grid-line-x-32[class*=\"grid-line-yfull\"] > *::after {\n top: -2rem;\n bottom: -2rem;\n }\n .md\\:grid-line-x-36[class*=\"grid-line-x-\"] > *::before {\n bottom: -2.25rem;\n }\n .md\\:grid-line-x-36[class*=\"grid-line-yfull\"] > *::after {\n top: -2.25rem;\n bottom: -2.25rem;\n }\n .md\\:grid-line-x-40[class*=\"grid-line-x-\"] > *::before {\n bottom: -2.5rem;\n }\n .md\\:grid-line-x-40[class*=\"grid-line-yfull\"] > *::after {\n top: -2.5rem;\n bottom: -2.5rem;\n }\n .md\\:grid-line-x-44[class*=\"grid-line-x-\"] > *::before {\n bottom: -2.75rem;\n }\n .md\\:grid-line-x-44[class*=\"grid-line-yfull\"] > *::after {\n top: -2.75rem;\n bottom: -2.75rem;\n }\n .md\\:grid-line-x-48[class*=\"grid-line-x-\"] > *::before {\n bottom: -3rem;\n }\n .md\\:grid-line-x-48[class*=\"grid-line-yfull\"] > *::after {\n top: -3rem;\n bottom: -3rem;\n }\n .md\\:grid-line-x-52[class*=\"grid-line-x-\"] > *::before {\n bottom: -3.25rem;\n }\n .md\\:grid-line-x-52[class*=\"grid-line-yfull\"] > *::after {\n top: -3.25rem;\n bottom: -3.25rem;\n }\n .md\\:grid-line-x-56[class*=\"grid-line-x-\"] > *::before {\n bottom: -3.5rem;\n }\n .md\\:grid-line-x-56[class*=\"grid-line-yfull\"] > *::after {\n top: -3.5rem;\n bottom: -3.5rem;\n }\n .md\\:grid-line-x-60[class*=\"grid-line-x-\"] > *::before {\n bottom: -3.75rem;\n }\n .md\\:grid-line-x-60[class*=\"grid-line-yfull\"] > *::after {\n top: -3.75rem;\n bottom: -3.75rem;\n }\n .md\\:grid-line-x-64[class*=\"grid-line-x-\"] > *::before {\n bottom: -4rem;\n }\n .md\\:grid-line-x-64[class*=\"grid-line-yfull\"] > *::after {\n top: -4rem;\n bottom: -4rem;\n }\n .md\\:grid-line-x-68[class*=\"grid-line-x-\"] > *::before {\n bottom: -4.25rem;\n }\n .md\\:grid-line-x-68[class*=\"grid-line-yfull\"] > *::after {\n top: -4.25rem;\n bottom: -4.25rem;\n }\n .md\\:grid-line-x-72[class*=\"grid-line-x-\"] > *::before {\n bottom: -4.5rem;\n }\n .md\\:grid-line-x-72[class*=\"grid-line-yfull\"] > *::after {\n top: -4.5rem;\n bottom: -4.5rem;\n }\n .md\\:grid-line-x-76[class*=\"grid-line-x-\"] > *::before {\n bottom: -4.75rem;\n }\n .md\\:grid-line-x-76[class*=\"grid-line-yfull\"] > *::after {\n top: -4.75rem;\n bottom: -4.75rem;\n }\n .md\\:grid-line-x-80[class*=\"grid-line-x-\"] > *::before {\n bottom: -5rem;\n }\n .md\\:grid-line-x-80[class*=\"grid-line-yfull\"] > *::after {\n top: -5rem;\n bottom: -5rem;\n }\n .md\\:grid-line-x-84[class*=\"grid-line-x-\"] > *::before {\n bottom: -5.25rem;\n }\n .md\\:grid-line-x-84[class*=\"grid-line-yfull\"] > *::after {\n top: -5.25rem;\n bottom: -5.25rem;\n }\n .md\\:grid-line-x-88[class*=\"grid-line-x-\"] > *::before {\n bottom: -5.5rem;\n }\n .md\\:grid-line-x-88[class*=\"grid-line-yfull\"] > *::after {\n top: -5.5rem;\n bottom: -5.5rem;\n }\n .md\\:grid-line-x-92[class*=\"grid-line-x-\"] > *::before {\n bottom: -5.75rem;\n }\n .md\\:grid-line-x-92[class*=\"grid-line-yfull\"] > *::after {\n top: -5.75rem;\n bottom: -5.75rem;\n }\n .md\\:grid-line-x-96[class*=\"grid-line-x-\"] > *::before {\n bottom: -6rem;\n }\n .md\\:grid-line-x-96[class*=\"grid-line-yfull\"] > *::after {\n top: -6rem;\n bottom: -6rem;\n }\n .md\\:grid-line-x-100[class*=\"grid-line-x-\"] > *::before {\n bottom: -6.25rem;\n }\n .md\\:grid-line-x-100[class*=\"grid-line-yfull\"] > *::after {\n top: -6.25rem;\n bottom: -6.25rem;\n }\n .md\\:grid-line-x-safe-top[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-top);\n }\n .md\\:grid-line-x-safe-top[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-top);\n bottom: -env(safe-area-inset-top);\n }\n .md\\:grid-line-x-safe-bottom[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-bottom);\n }\n .md\\:grid-line-x-safe-bottom[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-bottom);\n bottom: -env(safe-area-inset-bottom);\n }\n .md\\:grid-line-x-safe-left[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-left);\n }\n .md\\:grid-line-x-safe-left[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-left);\n bottom: -env(safe-area-inset-left);\n }\n .md\\:grid-line-x-safe-right[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-right);\n }\n .md\\:grid-line-x-safe-right[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-right);\n bottom: -env(safe-area-inset-right);\n }\n .md\\:grid-line-x-gutter[class*=\"grid-line-x-\"] > *::before {\n bottom: -var(--inner-gutter);\n }\n .md\\:grid-line-x-gutter[class*=\"grid-line-yfull\"] > *::after {\n top: -var(--inner-gutter);\n bottom: -var(--inner-gutter);\n }\n .md\\:grid-line-x-outer-gutter[class*=\"grid-line-x-\"] > *::before {\n bottom: -var(--outer-gutter, 0px);\n }\n .md\\:grid-line-x-outer-gutter[class*=\"grid-line-yfull\"] > *::after {\n top: -var(--outer-gutter, 0px);\n bottom: -var(--outer-gutter, 0px);\n }\n .md\\:grid-line-x-default[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--brand-black);\n }\n .md\\:grid-line-y-default[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--brand-black);\n }\n .md\\:grid-line-xy-default[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--brand-black);\n }\n .md\\:grid-line-xy-default[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--brand-black);\n }\n .md\\:grid-line-x-inverse[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--white);\n }\n .md\\:grid-line-y-inverse[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--white);\n }\n .md\\:grid-line-xy-inverse[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--white);\n }\n .md\\:grid-line-xy-inverse[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--white);\n }\n .md\\:grid-line-x-inverse-soft[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.3);\n }\n .md\\:grid-line-y-inverse-soft[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.3);\n }\n .md\\:grid-line-xy-inverse-soft[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.3);\n }\n .md\\:grid-line-xy-inverse-soft[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.3);\n }\n .md\\:grid-line-x-inverse-softer[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.15);\n }\n .md\\:grid-line-y-inverse-softer[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.15);\n }\n .md\\:grid-line-xy-inverse-softer[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.15);\n }\n .md\\:grid-line-xy-inverse-softer[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.15);\n }\n .md\\:grid-line-x-soft[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .15 );\n }\n .md\\:grid-line-y-soft[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .15 );\n }\n .md\\:grid-line-xy-soft[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .15 );\n }\n .md\\:grid-line-xy-soft[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .15 );\n }\n .md\\:grid-line-x-softer[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .1 );\n }\n .md\\:grid-line-y-softer[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .1 );\n }\n .md\\:grid-line-xy-softer[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .1 );\n }\n .md\\:grid-line-xy-softer[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .1 );\n }\n .md\\:grid-line-x-softest[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .05 );\n }\n .md\\:grid-line-y-softest[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .05 );\n }\n .md\\:grid-line-xy-softest[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .05 );\n }\n .md\\:grid-line-xy-softest[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .05 );\n }\n .md\\:grid-line-x-accent[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--brand-green);\n }\n .md\\:grid-line-y-accent[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--brand-green);\n }\n .md\\:grid-line-xy-accent[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--brand-green);\n }\n .md\\:grid-line-xy-accent[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--brand-green);\n }\n .md\\:grid-line-x-error[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--red-700);\n }\n .md\\:grid-line-y-error[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--red-700);\n }\n .md\\:grid-line-xy-error[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--red-700);\n }\n .md\\:grid-line-xy-error[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--red-700);\n }\n .md\\:grid-line-x-current[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: currentColor;\n }\n .md\\:grid-line-y-current[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: currentColor;\n }\n .md\\:grid-line-xy-current[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: currentColor;\n }\n .md\\:grid-line-xy-current[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: currentColor;\n }\n .md\\:grid-line-x-transparent[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--transparent);\n }\n .md\\:grid-line-y-transparent[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--transparent);\n }\n .md\\:grid-line-xy-transparent[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--transparent);\n }\n .md\\:grid-line-xy-transparent[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--transparent);\n }\n .md\\:grid-cols-1[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .md\\:grid-cols-1[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: 0;\n inset-inline-end: 0;\n }\n .md\\:grid-cols-1[class*=\"grid-line-x\"] > *:nth-child(1n+1)::before {\n inset-inline-end: 0;\n }\n .md\\:grid-cols-1[class*=\"grid-line-x\"] > *:nth-child(1n+1):nth-last-child(-n+1)::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-1[class*=\"grid-line-x\"] > *:nth-child(1n+1):nth-last-child(-n+1) ~ *::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-2[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .md\\:grid-cols-2[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .md\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+1)::before {\n inset-inline-start: 0;\n }\n .md\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+2)::before {\n inset-inline-end: 0;\n }\n .md\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+1):nth-last-child(-n+2)::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+1):nth-last-child(-n+2) ~ *::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .md\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(2n+2)::after {\n border-inline-end-width: 0;\n }\n .md\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+2)::after {\n top: 0;\n }\n .md\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(2n+1):nth-last-child(-n+2)::after {\n bottom: 0;\n }\n .md\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(2n+1):nth-last-child(-n+2) ~ li::after {\n bottom: 0;\n }\n .md\\:grid-cols-3[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .md\\:grid-cols-3[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .md\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+1)::before {\n inset-inline-start: 0;\n }\n .md\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+3)::before {\n inset-inline-end: 0;\n }\n .md\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+1):nth-last-child(-n+3)::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+1):nth-last-child(-n+3) ~ *::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .md\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(3n+3)::after {\n border-inline-end-width: 0;\n }\n .md\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+3)::after {\n top: 0;\n }\n .md\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(3n+1):nth-last-child(-n+3)::after {\n bottom: 0;\n }\n .md\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(3n+1):nth-last-child(-n+3) ~ li::after {\n bottom: 0;\n }\n .md\\:grid-cols-4[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .md\\:grid-cols-4[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .md\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+1)::before {\n inset-inline-start: 0;\n }\n .md\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+4)::before {\n inset-inline-end: 0;\n }\n .md\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+1):nth-last-child(-n+4)::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+1):nth-last-child(-n+4) ~ *::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .md\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(4n+4)::after {\n border-inline-end-width: 0;\n }\n .md\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+4)::after {\n top: 0;\n }\n .md\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(4n+1):nth-last-child(-n+4)::after {\n bottom: 0;\n }\n .md\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(4n+1):nth-last-child(-n+4) ~ li::after {\n bottom: 0;\n }\n .md\\:grid-cols-5[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .md\\:grid-cols-5[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .md\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+1)::before {\n inset-inline-start: 0;\n }\n .md\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+5)::before {\n inset-inline-end: 0;\n }\n .md\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+1):nth-last-child(-n+5)::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+1):nth-last-child(-n+5) ~ *::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .md\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(5n+5)::after {\n border-inline-end-width: 0;\n }\n .md\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+5)::after {\n top: 0;\n }\n .md\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(5n+1):nth-last-child(-n+5)::after {\n bottom: 0;\n }\n .md\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(5n+1):nth-last-child(-n+5) ~ li::after {\n bottom: 0;\n }\n .md\\:grid-cols-6[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .md\\:grid-cols-6[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .md\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+1)::before {\n inset-inline-start: 0;\n }\n .md\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+6)::before {\n inset-inline-end: 0;\n }\n .md\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+1):nth-last-child(-n+6)::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+1):nth-last-child(-n+6) ~ *::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .md\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(6n+6)::after {\n border-inline-end-width: 0;\n }\n .md\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+6)::after {\n top: 0;\n }\n .md\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(6n+1):nth-last-child(-n+6)::after {\n bottom: 0;\n }\n .md\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(6n+1):nth-last-child(-n+6) ~ li::after {\n bottom: 0;\n }\n .md\\:grid-cols-7[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .md\\:grid-cols-7[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .md\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+1)::before {\n inset-inline-start: 0;\n }\n .md\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+7)::before {\n inset-inline-end: 0;\n }\n .md\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+1):nth-last-child(-n+7)::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+1):nth-last-child(-n+7) ~ *::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .md\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(7n+7)::after {\n border-inline-end-width: 0;\n }\n .md\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+7)::after {\n top: 0;\n }\n .md\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(7n+1):nth-last-child(-n+7)::after {\n bottom: 0;\n }\n .md\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(7n+1):nth-last-child(-n+7) ~ li::after {\n bottom: 0;\n }\n .md\\:grid-cols-8[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .md\\:grid-cols-8[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .md\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+1)::before {\n inset-inline-start: 0;\n }\n .md\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+8)::before {\n inset-inline-end: 0;\n }\n .md\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+1):nth-last-child(-n+8)::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+1):nth-last-child(-n+8) ~ *::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .md\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(8n+8)::after {\n border-inline-end-width: 0;\n }\n .md\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+8)::after {\n top: 0;\n }\n .md\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(8n+1):nth-last-child(-n+8)::after {\n bottom: 0;\n }\n .md\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(8n+1):nth-last-child(-n+8) ~ li::after {\n bottom: 0;\n }\n .md\\:grid-cols-9[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .md\\:grid-cols-9[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .md\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+1)::before {\n inset-inline-start: 0;\n }\n .md\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+9)::before {\n inset-inline-end: 0;\n }\n .md\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+1):nth-last-child(-n+9)::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+1):nth-last-child(-n+9) ~ *::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .md\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(9n+9)::after {\n border-inline-end-width: 0;\n }\n .md\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+9)::after {\n top: 0;\n }\n .md\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(9n+1):nth-last-child(-n+9)::after {\n bottom: 0;\n }\n .md\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(9n+1):nth-last-child(-n+9) ~ li::after {\n bottom: 0;\n }\n .md\\:grid-cols-10[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .md\\:grid-cols-10[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .md\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+1)::before {\n inset-inline-start: 0;\n }\n .md\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+10)::before {\n inset-inline-end: 0;\n }\n .md\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+1):nth-last-child(-n+10)::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+1):nth-last-child(-n+10) ~ *::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .md\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(10n+10)::after {\n border-inline-end-width: 0;\n }\n .md\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+10)::after {\n top: 0;\n }\n .md\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(10n+1):nth-last-child(-n+10)::after {\n bottom: 0;\n }\n .md\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(10n+1):nth-last-child(-n+10) ~ li::after {\n bottom: 0;\n }\n .md\\:grid-cols-11[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .md\\:grid-cols-11[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .md\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+1)::before {\n inset-inline-start: 0;\n }\n .md\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+11)::before {\n inset-inline-end: 0;\n }\n .md\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+1):nth-last-child(-n+11)::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+1):nth-last-child(-n+11) ~ *::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .md\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(11n+11)::after {\n border-inline-end-width: 0;\n }\n .md\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+11)::after {\n top: 0;\n }\n .md\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(11n+1):nth-last-child(-n+11)::after {\n bottom: 0;\n }\n .md\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(11n+1):nth-last-child(-n+11) ~ li::after {\n bottom: 0;\n }\n .md\\:grid-cols-12[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .md\\:grid-cols-12[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .md\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+1)::before {\n inset-inline-start: 0;\n }\n .md\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+12)::before {\n inset-inline-end: 0;\n }\n .md\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+1):nth-last-child(-n+12)::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+1):nth-last-child(-n+12) ~ *::before {\n border-bottom-width: 0;\n }\n .md\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .md\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(12n+12)::after {\n border-inline-end-width: 0;\n }\n .md\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+12)::after {\n top: 0;\n }\n .md\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(12n+1):nth-last-child(-n+12)::after {\n bottom: 0;\n }\n .md\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(12n+1):nth-last-child(-n+12) ~ li::after {\n bottom: 0;\n }\n}\n@media (min-width: 900px) {\n [class*=\"grid-line-\"] > * {\n position: relative;\n }\n [class*=\"grid-line-\"] > *::before, [class*=\"grid-line-\"] > *::after {\n content: attr(👻);\n position: absolute;\n z-index: 0;\n pointer-events: none;\n }\n .lg\\:grid-line-x > *::before {\n content: attr(👻);\n inset-inline-start: 0;\n inset-inline-end: 0;\n top: 0;\n bottom: calc(var(--inner-gutter) / -2);\n border-top: 0 solid transparent;\n border-bottom: 0 solid transparent;\n }\n .lg\\:grid-line-xfull > *::before {\n content: attr(👻);\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: 0;\n bottom: calc(var(--inner-gutter) / -2);\n border-top: 0 solid transparent;\n border-bottom: 0 solid transparent;\n }\n .lg\\:grid-line-x-0 > *::before {\n content: none;\n }\n .lg\\:grid-line-y > *::after {\n content: attr(👻);\n inset-inline-start: 0;\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: 0;\n bottom: 0;\n border-inline-start: 0 solid transparent;\n border-inline-end: 0 solid transparent;\n }\n .lg\\:grid-line-yfull > *::after {\n content: attr(👻);\n inset-inline-start: 0;\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: calc(var(--inner-gutter) / -1);\n bottom: 0;\n border-inline-start: 0 solid transparent;\n border-inline-end: 0 solid transparent;\n }\n .lg\\:grid-line-yfull[class*=\"grid-line-x\"] > *::after {\n inset-inline-start: 0;\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: calc(var(--inner-gutter) / -2);\n bottom: calc(var(--inner-gutter) / -2);\n border-inline-start: 0 solid transparent;\n border-inline-end: 0 solid transparent;\n }\n .lg\\:grid-line-y-0 > *::after {\n content: none;\n }\n .lg\\:grid-line-x-0[class*=\"grid-line-x-\"] > *::before {\n bottom: -0rem;\n }\n .lg\\:grid-line-x-0[class*=\"grid-line-yfull\"] > *::after {\n top: -0rem;\n bottom: -0rem;\n }\n .lg\\:grid-line-x-1[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.0625rem;\n }\n .lg\\:grid-line-x-1[class*=\"grid-line-yfull\"] > *::after {\n top: -0.0625rem;\n bottom: -0.0625rem;\n }\n .lg\\:grid-line-x-2[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.125rem;\n }\n .lg\\:grid-line-x-2[class*=\"grid-line-yfull\"] > *::after {\n top: -0.125rem;\n bottom: -0.125rem;\n }\n .lg\\:grid-line-x-3[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.1875rem;\n }\n .lg\\:grid-line-x-3[class*=\"grid-line-yfull\"] > *::after {\n top: -0.1875rem;\n bottom: -0.1875rem;\n }\n .lg\\:grid-line-x-4[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.25rem;\n }\n .lg\\:grid-line-x-4[class*=\"grid-line-yfull\"] > *::after {\n top: -0.25rem;\n bottom: -0.25rem;\n }\n .lg\\:grid-line-x-5[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.3125rem;\n }\n .lg\\:grid-line-x-5[class*=\"grid-line-yfull\"] > *::after {\n top: -0.3125rem;\n bottom: -0.3125rem;\n }\n .lg\\:grid-line-x-6[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.375rem;\n }\n .lg\\:grid-line-x-6[class*=\"grid-line-yfull\"] > *::after {\n top: -0.375rem;\n bottom: -0.375rem;\n }\n .lg\\:grid-line-x-7[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.4375rem;\n }\n .lg\\:grid-line-x-7[class*=\"grid-line-yfull\"] > *::after {\n top: -0.4375rem;\n bottom: -0.4375rem;\n }\n .lg\\:grid-line-x-8[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.5rem;\n }\n .lg\\:grid-line-x-8[class*=\"grid-line-yfull\"] > *::after {\n top: -0.5rem;\n bottom: -0.5rem;\n }\n .lg\\:grid-line-x-9[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.5625rem;\n }\n .lg\\:grid-line-x-9[class*=\"grid-line-yfull\"] > *::after {\n top: -0.5625rem;\n bottom: -0.5625rem;\n }\n .lg\\:grid-line-x-10[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.625rem;\n }\n .lg\\:grid-line-x-10[class*=\"grid-line-yfull\"] > *::after {\n top: -0.625rem;\n bottom: -0.625rem;\n }\n .lg\\:grid-line-x-12[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.75rem;\n }\n .lg\\:grid-line-x-12[class*=\"grid-line-yfull\"] > *::after {\n top: -0.75rem;\n bottom: -0.75rem;\n }\n .lg\\:grid-line-x-16[class*=\"grid-line-x-\"] > *::before {\n bottom: -1rem;\n }\n .lg\\:grid-line-x-16[class*=\"grid-line-yfull\"] > *::after {\n top: -1rem;\n bottom: -1rem;\n }\n .lg\\:grid-line-x-20[class*=\"grid-line-x-\"] > *::before {\n bottom: -1.25rem;\n }\n .lg\\:grid-line-x-20[class*=\"grid-line-yfull\"] > *::after {\n top: -1.25rem;\n bottom: -1.25rem;\n }\n .lg\\:grid-line-x-24[class*=\"grid-line-x-\"] > *::before {\n bottom: -1.5rem;\n }\n .lg\\:grid-line-x-24[class*=\"grid-line-yfull\"] > *::after {\n top: -1.5rem;\n bottom: -1.5rem;\n }\n .lg\\:grid-line-x-28[class*=\"grid-line-x-\"] > *::before {\n bottom: -1.75rem;\n }\n .lg\\:grid-line-x-28[class*=\"grid-line-yfull\"] > *::after {\n top: -1.75rem;\n bottom: -1.75rem;\n }\n .lg\\:grid-line-x-32[class*=\"grid-line-x-\"] > *::before {\n bottom: -2rem;\n }\n .lg\\:grid-line-x-32[class*=\"grid-line-yfull\"] > *::after {\n top: -2rem;\n bottom: -2rem;\n }\n .lg\\:grid-line-x-36[class*=\"grid-line-x-\"] > *::before {\n bottom: -2.25rem;\n }\n .lg\\:grid-line-x-36[class*=\"grid-line-yfull\"] > *::after {\n top: -2.25rem;\n bottom: -2.25rem;\n }\n .lg\\:grid-line-x-40[class*=\"grid-line-x-\"] > *::before {\n bottom: -2.5rem;\n }\n .lg\\:grid-line-x-40[class*=\"grid-line-yfull\"] > *::after {\n top: -2.5rem;\n bottom: -2.5rem;\n }\n .lg\\:grid-line-x-44[class*=\"grid-line-x-\"] > *::before {\n bottom: -2.75rem;\n }\n .lg\\:grid-line-x-44[class*=\"grid-line-yfull\"] > *::after {\n top: -2.75rem;\n bottom: -2.75rem;\n }\n .lg\\:grid-line-x-48[class*=\"grid-line-x-\"] > *::before {\n bottom: -3rem;\n }\n .lg\\:grid-line-x-48[class*=\"grid-line-yfull\"] > *::after {\n top: -3rem;\n bottom: -3rem;\n }\n .lg\\:grid-line-x-52[class*=\"grid-line-x-\"] > *::before {\n bottom: -3.25rem;\n }\n .lg\\:grid-line-x-52[class*=\"grid-line-yfull\"] > *::after {\n top: -3.25rem;\n bottom: -3.25rem;\n }\n .lg\\:grid-line-x-56[class*=\"grid-line-x-\"] > *::before {\n bottom: -3.5rem;\n }\n .lg\\:grid-line-x-56[class*=\"grid-line-yfull\"] > *::after {\n top: -3.5rem;\n bottom: -3.5rem;\n }\n .lg\\:grid-line-x-60[class*=\"grid-line-x-\"] > *::before {\n bottom: -3.75rem;\n }\n .lg\\:grid-line-x-60[class*=\"grid-line-yfull\"] > *::after {\n top: -3.75rem;\n bottom: -3.75rem;\n }\n .lg\\:grid-line-x-64[class*=\"grid-line-x-\"] > *::before {\n bottom: -4rem;\n }\n .lg\\:grid-line-x-64[class*=\"grid-line-yfull\"] > *::after {\n top: -4rem;\n bottom: -4rem;\n }\n .lg\\:grid-line-x-68[class*=\"grid-line-x-\"] > *::before {\n bottom: -4.25rem;\n }\n .lg\\:grid-line-x-68[class*=\"grid-line-yfull\"] > *::after {\n top: -4.25rem;\n bottom: -4.25rem;\n }\n .lg\\:grid-line-x-72[class*=\"grid-line-x-\"] > *::before {\n bottom: -4.5rem;\n }\n .lg\\:grid-line-x-72[class*=\"grid-line-yfull\"] > *::after {\n top: -4.5rem;\n bottom: -4.5rem;\n }\n .lg\\:grid-line-x-76[class*=\"grid-line-x-\"] > *::before {\n bottom: -4.75rem;\n }\n .lg\\:grid-line-x-76[class*=\"grid-line-yfull\"] > *::after {\n top: -4.75rem;\n bottom: -4.75rem;\n }\n .lg\\:grid-line-x-80[class*=\"grid-line-x-\"] > *::before {\n bottom: -5rem;\n }\n .lg\\:grid-line-x-80[class*=\"grid-line-yfull\"] > *::after {\n top: -5rem;\n bottom: -5rem;\n }\n .lg\\:grid-line-x-84[class*=\"grid-line-x-\"] > *::before {\n bottom: -5.25rem;\n }\n .lg\\:grid-line-x-84[class*=\"grid-line-yfull\"] > *::after {\n top: -5.25rem;\n bottom: -5.25rem;\n }\n .lg\\:grid-line-x-88[class*=\"grid-line-x-\"] > *::before {\n bottom: -5.5rem;\n }\n .lg\\:grid-line-x-88[class*=\"grid-line-yfull\"] > *::after {\n top: -5.5rem;\n bottom: -5.5rem;\n }\n .lg\\:grid-line-x-92[class*=\"grid-line-x-\"] > *::before {\n bottom: -5.75rem;\n }\n .lg\\:grid-line-x-92[class*=\"grid-line-yfull\"] > *::after {\n top: -5.75rem;\n bottom: -5.75rem;\n }\n .lg\\:grid-line-x-96[class*=\"grid-line-x-\"] > *::before {\n bottom: -6rem;\n }\n .lg\\:grid-line-x-96[class*=\"grid-line-yfull\"] > *::after {\n top: -6rem;\n bottom: -6rem;\n }\n .lg\\:grid-line-x-100[class*=\"grid-line-x-\"] > *::before {\n bottom: -6.25rem;\n }\n .lg\\:grid-line-x-100[class*=\"grid-line-yfull\"] > *::after {\n top: -6.25rem;\n bottom: -6.25rem;\n }\n .lg\\:grid-line-x-safe-top[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-top);\n }\n .lg\\:grid-line-x-safe-top[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-top);\n bottom: -env(safe-area-inset-top);\n }\n .lg\\:grid-line-x-safe-bottom[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-bottom);\n }\n .lg\\:grid-line-x-safe-bottom[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-bottom);\n bottom: -env(safe-area-inset-bottom);\n }\n .lg\\:grid-line-x-safe-left[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-left);\n }\n .lg\\:grid-line-x-safe-left[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-left);\n bottom: -env(safe-area-inset-left);\n }\n .lg\\:grid-line-x-safe-right[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-right);\n }\n .lg\\:grid-line-x-safe-right[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-right);\n bottom: -env(safe-area-inset-right);\n }\n .lg\\:grid-line-x-gutter[class*=\"grid-line-x-\"] > *::before {\n bottom: -var(--inner-gutter);\n }\n .lg\\:grid-line-x-gutter[class*=\"grid-line-yfull\"] > *::after {\n top: -var(--inner-gutter);\n bottom: -var(--inner-gutter);\n }\n .lg\\:grid-line-x-outer-gutter[class*=\"grid-line-x-\"] > *::before {\n bottom: -var(--outer-gutter, 0px);\n }\n .lg\\:grid-line-x-outer-gutter[class*=\"grid-line-yfull\"] > *::after {\n top: -var(--outer-gutter, 0px);\n bottom: -var(--outer-gutter, 0px);\n }\n .lg\\:grid-line-x-default[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--brand-black);\n }\n .lg\\:grid-line-y-default[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--brand-black);\n }\n .lg\\:grid-line-xy-default[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--brand-black);\n }\n .lg\\:grid-line-xy-default[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--brand-black);\n }\n .lg\\:grid-line-x-inverse[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--white);\n }\n .lg\\:grid-line-y-inverse[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--white);\n }\n .lg\\:grid-line-xy-inverse[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--white);\n }\n .lg\\:grid-line-xy-inverse[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--white);\n }\n .lg\\:grid-line-x-inverse-soft[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.3);\n }\n .lg\\:grid-line-y-inverse-soft[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.3);\n }\n .lg\\:grid-line-xy-inverse-soft[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.3);\n }\n .lg\\:grid-line-xy-inverse-soft[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.3);\n }\n .lg\\:grid-line-x-inverse-softer[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.15);\n }\n .lg\\:grid-line-y-inverse-softer[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.15);\n }\n .lg\\:grid-line-xy-inverse-softer[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.15);\n }\n .lg\\:grid-line-xy-inverse-softer[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.15);\n }\n .lg\\:grid-line-x-soft[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .15 );\n }\n .lg\\:grid-line-y-soft[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .15 );\n }\n .lg\\:grid-line-xy-soft[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .15 );\n }\n .lg\\:grid-line-xy-soft[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .15 );\n }\n .lg\\:grid-line-x-softer[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .1 );\n }\n .lg\\:grid-line-y-softer[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .1 );\n }\n .lg\\:grid-line-xy-softer[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .1 );\n }\n .lg\\:grid-line-xy-softer[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .1 );\n }\n .lg\\:grid-line-x-softest[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .05 );\n }\n .lg\\:grid-line-y-softest[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .05 );\n }\n .lg\\:grid-line-xy-softest[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .05 );\n }\n .lg\\:grid-line-xy-softest[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .05 );\n }\n .lg\\:grid-line-x-accent[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--brand-green);\n }\n .lg\\:grid-line-y-accent[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--brand-green);\n }\n .lg\\:grid-line-xy-accent[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--brand-green);\n }\n .lg\\:grid-line-xy-accent[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--brand-green);\n }\n .lg\\:grid-line-x-error[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--red-700);\n }\n .lg\\:grid-line-y-error[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--red-700);\n }\n .lg\\:grid-line-xy-error[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--red-700);\n }\n .lg\\:grid-line-xy-error[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--red-700);\n }\n .lg\\:grid-line-x-current[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: currentColor;\n }\n .lg\\:grid-line-y-current[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: currentColor;\n }\n .lg\\:grid-line-xy-current[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: currentColor;\n }\n .lg\\:grid-line-xy-current[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: currentColor;\n }\n .lg\\:grid-line-x-transparent[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--transparent);\n }\n .lg\\:grid-line-y-transparent[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--transparent);\n }\n .lg\\:grid-line-xy-transparent[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--transparent);\n }\n .lg\\:grid-line-xy-transparent[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--transparent);\n }\n .lg\\:grid-cols-1[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .lg\\:grid-cols-1[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: 0;\n inset-inline-end: 0;\n }\n .lg\\:grid-cols-1[class*=\"grid-line-x\"] > *:nth-child(1n+1)::before {\n inset-inline-end: 0;\n }\n .lg\\:grid-cols-1[class*=\"grid-line-x\"] > *:nth-child(1n+1):nth-last-child(-n+1)::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-1[class*=\"grid-line-x\"] > *:nth-child(1n+1):nth-last-child(-n+1) ~ *::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-2[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .lg\\:grid-cols-2[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .lg\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+1)::before {\n inset-inline-start: 0;\n }\n .lg\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+2)::before {\n inset-inline-end: 0;\n }\n .lg\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+1):nth-last-child(-n+2)::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+1):nth-last-child(-n+2) ~ *::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .lg\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(2n+2)::after {\n border-inline-end-width: 0;\n }\n .lg\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+2)::after {\n top: 0;\n }\n .lg\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(2n+1):nth-last-child(-n+2)::after {\n bottom: 0;\n }\n .lg\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(2n+1):nth-last-child(-n+2) ~ li::after {\n bottom: 0;\n }\n .lg\\:grid-cols-3[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .lg\\:grid-cols-3[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .lg\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+1)::before {\n inset-inline-start: 0;\n }\n .lg\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+3)::before {\n inset-inline-end: 0;\n }\n .lg\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+1):nth-last-child(-n+3)::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+1):nth-last-child(-n+3) ~ *::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .lg\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(3n+3)::after {\n border-inline-end-width: 0;\n }\n .lg\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+3)::after {\n top: 0;\n }\n .lg\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(3n+1):nth-last-child(-n+3)::after {\n bottom: 0;\n }\n .lg\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(3n+1):nth-last-child(-n+3) ~ li::after {\n bottom: 0;\n }\n .lg\\:grid-cols-4[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .lg\\:grid-cols-4[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .lg\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+1)::before {\n inset-inline-start: 0;\n }\n .lg\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+4)::before {\n inset-inline-end: 0;\n }\n .lg\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+1):nth-last-child(-n+4)::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+1):nth-last-child(-n+4) ~ *::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .lg\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(4n+4)::after {\n border-inline-end-width: 0;\n }\n .lg\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+4)::after {\n top: 0;\n }\n .lg\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(4n+1):nth-last-child(-n+4)::after {\n bottom: 0;\n }\n .lg\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(4n+1):nth-last-child(-n+4) ~ li::after {\n bottom: 0;\n }\n .lg\\:grid-cols-5[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .lg\\:grid-cols-5[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .lg\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+1)::before {\n inset-inline-start: 0;\n }\n .lg\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+5)::before {\n inset-inline-end: 0;\n }\n .lg\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+1):nth-last-child(-n+5)::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+1):nth-last-child(-n+5) ~ *::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .lg\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(5n+5)::after {\n border-inline-end-width: 0;\n }\n .lg\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+5)::after {\n top: 0;\n }\n .lg\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(5n+1):nth-last-child(-n+5)::after {\n bottom: 0;\n }\n .lg\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(5n+1):nth-last-child(-n+5) ~ li::after {\n bottom: 0;\n }\n .lg\\:grid-cols-6[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .lg\\:grid-cols-6[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .lg\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+1)::before {\n inset-inline-start: 0;\n }\n .lg\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+6)::before {\n inset-inline-end: 0;\n }\n .lg\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+1):nth-last-child(-n+6)::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+1):nth-last-child(-n+6) ~ *::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .lg\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(6n+6)::after {\n border-inline-end-width: 0;\n }\n .lg\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+6)::after {\n top: 0;\n }\n .lg\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(6n+1):nth-last-child(-n+6)::after {\n bottom: 0;\n }\n .lg\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(6n+1):nth-last-child(-n+6) ~ li::after {\n bottom: 0;\n }\n .lg\\:grid-cols-7[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .lg\\:grid-cols-7[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .lg\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+1)::before {\n inset-inline-start: 0;\n }\n .lg\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+7)::before {\n inset-inline-end: 0;\n }\n .lg\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+1):nth-last-child(-n+7)::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+1):nth-last-child(-n+7) ~ *::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .lg\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(7n+7)::after {\n border-inline-end-width: 0;\n }\n .lg\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+7)::after {\n top: 0;\n }\n .lg\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(7n+1):nth-last-child(-n+7)::after {\n bottom: 0;\n }\n .lg\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(7n+1):nth-last-child(-n+7) ~ li::after {\n bottom: 0;\n }\n .lg\\:grid-cols-8[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .lg\\:grid-cols-8[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .lg\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+1)::before {\n inset-inline-start: 0;\n }\n .lg\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+8)::before {\n inset-inline-end: 0;\n }\n .lg\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+1):nth-last-child(-n+8)::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+1):nth-last-child(-n+8) ~ *::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .lg\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(8n+8)::after {\n border-inline-end-width: 0;\n }\n .lg\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+8)::after {\n top: 0;\n }\n .lg\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(8n+1):nth-last-child(-n+8)::after {\n bottom: 0;\n }\n .lg\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(8n+1):nth-last-child(-n+8) ~ li::after {\n bottom: 0;\n }\n .lg\\:grid-cols-9[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .lg\\:grid-cols-9[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .lg\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+1)::before {\n inset-inline-start: 0;\n }\n .lg\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+9)::before {\n inset-inline-end: 0;\n }\n .lg\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+1):nth-last-child(-n+9)::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+1):nth-last-child(-n+9) ~ *::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .lg\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(9n+9)::after {\n border-inline-end-width: 0;\n }\n .lg\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+9)::after {\n top: 0;\n }\n .lg\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(9n+1):nth-last-child(-n+9)::after {\n bottom: 0;\n }\n .lg\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(9n+1):nth-last-child(-n+9) ~ li::after {\n bottom: 0;\n }\n .lg\\:grid-cols-10[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .lg\\:grid-cols-10[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .lg\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+1)::before {\n inset-inline-start: 0;\n }\n .lg\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+10)::before {\n inset-inline-end: 0;\n }\n .lg\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+1):nth-last-child(-n+10)::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+1):nth-last-child(-n+10) ~ *::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .lg\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(10n+10)::after {\n border-inline-end-width: 0;\n }\n .lg\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+10)::after {\n top: 0;\n }\n .lg\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(10n+1):nth-last-child(-n+10)::after {\n bottom: 0;\n }\n .lg\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(10n+1):nth-last-child(-n+10) ~ li::after {\n bottom: 0;\n }\n .lg\\:grid-cols-11[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .lg\\:grid-cols-11[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .lg\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+1)::before {\n inset-inline-start: 0;\n }\n .lg\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+11)::before {\n inset-inline-end: 0;\n }\n .lg\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+1):nth-last-child(-n+11)::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+1):nth-last-child(-n+11) ~ *::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .lg\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(11n+11)::after {\n border-inline-end-width: 0;\n }\n .lg\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+11)::after {\n top: 0;\n }\n .lg\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(11n+1):nth-last-child(-n+11)::after {\n bottom: 0;\n }\n .lg\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(11n+1):nth-last-child(-n+11) ~ li::after {\n bottom: 0;\n }\n .lg\\:grid-cols-12[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .lg\\:grid-cols-12[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .lg\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+1)::before {\n inset-inline-start: 0;\n }\n .lg\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+12)::before {\n inset-inline-end: 0;\n }\n .lg\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+1):nth-last-child(-n+12)::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+1):nth-last-child(-n+12) ~ *::before {\n border-bottom-width: 0;\n }\n .lg\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .lg\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(12n+12)::after {\n border-inline-end-width: 0;\n }\n .lg\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+12)::after {\n top: 0;\n }\n .lg\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(12n+1):nth-last-child(-n+12)::after {\n bottom: 0;\n }\n .lg\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(12n+1):nth-last-child(-n+12) ~ li::after {\n bottom: 0;\n }\n}\n@media (min-width: 1024px) {\n [class*=\"grid-line-\"] > * {\n position: relative;\n }\n [class*=\"grid-line-\"] > *::before, [class*=\"grid-line-\"] > *::after {\n content: attr(👻);\n position: absolute;\n z-index: 0;\n pointer-events: none;\n }\n .xl\\:grid-line-x > *::before {\n content: attr(👻);\n inset-inline-start: 0;\n inset-inline-end: 0;\n top: 0;\n bottom: calc(var(--inner-gutter) / -2);\n border-top: 0 solid transparent;\n border-bottom: 0 solid transparent;\n }\n .xl\\:grid-line-xfull > *::before {\n content: attr(👻);\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: 0;\n bottom: calc(var(--inner-gutter) / -2);\n border-top: 0 solid transparent;\n border-bottom: 0 solid transparent;\n }\n .xl\\:grid-line-x-0 > *::before {\n content: none;\n }\n .xl\\:grid-line-y > *::after {\n content: attr(👻);\n inset-inline-start: 0;\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: 0;\n bottom: 0;\n border-inline-start: 0 solid transparent;\n border-inline-end: 0 solid transparent;\n }\n .xl\\:grid-line-yfull > *::after {\n content: attr(👻);\n inset-inline-start: 0;\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: calc(var(--inner-gutter) / -1);\n bottom: 0;\n border-inline-start: 0 solid transparent;\n border-inline-end: 0 solid transparent;\n }\n .xl\\:grid-line-yfull[class*=\"grid-line-x\"] > *::after {\n inset-inline-start: 0;\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: calc(var(--inner-gutter) / -2);\n bottom: calc(var(--inner-gutter) / -2);\n border-inline-start: 0 solid transparent;\n border-inline-end: 0 solid transparent;\n }\n .xl\\:grid-line-y-0 > *::after {\n content: none;\n }\n .xl\\:grid-line-x-0[class*=\"grid-line-x-\"] > *::before {\n bottom: -0rem;\n }\n .xl\\:grid-line-x-0[class*=\"grid-line-yfull\"] > *::after {\n top: -0rem;\n bottom: -0rem;\n }\n .xl\\:grid-line-x-1[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.0625rem;\n }\n .xl\\:grid-line-x-1[class*=\"grid-line-yfull\"] > *::after {\n top: -0.0625rem;\n bottom: -0.0625rem;\n }\n .xl\\:grid-line-x-2[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.125rem;\n }\n .xl\\:grid-line-x-2[class*=\"grid-line-yfull\"] > *::after {\n top: -0.125rem;\n bottom: -0.125rem;\n }\n .xl\\:grid-line-x-3[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.1875rem;\n }\n .xl\\:grid-line-x-3[class*=\"grid-line-yfull\"] > *::after {\n top: -0.1875rem;\n bottom: -0.1875rem;\n }\n .xl\\:grid-line-x-4[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.25rem;\n }\n .xl\\:grid-line-x-4[class*=\"grid-line-yfull\"] > *::after {\n top: -0.25rem;\n bottom: -0.25rem;\n }\n .xl\\:grid-line-x-5[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.3125rem;\n }\n .xl\\:grid-line-x-5[class*=\"grid-line-yfull\"] > *::after {\n top: -0.3125rem;\n bottom: -0.3125rem;\n }\n .xl\\:grid-line-x-6[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.375rem;\n }\n .xl\\:grid-line-x-6[class*=\"grid-line-yfull\"] > *::after {\n top: -0.375rem;\n bottom: -0.375rem;\n }\n .xl\\:grid-line-x-7[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.4375rem;\n }\n .xl\\:grid-line-x-7[class*=\"grid-line-yfull\"] > *::after {\n top: -0.4375rem;\n bottom: -0.4375rem;\n }\n .xl\\:grid-line-x-8[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.5rem;\n }\n .xl\\:grid-line-x-8[class*=\"grid-line-yfull\"] > *::after {\n top: -0.5rem;\n bottom: -0.5rem;\n }\n .xl\\:grid-line-x-9[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.5625rem;\n }\n .xl\\:grid-line-x-9[class*=\"grid-line-yfull\"] > *::after {\n top: -0.5625rem;\n bottom: -0.5625rem;\n }\n .xl\\:grid-line-x-10[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.625rem;\n }\n .xl\\:grid-line-x-10[class*=\"grid-line-yfull\"] > *::after {\n top: -0.625rem;\n bottom: -0.625rem;\n }\n .xl\\:grid-line-x-12[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.75rem;\n }\n .xl\\:grid-line-x-12[class*=\"grid-line-yfull\"] > *::after {\n top: -0.75rem;\n bottom: -0.75rem;\n }\n .xl\\:grid-line-x-16[class*=\"grid-line-x-\"] > *::before {\n bottom: -1rem;\n }\n .xl\\:grid-line-x-16[class*=\"grid-line-yfull\"] > *::after {\n top: -1rem;\n bottom: -1rem;\n }\n .xl\\:grid-line-x-20[class*=\"grid-line-x-\"] > *::before {\n bottom: -1.25rem;\n }\n .xl\\:grid-line-x-20[class*=\"grid-line-yfull\"] > *::after {\n top: -1.25rem;\n bottom: -1.25rem;\n }\n .xl\\:grid-line-x-24[class*=\"grid-line-x-\"] > *::before {\n bottom: -1.5rem;\n }\n .xl\\:grid-line-x-24[class*=\"grid-line-yfull\"] > *::after {\n top: -1.5rem;\n bottom: -1.5rem;\n }\n .xl\\:grid-line-x-28[class*=\"grid-line-x-\"] > *::before {\n bottom: -1.75rem;\n }\n .xl\\:grid-line-x-28[class*=\"grid-line-yfull\"] > *::after {\n top: -1.75rem;\n bottom: -1.75rem;\n }\n .xl\\:grid-line-x-32[class*=\"grid-line-x-\"] > *::before {\n bottom: -2rem;\n }\n .xl\\:grid-line-x-32[class*=\"grid-line-yfull\"] > *::after {\n top: -2rem;\n bottom: -2rem;\n }\n .xl\\:grid-line-x-36[class*=\"grid-line-x-\"] > *::before {\n bottom: -2.25rem;\n }\n .xl\\:grid-line-x-36[class*=\"grid-line-yfull\"] > *::after {\n top: -2.25rem;\n bottom: -2.25rem;\n }\n .xl\\:grid-line-x-40[class*=\"grid-line-x-\"] > *::before {\n bottom: -2.5rem;\n }\n .xl\\:grid-line-x-40[class*=\"grid-line-yfull\"] > *::after {\n top: -2.5rem;\n bottom: -2.5rem;\n }\n .xl\\:grid-line-x-44[class*=\"grid-line-x-\"] > *::before {\n bottom: -2.75rem;\n }\n .xl\\:grid-line-x-44[class*=\"grid-line-yfull\"] > *::after {\n top: -2.75rem;\n bottom: -2.75rem;\n }\n .xl\\:grid-line-x-48[class*=\"grid-line-x-\"] > *::before {\n bottom: -3rem;\n }\n .xl\\:grid-line-x-48[class*=\"grid-line-yfull\"] > *::after {\n top: -3rem;\n bottom: -3rem;\n }\n .xl\\:grid-line-x-52[class*=\"grid-line-x-\"] > *::before {\n bottom: -3.25rem;\n }\n .xl\\:grid-line-x-52[class*=\"grid-line-yfull\"] > *::after {\n top: -3.25rem;\n bottom: -3.25rem;\n }\n .xl\\:grid-line-x-56[class*=\"grid-line-x-\"] > *::before {\n bottom: -3.5rem;\n }\n .xl\\:grid-line-x-56[class*=\"grid-line-yfull\"] > *::after {\n top: -3.5rem;\n bottom: -3.5rem;\n }\n .xl\\:grid-line-x-60[class*=\"grid-line-x-\"] > *::before {\n bottom: -3.75rem;\n }\n .xl\\:grid-line-x-60[class*=\"grid-line-yfull\"] > *::after {\n top: -3.75rem;\n bottom: -3.75rem;\n }\n .xl\\:grid-line-x-64[class*=\"grid-line-x-\"] > *::before {\n bottom: -4rem;\n }\n .xl\\:grid-line-x-64[class*=\"grid-line-yfull\"] > *::after {\n top: -4rem;\n bottom: -4rem;\n }\n .xl\\:grid-line-x-68[class*=\"grid-line-x-\"] > *::before {\n bottom: -4.25rem;\n }\n .xl\\:grid-line-x-68[class*=\"grid-line-yfull\"] > *::after {\n top: -4.25rem;\n bottom: -4.25rem;\n }\n .xl\\:grid-line-x-72[class*=\"grid-line-x-\"] > *::before {\n bottom: -4.5rem;\n }\n .xl\\:grid-line-x-72[class*=\"grid-line-yfull\"] > *::after {\n top: -4.5rem;\n bottom: -4.5rem;\n }\n .xl\\:grid-line-x-76[class*=\"grid-line-x-\"] > *::before {\n bottom: -4.75rem;\n }\n .xl\\:grid-line-x-76[class*=\"grid-line-yfull\"] > *::after {\n top: -4.75rem;\n bottom: -4.75rem;\n }\n .xl\\:grid-line-x-80[class*=\"grid-line-x-\"] > *::before {\n bottom: -5rem;\n }\n .xl\\:grid-line-x-80[class*=\"grid-line-yfull\"] > *::after {\n top: -5rem;\n bottom: -5rem;\n }\n .xl\\:grid-line-x-84[class*=\"grid-line-x-\"] > *::before {\n bottom: -5.25rem;\n }\n .xl\\:grid-line-x-84[class*=\"grid-line-yfull\"] > *::after {\n top: -5.25rem;\n bottom: -5.25rem;\n }\n .xl\\:grid-line-x-88[class*=\"grid-line-x-\"] > *::before {\n bottom: -5.5rem;\n }\n .xl\\:grid-line-x-88[class*=\"grid-line-yfull\"] > *::after {\n top: -5.5rem;\n bottom: -5.5rem;\n }\n .xl\\:grid-line-x-92[class*=\"grid-line-x-\"] > *::before {\n bottom: -5.75rem;\n }\n .xl\\:grid-line-x-92[class*=\"grid-line-yfull\"] > *::after {\n top: -5.75rem;\n bottom: -5.75rem;\n }\n .xl\\:grid-line-x-96[class*=\"grid-line-x-\"] > *::before {\n bottom: -6rem;\n }\n .xl\\:grid-line-x-96[class*=\"grid-line-yfull\"] > *::after {\n top: -6rem;\n bottom: -6rem;\n }\n .xl\\:grid-line-x-100[class*=\"grid-line-x-\"] > *::before {\n bottom: -6.25rem;\n }\n .xl\\:grid-line-x-100[class*=\"grid-line-yfull\"] > *::after {\n top: -6.25rem;\n bottom: -6.25rem;\n }\n .xl\\:grid-line-x-safe-top[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-top);\n }\n .xl\\:grid-line-x-safe-top[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-top);\n bottom: -env(safe-area-inset-top);\n }\n .xl\\:grid-line-x-safe-bottom[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-bottom);\n }\n .xl\\:grid-line-x-safe-bottom[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-bottom);\n bottom: -env(safe-area-inset-bottom);\n }\n .xl\\:grid-line-x-safe-left[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-left);\n }\n .xl\\:grid-line-x-safe-left[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-left);\n bottom: -env(safe-area-inset-left);\n }\n .xl\\:grid-line-x-safe-right[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-right);\n }\n .xl\\:grid-line-x-safe-right[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-right);\n bottom: -env(safe-area-inset-right);\n }\n .xl\\:grid-line-x-gutter[class*=\"grid-line-x-\"] > *::before {\n bottom: -var(--inner-gutter);\n }\n .xl\\:grid-line-x-gutter[class*=\"grid-line-yfull\"] > *::after {\n top: -var(--inner-gutter);\n bottom: -var(--inner-gutter);\n }\n .xl\\:grid-line-x-outer-gutter[class*=\"grid-line-x-\"] > *::before {\n bottom: -var(--outer-gutter, 0px);\n }\n .xl\\:grid-line-x-outer-gutter[class*=\"grid-line-yfull\"] > *::after {\n top: -var(--outer-gutter, 0px);\n bottom: -var(--outer-gutter, 0px);\n }\n .xl\\:grid-line-x-default[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--brand-black);\n }\n .xl\\:grid-line-y-default[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--brand-black);\n }\n .xl\\:grid-line-xy-default[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--brand-black);\n }\n .xl\\:grid-line-xy-default[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--brand-black);\n }\n .xl\\:grid-line-x-inverse[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--white);\n }\n .xl\\:grid-line-y-inverse[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--white);\n }\n .xl\\:grid-line-xy-inverse[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--white);\n }\n .xl\\:grid-line-xy-inverse[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--white);\n }\n .xl\\:grid-line-x-inverse-soft[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.3);\n }\n .xl\\:grid-line-y-inverse-soft[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.3);\n }\n .xl\\:grid-line-xy-inverse-soft[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.3);\n }\n .xl\\:grid-line-xy-inverse-soft[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.3);\n }\n .xl\\:grid-line-x-inverse-softer[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.15);\n }\n .xl\\:grid-line-y-inverse-softer[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.15);\n }\n .xl\\:grid-line-xy-inverse-softer[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.15);\n }\n .xl\\:grid-line-xy-inverse-softer[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.15);\n }\n .xl\\:grid-line-x-soft[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .15 );\n }\n .xl\\:grid-line-y-soft[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .15 );\n }\n .xl\\:grid-line-xy-soft[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .15 );\n }\n .xl\\:grid-line-xy-soft[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .15 );\n }\n .xl\\:grid-line-x-softer[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .1 );\n }\n .xl\\:grid-line-y-softer[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .1 );\n }\n .xl\\:grid-line-xy-softer[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .1 );\n }\n .xl\\:grid-line-xy-softer[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .1 );\n }\n .xl\\:grid-line-x-softest[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .05 );\n }\n .xl\\:grid-line-y-softest[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .05 );\n }\n .xl\\:grid-line-xy-softest[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .05 );\n }\n .xl\\:grid-line-xy-softest[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .05 );\n }\n .xl\\:grid-line-x-accent[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--brand-green);\n }\n .xl\\:grid-line-y-accent[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--brand-green);\n }\n .xl\\:grid-line-xy-accent[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--brand-green);\n }\n .xl\\:grid-line-xy-accent[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--brand-green);\n }\n .xl\\:grid-line-x-error[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--red-700);\n }\n .xl\\:grid-line-y-error[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--red-700);\n }\n .xl\\:grid-line-xy-error[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--red-700);\n }\n .xl\\:grid-line-xy-error[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--red-700);\n }\n .xl\\:grid-line-x-current[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: currentColor;\n }\n .xl\\:grid-line-y-current[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: currentColor;\n }\n .xl\\:grid-line-xy-current[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: currentColor;\n }\n .xl\\:grid-line-xy-current[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: currentColor;\n }\n .xl\\:grid-line-x-transparent[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--transparent);\n }\n .xl\\:grid-line-y-transparent[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--transparent);\n }\n .xl\\:grid-line-xy-transparent[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--transparent);\n }\n .xl\\:grid-line-xy-transparent[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--transparent);\n }\n .xl\\:grid-cols-1[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xl\\:grid-cols-1[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: 0;\n inset-inline-end: 0;\n }\n .xl\\:grid-cols-1[class*=\"grid-line-x\"] > *:nth-child(1n+1)::before {\n inset-inline-end: 0;\n }\n .xl\\:grid-cols-1[class*=\"grid-line-x\"] > *:nth-child(1n+1):nth-last-child(-n+1)::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-1[class*=\"grid-line-x\"] > *:nth-child(1n+1):nth-last-child(-n+1) ~ *::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-2[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xl\\:grid-cols-2[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xl\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+1)::before {\n inset-inline-start: 0;\n }\n .xl\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+2)::before {\n inset-inline-end: 0;\n }\n .xl\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+1):nth-last-child(-n+2)::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+1):nth-last-child(-n+2) ~ *::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xl\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(2n+2)::after {\n border-inline-end-width: 0;\n }\n .xl\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+2)::after {\n top: 0;\n }\n .xl\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(2n+1):nth-last-child(-n+2)::after {\n bottom: 0;\n }\n .xl\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(2n+1):nth-last-child(-n+2) ~ li::after {\n bottom: 0;\n }\n .xl\\:grid-cols-3[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xl\\:grid-cols-3[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xl\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+1)::before {\n inset-inline-start: 0;\n }\n .xl\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+3)::before {\n inset-inline-end: 0;\n }\n .xl\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+1):nth-last-child(-n+3)::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+1):nth-last-child(-n+3) ~ *::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xl\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(3n+3)::after {\n border-inline-end-width: 0;\n }\n .xl\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+3)::after {\n top: 0;\n }\n .xl\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(3n+1):nth-last-child(-n+3)::after {\n bottom: 0;\n }\n .xl\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(3n+1):nth-last-child(-n+3) ~ li::after {\n bottom: 0;\n }\n .xl\\:grid-cols-4[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xl\\:grid-cols-4[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xl\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+1)::before {\n inset-inline-start: 0;\n }\n .xl\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+4)::before {\n inset-inline-end: 0;\n }\n .xl\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+1):nth-last-child(-n+4)::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+1):nth-last-child(-n+4) ~ *::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xl\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(4n+4)::after {\n border-inline-end-width: 0;\n }\n .xl\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+4)::after {\n top: 0;\n }\n .xl\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(4n+1):nth-last-child(-n+4)::after {\n bottom: 0;\n }\n .xl\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(4n+1):nth-last-child(-n+4) ~ li::after {\n bottom: 0;\n }\n .xl\\:grid-cols-5[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xl\\:grid-cols-5[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xl\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+1)::before {\n inset-inline-start: 0;\n }\n .xl\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+5)::before {\n inset-inline-end: 0;\n }\n .xl\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+1):nth-last-child(-n+5)::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+1):nth-last-child(-n+5) ~ *::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xl\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(5n+5)::after {\n border-inline-end-width: 0;\n }\n .xl\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+5)::after {\n top: 0;\n }\n .xl\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(5n+1):nth-last-child(-n+5)::after {\n bottom: 0;\n }\n .xl\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(5n+1):nth-last-child(-n+5) ~ li::after {\n bottom: 0;\n }\n .xl\\:grid-cols-6[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xl\\:grid-cols-6[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xl\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+1)::before {\n inset-inline-start: 0;\n }\n .xl\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+6)::before {\n inset-inline-end: 0;\n }\n .xl\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+1):nth-last-child(-n+6)::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+1):nth-last-child(-n+6) ~ *::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xl\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(6n+6)::after {\n border-inline-end-width: 0;\n }\n .xl\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+6)::after {\n top: 0;\n }\n .xl\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(6n+1):nth-last-child(-n+6)::after {\n bottom: 0;\n }\n .xl\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(6n+1):nth-last-child(-n+6) ~ li::after {\n bottom: 0;\n }\n .xl\\:grid-cols-7[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xl\\:grid-cols-7[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xl\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+1)::before {\n inset-inline-start: 0;\n }\n .xl\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+7)::before {\n inset-inline-end: 0;\n }\n .xl\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+1):nth-last-child(-n+7)::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+1):nth-last-child(-n+7) ~ *::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xl\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(7n+7)::after {\n border-inline-end-width: 0;\n }\n .xl\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+7)::after {\n top: 0;\n }\n .xl\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(7n+1):nth-last-child(-n+7)::after {\n bottom: 0;\n }\n .xl\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(7n+1):nth-last-child(-n+7) ~ li::after {\n bottom: 0;\n }\n .xl\\:grid-cols-8[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xl\\:grid-cols-8[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xl\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+1)::before {\n inset-inline-start: 0;\n }\n .xl\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+8)::before {\n inset-inline-end: 0;\n }\n .xl\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+1):nth-last-child(-n+8)::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+1):nth-last-child(-n+8) ~ *::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xl\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(8n+8)::after {\n border-inline-end-width: 0;\n }\n .xl\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+8)::after {\n top: 0;\n }\n .xl\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(8n+1):nth-last-child(-n+8)::after {\n bottom: 0;\n }\n .xl\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(8n+1):nth-last-child(-n+8) ~ li::after {\n bottom: 0;\n }\n .xl\\:grid-cols-9[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xl\\:grid-cols-9[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xl\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+1)::before {\n inset-inline-start: 0;\n }\n .xl\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+9)::before {\n inset-inline-end: 0;\n }\n .xl\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+1):nth-last-child(-n+9)::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+1):nth-last-child(-n+9) ~ *::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xl\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(9n+9)::after {\n border-inline-end-width: 0;\n }\n .xl\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+9)::after {\n top: 0;\n }\n .xl\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(9n+1):nth-last-child(-n+9)::after {\n bottom: 0;\n }\n .xl\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(9n+1):nth-last-child(-n+9) ~ li::after {\n bottom: 0;\n }\n .xl\\:grid-cols-10[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xl\\:grid-cols-10[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xl\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+1)::before {\n inset-inline-start: 0;\n }\n .xl\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+10)::before {\n inset-inline-end: 0;\n }\n .xl\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+1):nth-last-child(-n+10)::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+1):nth-last-child(-n+10) ~ *::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xl\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(10n+10)::after {\n border-inline-end-width: 0;\n }\n .xl\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+10)::after {\n top: 0;\n }\n .xl\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(10n+1):nth-last-child(-n+10)::after {\n bottom: 0;\n }\n .xl\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(10n+1):nth-last-child(-n+10) ~ li::after {\n bottom: 0;\n }\n .xl\\:grid-cols-11[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xl\\:grid-cols-11[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xl\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+1)::before {\n inset-inline-start: 0;\n }\n .xl\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+11)::before {\n inset-inline-end: 0;\n }\n .xl\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+1):nth-last-child(-n+11)::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+1):nth-last-child(-n+11) ~ *::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xl\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(11n+11)::after {\n border-inline-end-width: 0;\n }\n .xl\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+11)::after {\n top: 0;\n }\n .xl\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(11n+1):nth-last-child(-n+11)::after {\n bottom: 0;\n }\n .xl\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(11n+1):nth-last-child(-n+11) ~ li::after {\n bottom: 0;\n }\n .xl\\:grid-cols-12[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xl\\:grid-cols-12[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xl\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+1)::before {\n inset-inline-start: 0;\n }\n .xl\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+12)::before {\n inset-inline-end: 0;\n }\n .xl\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+1):nth-last-child(-n+12)::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+1):nth-last-child(-n+12) ~ *::before {\n border-bottom-width: 0;\n }\n .xl\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xl\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(12n+12)::after {\n border-inline-end-width: 0;\n }\n .xl\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+12)::after {\n top: 0;\n }\n .xl\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(12n+1):nth-last-child(-n+12)::after {\n bottom: 0;\n }\n .xl\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(12n+1):nth-last-child(-n+12) ~ li::after {\n bottom: 0;\n }\n}\n@media (min-width: 1280px) {\n [class*=\"grid-line-\"] > * {\n position: relative;\n }\n [class*=\"grid-line-\"] > *::before, [class*=\"grid-line-\"] > *::after {\n content: attr(👻);\n position: absolute;\n z-index: 0;\n pointer-events: none;\n }\n .xxl\\:grid-line-x > *::before {\n content: attr(👻);\n inset-inline-start: 0;\n inset-inline-end: 0;\n top: 0;\n bottom: calc(var(--inner-gutter) / -2);\n border-top: 0 solid transparent;\n border-bottom: 0 solid transparent;\n }\n .xxl\\:grid-line-xfull > *::before {\n content: attr(👻);\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: 0;\n bottom: calc(var(--inner-gutter) / -2);\n border-top: 0 solid transparent;\n border-bottom: 0 solid transparent;\n }\n .xxl\\:grid-line-x-0 > *::before {\n content: none;\n }\n .xxl\\:grid-line-y > *::after {\n content: attr(👻);\n inset-inline-start: 0;\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: 0;\n bottom: 0;\n border-inline-start: 0 solid transparent;\n border-inline-end: 0 solid transparent;\n }\n .xxl\\:grid-line-yfull > *::after {\n content: attr(👻);\n inset-inline-start: 0;\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: calc(var(--inner-gutter) / -1);\n bottom: 0;\n border-inline-start: 0 solid transparent;\n border-inline-end: 0 solid transparent;\n }\n .xxl\\:grid-line-yfull[class*=\"grid-line-x\"] > *::after {\n inset-inline-start: 0;\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: calc(var(--inner-gutter) / -2);\n bottom: calc(var(--inner-gutter) / -2);\n border-inline-start: 0 solid transparent;\n border-inline-end: 0 solid transparent;\n }\n .xxl\\:grid-line-y-0 > *::after {\n content: none;\n }\n .xxl\\:grid-line-x-0[class*=\"grid-line-x-\"] > *::before {\n bottom: -0rem;\n }\n .xxl\\:grid-line-x-0[class*=\"grid-line-yfull\"] > *::after {\n top: -0rem;\n bottom: -0rem;\n }\n .xxl\\:grid-line-x-1[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.0625rem;\n }\n .xxl\\:grid-line-x-1[class*=\"grid-line-yfull\"] > *::after {\n top: -0.0625rem;\n bottom: -0.0625rem;\n }\n .xxl\\:grid-line-x-2[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.125rem;\n }\n .xxl\\:grid-line-x-2[class*=\"grid-line-yfull\"] > *::after {\n top: -0.125rem;\n bottom: -0.125rem;\n }\n .xxl\\:grid-line-x-3[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.1875rem;\n }\n .xxl\\:grid-line-x-3[class*=\"grid-line-yfull\"] > *::after {\n top: -0.1875rem;\n bottom: -0.1875rem;\n }\n .xxl\\:grid-line-x-4[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.25rem;\n }\n .xxl\\:grid-line-x-4[class*=\"grid-line-yfull\"] > *::after {\n top: -0.25rem;\n bottom: -0.25rem;\n }\n .xxl\\:grid-line-x-5[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.3125rem;\n }\n .xxl\\:grid-line-x-5[class*=\"grid-line-yfull\"] > *::after {\n top: -0.3125rem;\n bottom: -0.3125rem;\n }\n .xxl\\:grid-line-x-6[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.375rem;\n }\n .xxl\\:grid-line-x-6[class*=\"grid-line-yfull\"] > *::after {\n top: -0.375rem;\n bottom: -0.375rem;\n }\n .xxl\\:grid-line-x-7[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.4375rem;\n }\n .xxl\\:grid-line-x-7[class*=\"grid-line-yfull\"] > *::after {\n top: -0.4375rem;\n bottom: -0.4375rem;\n }\n .xxl\\:grid-line-x-8[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.5rem;\n }\n .xxl\\:grid-line-x-8[class*=\"grid-line-yfull\"] > *::after {\n top: -0.5rem;\n bottom: -0.5rem;\n }\n .xxl\\:grid-line-x-9[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.5625rem;\n }\n .xxl\\:grid-line-x-9[class*=\"grid-line-yfull\"] > *::after {\n top: -0.5625rem;\n bottom: -0.5625rem;\n }\n .xxl\\:grid-line-x-10[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.625rem;\n }\n .xxl\\:grid-line-x-10[class*=\"grid-line-yfull\"] > *::after {\n top: -0.625rem;\n bottom: -0.625rem;\n }\n .xxl\\:grid-line-x-12[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.75rem;\n }\n .xxl\\:grid-line-x-12[class*=\"grid-line-yfull\"] > *::after {\n top: -0.75rem;\n bottom: -0.75rem;\n }\n .xxl\\:grid-line-x-16[class*=\"grid-line-x-\"] > *::before {\n bottom: -1rem;\n }\n .xxl\\:grid-line-x-16[class*=\"grid-line-yfull\"] > *::after {\n top: -1rem;\n bottom: -1rem;\n }\n .xxl\\:grid-line-x-20[class*=\"grid-line-x-\"] > *::before {\n bottom: -1.25rem;\n }\n .xxl\\:grid-line-x-20[class*=\"grid-line-yfull\"] > *::after {\n top: -1.25rem;\n bottom: -1.25rem;\n }\n .xxl\\:grid-line-x-24[class*=\"grid-line-x-\"] > *::before {\n bottom: -1.5rem;\n }\n .xxl\\:grid-line-x-24[class*=\"grid-line-yfull\"] > *::after {\n top: -1.5rem;\n bottom: -1.5rem;\n }\n .xxl\\:grid-line-x-28[class*=\"grid-line-x-\"] > *::before {\n bottom: -1.75rem;\n }\n .xxl\\:grid-line-x-28[class*=\"grid-line-yfull\"] > *::after {\n top: -1.75rem;\n bottom: -1.75rem;\n }\n .xxl\\:grid-line-x-32[class*=\"grid-line-x-\"] > *::before {\n bottom: -2rem;\n }\n .xxl\\:grid-line-x-32[class*=\"grid-line-yfull\"] > *::after {\n top: -2rem;\n bottom: -2rem;\n }\n .xxl\\:grid-line-x-36[class*=\"grid-line-x-\"] > *::before {\n bottom: -2.25rem;\n }\n .xxl\\:grid-line-x-36[class*=\"grid-line-yfull\"] > *::after {\n top: -2.25rem;\n bottom: -2.25rem;\n }\n .xxl\\:grid-line-x-40[class*=\"grid-line-x-\"] > *::before {\n bottom: -2.5rem;\n }\n .xxl\\:grid-line-x-40[class*=\"grid-line-yfull\"] > *::after {\n top: -2.5rem;\n bottom: -2.5rem;\n }\n .xxl\\:grid-line-x-44[class*=\"grid-line-x-\"] > *::before {\n bottom: -2.75rem;\n }\n .xxl\\:grid-line-x-44[class*=\"grid-line-yfull\"] > *::after {\n top: -2.75rem;\n bottom: -2.75rem;\n }\n .xxl\\:grid-line-x-48[class*=\"grid-line-x-\"] > *::before {\n bottom: -3rem;\n }\n .xxl\\:grid-line-x-48[class*=\"grid-line-yfull\"] > *::after {\n top: -3rem;\n bottom: -3rem;\n }\n .xxl\\:grid-line-x-52[class*=\"grid-line-x-\"] > *::before {\n bottom: -3.25rem;\n }\n .xxl\\:grid-line-x-52[class*=\"grid-line-yfull\"] > *::after {\n top: -3.25rem;\n bottom: -3.25rem;\n }\n .xxl\\:grid-line-x-56[class*=\"grid-line-x-\"] > *::before {\n bottom: -3.5rem;\n }\n .xxl\\:grid-line-x-56[class*=\"grid-line-yfull\"] > *::after {\n top: -3.5rem;\n bottom: -3.5rem;\n }\n .xxl\\:grid-line-x-60[class*=\"grid-line-x-\"] > *::before {\n bottom: -3.75rem;\n }\n .xxl\\:grid-line-x-60[class*=\"grid-line-yfull\"] > *::after {\n top: -3.75rem;\n bottom: -3.75rem;\n }\n .xxl\\:grid-line-x-64[class*=\"grid-line-x-\"] > *::before {\n bottom: -4rem;\n }\n .xxl\\:grid-line-x-64[class*=\"grid-line-yfull\"] > *::after {\n top: -4rem;\n bottom: -4rem;\n }\n .xxl\\:grid-line-x-68[class*=\"grid-line-x-\"] > *::before {\n bottom: -4.25rem;\n }\n .xxl\\:grid-line-x-68[class*=\"grid-line-yfull\"] > *::after {\n top: -4.25rem;\n bottom: -4.25rem;\n }\n .xxl\\:grid-line-x-72[class*=\"grid-line-x-\"] > *::before {\n bottom: -4.5rem;\n }\n .xxl\\:grid-line-x-72[class*=\"grid-line-yfull\"] > *::after {\n top: -4.5rem;\n bottom: -4.5rem;\n }\n .xxl\\:grid-line-x-76[class*=\"grid-line-x-\"] > *::before {\n bottom: -4.75rem;\n }\n .xxl\\:grid-line-x-76[class*=\"grid-line-yfull\"] > *::after {\n top: -4.75rem;\n bottom: -4.75rem;\n }\n .xxl\\:grid-line-x-80[class*=\"grid-line-x-\"] > *::before {\n bottom: -5rem;\n }\n .xxl\\:grid-line-x-80[class*=\"grid-line-yfull\"] > *::after {\n top: -5rem;\n bottom: -5rem;\n }\n .xxl\\:grid-line-x-84[class*=\"grid-line-x-\"] > *::before {\n bottom: -5.25rem;\n }\n .xxl\\:grid-line-x-84[class*=\"grid-line-yfull\"] > *::after {\n top: -5.25rem;\n bottom: -5.25rem;\n }\n .xxl\\:grid-line-x-88[class*=\"grid-line-x-\"] > *::before {\n bottom: -5.5rem;\n }\n .xxl\\:grid-line-x-88[class*=\"grid-line-yfull\"] > *::after {\n top: -5.5rem;\n bottom: -5.5rem;\n }\n .xxl\\:grid-line-x-92[class*=\"grid-line-x-\"] > *::before {\n bottom: -5.75rem;\n }\n .xxl\\:grid-line-x-92[class*=\"grid-line-yfull\"] > *::after {\n top: -5.75rem;\n bottom: -5.75rem;\n }\n .xxl\\:grid-line-x-96[class*=\"grid-line-x-\"] > *::before {\n bottom: -6rem;\n }\n .xxl\\:grid-line-x-96[class*=\"grid-line-yfull\"] > *::after {\n top: -6rem;\n bottom: -6rem;\n }\n .xxl\\:grid-line-x-100[class*=\"grid-line-x-\"] > *::before {\n bottom: -6.25rem;\n }\n .xxl\\:grid-line-x-100[class*=\"grid-line-yfull\"] > *::after {\n top: -6.25rem;\n bottom: -6.25rem;\n }\n .xxl\\:grid-line-x-safe-top[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-top);\n }\n .xxl\\:grid-line-x-safe-top[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-top);\n bottom: -env(safe-area-inset-top);\n }\n .xxl\\:grid-line-x-safe-bottom[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-bottom);\n }\n .xxl\\:grid-line-x-safe-bottom[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-bottom);\n bottom: -env(safe-area-inset-bottom);\n }\n .xxl\\:grid-line-x-safe-left[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-left);\n }\n .xxl\\:grid-line-x-safe-left[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-left);\n bottom: -env(safe-area-inset-left);\n }\n .xxl\\:grid-line-x-safe-right[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-right);\n }\n .xxl\\:grid-line-x-safe-right[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-right);\n bottom: -env(safe-area-inset-right);\n }\n .xxl\\:grid-line-x-gutter[class*=\"grid-line-x-\"] > *::before {\n bottom: -var(--inner-gutter);\n }\n .xxl\\:grid-line-x-gutter[class*=\"grid-line-yfull\"] > *::after {\n top: -var(--inner-gutter);\n bottom: -var(--inner-gutter);\n }\n .xxl\\:grid-line-x-outer-gutter[class*=\"grid-line-x-\"] > *::before {\n bottom: -var(--outer-gutter, 0px);\n }\n .xxl\\:grid-line-x-outer-gutter[class*=\"grid-line-yfull\"] > *::after {\n top: -var(--outer-gutter, 0px);\n bottom: -var(--outer-gutter, 0px);\n }\n .xxl\\:grid-line-x-default[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--brand-black);\n }\n .xxl\\:grid-line-y-default[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--brand-black);\n }\n .xxl\\:grid-line-xy-default[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--brand-black);\n }\n .xxl\\:grid-line-xy-default[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--brand-black);\n }\n .xxl\\:grid-line-x-inverse[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--white);\n }\n .xxl\\:grid-line-y-inverse[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--white);\n }\n .xxl\\:grid-line-xy-inverse[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--white);\n }\n .xxl\\:grid-line-xy-inverse[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--white);\n }\n .xxl\\:grid-line-x-inverse-soft[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.3);\n }\n .xxl\\:grid-line-y-inverse-soft[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.3);\n }\n .xxl\\:grid-line-xy-inverse-soft[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.3);\n }\n .xxl\\:grid-line-xy-inverse-soft[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.3);\n }\n .xxl\\:grid-line-x-inverse-softer[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.15);\n }\n .xxl\\:grid-line-y-inverse-softer[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.15);\n }\n .xxl\\:grid-line-xy-inverse-softer[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.15);\n }\n .xxl\\:grid-line-xy-inverse-softer[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.15);\n }\n .xxl\\:grid-line-x-soft[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .15 );\n }\n .xxl\\:grid-line-y-soft[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .15 );\n }\n .xxl\\:grid-line-xy-soft[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .15 );\n }\n .xxl\\:grid-line-xy-soft[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .15 );\n }\n .xxl\\:grid-line-x-softer[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .1 );\n }\n .xxl\\:grid-line-y-softer[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .1 );\n }\n .xxl\\:grid-line-xy-softer[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .1 );\n }\n .xxl\\:grid-line-xy-softer[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .1 );\n }\n .xxl\\:grid-line-x-softest[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .05 );\n }\n .xxl\\:grid-line-y-softest[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .05 );\n }\n .xxl\\:grid-line-xy-softest[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .05 );\n }\n .xxl\\:grid-line-xy-softest[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .05 );\n }\n .xxl\\:grid-line-x-accent[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--brand-green);\n }\n .xxl\\:grid-line-y-accent[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--brand-green);\n }\n .xxl\\:grid-line-xy-accent[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--brand-green);\n }\n .xxl\\:grid-line-xy-accent[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--brand-green);\n }\n .xxl\\:grid-line-x-error[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--red-700);\n }\n .xxl\\:grid-line-y-error[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--red-700);\n }\n .xxl\\:grid-line-xy-error[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--red-700);\n }\n .xxl\\:grid-line-xy-error[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--red-700);\n }\n .xxl\\:grid-line-x-current[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: currentColor;\n }\n .xxl\\:grid-line-y-current[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: currentColor;\n }\n .xxl\\:grid-line-xy-current[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: currentColor;\n }\n .xxl\\:grid-line-xy-current[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: currentColor;\n }\n .xxl\\:grid-line-x-transparent[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--transparent);\n }\n .xxl\\:grid-line-y-transparent[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--transparent);\n }\n .xxl\\:grid-line-xy-transparent[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--transparent);\n }\n .xxl\\:grid-line-xy-transparent[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--transparent);\n }\n .xxl\\:grid-cols-1[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxl\\:grid-cols-1[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: 0;\n inset-inline-end: 0;\n }\n .xxl\\:grid-cols-1[class*=\"grid-line-x\"] > *:nth-child(1n+1)::before {\n inset-inline-end: 0;\n }\n .xxl\\:grid-cols-1[class*=\"grid-line-x\"] > *:nth-child(1n+1):nth-last-child(-n+1)::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-1[class*=\"grid-line-x\"] > *:nth-child(1n+1):nth-last-child(-n+1) ~ *::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-2[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxl\\:grid-cols-2[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxl\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+1)::before {\n inset-inline-start: 0;\n }\n .xxl\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+2)::before {\n inset-inline-end: 0;\n }\n .xxl\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+1):nth-last-child(-n+2)::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+1):nth-last-child(-n+2) ~ *::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxl\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(2n+2)::after {\n border-inline-end-width: 0;\n }\n .xxl\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+2)::after {\n top: 0;\n }\n .xxl\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(2n+1):nth-last-child(-n+2)::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(2n+1):nth-last-child(-n+2) ~ li::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-3[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxl\\:grid-cols-3[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxl\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+1)::before {\n inset-inline-start: 0;\n }\n .xxl\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+3)::before {\n inset-inline-end: 0;\n }\n .xxl\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+1):nth-last-child(-n+3)::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+1):nth-last-child(-n+3) ~ *::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxl\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(3n+3)::after {\n border-inline-end-width: 0;\n }\n .xxl\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+3)::after {\n top: 0;\n }\n .xxl\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(3n+1):nth-last-child(-n+3)::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(3n+1):nth-last-child(-n+3) ~ li::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-4[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxl\\:grid-cols-4[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxl\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+1)::before {\n inset-inline-start: 0;\n }\n .xxl\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+4)::before {\n inset-inline-end: 0;\n }\n .xxl\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+1):nth-last-child(-n+4)::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+1):nth-last-child(-n+4) ~ *::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxl\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(4n+4)::after {\n border-inline-end-width: 0;\n }\n .xxl\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+4)::after {\n top: 0;\n }\n .xxl\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(4n+1):nth-last-child(-n+4)::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(4n+1):nth-last-child(-n+4) ~ li::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-5[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxl\\:grid-cols-5[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxl\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+1)::before {\n inset-inline-start: 0;\n }\n .xxl\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+5)::before {\n inset-inline-end: 0;\n }\n .xxl\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+1):nth-last-child(-n+5)::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+1):nth-last-child(-n+5) ~ *::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxl\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(5n+5)::after {\n border-inline-end-width: 0;\n }\n .xxl\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+5)::after {\n top: 0;\n }\n .xxl\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(5n+1):nth-last-child(-n+5)::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(5n+1):nth-last-child(-n+5) ~ li::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-6[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxl\\:grid-cols-6[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxl\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+1)::before {\n inset-inline-start: 0;\n }\n .xxl\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+6)::before {\n inset-inline-end: 0;\n }\n .xxl\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+1):nth-last-child(-n+6)::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+1):nth-last-child(-n+6) ~ *::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxl\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(6n+6)::after {\n border-inline-end-width: 0;\n }\n .xxl\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+6)::after {\n top: 0;\n }\n .xxl\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(6n+1):nth-last-child(-n+6)::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(6n+1):nth-last-child(-n+6) ~ li::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-7[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxl\\:grid-cols-7[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxl\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+1)::before {\n inset-inline-start: 0;\n }\n .xxl\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+7)::before {\n inset-inline-end: 0;\n }\n .xxl\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+1):nth-last-child(-n+7)::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+1):nth-last-child(-n+7) ~ *::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxl\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(7n+7)::after {\n border-inline-end-width: 0;\n }\n .xxl\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+7)::after {\n top: 0;\n }\n .xxl\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(7n+1):nth-last-child(-n+7)::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(7n+1):nth-last-child(-n+7) ~ li::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-8[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxl\\:grid-cols-8[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxl\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+1)::before {\n inset-inline-start: 0;\n }\n .xxl\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+8)::before {\n inset-inline-end: 0;\n }\n .xxl\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+1):nth-last-child(-n+8)::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+1):nth-last-child(-n+8) ~ *::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxl\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(8n+8)::after {\n border-inline-end-width: 0;\n }\n .xxl\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+8)::after {\n top: 0;\n }\n .xxl\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(8n+1):nth-last-child(-n+8)::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(8n+1):nth-last-child(-n+8) ~ li::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-9[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxl\\:grid-cols-9[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxl\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+1)::before {\n inset-inline-start: 0;\n }\n .xxl\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+9)::before {\n inset-inline-end: 0;\n }\n .xxl\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+1):nth-last-child(-n+9)::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+1):nth-last-child(-n+9) ~ *::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxl\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(9n+9)::after {\n border-inline-end-width: 0;\n }\n .xxl\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+9)::after {\n top: 0;\n }\n .xxl\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(9n+1):nth-last-child(-n+9)::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(9n+1):nth-last-child(-n+9) ~ li::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-10[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxl\\:grid-cols-10[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxl\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+1)::before {\n inset-inline-start: 0;\n }\n .xxl\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+10)::before {\n inset-inline-end: 0;\n }\n .xxl\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+1):nth-last-child(-n+10)::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+1):nth-last-child(-n+10) ~ *::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxl\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(10n+10)::after {\n border-inline-end-width: 0;\n }\n .xxl\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+10)::after {\n top: 0;\n }\n .xxl\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(10n+1):nth-last-child(-n+10)::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(10n+1):nth-last-child(-n+10) ~ li::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-11[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxl\\:grid-cols-11[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxl\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+1)::before {\n inset-inline-start: 0;\n }\n .xxl\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+11)::before {\n inset-inline-end: 0;\n }\n .xxl\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+1):nth-last-child(-n+11)::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+1):nth-last-child(-n+11) ~ *::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxl\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(11n+11)::after {\n border-inline-end-width: 0;\n }\n .xxl\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+11)::after {\n top: 0;\n }\n .xxl\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(11n+1):nth-last-child(-n+11)::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(11n+1):nth-last-child(-n+11) ~ li::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-12[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxl\\:grid-cols-12[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxl\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+1)::before {\n inset-inline-start: 0;\n }\n .xxl\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+12)::before {\n inset-inline-end: 0;\n }\n .xxl\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+1):nth-last-child(-n+12)::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+1):nth-last-child(-n+12) ~ *::before {\n border-bottom-width: 0;\n }\n .xxl\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxl\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(12n+12)::after {\n border-inline-end-width: 0;\n }\n .xxl\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+12)::after {\n top: 0;\n }\n .xxl\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(12n+1):nth-last-child(-n+12)::after {\n bottom: 0;\n }\n .xxl\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(12n+1):nth-last-child(-n+12) ~ li::after {\n bottom: 0;\n }\n}\n@media (min-width: 2200px) {\n [class*=\"grid-line-\"] > * {\n position: relative;\n }\n [class*=\"grid-line-\"] > *::before, [class*=\"grid-line-\"] > *::after {\n content: attr(👻);\n position: absolute;\n z-index: 0;\n pointer-events: none;\n }\n .xxxl\\:grid-line-x > *::before {\n content: attr(👻);\n inset-inline-start: 0;\n inset-inline-end: 0;\n top: 0;\n bottom: calc(var(--inner-gutter) / -2);\n border-top: 0 solid transparent;\n border-bottom: 0 solid transparent;\n }\n .xxxl\\:grid-line-xfull > *::before {\n content: attr(👻);\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: 0;\n bottom: calc(var(--inner-gutter) / -2);\n border-top: 0 solid transparent;\n border-bottom: 0 solid transparent;\n }\n .xxxl\\:grid-line-x-0 > *::before {\n content: none;\n }\n .xxxl\\:grid-line-y > *::after {\n content: attr(👻);\n inset-inline-start: 0;\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: 0;\n bottom: 0;\n border-inline-start: 0 solid transparent;\n border-inline-end: 0 solid transparent;\n }\n .xxxl\\:grid-line-yfull > *::after {\n content: attr(👻);\n inset-inline-start: 0;\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: calc(var(--inner-gutter) / -1);\n bottom: 0;\n border-inline-start: 0 solid transparent;\n border-inline-end: 0 solid transparent;\n }\n .xxxl\\:grid-line-yfull[class*=\"grid-line-x\"] > *::after {\n inset-inline-start: 0;\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: calc(var(--inner-gutter) / -2);\n bottom: calc(var(--inner-gutter) / -2);\n border-inline-start: 0 solid transparent;\n border-inline-end: 0 solid transparent;\n }\n .xxxl\\:grid-line-y-0 > *::after {\n content: none;\n }\n .xxxl\\:grid-line-x-0[class*=\"grid-line-x-\"] > *::before {\n bottom: -0rem;\n }\n .xxxl\\:grid-line-x-0[class*=\"grid-line-yfull\"] > *::after {\n top: -0rem;\n bottom: -0rem;\n }\n .xxxl\\:grid-line-x-1[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.0625rem;\n }\n .xxxl\\:grid-line-x-1[class*=\"grid-line-yfull\"] > *::after {\n top: -0.0625rem;\n bottom: -0.0625rem;\n }\n .xxxl\\:grid-line-x-2[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.125rem;\n }\n .xxxl\\:grid-line-x-2[class*=\"grid-line-yfull\"] > *::after {\n top: -0.125rem;\n bottom: -0.125rem;\n }\n .xxxl\\:grid-line-x-3[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.1875rem;\n }\n .xxxl\\:grid-line-x-3[class*=\"grid-line-yfull\"] > *::after {\n top: -0.1875rem;\n bottom: -0.1875rem;\n }\n .xxxl\\:grid-line-x-4[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.25rem;\n }\n .xxxl\\:grid-line-x-4[class*=\"grid-line-yfull\"] > *::after {\n top: -0.25rem;\n bottom: -0.25rem;\n }\n .xxxl\\:grid-line-x-5[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.3125rem;\n }\n .xxxl\\:grid-line-x-5[class*=\"grid-line-yfull\"] > *::after {\n top: -0.3125rem;\n bottom: -0.3125rem;\n }\n .xxxl\\:grid-line-x-6[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.375rem;\n }\n .xxxl\\:grid-line-x-6[class*=\"grid-line-yfull\"] > *::after {\n top: -0.375rem;\n bottom: -0.375rem;\n }\n .xxxl\\:grid-line-x-7[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.4375rem;\n }\n .xxxl\\:grid-line-x-7[class*=\"grid-line-yfull\"] > *::after {\n top: -0.4375rem;\n bottom: -0.4375rem;\n }\n .xxxl\\:grid-line-x-8[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.5rem;\n }\n .xxxl\\:grid-line-x-8[class*=\"grid-line-yfull\"] > *::after {\n top: -0.5rem;\n bottom: -0.5rem;\n }\n .xxxl\\:grid-line-x-9[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.5625rem;\n }\n .xxxl\\:grid-line-x-9[class*=\"grid-line-yfull\"] > *::after {\n top: -0.5625rem;\n bottom: -0.5625rem;\n }\n .xxxl\\:grid-line-x-10[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.625rem;\n }\n .xxxl\\:grid-line-x-10[class*=\"grid-line-yfull\"] > *::after {\n top: -0.625rem;\n bottom: -0.625rem;\n }\n .xxxl\\:grid-line-x-12[class*=\"grid-line-x-\"] > *::before {\n bottom: -0.75rem;\n }\n .xxxl\\:grid-line-x-12[class*=\"grid-line-yfull\"] > *::after {\n top: -0.75rem;\n bottom: -0.75rem;\n }\n .xxxl\\:grid-line-x-16[class*=\"grid-line-x-\"] > *::before {\n bottom: -1rem;\n }\n .xxxl\\:grid-line-x-16[class*=\"grid-line-yfull\"] > *::after {\n top: -1rem;\n bottom: -1rem;\n }\n .xxxl\\:grid-line-x-20[class*=\"grid-line-x-\"] > *::before {\n bottom: -1.25rem;\n }\n .xxxl\\:grid-line-x-20[class*=\"grid-line-yfull\"] > *::after {\n top: -1.25rem;\n bottom: -1.25rem;\n }\n .xxxl\\:grid-line-x-24[class*=\"grid-line-x-\"] > *::before {\n bottom: -1.5rem;\n }\n .xxxl\\:grid-line-x-24[class*=\"grid-line-yfull\"] > *::after {\n top: -1.5rem;\n bottom: -1.5rem;\n }\n .xxxl\\:grid-line-x-28[class*=\"grid-line-x-\"] > *::before {\n bottom: -1.75rem;\n }\n .xxxl\\:grid-line-x-28[class*=\"grid-line-yfull\"] > *::after {\n top: -1.75rem;\n bottom: -1.75rem;\n }\n .xxxl\\:grid-line-x-32[class*=\"grid-line-x-\"] > *::before {\n bottom: -2rem;\n }\n .xxxl\\:grid-line-x-32[class*=\"grid-line-yfull\"] > *::after {\n top: -2rem;\n bottom: -2rem;\n }\n .xxxl\\:grid-line-x-36[class*=\"grid-line-x-\"] > *::before {\n bottom: -2.25rem;\n }\n .xxxl\\:grid-line-x-36[class*=\"grid-line-yfull\"] > *::after {\n top: -2.25rem;\n bottom: -2.25rem;\n }\n .xxxl\\:grid-line-x-40[class*=\"grid-line-x-\"] > *::before {\n bottom: -2.5rem;\n }\n .xxxl\\:grid-line-x-40[class*=\"grid-line-yfull\"] > *::after {\n top: -2.5rem;\n bottom: -2.5rem;\n }\n .xxxl\\:grid-line-x-44[class*=\"grid-line-x-\"] > *::before {\n bottom: -2.75rem;\n }\n .xxxl\\:grid-line-x-44[class*=\"grid-line-yfull\"] > *::after {\n top: -2.75rem;\n bottom: -2.75rem;\n }\n .xxxl\\:grid-line-x-48[class*=\"grid-line-x-\"] > *::before {\n bottom: -3rem;\n }\n .xxxl\\:grid-line-x-48[class*=\"grid-line-yfull\"] > *::after {\n top: -3rem;\n bottom: -3rem;\n }\n .xxxl\\:grid-line-x-52[class*=\"grid-line-x-\"] > *::before {\n bottom: -3.25rem;\n }\n .xxxl\\:grid-line-x-52[class*=\"grid-line-yfull\"] > *::after {\n top: -3.25rem;\n bottom: -3.25rem;\n }\n .xxxl\\:grid-line-x-56[class*=\"grid-line-x-\"] > *::before {\n bottom: -3.5rem;\n }\n .xxxl\\:grid-line-x-56[class*=\"grid-line-yfull\"] > *::after {\n top: -3.5rem;\n bottom: -3.5rem;\n }\n .xxxl\\:grid-line-x-60[class*=\"grid-line-x-\"] > *::before {\n bottom: -3.75rem;\n }\n .xxxl\\:grid-line-x-60[class*=\"grid-line-yfull\"] > *::after {\n top: -3.75rem;\n bottom: -3.75rem;\n }\n .xxxl\\:grid-line-x-64[class*=\"grid-line-x-\"] > *::before {\n bottom: -4rem;\n }\n .xxxl\\:grid-line-x-64[class*=\"grid-line-yfull\"] > *::after {\n top: -4rem;\n bottom: -4rem;\n }\n .xxxl\\:grid-line-x-68[class*=\"grid-line-x-\"] > *::before {\n bottom: -4.25rem;\n }\n .xxxl\\:grid-line-x-68[class*=\"grid-line-yfull\"] > *::after {\n top: -4.25rem;\n bottom: -4.25rem;\n }\n .xxxl\\:grid-line-x-72[class*=\"grid-line-x-\"] > *::before {\n bottom: -4.5rem;\n }\n .xxxl\\:grid-line-x-72[class*=\"grid-line-yfull\"] > *::after {\n top: -4.5rem;\n bottom: -4.5rem;\n }\n .xxxl\\:grid-line-x-76[class*=\"grid-line-x-\"] > *::before {\n bottom: -4.75rem;\n }\n .xxxl\\:grid-line-x-76[class*=\"grid-line-yfull\"] > *::after {\n top: -4.75rem;\n bottom: -4.75rem;\n }\n .xxxl\\:grid-line-x-80[class*=\"grid-line-x-\"] > *::before {\n bottom: -5rem;\n }\n .xxxl\\:grid-line-x-80[class*=\"grid-line-yfull\"] > *::after {\n top: -5rem;\n bottom: -5rem;\n }\n .xxxl\\:grid-line-x-84[class*=\"grid-line-x-\"] > *::before {\n bottom: -5.25rem;\n }\n .xxxl\\:grid-line-x-84[class*=\"grid-line-yfull\"] > *::after {\n top: -5.25rem;\n bottom: -5.25rem;\n }\n .xxxl\\:grid-line-x-88[class*=\"grid-line-x-\"] > *::before {\n bottom: -5.5rem;\n }\n .xxxl\\:grid-line-x-88[class*=\"grid-line-yfull\"] > *::after {\n top: -5.5rem;\n bottom: -5.5rem;\n }\n .xxxl\\:grid-line-x-92[class*=\"grid-line-x-\"] > *::before {\n bottom: -5.75rem;\n }\n .xxxl\\:grid-line-x-92[class*=\"grid-line-yfull\"] > *::after {\n top: -5.75rem;\n bottom: -5.75rem;\n }\n .xxxl\\:grid-line-x-96[class*=\"grid-line-x-\"] > *::before {\n bottom: -6rem;\n }\n .xxxl\\:grid-line-x-96[class*=\"grid-line-yfull\"] > *::after {\n top: -6rem;\n bottom: -6rem;\n }\n .xxxl\\:grid-line-x-100[class*=\"grid-line-x-\"] > *::before {\n bottom: -6.25rem;\n }\n .xxxl\\:grid-line-x-100[class*=\"grid-line-yfull\"] > *::after {\n top: -6.25rem;\n bottom: -6.25rem;\n }\n .xxxl\\:grid-line-x-safe-top[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-top);\n }\n .xxxl\\:grid-line-x-safe-top[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-top);\n bottom: -env(safe-area-inset-top);\n }\n .xxxl\\:grid-line-x-safe-bottom[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-bottom);\n }\n .xxxl\\:grid-line-x-safe-bottom[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-bottom);\n bottom: -env(safe-area-inset-bottom);\n }\n .xxxl\\:grid-line-x-safe-left[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-left);\n }\n .xxxl\\:grid-line-x-safe-left[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-left);\n bottom: -env(safe-area-inset-left);\n }\n .xxxl\\:grid-line-x-safe-right[class*=\"grid-line-x-\"] > *::before {\n bottom: -env(safe-area-inset-right);\n }\n .xxxl\\:grid-line-x-safe-right[class*=\"grid-line-yfull\"] > *::after {\n top: -env(safe-area-inset-right);\n bottom: -env(safe-area-inset-right);\n }\n .xxxl\\:grid-line-x-gutter[class*=\"grid-line-x-\"] > *::before {\n bottom: -var(--inner-gutter);\n }\n .xxxl\\:grid-line-x-gutter[class*=\"grid-line-yfull\"] > *::after {\n top: -var(--inner-gutter);\n bottom: -var(--inner-gutter);\n }\n .xxxl\\:grid-line-x-outer-gutter[class*=\"grid-line-x-\"] > *::before {\n bottom: -var(--outer-gutter, 0px);\n }\n .xxxl\\:grid-line-x-outer-gutter[class*=\"grid-line-yfull\"] > *::after {\n top: -var(--outer-gutter, 0px);\n bottom: -var(--outer-gutter, 0px);\n }\n .xxxl\\:grid-line-x-default[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--brand-black);\n }\n .xxxl\\:grid-line-y-default[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--brand-black);\n }\n .xxxl\\:grid-line-xy-default[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--brand-black);\n }\n .xxxl\\:grid-line-xy-default[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--brand-black);\n }\n .xxxl\\:grid-line-x-inverse[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--white);\n }\n .xxxl\\:grid-line-y-inverse[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--white);\n }\n .xxxl\\:grid-line-xy-inverse[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--white);\n }\n .xxxl\\:grid-line-xy-inverse[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--white);\n }\n .xxxl\\:grid-line-x-inverse-soft[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.3);\n }\n .xxxl\\:grid-line-y-inverse-soft[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.3);\n }\n .xxxl\\:grid-line-xy-inverse-soft[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.3);\n }\n .xxxl\\:grid-line-xy-inverse-soft[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.3);\n }\n .xxxl\\:grid-line-x-inverse-softer[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.15);\n }\n .xxxl\\:grid-line-y-inverse-softer[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.15);\n }\n .xxxl\\:grid-line-xy-inverse-softer[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(255, 255, 255, 0.15);\n }\n .xxxl\\:grid-line-xy-inverse-softer[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(255, 255, 255, 0.15);\n }\n .xxxl\\:grid-line-x-soft[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .15 );\n }\n .xxxl\\:grid-line-y-soft[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .15 );\n }\n .xxxl\\:grid-line-xy-soft[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .15 );\n }\n .xxxl\\:grid-line-xy-soft[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .15 );\n }\n .xxxl\\:grid-line-x-softer[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .1 );\n }\n .xxxl\\:grid-line-y-softer[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .1 );\n }\n .xxxl\\:grid-line-xy-softer[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .1 );\n }\n .xxxl\\:grid-line-xy-softer[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .1 );\n }\n .xxxl\\:grid-line-x-softest[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .05 );\n }\n .xxxl\\:grid-line-y-softest[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .05 );\n }\n .xxxl\\:grid-line-xy-softest[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: rgba(0, 0, 0, .05 );\n }\n .xxxl\\:grid-line-xy-softest[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: rgba(0, 0, 0, .05 );\n }\n .xxxl\\:grid-line-x-accent[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--brand-green);\n }\n .xxxl\\:grid-line-y-accent[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--brand-green);\n }\n .xxxl\\:grid-line-xy-accent[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--brand-green);\n }\n .xxxl\\:grid-line-xy-accent[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--brand-green);\n }\n .xxxl\\:grid-line-x-error[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--red-700);\n }\n .xxxl\\:grid-line-y-error[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--red-700);\n }\n .xxxl\\:grid-line-xy-error[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--red-700);\n }\n .xxxl\\:grid-line-xy-error[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--red-700);\n }\n .xxxl\\:grid-line-x-current[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: currentColor;\n }\n .xxxl\\:grid-line-y-current[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: currentColor;\n }\n .xxxl\\:grid-line-xy-current[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: currentColor;\n }\n .xxxl\\:grid-line-xy-current[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: currentColor;\n }\n .xxxl\\:grid-line-x-transparent[class*=\"grid-line-x-\"] > *::before {\n border-bottom-color: var(--transparent);\n }\n .xxxl\\:grid-line-y-transparent[class*=\"grid-line-y-\"] > *::after {\n border-inline-end-color: var(--transparent);\n }\n .xxxl\\:grid-line-xy-transparent[class*=\"grid-line-xy-\"] > *::before {\n border-bottom-color: var(--transparent);\n }\n .xxxl\\:grid-line-xy-transparent[class*=\"grid-line-xy-\"] > *::after {\n border-inline-end-color: var(--transparent);\n }\n .xxxl\\:grid-cols-1[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxxl\\:grid-cols-1[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: 0;\n inset-inline-end: 0;\n }\n .xxxl\\:grid-cols-1[class*=\"grid-line-x\"] > *:nth-child(1n+1)::before {\n inset-inline-end: 0;\n }\n .xxxl\\:grid-cols-1[class*=\"grid-line-x\"] > *:nth-child(1n+1):nth-last-child(-n+1)::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-1[class*=\"grid-line-x\"] > *:nth-child(1n+1):nth-last-child(-n+1) ~ *::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-2[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxxl\\:grid-cols-2[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxxl\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+1)::before {\n inset-inline-start: 0;\n }\n .xxxl\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+2)::before {\n inset-inline-end: 0;\n }\n .xxxl\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+1):nth-last-child(-n+2)::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-2[class*=\"grid-line-x\"] > *:nth-child(2n+1):nth-last-child(-n+2) ~ *::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxxl\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(2n+2)::after {\n border-inline-end-width: 0;\n }\n .xxxl\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+2)::after {\n top: 0;\n }\n .xxxl\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(2n+1):nth-last-child(-n+2)::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-2[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(2n+1):nth-last-child(-n+2) ~ li::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-3[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxxl\\:grid-cols-3[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxxl\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+1)::before {\n inset-inline-start: 0;\n }\n .xxxl\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+3)::before {\n inset-inline-end: 0;\n }\n .xxxl\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+1):nth-last-child(-n+3)::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-3[class*=\"grid-line-x\"] > *:nth-child(3n+1):nth-last-child(-n+3) ~ *::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxxl\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(3n+3)::after {\n border-inline-end-width: 0;\n }\n .xxxl\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+3)::after {\n top: 0;\n }\n .xxxl\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(3n+1):nth-last-child(-n+3)::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-3[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(3n+1):nth-last-child(-n+3) ~ li::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-4[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxxl\\:grid-cols-4[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxxl\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+1)::before {\n inset-inline-start: 0;\n }\n .xxxl\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+4)::before {\n inset-inline-end: 0;\n }\n .xxxl\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+1):nth-last-child(-n+4)::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-4[class*=\"grid-line-x\"] > *:nth-child(4n+1):nth-last-child(-n+4) ~ *::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxxl\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(4n+4)::after {\n border-inline-end-width: 0;\n }\n .xxxl\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+4)::after {\n top: 0;\n }\n .xxxl\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(4n+1):nth-last-child(-n+4)::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(4n+1):nth-last-child(-n+4) ~ li::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-5[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxxl\\:grid-cols-5[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxxl\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+1)::before {\n inset-inline-start: 0;\n }\n .xxxl\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+5)::before {\n inset-inline-end: 0;\n }\n .xxxl\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+1):nth-last-child(-n+5)::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-5[class*=\"grid-line-x\"] > *:nth-child(5n+1):nth-last-child(-n+5) ~ *::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxxl\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(5n+5)::after {\n border-inline-end-width: 0;\n }\n .xxxl\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+5)::after {\n top: 0;\n }\n .xxxl\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(5n+1):nth-last-child(-n+5)::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-5[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(5n+1):nth-last-child(-n+5) ~ li::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-6[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxxl\\:grid-cols-6[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxxl\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+1)::before {\n inset-inline-start: 0;\n }\n .xxxl\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+6)::before {\n inset-inline-end: 0;\n }\n .xxxl\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+1):nth-last-child(-n+6)::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-6[class*=\"grid-line-x\"] > *:nth-child(6n+1):nth-last-child(-n+6) ~ *::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxxl\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(6n+6)::after {\n border-inline-end-width: 0;\n }\n .xxxl\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+6)::after {\n top: 0;\n }\n .xxxl\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(6n+1):nth-last-child(-n+6)::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-6[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(6n+1):nth-last-child(-n+6) ~ li::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-7[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxxl\\:grid-cols-7[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxxl\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+1)::before {\n inset-inline-start: 0;\n }\n .xxxl\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+7)::before {\n inset-inline-end: 0;\n }\n .xxxl\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+1):nth-last-child(-n+7)::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-7[class*=\"grid-line-x\"] > *:nth-child(7n+1):nth-last-child(-n+7) ~ *::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxxl\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(7n+7)::after {\n border-inline-end-width: 0;\n }\n .xxxl\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+7)::after {\n top: 0;\n }\n .xxxl\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(7n+1):nth-last-child(-n+7)::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-7[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(7n+1):nth-last-child(-n+7) ~ li::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-8[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxxl\\:grid-cols-8[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxxl\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+1)::before {\n inset-inline-start: 0;\n }\n .xxxl\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+8)::before {\n inset-inline-end: 0;\n }\n .xxxl\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+1):nth-last-child(-n+8)::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-8[class*=\"grid-line-x\"] > *:nth-child(8n+1):nth-last-child(-n+8) ~ *::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxxl\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(8n+8)::after {\n border-inline-end-width: 0;\n }\n .xxxl\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+8)::after {\n top: 0;\n }\n .xxxl\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(8n+1):nth-last-child(-n+8)::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-8[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(8n+1):nth-last-child(-n+8) ~ li::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-9[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxxl\\:grid-cols-9[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxxl\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+1)::before {\n inset-inline-start: 0;\n }\n .xxxl\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+9)::before {\n inset-inline-end: 0;\n }\n .xxxl\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+1):nth-last-child(-n+9)::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-9[class*=\"grid-line-x\"] > *:nth-child(9n+1):nth-last-child(-n+9) ~ *::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxxl\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(9n+9)::after {\n border-inline-end-width: 0;\n }\n .xxxl\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+9)::after {\n top: 0;\n }\n .xxxl\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(9n+1):nth-last-child(-n+9)::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-9[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(9n+1):nth-last-child(-n+9) ~ li::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-10[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxxl\\:grid-cols-10[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxxl\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+1)::before {\n inset-inline-start: 0;\n }\n .xxxl\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+10)::before {\n inset-inline-end: 0;\n }\n .xxxl\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+1):nth-last-child(-n+10)::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-10[class*=\"grid-line-x\"] > *:nth-child(10n+1):nth-last-child(-n+10) ~ *::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxxl\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(10n+10)::after {\n border-inline-end-width: 0;\n }\n .xxxl\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+10)::after {\n top: 0;\n }\n .xxxl\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(10n+1):nth-last-child(-n+10)::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-10[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(10n+1):nth-last-child(-n+10) ~ li::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-11[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxxl\\:grid-cols-11[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxxl\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+1)::before {\n inset-inline-start: 0;\n }\n .xxxl\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+11)::before {\n inset-inline-end: 0;\n }\n .xxxl\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+1):nth-last-child(-n+11)::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-11[class*=\"grid-line-x\"] > *:nth-child(11n+1):nth-last-child(-n+11) ~ *::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxxl\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(11n+11)::after {\n border-inline-end-width: 0;\n }\n .xxxl\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+11)::after {\n top: 0;\n }\n .xxxl\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(11n+1):nth-last-child(-n+11)::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(11n+1):nth-last-child(-n+11) ~ li::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-12[class*=\"grid-line-x\"][class*=\"grid-line-x\"] > *:nth-child(n)::before {\n border-bottom-width: 1px;\n }\n .xxxl\\:grid-cols-12[class*=\"grid-line-xfull\"] > *:nth-child(n)::before {\n inset-inline-start: calc(var(--inner-gutter) / -2);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n }\n .xxxl\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+1)::before {\n inset-inline-start: 0;\n }\n .xxxl\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+12)::before {\n inset-inline-end: 0;\n }\n .xxxl\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+1):nth-last-child(-n+12)::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-12[class*=\"grid-line-x\"] > *:nth-child(12n+1):nth-last-child(-n+12) ~ *::before {\n border-bottom-width: 0;\n }\n .xxxl\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(n)::after {\n border-inline-end-width: 1px;\n }\n .xxxl\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(12n+12)::after {\n border-inline-end-width: 0;\n }\n .xxxl\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(-n+12)::after {\n top: 0;\n }\n .xxxl\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(12n+1):nth-last-child(-n+12)::after {\n bottom: 0;\n }\n .xxxl\\:grid-cols-12[class*=\"grid-line-y\"][class*=\"grid-line-y\"] > *:nth-child(12n+1):nth-last-child(-n+12) ~ li::after {\n bottom: 0;\n }\n}\n.cols-container > .ml-0 {\n margin-left: 0;\n}\n.w-12-cols {\n width: calc(((12 / var(--container-grid-columns, var(--grid-columns))) * 100%) - (var(--inner-gutter) - (12 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))));\n}\n.cols-container > .w-12-cols {\n width: calc(((12 / var(--container-grid-columns, var(--grid-columns))) * (100% - var(--inner-gutter))) - (var(--inner-gutter) - (12 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))));\n}\n.w-12-cols > * {\n --container-grid-columns: 12;\n}\n.border-inside {\n position: relative;\n\n &::after {\n pointer-events: none;\n }\n\n &::after {\n position: absolute;\n }\n\n &::after {\n inset: 0rem;\n }\n\n &::after {\n z-index: 1;\n }\n\n &::after {\n border-radius: 8px;\n }\n\n &::after {\n border-width: 1px;\n }\n\n &::after {\n border-width: 2px;\n }\n\n &::after {\n border-color: rgba(0, 0, 0, .1 );\n }\n\n &::after {\n content: '';\n }\n}\n.border-inside-inverse {\n &::after {\n border-color: rgba(255, 255, 255, 0.3);\n }\n &::after {\n content: '';\n }\n }\n.border-inside-pill {\n &::after {\n border-radius: 100px;\n }\n &::after {\n content: '';\n }\n }\n.input-label-options {\n font-family: var(--f-ui-03-fontFamily);\n font-size: var(--f-ui-03-fontSize);\n line-height: var(--f-ui-03-lineHeight);\n letter-spacing: var(--f-ui-03-letterSpacing);\n}\n.input-label {\n font-family: var(--f-ui-04-fontFamily);\n font-weight: var(--f-ui-04-fontWeight);\n font-size: var(--f-ui-04-fontSize);\n line-height: var(--f-ui-04-lineHeight);\n letter-spacing: var(--f-ui-04-letterSpacing);\n}\n.input-label b,.input-label strong {\n font-weight: var(--f-ui-04---bold-weight, bold);\n}\n.input {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n display: flex;\n min-height: 2.5rem;\n width: 100%;\n align-items: center;\n padding-top: 10px;\n padding-bottom: 10px;\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n border-radius: 8px;\n border-width: 2px;\n border-color: rgba(0, 0, 0, .1 );\n}\n.input:hover {\n border-color: var(--brand-black);\n}\n.input:active {\n border-color: var(--brand-black);\n}\n.input {\n font-family: var(--f-ui-02-light-fontFamily);\n font-weight: var(--f-ui-02-light-fontWeight);\n font-size: var(--f-ui-02-light-fontSize);\n line-height: var(--f-ui-02-light-lineHeight);\n letter-spacing: var(--f-ui-02-light-letterSpacing);\n}\n.input b,.input strong {\n font-weight: var(--f-ui-02-light---bold-weight, bold);\n}\n.input::-moz-placeholder {\n color: var(--grey-500);\n}\n.input::placeholder {\n color: var(--grey-500);\n}\n/* A <select> has no ::placeholder — when no option is chosen yet it shows the\n placeholder <option> in the normal dark text colour, which looks heavier than\n text-input placeholders. is-placeholder (set by eds-input-select while empty)\n matches them by rendering the closed select in grey-500; real options in the\n open dropdown stay dark for readability. */\n.input.is-placeholder {\n color: var(--grey-500);\n}\n.input.is-placeholder option {\n color: var(--brand-black);\n}\n.input {\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n outline-width: 3px;\n outline-offset: 2px;\n outline-color: var(--brand-green);\n}\n.input:focus-visible {\n outline-style: solid;\n}\n.input:disabled {\n cursor: not-allowed;\n background-color: var(--grey-300);\n color: var(--grey-500);\n}\n.input:disabled:hover {\n border-color: rgba(0, 0, 0, .1 );\n}\n.input:disabled:active {\n border-color: rgba(0, 0, 0, .1 );\n}\n.input-with-icon {\n padding-right: 34px;\n}\n.input-checkbox {\n position: relative;\n height: 1rem;\n min-height: auto;\n width: 1rem;\n padding: 0rem;\n border-radius: 4px;\n border-color: rgba(0, 0, 0, .15 );\n}\n.input-checkbox::after {\n --tw-content: '';\n content: var(--tw-content);\n position: absolute;\n top: 0rem;\n left: 50%;\n --tw-translate-x: -50%;\n height: 10px;\n width: 6px;\n --tw-rotate: 45deg;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n border-bottom-width: 2px;\n border-right-width: 2px;\n border-color: var(--transparent);\n}\n.input-checkbox:checked {\n border-color: var(--brand-black);\n background-color: var(--brand-black);\n}\n.input-checkbox:checked::after {\n border-color: var(--white);\n}\n.input-checkbox:checked:disabled {\n border-color: rgba(0, 0, 0, .15 );\n background-color: var(--grey-300);\n}\n.input-checkbox:checked:disabled::after {\n border-color: rgba(0, 0, 0, .15 );\n}\n.input-radio {\n position: relative;\n height: 1rem;\n min-height: auto;\n width: 1rem;\n padding: 0rem;\n border-radius: 9999px;\n border-color: rgba(0, 0, 0, .15 );\n}\n.input-radio::after {\n --tw-content: '';\n content: var(--tw-content);\n position: absolute;\n top: 50%;\n left: 50%;\n --tw-translate-x: -50%;\n --tw-translate-y: -50%;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n height: 6px;\n width: 6px;\n border-radius: 9999px;\n background-color: var(--transparent);\n}\n.input-radio:checked {\n border-color: var(--brand-black);\n background-color: var(--brand-black);\n}\n.input-radio:checked::after {\n background-color: var(--white);\n}\n.input-radio:checked:disabled::after {\n background-color: var(--white);\n}\n.input-error {\n border-color: var(--red-700);\n}\n.input-counter {\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n color: var(--grey-500);\n\n &.input-counter-error {\n color: var(--red-700);\n }\n}\ninput[type=\"range\"]::-webkit-slider-thumb {\n height: 1.5rem;\n width: 1.5rem;\n border-radius: 9999px;\n outline: 2px solid var(--brand-green); /* This adds an outline */\n background-color: var(--brand-green-dark);\n -webkit-appearance: none;\n appearance: none; /* Ensure the thumb can be styled */\n}\n.loader {\n box-sizing: border-box;\n display: inline-block;\n height: 1rem;\n width: 1rem;\n}\n@keyframes spin {\n to {\n transform: rotate(360deg);\n }\n}\n.loader {\n animation: spin 1s linear infinite;\n border-radius: 9999px;\n border: 3px solid rgba(0, 0, 0, .3);\n border-bottom-color: #000;\n}\n.scroller-x {\n -ms-overflow-style: none;\n scrollbar-width: none;\n}\n.scroller-x::-webkit-scrollbar {\n display: none;\n}\n.scroller-x {\n overflow: auto;\n overscroll-behavior-x: contain;\n}\n/** region TRANSITIONS */\n.effect-color {\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n}\n.effect-opacity {\n transition-property: opacity;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n}\n.effect-background {\n transition-property: background;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n}\n.effect-height {\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n transition-property: height;\n}\n.effect-shadow {\n transition-property: box-shadow;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n}\n/** endregion */\n/* region FOCUS */\n.effect-focus {\n outline-width: 3px;\n outline-offset: 2px;\n outline-color: var(--brand-green);\n}\n.effect-focus:focus-visible {\n outline-style: solid;\n}\n.effect-focus-within {\n outline-width: 3px;\n outline-offset: 2px;\n outline-color: var(--brand-green);\n}\n.effect-focus-within:focus-within {\n outline-style: solid;\n}\n/* endregion */\n/* region BG */\n.effect-bg-pattern {\n position: relative;\n z-index: 1;\n\n &::before {\n position: absolute;\n content: '';\n z-index: -1;\n inset: 0;\n background-color: rgba(208, 208, 208, 0.75);\n opacity: 0.75;\n background-image: repeating-linear-gradient(45deg, #F5F5F5 25%, transparent 25%, transparent 75%, #F5F5F5 75%, #F5F5F5), repeating-linear-gradient(45deg, #F5F5F5 25%, #D0D0D0 25%, #D0D0D0 75%, #F5F5F5 75%, #F5F5F5);\n background-position: 0 0, 8px 8px;\n background-size: 16px 16px;\n }\n }\n.effect-bg-behind {\n position: relative;\n}\n.effect-bg-behind::before {\n position: absolute;\n inset: 0rem;\n z-index: -1;\n --tw-content: '';\n content: var(--tw-content);\n}\n.effect-bg-behind {\n\n &:before {\n background-size: calc(100% + 6px) calc(100% + 6px) !important;\n background-position: -4px -4px !important;\n background-repeat: no-repeat !important;\n }\n }\n.effect-bg-behind-link {\n position: relative;\n}\n.effect-bg-behind-link::before {\n position: absolute;\n top: 0rem;\n bottom: 0rem;\n left: -0.5rem;\n right: 0rem;\n z-index: 0;\n border-radius: 8px;\n background-color: var(--grey-400);\n --tw-content: '';\n content: var(--tw-content);\n}\n.effect-bg-behind-link[aria-disabled=\"true\"]::before {\n background-color: var(--transparent);\n}\n/* endregion */\n/*region shadow*/\n/*endregion*/\n.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n}\n.pointer-events-none {\n pointer-events: none;\n}\n.visible {\n visibility: visible;\n}\n.collapse {\n visibility: collapse;\n}\n.static {\n position: static;\n}\n.fixed {\n position: fixed;\n}\n.absolute {\n position: absolute;\n}\n.relative {\n position: relative;\n}\n.sticky {\n position: sticky;\n}\n.inset-0 {\n inset: 0rem;\n}\n.inset-x-16 {\n left: 1rem;\n right: 1rem;\n}\n.-top-1 {\n top: -0.0625rem;\n}\n.bottom-0 {\n bottom: 0rem;\n}\n.bottom-20 {\n bottom: 1.25rem;\n}\n.bottom-4 {\n bottom: 0.25rem;\n}\n.bottom-8 {\n bottom: 0.5rem;\n}\n.left-0 {\n left: 0rem;\n}\n.left-1\\/2 {\n left: 50%;\n}\n.left-20 {\n left: 1.25rem;\n}\n.left-4 {\n left: 0.25rem;\n}\n.left-\\[12px\\] {\n left: 12px;\n}\n.right-0 {\n right: 0rem;\n}\n.right-20 {\n right: 1.25rem;\n}\n.right-4 {\n right: 0.25rem;\n}\n.right-8 {\n right: 0.5rem;\n}\n.right-\\[4px\\] {\n right: 4px;\n}\n.right-\\[6px\\] {\n right: 6px;\n}\n.top-0 {\n top: 0rem;\n}\n.top-1\\/2 {\n top: 50%;\n}\n.top-16 {\n top: 1rem;\n}\n.top-20 {\n top: 1.25rem;\n}\n.top-full {\n top: 100%;\n}\n.z-0 {\n z-index: 0;\n}\n.z-1 {\n z-index: 1;\n}\n.z-10 {\n z-index: 10;\n}\n.z-50 {\n z-index: 50;\n}\n.z-\\[1\\] {\n z-index: 1;\n}\n.z-\\[999999\\] {\n z-index: 999999;\n}\n.z-focus {\n z-index: 99;\n}\n.z-on-top {\n z-index: 99999;\n}\n.order-first {\n order: -9999;\n}\n.order-last {\n order: 9999;\n}\n.m-0 {\n margin: 0rem;\n}\n.m-32 {\n margin: 2rem;\n}\n.mx-auto {\n margin-left: auto;\n margin-right: auto;\n}\n.my-16 {\n margin-top: 1rem;\n margin-bottom: 1rem;\n}\n.my-20 {\n margin-top: 1.25rem;\n margin-bottom: 1.25rem;\n}\n.my-4 {\n margin-top: 0.25rem;\n margin-bottom: 0.25rem;\n}\n.my-8 {\n margin-top: 0.5rem;\n margin-bottom: 0.5rem;\n}\n.-ml-16 {\n margin-left: -1rem;\n}\n.-mr-16 {\n margin-right: -1rem;\n}\n.mb-10 {\n margin-bottom: 0.625rem;\n}\n.mb-12 {\n margin-bottom: 0.75rem;\n}\n.mb-28 {\n margin-bottom: 1.75rem;\n}\n.mb-4 {\n margin-bottom: 0.25rem;\n}\n.ml-0 {\n margin-left: 0rem;\n}\n.ml-4 {\n margin-left: 0.25rem;\n}\n.ml-64 {\n margin-left: 4rem;\n}\n.ml-8 {\n margin-left: 0.5rem;\n}\n.ml-auto {\n margin-left: auto;\n}\n.mr-4 {\n margin-right: 0.25rem;\n}\n.mr-8 {\n margin-right: 0.5rem;\n}\n.mr-auto {\n margin-right: auto;\n}\n.mt-12 {\n margin-top: 0.75rem;\n}\n.mt-16 {\n margin-top: 1rem;\n}\n.mt-2 {\n margin-top: 0.125rem;\n}\n.mt-20 {\n margin-top: 1.25rem;\n}\n.mt-28 {\n margin-top: 1.75rem;\n}\n.mt-32 {\n margin-top: 2rem;\n}\n.mt-4 {\n margin-top: 0.25rem;\n}\n.mt-6 {\n margin-top: 0.375rem;\n}\n.mt-8 {\n margin-top: 0.5rem;\n}\n.mb-8 {\n margin-bottom: 0.5rem;\n}\n.mt-auto {\n margin-top: auto;\n}\n.line-clamp-1 {\n overflow: hidden;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 1;\n}\n.line-clamp-2 {\n overflow: hidden;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n}\n.line-clamp-3 {\n overflow: hidden;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 3;\n}\n.line-clamp-4 {\n overflow: hidden;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 4;\n}\n.block {\n display: block;\n}\n.inline-block {\n display: inline-block;\n}\n.inline {\n display: inline;\n}\n.flex {\n display: flex;\n}\n.inline-flex {\n display: inline-flex;\n}\n.table {\n display: table;\n}\n.grid {\n display: grid;\n}\n.hidden {\n display: none;\n}\n.aspect-16x9 {\n aspect-ratio: 16/9;\n}\n.aspect-1x1 {\n aspect-ratio: 1/1;\n}\n.aspect-21x9 {\n aspect-ratio: 21/9;\n}\n.aspect-3x2 {\n aspect-ratio: 3/2;\n}\n.aspect-4x3 {\n aspect-ratio: 4/3;\n}\n.aspect-4x5 {\n aspect-ratio: 4/5;\n}\n.h-0 {\n height: 0rem;\n}\n.h-12 {\n height: 0.75rem;\n}\n.h-16 {\n height: 1rem;\n}\n.h-2 {\n height: 0.125rem;\n}\n.h-20 {\n height: 1.25rem;\n}\n.h-24 {\n height: 1.5rem;\n}\n.h-28 {\n height: 1.75rem;\n}\n.h-32 {\n height: 2rem;\n}\n.h-36 {\n height: 2.25rem;\n}\n.h-4 {\n height: 0.25rem;\n}\n.h-40 {\n height: 2.5rem;\n}\n.h-44 {\n height: 2.75rem;\n}\n.h-48 {\n height: 3rem;\n}\n.h-64 {\n height: 4rem;\n}\n.h-8 {\n height: 0.5rem;\n}\n.h-96 {\n height: 6rem;\n}\n.h-\\[85px\\] {\n height: 85px;\n}\n.h-auto {\n height: auto;\n}\n.h-full {\n height: 100%;\n}\n.\\!min-h-20 {\n min-height: 1.25rem !important;\n}\n.min-h-156 {\n min-height: 156px;\n}\n.min-h-36 {\n min-height: 2.25rem;\n}\n.min-h-44 {\n min-height: 2.75rem;\n}\n.min-h-56 {\n min-height: 3.5rem;\n}\n.min-h-80 {\n min-height: 5rem;\n}\n.min-h-\\[150px\\] {\n min-height: 150px;\n}\n.min-h-\\[225px\\] {\n min-height: 225px;\n}\n.min-h-\\[90px\\] {\n min-height: 90px;\n}\n.min-h-full {\n min-height: 100%;\n}\n.min-h-screen {\n min-height: 100vh;\n}\n.w-1\\/2 {\n width: 50%;\n}\n.w-20 {\n width: 1.25rem;\n}\n.w-28 {\n width: 1.75rem;\n}\n.w-32 {\n width: 2rem;\n}\n.w-4 {\n width: 0.25rem;\n}\n.w-44 {\n width: 2.75rem;\n}\n.w-\\[200px\\] {\n width: 200px;\n}\n.w-\\[300px\\] {\n width: 300px;\n}\n.w-\\[54px\\] {\n width: 54px;\n}\n.w-auto {\n width: auto;\n}\n.w-fit {\n width: -moz-fit-content;\n width: fit-content;\n}\n.w-full {\n width: 100%;\n}\n.min-w-\\[200px\\] {\n min-width: 200px;\n}\n.min-w-\\[210px\\] {\n min-width: 210px;\n}\n.min-w-\\[250px\\] {\n min-width: 250px;\n}\n.min-w-\\[280px\\] {\n min-width: 280px;\n}\n.max-w-120 {\n max-width: 120px;\n}\n.max-w-full {\n max-width: 100%;\n}\n.max-w-sidebar {\n max-width: 1224px;\n}\n.max-w-xxxl {\n max-width: 2200px;\n}\n.flex-none {\n flex: none;\n}\n.grow {\n flex-grow: 1;\n}\n.-translate-x-1\\/2 {\n --tw-translate-x: -50%;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.-translate-y-1\\/2 {\n --tw-translate-y: -50%;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.transform {\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.cursor-pointer {\n cursor: pointer;\n}\n.resize {\n resize: both;\n}\n.appearance-none {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n}\n.grid-cols-1 {\n grid-template-columns: repeat(1, minmax(0, 1fr));\n}\n.grid-cols-10 {\n grid-template-columns: repeat(10, minmax(0, 1fr));\n}\n.grid-cols-11 {\n grid-template-columns: repeat(11, minmax(0, 1fr));\n}\n.grid-cols-12 {\n grid-template-columns: repeat(12, minmax(0, 1fr));\n}\n.grid-cols-2 {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n}\n.grid-cols-3 {\n grid-template-columns: repeat(3, minmax(0, 1fr));\n}\n.grid-cols-4 {\n grid-template-columns: repeat(4, minmax(0, 1fr));\n}\n.grid-cols-5 {\n grid-template-columns: repeat(5, minmax(0, 1fr));\n}\n.grid-cols-6 {\n grid-template-columns: repeat(6, minmax(0, 1fr));\n}\n.grid-cols-7 {\n grid-template-columns: repeat(7, minmax(0, 1fr));\n}\n.grid-cols-8 {\n grid-template-columns: repeat(8, minmax(0, 1fr));\n}\n.grid-cols-9 {\n grid-template-columns: repeat(9, minmax(0, 1fr));\n}\n.flex-row {\n flex-direction: row;\n}\n.flex-row-reverse {\n flex-direction: row-reverse;\n}\n.flex-col {\n flex-direction: column;\n}\n.flex-wrap {\n flex-wrap: wrap;\n}\n.items-start {\n align-items: flex-start;\n}\n.items-center {\n align-items: center;\n}\n.justify-center {\n justify-content: center;\n}\n.justify-between {\n justify-content: space-between;\n}\n.gap-1 {\n gap: 0.0625rem;\n}\n.gap-12 {\n gap: 0.75rem;\n}\n.gap-20 {\n gap: 1.25rem;\n}\n.gap-4 {\n gap: 0.25rem;\n}\n.gap-x-12 {\n -moz-column-gap: 0.75rem;\n column-gap: 0.75rem;\n}\n.gap-x-16 {\n -moz-column-gap: 1rem;\n column-gap: 1rem;\n}\n.gap-x-2 {\n -moz-column-gap: 0.125rem;\n column-gap: 0.125rem;\n}\n.gap-x-4 {\n -moz-column-gap: 0.25rem;\n column-gap: 0.25rem;\n}\n.gap-x-8 {\n -moz-column-gap: 0.5rem;\n column-gap: 0.5rem;\n}\n.gap-y-12 {\n row-gap: 0.75rem;\n}\n.gap-y-16 {\n row-gap: 1rem;\n}\n.gap-y-4 {\n row-gap: 0.25rem;\n}\n.gap-y-8 {\n row-gap: 0.5rem;\n}\n.space-x-1 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-x-reverse: 0;\n margin-right: calc(0.0625rem * var(--tw-space-x-reverse));\n margin-left: calc(0.0625rem * calc(1 - var(--tw-space-x-reverse)));\n}\n.space-x-2 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-x-reverse: 0;\n margin-right: calc(0.125rem * var(--tw-space-x-reverse));\n margin-left: calc(0.125rem * calc(1 - var(--tw-space-x-reverse)));\n}\n.space-y-12 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));\n}\n.space-y-16 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(1rem * var(--tw-space-y-reverse));\n}\n.space-y-2 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(0.125rem * var(--tw-space-y-reverse));\n}\n.space-y-4 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));\n}\n.space-y-8 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));\n}\n.overflow-hidden {\n overflow: hidden;\n}\n.overflow-x-auto {\n overflow-x: auto;\n}\n.overflow-x-hidden {\n overflow-x: hidden;\n}\n.overflow-y-scroll {\n overflow-y: scroll;\n}\n.truncate {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.text-ellipsis {\n text-overflow: ellipsis;\n}\n.whitespace-nowrap {\n white-space: nowrap;\n}\n.break-words {\n overflow-wrap: break-word;\n}\n.rounded {\n border-radius: 0.25rem;\n}\n.rounded-full {\n border-radius: 9999px;\n}\n.rounded-lg {\n border-radius: 16px;\n}\n.rounded-md {\n border-radius: 12px;\n}\n.rounded-pill {\n border-radius: 100px;\n}\n.rounded-sm {\n border-radius: 8px;\n}\n.rounded-xs {\n border-radius: 4px;\n}\n.rounded-xxs {\n border-radius: 2px;\n}\n.rounded-t-lg {\n border-top-left-radius: 16px;\n border-top-right-radius: 16px;\n}\n.rounded-tl-lg {\n border-top-left-radius: 16px;\n}\n.rounded-tr-lg {\n border-top-right-radius: 16px;\n}\n.border {\n border-width: 1px;\n}\n.border-0 {\n border-width: 0px;\n}\n.border-2 {\n border-width: 2px;\n}\n.border-3 {\n border-width: 3px;\n}\n.border-b-2 {\n border-bottom-width: 2px;\n}\n.border-l-0 {\n border-left-width: 0px;\n}\n.border-r-0 {\n border-right-width: 0px;\n}\n.border-t-2 {\n border-top-width: 2px;\n}\n.border-\\[\\#0034CB\\] {\n --tw-border-opacity: 1;\n border-color: rgb(0 52 203 / var(--tw-border-opacity));\n}\n.border-\\[\\#d2d2d2\\] {\n --tw-border-opacity: 1;\n border-color: rgb(210 210 210 / var(--tw-border-opacity));\n}\n.border-accent {\n border-color: var(--brand-green);\n}\n.border-current {\n border-color: currentColor;\n}\n.border-default {\n border-color: var(--brand-black);\n}\n.border-error {\n border-color: var(--red-700);\n}\n.border-inverse {\n border-color: var(--white);\n}\n.border-inverse-soft {\n border-color: rgba(255, 255, 255, 0.3);\n}\n.border-inverse-softer {\n border-color: rgba(255, 255, 255, 0.15);\n}\n.border-soft {\n border-color: rgba(0, 0, 0, .15 );\n}\n.border-softer {\n border-color: rgba(0, 0, 0, .1 );\n}\n.border-softest {\n border-color: var(--grey-light);\n}\n.border-transparent {\n border-color: var(--transparent);\n}\n.border-b-softer {\n border-bottom-color: rgba(0, 0, 0, .1 );\n}\n.\\!bg-accent-dark {\n background-color: var(--green-600) !important;\n}\n.\\!bg-darker {\n background-color: var(--grey-400) !important;\n}\n.\\!bg-strong-dark {\n background-color: var(--grey-800) !important;\n}\n.bg-accent {\n background-color: var(--brand-green);\n}\n.bg-accent-dark {\n background-color: var(--green-600);\n}\n.bg-accent-darker {\n background-color: var(--green-800);\n}\n.bg-current {\n background-color: currentColor;\n}\n.bg-dark {\n background-color: var(--grey-300);\n}\n.bg-darker {\n background-color: var(--grey-400);\n}\n.bg-default {\n background-color: var(--grey-light);\n}\n.bg-error {\n background-color: var(--red-200);\n}\n.bg-inverse {\n background-color: var(--white);\n}\n.bg-inverse-soft {\n background-color: rgba(255, 255, 255, .2);\n}\n.bg-inverse-softer {\n background-color: rgba(255, 255, 255, .15);\n}\n.bg-on-dark {\n background-color: rgba(255, 255, 255, 0.2);\n}\n.bg-on-gradient {\n background-color: rgba(0, 0, 0, 0.1);\n}\n.bg-overlay {\n background-color: rgba(0, 0, 0, 0.25);\n}\n.bg-strong {\n background-color: var(--grey-700);\n}\n.bg-strong-dark {\n background-color: var(--grey-800);\n}\n.bg-stronger {\n background-color: var(--grey-900);\n}\n.bg-strongest {\n background-color: var(--brand-black);\n}\n.bg-strongest-soft {\n background-color: rgba(0, 0, 0, .05);\n}\n.bg-success {\n background-color: var(--green-200);\n}\n.bg-transparent {\n background-color: var(--transparent);\n}\n.bg-warning {\n background-color: var(--yellow-200);\n}\n.bg-opacity-90 {\n --tw-bg-opacity: 0.9;\n}\n.object-cover {\n -o-object-fit: cover;\n object-fit: cover;\n}\n.object-center {\n -o-object-position: center;\n object-position: center;\n}\n.\\!p-8 {\n padding: 0.5rem !important;\n}\n.p-0 {\n padding: 0rem;\n}\n.p-12 {\n padding: 0.75rem;\n}\n.p-16 {\n padding: 1rem;\n}\n.p-2 {\n padding: 0.125rem;\n}\n.p-20 {\n padding: 1.25rem;\n}\n.p-32 {\n padding: 2rem;\n}\n.p-4 {\n padding: 0.25rem;\n}\n.p-6 {\n padding: 0.375rem;\n}\n.p-8 {\n padding: 0.5rem;\n}\n.\\!px-0 {\n padding-left: 0rem !important;\n padding-right: 0rem !important;\n}\n.\\!py-0 {\n padding-top: 0rem !important;\n padding-bottom: 0rem !important;\n}\n.\\!py-4 {\n padding-top: 0.25rem !important;\n padding-bottom: 0.25rem !important;\n}\n.px-12 {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n}\n.px-16 {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n.px-2 {\n padding-left: 0.125rem;\n padding-right: 0.125rem;\n}\n.px-20 {\n padding-left: 1.25rem;\n padding-right: 1.25rem;\n}\n.px-4 {\n padding-left: 0.25rem;\n padding-right: 0.25rem;\n}\n.px-6 {\n padding-left: 0.375rem;\n padding-right: 0.375rem;\n}\n.py-1 {\n padding-top: 0.0625rem;\n padding-bottom: 0.0625rem;\n}\n.py-12 {\n padding-top: 0.75rem;\n padding-bottom: 0.75rem;\n}\n.py-16 {\n padding-top: 1rem;\n padding-bottom: 1rem;\n}\n.py-20 {\n padding-top: 1.25rem;\n padding-bottom: 1.25rem;\n}\n.py-4 {\n padding-top: 0.25rem;\n padding-bottom: 0.25rem;\n}\n.py-6 {\n padding-top: 0.375rem;\n padding-bottom: 0.375rem;\n}\n.py-8 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n.pb-16 {\n padding-bottom: 1rem;\n}\n.pb-20 {\n padding-bottom: 1.25rem;\n}\n.pb-28 {\n padding-bottom: 1.75rem;\n}\n.pb-60 {\n padding-bottom: 3.75rem;\n}\n.pb-8 {\n padding-bottom: 0.5rem;\n}\n.pl-12 {\n padding-left: 0.75rem;\n}\n.pl-28 {\n padding-left: 1.75rem;\n}\n.pl-32 {\n padding-left: 2rem;\n}\n.pl-36 {\n padding-left: 2.25rem;\n}\n.pl-4 {\n padding-left: 0.25rem;\n}\n.pl-8 {\n padding-left: 0.5rem;\n}\n.pr-12 {\n padding-right: 0.75rem;\n}\n.pr-28 {\n padding-right: 1.75rem;\n}\n.pr-32 {\n padding-right: 2rem;\n}\n.pr-4 {\n padding-right: 0.25rem;\n}\n.pr-8 {\n padding-right: 0.5rem;\n}\n.pt-12 {\n padding-top: 0.75rem;\n}\n.pt-20 {\n padding-top: 1.25rem;\n}\n.pt-28 {\n padding-top: 1.75rem;\n}\n.pt-32 {\n padding-top: 2rem;\n}\n.pt-40 {\n padding-top: 2.5rem;\n}\n.pt-48 {\n padding-top: 3rem;\n}\n.pt-8 {\n padding-top: 0.5rem;\n}\n.text-left {\n text-align: left;\n}\n.text-center {\n text-align: center;\n}\n.text-2xl {\n font-size: 1.5rem;\n line-height: 2rem;\n}\n.text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem;\n}\n.font-bold {\n font-weight: 700;\n}\n.uppercase {\n text-transform: uppercase;\n}\n.lowercase {\n text-transform: lowercase;\n}\n.\\!text-current {\n color: currentColor !important;\n}\n.text-\\[\\#0034CB\\] {\n --tw-text-opacity: 1;\n color: rgb(0 52 203 / var(--tw-text-opacity));\n}\n.text-accent {\n color: var(--brand-green);\n}\n.text-current {\n color: currentColor;\n}\n.text-default {\n color: var(--brand-black);\n}\n.text-error {\n color: var(--red-700);\n}\n.text-extra-light {\n color: var(--grey-300);\n}\n.text-inverse {\n color: var(--white);\n}\n.text-light {\n color: var(--grey-700);\n}\n.text-lighter {\n color: var(--grey-600);\n}\n.text-lightest {\n color: var(--grey-500);\n}\n.text-on-gradient {\n color: rgba(0, 0, 0, 0.55);\n}\n.text-success {\n color: var(--green-800);\n}\n.text-transparent {\n color: var(--transparent);\n}\n.text-warning {\n color: var(--yellow-900);\n}\n.underline {\n text-decoration-line: underline;\n}\n.\\!no-underline {\n text-decoration-line: none !important;\n}\n.decoration-\\[\\#0034CB\\] {\n text-decoration-color: #0034CB;\n}\n.decoration-accent {\n text-decoration-color: var(--brand-green);\n}\n.decoration-2 {\n text-decoration-thickness: 2px;\n}\n.underline-offset-4 {\n text-underline-offset: 4px;\n}\n.opacity-0 {\n opacity: 0;\n}\n.opacity-100 {\n opacity: 1;\n}\n.shadow {\n --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-accent {\n --tw-shadow: 0px 0px 12px rgba(0, 201, 89, 0.6);\n --tw-shadow-colored: 0px 0px 12px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-lg {\n --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-md {\n --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-small {\n --tw-shadow: 0px 1.5px 2px rgba(0, 0, 0, 0.1);\n --tw-shadow-colored: 0px 1.5px 2px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.outline-none {\n outline: 2px solid transparent;\n outline-offset: 2px;\n}\n.outline {\n outline-style: solid;\n}\n.filter {\n filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n.backdrop-blur {\n --tw-backdrop-blur: blur(8px);\n -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);\n backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);\n}\n.transition-all {\n transition-property: all;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.transition-colors {\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.duration-300 {\n transition-duration: 300ms;\n}\n[class*=\"keyline-\"] {\n position: relative;\n}\n[class*=\"keyline-\"]::before {\n content: attr(👻);\n position: absolute;\n z-index: 0;\n inset-inline-start: calc(var(--inner-gutter) / -2 - 1px);\n inset-inline-end: calc(var(--inner-gutter) / -2);\n top: 0;\n bottom: 0;\n border: 1px solid transparent;\n pointer-events: none;\n}\n[class*=\"keyline-0\"]::before {\n border-inline-end-color: transparent;\n border-inline-start-color: transparent;\n}\n.ratio {\n --ratio: 100%;\n display: block;\n position: relative;\n overflow: hidden;\n}\n.ratio::before {\n content: attr(👻);\n display: block;\n width: 100%;\n height: 0;\n padding-bottom: var(--ratio);\n}\n.ratio > [class*=\"ratio-content\"] {\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n width: 100%;\n height: 100%;\n}\n[class*=underline-] {\n text-decoration-line: underline;\n}\n.underline-offset-4 {\n text-underline-offset: 0.2em;\n}\n.\\@container {\n container-type: inline-size;\n}\n.bg-gradient-01-top {\n background: linear-gradient(to bottom, #00E766, ease-in-out, #E6E6E6);\n }\n.bg-gradient-01-bottom {\n background: linear-gradient(to top, #00E766, ease-in-out, #E6E6E6);\n }\n.bg-gradient-02-top {\n background: linear-gradient(to bottom, #F3F30A, ease-in-out, #E6E6E6);\n }\n.bg-gradient-02-bottom {\n background: linear-gradient(to top, #F3F30A, ease-in-out, #E6E6E6);\n }\n.bg-gradient-03-top {\n background: linear-gradient(to bottom, #C461FF, ease-in-out, #E6E6E6);\n }\n.bg-gradient-03-bottom {\n background: linear-gradient(to top, #C461FF, ease-in-out, #E6E6E6);\n }\n.bg-gradient-04-top {\n background: linear-gradient(to bottom, #2B69FC, ease-in-out, #E6E6E6);\n }\n.bg-gradient-04-bottom {\n background: linear-gradient(to top, #2B69FC, ease-in-out, #E6E6E6);\n }\n.after\\:effect-opacity::after {\n transition-property: opacity;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n}\n.before\\:effect-opacity::before {\n transition-property: opacity;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n}\n@media (min-width: 750px) {\n .md\\:grid-col-span-4 {\n --container-grid-columns: 4;\n grid-column: span 4 / span 4;\n }\n .md\\:grid-col-span-6 {\n --container-grid-columns: 6;\n grid-column: span 6 / span 6;\n }\n .md\\:w-10-cols {\n width: calc(((10 / var(--container-grid-columns, var(--grid-columns))) * 100%) - (var(--inner-gutter) - (10 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))));\n }\n .cols-container > .md\\:w-10-cols {\n width: calc(((10 / var(--container-grid-columns, var(--grid-columns))) * (100% - var(--inner-gutter))) - (var(--inner-gutter) - (10 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))));\n }\n .md\\:w-10-cols > * {\n --container-grid-columns: 10;\n }\n}\n@media (min-width: 900px) {\n .lg\\:grid-col-span-5 {\n --container-grid-columns: 5;\n grid-column: span 5 / span 5;\n }\n .lg\\:grid-col-span-6 {\n --container-grid-columns: 6;\n grid-column: span 6 / span 6;\n }\n .lg\\:grid-col-start-7 {\n grid-column-start: 7;\n }\n .lg\\:w-8-cols {\n width: calc(((8 / var(--container-grid-columns, var(--grid-columns))) * 100%) - (var(--inner-gutter) - (8 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))));\n }\n .cols-container > .lg\\:w-8-cols {\n width: calc(((8 / var(--container-grid-columns, var(--grid-columns))) * (100% - var(--inner-gutter))) - (var(--inner-gutter) - (8 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))));\n }\n .lg\\:w-8-cols > * {\n --container-grid-columns: 8;\n }\n .lg\\:w-10-cols {\n width: calc(((10 / var(--container-grid-columns, var(--grid-columns))) * 100%) - (var(--inner-gutter) - (10 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))));\n }\n .cols-container > .lg\\:w-10-cols {\n width: calc(((10 / var(--container-grid-columns, var(--grid-columns))) * (100% - var(--inner-gutter))) - (var(--inner-gutter) - (10 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))));\n }\n .lg\\:w-10-cols > * {\n --container-grid-columns: 10;\n }\n}\n.even\\:bg-inverse-softer:nth-child(even) {\n background-color: rgba(255, 255, 255, .15);\n}\n.invalid\\:text-lightest:invalid {\n color: var(--grey-500);\n}\n.focus-within\\:bg-transparent:focus-within {\n background-color: var(--transparent);\n}\n.hover\\:bg-accent-dark:hover {\n background-color: var(--green-600);\n}\n.hover\\:bg-dark:hover {\n background-color: var(--grey-300);\n}\n.hover\\:bg-darker:hover {\n background-color: var(--grey-400);\n}\n.hover\\:bg-default:hover {\n background-color: var(--grey-light);\n}\n.hover\\:bg-inverse:hover {\n background-color: var(--white);\n}\n.hover\\:bg-strong-dark:hover {\n background-color: var(--grey-800);\n}\n.hover\\:bg-transparent:hover {\n background-color: var(--transparent);\n}\n.hover\\:text-default:hover {\n color: var(--brand-black);\n}\n.hover\\:text-lighter:hover {\n color: var(--grey-600);\n}\n.hover\\:\\!underline:hover {\n text-decoration-line: underline !important;\n}\n.hover\\:no-underline:hover {\n text-decoration-line: none;\n}\n.hover\\:shadow-hover:hover {\n --tw-shadow: 0px 0px 16px rgba(0, 0, 0, 0.2);\n --tw-shadow-colored: 0px 0px 16px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.focus\\:shadow-none:focus {\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.focus\\:outline-none:focus {\n outline: 2px solid transparent;\n outline-offset: 2px;\n}\n.focus-visible\\:rounded-xs:focus-visible {\n border-radius: 4px;\n}\n.focus-visible\\:text-default:focus-visible {\n color: var(--brand-black);\n}\n.focus-visible\\:outline-none:focus-visible {\n outline: 2px solid transparent;\n outline-offset: 2px;\n}\n.disabled\\:cursor-not-allowed:disabled {\n cursor: not-allowed;\n}\n.disabled\\:bg-dark:disabled {\n background-color: var(--grey-300);\n}\n.disabled\\:text-lightest:disabled {\n color: var(--grey-500);\n}\n.aria-disabled\\:cursor-not-allowed[aria-disabled=\"true\"] {\n cursor: not-allowed;\n}\n.aria-disabled\\:\\!border-transparent[aria-disabled=\"true\"] {\n border-color: var(--transparent) !important;\n}\n.aria-disabled\\:bg-dark[aria-disabled=\"true\"] {\n background-color: var(--grey-300);\n}\n.aria-disabled\\:bg-transparent[aria-disabled=\"true\"] {\n background-color: var(--transparent);\n}\n.aria-disabled\\:text-light[aria-disabled=\"true\"] {\n color: var(--grey-700);\n}\n.aria-disabled\\:text-lightest[aria-disabled=\"true\"] {\n color: var(--grey-500);\n}\n.aria-disabled\\:line-through[aria-disabled=\"true\"] {\n text-decoration-line: line-through;\n}\n.aria-disabled\\:shadow-none[aria-disabled=\"true\"] {\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.aria-current-page\\:bg-darker[aria-current=\"page\"] {\n background-color: var(--grey-400);\n}\n.after\\:absolute::after {\n position: absolute;\n}\n.after\\:inset-0::after {\n inset: 0rem;\n}\n.after\\:inset-x-0::after {\n left: 0rem;\n right: 0rem;\n}\n.after\\:bottom-0::after {\n bottom: 0rem;\n}\n.after\\:left-16::after {\n left: 1rem;\n}\n.after\\:right-16::after {\n right: 1rem;\n}\n.after\\:z-10::after {\n z-index: 10;\n}\n.after\\:rounded-lg::after {\n border-radius: 16px;\n}\n.after\\:rounded-t-lg::after {\n border-top-left-radius: 16px;\n border-top-right-radius: 16px;\n}\n.after\\:border-3::after {\n border-width: 3px;\n}\n.after\\:border-b-2::after {\n border-bottom-width: 2px;\n}\n.after\\:\\!border-transparent::after {\n border-color: var(--transparent) !important;\n}\n.after\\:border-accent::after {\n border-color: var(--brand-green);\n}\n.after\\:border-softest::after {\n border-color: var(--grey-light);\n}\n.after\\:opacity-0::after {\n opacity: 0;\n}\n.after\\:content-\\[\\'\\'\\]::after {\n --tw-content: '';\n content: var(--tw-content);\n}\n.hover\\:after\\:\\!border-transparent:hover::after {\n border-color: var(--transparent) !important;\n}\n.hover\\:after\\:opacity-100:hover::after {\n opacity: 1;\n}\n.focus-visible\\:after\\:opacity-100:focus-visible::after {\n opacity: 1;\n}\n.aria-disabled\\:after\\:\\!border-transparent[aria-disabled=\"true\"]::after {\n border-color: var(--transparent) !important;\n}\n.before\\:absolute::before {\n position: absolute;\n}\n.before\\:inset-x-0::before {\n left: 0rem;\n right: 0rem;\n}\n.before\\:-bottom-2::before {\n bottom: -0.125rem;\n}\n.before\\:bottom-0::before {\n bottom: 0rem;\n}\n.before\\:h-12::before {\n height: 0.75rem;\n}\n.before\\:h-3::before {\n height: 0.1875rem;\n}\n.before\\:rounded-lg::before {\n border-radius: 16px;\n}\n.before\\:border-2::before {\n border-width: 2px;\n}\n.before\\:border-softest::before {\n border-color: var(--grey-light);\n}\n.before\\:bg-default::before {\n background-color: var(--grey-light);\n}\n.before\\:bg-inverse-softer::before {\n background-color: rgba(255, 255, 255, .15);\n}\n.before\\:\\!opacity-100::before {\n opacity: 1 !important;\n}\n.before\\:opacity-0::before {\n opacity: 0;\n}\n.before\\:opacity-5::before {\n opacity: 0.05;\n}\n.before\\:content-\\[\\'\\'\\]::before {\n --tw-content: '';\n content: var(--tw-content);\n}\n.before\\:bg-gradient-y::before {\n background: linear-gradient(to bottom, transparent, ease-in-out, black);\n }\n.before\\:bg-gradient-01-top::before {\n background: linear-gradient(to bottom, #00E766, ease-in-out, #E6E6E6);\n }\n.before\\:bg-gradient-01-bottom::before {\n background: linear-gradient(to top, #00E766, ease-in-out, #E6E6E6);\n }\n.before\\:bg-gradient-02-top::before {\n background: linear-gradient(to bottom, #F3F30A, ease-in-out, #E6E6E6);\n }\n.before\\:bg-gradient-02-bottom::before {\n background: linear-gradient(to top, #F3F30A, ease-in-out, #E6E6E6);\n }\n.before\\:bg-gradient-03-top::before {\n background: linear-gradient(to bottom, #C461FF, ease-in-out, #E6E6E6);\n }\n.before\\:bg-gradient-03-bottom::before {\n background: linear-gradient(to top, #C461FF, ease-in-out, #E6E6E6);\n }\n.before\\:bg-gradient-04-top::before {\n background: linear-gradient(to bottom, #2B69FC, ease-in-out, #E6E6E6);\n }\n.before\\:bg-gradient-04-bottom::before {\n background: linear-gradient(to top, #2B69FC, ease-in-out, #E6E6E6);\n }\n.hover\\:before\\:opacity-100:hover::before {\n opacity: 1;\n}\n.focus-visible\\:before\\:\\!opacity-0:focus-visible::before {\n opacity: 0 !important;\n}\n.focus-visible\\:before\\:opacity-0:focus-visible::before {\n opacity: 0;\n}\n@container (min-width: 46.875rem) {\n .\\@md\\:max-w-192 {\n max-width: 192px;\n }\n}\n@media (min-width: 0px) {\n .sm\\:mb-4 {\n margin-bottom: 0.25rem;\n }\n .sm\\:max-w-\\[200px\\] {\n max-width: 200px;\n }\n}\n@media (min-width: 750px) {\n .md\\:left-1\\/2 {\n left: 50%;\n }\n .md\\:flex {\n display: flex;\n }\n .md\\:hidden {\n display: none;\n }\n .md\\:w-\\[300px\\] {\n width: 300px;\n }\n .md\\:-translate-x-1\\/2 {\n --tw-translate-x: -50%;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n }\n .md\\:-translate-y-1\\/2 {\n --tw-translate-y: -50%;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n }\n .md\\:gap-y-12 {\n row-gap: 0.75rem;\n }\n .md\\:pt-28 {\n padding-top: 1.75rem;\n }\n}\n@media (min-width: 900px) {\n .lg\\:order-last {\n order: 9999;\n }\n .lg\\:order-none {\n order: 0;\n }\n .lg\\:mt-0 {\n margin-top: 0rem;\n }\n .lg\\:block {\n display: block;\n }\n .lg\\:flex {\n display: flex;\n }\n .lg\\:hidden {\n display: none;\n }\n .lg\\:w-\\[500px\\] {\n width: 500px;\n }\n .lg\\:w-auto {\n width: auto;\n }\n .lg\\:max-w-\\[720px\\] {\n max-width: 720px;\n }\n .lg\\:flex-row {\n flex-direction: row;\n }\n .lg\\:flex-nowrap {\n flex-wrap: nowrap;\n }\n .lg\\:gap-y-16 {\n row-gap: 1rem;\n }\n .lg\\:px-28 {\n padding-left: 1.75rem;\n padding-right: 1.75rem;\n }\n .lg\\:\\!pl-12 {\n padding-left: 0.75rem !important;\n }\n .lg\\:\\!pr-12 {\n padding-right: 0.75rem !important;\n }\n}\n@media (min-width: 1024px) {\n .xl\\:pb-40 {\n padding-bottom: 2.5rem;\n }\n}\n@media (min-width: 2200px) {\n .xxxl\\:px-0 {\n padding-left: 0rem;\n padding-right: 0rem;\n }\n}\n\n/* ============================================================\n Field input styling — the new \"brand form\" look, applied to\n every field type rendered through eds-input-field (the wrapper).\n Element+class selectors (input.input / textarea.input / select.input)\n beat the global utility-based `.input` reliably. Focus colour reads\n --eds-field-accent (set by eds-form's brand body) and falls back to\n the brand-green-dark default, so this looks consistent everywhere.\n ============================================================ */\n\n/* Text-like inputs + select box.\n NB: radio/checkbox/range also carry the `.input` class, so they're excluded\n here (otherwise the box sizing would balloon them) — they're styled below. */\ninput.input:not([type='radio']):not([type='checkbox']):not([type='range']),\ntextarea.input,\nselect.input {\n min-height: 50px;\n padding: 0 16px;\n border: 1px solid var(--line-color, #e2e2e2);\n border-radius: 10px;\n background: var(--white, #ffffff);\n color: var(--brand-black, #07140d);\n box-shadow: none;\n transition: border-color 0.14s ease, box-shadow 0.14s ease;\n}\n\n/* Leading-icon inputs: restore the left padding that clears the icon (the icon\n sits absolutely at left:12px). The `.input-icon` + full :not() chain out-\n specifies the `padding: 0 16px` rule above, which would otherwise let the\n placeholder / text sit under the icon. */\ninput.input.input-icon:not([type='radio']):not([type='checkbox']):not([type='range']) {\n padding-left: 42px;\n}\n\ninput.input:not([type='radio']):not([type='checkbox']):not([type='range'])::placeholder,\ntextarea.input::placeholder {\n color: #a9aba9;\n}\n\ninput.input:not([type='radio']):not([type='checkbox']):not([type='range']):hover,\ntextarea.input:hover,\nselect.input:hover {\n border-color: #c9ccca;\n}\n\ninput.input:not([type='radio']):not([type='checkbox']):not([type='range']):focus,\ninput.input:not([type='radio']):not([type='checkbox']):not([type='range']):focus-visible,\ntextarea.input:focus,\ntextarea.input:focus-visible,\nselect.input:focus,\nselect.input:focus-visible {\n outline: none;\n border-color: var(--eds-field-accent, #00c87b);\n box-shadow: 0 0 0 3px var(--eds-field-focus-ring, rgba(0, 200, 123, 0.16));\n}\n\ninput.input:not([type='radio']):not([type='checkbox']):not([type='range']):disabled,\ntextarea.input:disabled,\nselect.input:disabled {\n background: #f7f7f7;\n color: #a9aba9;\n cursor: not-allowed;\n}\n\n/* Textarea — taller, top-aligned, resizable */\ntextarea.input,\ntextarea.input-textarea {\n min-height: 108px;\n padding: 14px 16px;\n line-height: 1.55;\n resize: vertical;\n align-items: flex-start;\n}\n\n/* Select — keep room for the chevron the select renders on the right */\nselect.input,\nselect.input-select {\n padding-right: 44px;\n cursor: pointer;\n}\n\n/* Range — not a boxed input; a clean track (green fill is painted inline\n by eds-input-range up to the current value) */\ninput[type='range'].input {\n min-height: 0;\n height: 6px;\n padding: 0;\n border: none;\n border-radius: 3px;\n box-shadow: none;\n}\ninput[type='range'].input:focus,\ninput[type='range'].input:focus-visible {\n outline: none;\n border: none;\n box-shadow: none;\n}\n\n/* Range thumb — brand-black knob with a green ring (matches the mockup). */\ninput[type='range'].input::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: 20px;\n height: 20px;\n border-radius: 50%;\n background: var(--brand-black, #07140d);\n border: 3px solid var(--eds-field-accent, #00c87b);\n cursor: pointer;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);\n}\ninput[type='range'].input::-moz-range-thumb {\n width: 18px;\n height: 18px;\n border-radius: 50%;\n background: var(--brand-black, #07140d);\n border: 3px solid var(--eds-field-accent, #00c87b);\n cursor: pointer;\n}\n\n/* Range layout: value readout (top-right) + min/mid/max scale (below). */\n.eds-range {\n display: flex;\n flex-direction: column;\n padding-top: 6px;\n}\n.eds-range-top {\n display: flex;\n justify-content: flex-end;\n margin-bottom: 12px;\n}\n.eds-range-val {\n font-family: 'IBM Plex Mono', ui-monospace, monospace;\n font-size: 15px;\n font-weight: 500;\n color: var(--eds-field-accent, #00c87b);\n font-variant-numeric: tabular-nums;\n}\n.eds-range-scale {\n display: flex;\n justify-content: space-between;\n font-family: 'IBM Plex Mono', ui-monospace, monospace;\n font-size: 10px;\n color: #7a7b7a;\n margin-top: 10px;\n}\n\n/* Radio & checkbox — brand-green when selected (white mark stays) */\ninput.input-radio:checked,\ninput.input-checkbox:checked {\n background-color: var(--eds-field-accent, #00c87b);\n border-color: var(--eds-field-accent, #00c87b);\n}\n\n/* Radio / checkbox options as selectable cards (matches the brand mockup).\n :has(input:checked) works because eds-input is light-DOM, so there's no\n shadow boundary between the card and the control. */\n.eds-option-list {\n display: flex;\n flex-direction: column;\n gap: 11px;\n border: 0;\n padding: 0;\n margin: 0;\n}\n\n.eds-option-card {\n display: flex;\n align-items: center;\n gap: 11px;\n padding: 13px 15px;\n border: 1px solid var(--line-color, #e2e2e2);\n border-radius: 10px;\n cursor: pointer;\n font-size: 14.5px;\n transition: border-color 0.14s ease, background-color 0.14s ease,\n box-shadow 0.14s ease;\n}\n\n.eds-option-card:hover {\n border-color: #c9ccca;\n background: #fcfefd;\n}\n\n.eds-option-card:has(input:checked) {\n border-color: var(--eds-field-accent, #00c87b);\n background: rgba(0, 255, 157, 0.05);\n box-shadow: 0 0 0 2px var(--eds-field-card-ring, rgba(0, 255, 157, 0.12));\n}\n\n.eds-option-card.is-disabled {\n cursor: not-allowed;\n opacity: 0.6;\n}\n\n.eds-option-text {\n flex: 0 1 auto;\n}\n\n.eds-option-help {\n margin-left: auto;\n font-family: 'IBM Plex Mono', monospace;\n font-size: 10px;\n letter-spacing: 0.04em;\n color: #8a8c8a;\n}\n\n";
|
|
12351
12395
|
var EdsInputFieldStyle0 = edsInputFieldCss;
|
|
12352
12396
|
|
|
12353
12397
|
class EdsInputField {
|
|
@@ -12472,7 +12516,12 @@ class EdsInputField {
|
|
|
12472
12516
|
// Icons are only supported on text inputs for now — ignore the prop for
|
|
12473
12517
|
// every other type so e.g. number/select/checkbox never render one.
|
|
12474
12518
|
icon: this.type === 'text' ? this.icon : undefined, checked: this.checked }, (this.type === 'number' ? { min: this.min, max: this.max, step: this.step } : {}));
|
|
12475
|
-
return (hAsync("div", { key: '
|
|
12519
|
+
return (hAsync("div", { key: '2f4fc787a53ec8b3afcd8a6c372075e9c077e220' }, this.type === 'checkbox' || this.type === 'radio' ? (this.parsedOptions.length > 0 ? (hAsync("fieldset", { class: "eds-option-list" }, (this.label || this.hint) && (hAsync("div", { class: "flex justify-between mb-12" }, this.label && (hAsync("eds-input-label", { name: this.inputId || this.name, label: this.label, required: this.required })), this.hint && (hAsync("p", { id: `${this.name}-hint`, class: "f-ui-05 text-lighter mt-8 ml-8" }, this.hint)))), this.parsedOptions.map((option) => (
|
|
12520
|
+
// Each option is a selectable card. The native control lives in
|
|
12521
|
+
// eds-input (light DOM), so the card highlights via :has(input:checked)
|
|
12522
|
+
// — no JS state needed. The label wraps the control, so clicking
|
|
12523
|
+
// anywhere on the card toggles it.
|
|
12524
|
+
hAsync("label", { class: `eds-option-card ${this.disabled ? 'is-disabled' : ''}`, key: option.value }, hAsync("eds-input", Object.assign({}, inputOpts, { inputId: `${this.inputId || this.name}-${option.value}`, inputTabIndex: 0, value: option.value, checked: typeof this.value === 'string' && this.value.split(',').includes(String(option.value)) })), hAsync("span", { class: "eds-option-text" }, option.label), option.description && hAsync("span", { class: "eds-option-help" }, option.description)))))) : (hAsync("div", { class: "flex items-center gap-x-8" }, hAsync("eds-input", Object.assign({}, inputOpts, { inputTabIndex: 0, value: this.value, checked: this.value === 'on' || this.checked })), this.label && (hAsync("eds-input-label", { name: this.inputId || this.name, label: this.label, disabled: this.disabled, required: this.required }))))) : (hAsync("div", null, (this.label || this.hint) && (hAsync("div", { class: "flex justify-between mb-8" }, this.label && (hAsync("eds-input-label", { name: this.inputId || this.name, label: this.label, disabled: this.disabled, required: this.required })), this.hint && (hAsync("p", { id: `${this.name}-hint`, class: "f-ui-05 text-lighter mt-8 ml-8" }, this.hint)))), this.type === 'select' ? (hAsync("eds-input-select", Object.assign({}, inputOpts, { options: this.parsedOptions }))) : this.type === 'file' ? (hAsync("eds-input-file", { name: this.name, inputId: this.inputId, disabled: this.disabled, required: this.required, multiple: true, onEdsfile: this.handleFileChange })) : this.type === 'dropzone' ? (hAsync("eds-input-dropzone", { name: this.name, inputId: this.inputId, disabled: this.disabled, required: this.required, multiple: true, onEdsfile: this.handleFileChange })) : this.type === 'range' ? ((() => {
|
|
12476
12525
|
var _a, _b, _c, _d, _e, _f;
|
|
12477
12526
|
const rangeProps = {
|
|
12478
12527
|
name: inputOpts.name,
|
|
@@ -12488,7 +12537,7 @@ class EdsInputField {
|
|
|
12488
12537
|
// type="number"); fall back to options[0..2].value for
|
|
12489
12538
|
// backward compatibility with existing range fields.
|
|
12490
12539
|
return (hAsync("eds-input-range", Object.assign({}, rangeProps, { min: (_a = this.min) !== null && _a !== void 0 ? _a : (_b = opt[0]) === null || _b === void 0 ? void 0 : _b.value, max: (_c = this.max) !== null && _c !== void 0 ? _c : (_d = opt[1]) === null || _d === void 0 ? void 0 : _d.value, step: (_e = this.step) !== null && _e !== void 0 ? _e : (_f = opt[2]) === null || _f === void 0 ? void 0 : _f.value, value: numberValue })));
|
|
12491
|
-
})()) : (hAsync("eds-input", Object.assign({}, inputOpts))))), hAsync("div", { key: '
|
|
12540
|
+
})()) : (hAsync("eds-input", Object.assign({}, inputOpts))))), hAsync("div", { key: '33bfae3f5ef4a8a1a0c529fade0d1a8616eff100', class: "mt-8" }, hAsync("eds-input-footer", { key: 'c4b6b192d052c486965b9b89fc6756324138975c', id: `${this.name}-footer`, name: this.name, message: this.message, "error-message": this.errorMessage, error: this.error, link: this.link }))));
|
|
12492
12541
|
}
|
|
12493
12542
|
static get delegatesFocus() { return true; }
|
|
12494
12543
|
get hostEl() { return getElement(this); }
|
|
@@ -12540,8 +12589,9 @@ class EdsInputFile {
|
|
|
12540
12589
|
};
|
|
12541
12590
|
this.handleFileSelect = (event) => {
|
|
12542
12591
|
const input = event.target;
|
|
12543
|
-
if (!input.files)
|
|
12592
|
+
if (!input.files) {
|
|
12544
12593
|
return;
|
|
12594
|
+
}
|
|
12545
12595
|
const newFiles = Array.from(input.files).map((file) => ({
|
|
12546
12596
|
file,
|
|
12547
12597
|
id: `${file.name}-${Date.now()}-${Math.random()}`
|
|
@@ -12573,8 +12623,9 @@ class EdsInputFile {
|
|
|
12573
12623
|
this.edsfile.emit({ files });
|
|
12574
12624
|
}
|
|
12575
12625
|
formatFileSize(bytes) {
|
|
12576
|
-
if (bytes === 0)
|
|
12626
|
+
if (bytes === 0) {
|
|
12577
12627
|
return '0 B';
|
|
12628
|
+
}
|
|
12578
12629
|
const k = 1024;
|
|
12579
12630
|
const sizes = ['B', 'KB', 'MB', 'GB'];
|
|
12580
12631
|
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
|
@@ -12593,7 +12644,7 @@ class EdsInputFile {
|
|
|
12593
12644
|
}
|
|
12594
12645
|
render() {
|
|
12595
12646
|
const effectiveLabel = this.buttonLabel || (this.multiple ? 'Choose Files' : 'Choose File');
|
|
12596
|
-
return (hAsync("div", { key: '
|
|
12647
|
+
return (hAsync("div", { key: '810e30b054b1a6a43c9cc79e318ae487679de1d7', class: "eds-input-file-container" }, hAsync("input", { key: '21a2162df7e6cc430b230407891bd1568bb4fe18', ref: (el) => (this.fileInputRef = el), type: "file", id: this.inputId || this.name, name: this.name, class: "eds-input-file-hidden", disabled: this.disabled, required: this.required, multiple: this.multiple, accept: this.accept, onChange: this.handleFileSelect }), hAsync("button", { key: 'd297cf5c5e63c002558e878a140b931a68a25f54', type: "button", class: "eds-input-file-btn", onClick: this.handleButtonClick, disabled: this.disabled }, hAsync("svg", { key: 'eb08b7516dce89647e28ca0c0ec1f70ade64b2cd', viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, hAsync("path", { key: 'b0eefaf19325e60d5f974039644f8ab962bbfe92', d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }), hAsync("polyline", { key: 'd0bfb65f3c6e3e9d019d23e94ceeb08ba3f6976e', points: "17 8 12 3 7 8" }), hAsync("line", { key: '3e7b0172924b54c26b9100ea264e85be73beabe9', x1: "12", y1: "3", x2: "12", y2: "15" })), effectiveLabel), this.selectedFiles.length > 0 && (hAsync("div", { key: '633d574a840479eb58ec596078960c88fbf4ce94', class: "eds-input-file-chips" }, this.selectedFiles.map((item) => (hAsync("div", { key: item.id, class: "eds-input-file-chip" }, this.getFileIcon(item.file.name), hAsync("span", { class: "eds-input-file-chip-name" }, item.file.name), hAsync("span", { class: "eds-input-file-chip-size" }, this.formatFileSize(item.file.size)), hAsync("button", { type: "button", class: "eds-input-file-chip-remove", onClick: () => this.handleRemoveFile(item.id), disabled: this.disabled, "aria-label": `Remove ${item.file.name}` }, hAsync("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, hAsync("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), hAsync("line", { x1: "6", y1: "6", x2: "18", y2: "18" }))))))))));
|
|
12597
12648
|
}
|
|
12598
12649
|
get hostEl() { return getElement(this); }
|
|
12599
12650
|
static get style() { return EdsInputFileStyle0; }
|
|
@@ -12617,7 +12668,7 @@ class EdsInputFile {
|
|
|
12617
12668
|
}; }
|
|
12618
12669
|
}
|
|
12619
12670
|
|
|
12620
|
-
const edsInputFooterCss = "p{margin:0}.eds-desc-link{position:relative;display:inline-block;color:var(--brand-black);text-decoration:none}.eds-desc-link::after{content:'';position:absolute;bottom:-2px;left:0;width:0;height:2px;background-color:var(--brand-green);transition:width 0.3s ease}.eds-desc-link:hover::after{width:100%}.eds-desc-link:focus-visible::after{width:0}eds-link{--f-ui-02-fontSize:var(--f-ui-04-fontSize)}.text-error{color:var(--red-700)}.flex{display:flex}.items-center{align-items:center}.f-ui-04{font-family:var(--f-ui-04-fontFamily);font-weight:var(--f-ui-04-fontWeight);font-size:var(--f-ui-04-fontSize);line-height:var(--f-ui-04-lineHeight);letter-spacing:var(--f-ui-04-letterSpacing)}.ml-4{margin-left:0.25rem}.pt-4{padding-top:0.25rem}.mb-4{margin-bottom:0.25rem}.f-ui-05{font-family:var(--f-ui-05-fontFamily);font-weight:var(--f-ui-05-fontWeight);font-size:var(--f-ui-05-fontSize);line-height:var(--f-ui-05-lineHeight);letter-spacing:var(--f-ui-05-letterSpacing)}.text-lighter{color:var(--grey-600)}.effect-color{transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}.hover\\:text-lighter:hover{color:var(--grey-600)}.underline{text-decoration-line:underline}.underline-offset-4{text-underline-offset:4px}";
|
|
12671
|
+
const edsInputFooterCss = "p{margin:0}.eds-help{font-family:'IBM Plex Mono', ui-monospace, monospace;font-size:10.5px;line-height:1.45;letter-spacing:0.01em;color:#8a8c8a}.eds-desc-link{position:relative;display:inline-block;color:var(--brand-black);text-decoration:none}.eds-desc-link::after{content:'';position:absolute;bottom:-2px;left:0;width:0;height:2px;background-color:var(--brand-green);transition:width 0.3s ease}.eds-desc-link:hover::after{width:100%}.eds-desc-link:focus-visible::after{width:0}eds-link{--f-ui-02-fontSize:var(--f-ui-04-fontSize)}.text-error{color:var(--red-700)}.flex{display:flex}.items-center{align-items:center}.f-ui-04{font-family:var(--f-ui-04-fontFamily);font-weight:var(--f-ui-04-fontWeight);font-size:var(--f-ui-04-fontSize);line-height:var(--f-ui-04-lineHeight);letter-spacing:var(--f-ui-04-letterSpacing)}.ml-4{margin-left:0.25rem}.pt-4{padding-top:0.25rem}.mb-4{margin-bottom:0.25rem}.f-ui-05{font-family:var(--f-ui-05-fontFamily);font-weight:var(--f-ui-05-fontWeight);font-size:var(--f-ui-05-fontSize);line-height:var(--f-ui-05-lineHeight);letter-spacing:var(--f-ui-05-letterSpacing)}.text-lighter{color:var(--grey-600)}.effect-color{transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}.hover\\:text-lighter:hover{color:var(--grey-600)}.underline{text-decoration-line:underline}.underline-offset-4{text-underline-offset:4px}";
|
|
12621
12672
|
var EdsInputFooterStyle0 = edsInputFooterCss;
|
|
12622
12673
|
|
|
12623
12674
|
class EdsInputFooter {
|
|
@@ -12630,7 +12681,7 @@ class EdsInputFooter {
|
|
|
12630
12681
|
this.link = undefined;
|
|
12631
12682
|
}
|
|
12632
12683
|
render() {
|
|
12633
|
-
return (hAsync("div", { key: '
|
|
12684
|
+
return (hAsync("div", { key: 'e3cf47ad941e608ec8f5daefd89d72e6d0af0f28' }, this.error && this.errorMessage && (hAsync("div", { key: '0771ab5b0ba362a01df27c4b6ce0949ec51ec857', id: `error_${this.name}`, class: "text-error flex items-center" }, hAsync("eds-icon-wrapper", { key: '43f86aa8632ea24b311e00a336b7d4b00b47ac80', name: "warning", size: 20 }), hAsync("p", { key: '734a138c54dc0120fc6fdd320122c737b33b9d3b', class: "f-ui-04 ml-4 mb-4 pt-4", innerHTML: this.errorMessage }))), this.message && (hAsync("p", { key: 'f8c6d5c1f48e10f9c556fc8d44189836b3b46dbf', id: `desc_${this.name}`, class: "eds-help text-lighter", innerHTML: safeInlineFormat(this.message) })), this.link && (hAsync("eds-link", { key: 'fe7a52e14c6cf0791d36b781a92d7bbeca487ccc', label: this.link.label, url: this.link.url, intent: "underline", size: "small", external: true }))));
|
|
12634
12685
|
}
|
|
12635
12686
|
static get style() { return EdsInputFooterStyle0; }
|
|
12636
12687
|
static get cmpMeta() { return {
|
|
@@ -12649,7 +12700,7 @@ class EdsInputFooter {
|
|
|
12649
12700
|
}; }
|
|
12650
12701
|
}
|
|
12651
12702
|
|
|
12652
|
-
const edsInputLabelCss = ".input-label{font-family:var(--
|
|
12703
|
+
const edsInputLabelCss = ".input-label{font-family:var(--plex-sans, 'IBM Plex Sans', system-ui, sans-serif);font-size:14.5px;font-weight:600;line-height:1.3;letter-spacing:0;color:var(--brand-black, #07140d)}.input-label b,.input-label strong{font-weight:var(--f-ui-02---bold-weight, bold)}.text-lighter{color:var(--grey-600)}.req-mark{color:var(--eds-field-accent, currentColor);margin-left:1px;font-weight:600}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}";
|
|
12653
12704
|
var EdsInputLabelStyle0 = edsInputLabelCss;
|
|
12654
12705
|
|
|
12655
12706
|
class EdsInputLabel {
|
|
@@ -12661,7 +12712,7 @@ class EdsInputLabel {
|
|
|
12661
12712
|
this.disabled = false;
|
|
12662
12713
|
}
|
|
12663
12714
|
render() {
|
|
12664
|
-
return (hAsync("label", { key: '
|
|
12715
|
+
return (hAsync("label", { key: '46f04462b12694d932be79bb1d252cd001d29e58', htmlFor: this.name, class: `input-label ${this.disabled ? 'text-lighter' : ''}` }, this.label, this.required && (hAsync("span", { key: 'c747f5a7896b395f5c1b54725a966d54c7e5dfcd' }, hAsync("span", { key: '2a27cfce971df8eab6186028f6c8319f19504317', "aria-hidden": "true", class: "req-mark" }, "*"), hAsync("span", { key: '5876e15a66aa95a62b934edec0d64f01f713d1a8', class: "sr-only" }, "required")))));
|
|
12665
12716
|
}
|
|
12666
12717
|
static get style() { return EdsInputLabelStyle0; }
|
|
12667
12718
|
static get cmpMeta() { return {
|
|
@@ -12712,11 +12763,13 @@ class EdsInputRange {
|
|
|
12712
12763
|
var _a;
|
|
12713
12764
|
this.sliderVal = (_a = this.value) !== null && _a !== void 0 ? _a : Math.round(this.min + (this.max - this.min) / 2);
|
|
12714
12765
|
}
|
|
12715
|
-
// Keep the internal state in sync when the passed value changes.
|
|
12766
|
+
// Keep the internal state in sync when the passed value changes. When the
|
|
12767
|
+
// value is cleared (undefined/null — e.g. "Clear form"), fall back to the
|
|
12768
|
+
// default midpoint so BOTH the thumb and the filled track reset together
|
|
12769
|
+
// (the fill is derived from sliderVal, so it must be updated too).
|
|
12716
12770
|
onValueChange(newVal) {
|
|
12717
|
-
|
|
12718
|
-
this.
|
|
12719
|
-
}
|
|
12771
|
+
this.sliderVal =
|
|
12772
|
+
newVal !== undefined && newVal !== null ? newVal : Math.round(this.min + (this.max - this.min) / 2);
|
|
12720
12773
|
}
|
|
12721
12774
|
componentDidLoad() {
|
|
12722
12775
|
// Assign the native input element after the component loads
|
|
@@ -12729,7 +12782,15 @@ class EdsInputRange {
|
|
|
12729
12782
|
render() {
|
|
12730
12783
|
var _a;
|
|
12731
12784
|
const currentValue = (_a = this.sliderVal) !== null && _a !== void 0 ? _a : Math.round(this.min + (this.max - this.min) / 2);
|
|
12732
|
-
|
|
12785
|
+
// Paint the "filled" portion of the track up to the current value. Uses the
|
|
12786
|
+
// brand accent when present (the var inherits from eds-form's brand body),
|
|
12787
|
+
// else the default green — so non-brand forms look exactly as before.
|
|
12788
|
+
const pct = this.max > this.min ? ((currentValue - this.min) / (this.max - this.min)) * 100 : 0;
|
|
12789
|
+
const trackStyle = {
|
|
12790
|
+
background: `linear-gradient(90deg, var(--eds-field-accent, var(--green-500)) ${pct}%, var(--grey-light, #ececec) ${pct}%)`
|
|
12791
|
+
};
|
|
12792
|
+
const mid = Math.round(this.min + (this.max - this.min) / 2);
|
|
12793
|
+
return (hAsync("div", { key: '742f329624bc2a8632640b6a93b6258d915f6deb', class: "eds-range" }, hAsync("div", { key: '112ef4ef42761c85350f9624c10436fbd2600fce', class: "eds-range-top" }, hAsync("span", { key: '2b2dbde929434f68c85a36380cbed1780707dfd8', id: `desc_${this.name}`, class: "eds-range-val" }, currentValue)), hAsync("input", { key: 'd5bcbf157647324a1ddafab2001518707ae0de9b', id: this.inputId || this.name, name: this.name, style: trackStyle, min: this.min, max: this.max, step: this.step, value: currentValue, required: this.required, disabled: this.disabled, type: "range", class: "w-full input eds-range-input", tabindex: "0", role: "slider", "aria-describedby": `desc_${this.name}`, "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": currentValue, onInput: this.onInput, onChange: this.onChange }), hAsync("div", { key: 'e72eed37dc3dc0bd596f9198f4d3f59ac11e1c40', class: "eds-range-scale", "aria-hidden": "true" }, hAsync("span", { key: 'ba65117d4dc0c498878760ddf124d614c19af7b9' }, this.min), hAsync("span", { key: '82e42ecec8f53634c005acc151f12a3c6f390ab3' }, mid), hAsync("span", { key: 'b2272241e488952785c92b4a495b1ba744e13d19' }, this.max))));
|
|
12733
12794
|
}
|
|
12734
12795
|
get el() { return getElement(this); }
|
|
12735
12796
|
static get watchers() { return {
|
|
@@ -12824,7 +12885,7 @@ class EdsInputSearch {
|
|
|
12824
12885
|
return this.inputElement;
|
|
12825
12886
|
}
|
|
12826
12887
|
render() {
|
|
12827
|
-
return (hAsync("div", { key: '
|
|
12888
|
+
return (hAsync("div", { key: '900ca7578601ff528b717e5bc3e1fe6b43562fb6', class: "relative flex items-center" }, hAsync("eds-icon-wrapper", { key: '722eecc1031f51f83100f9d35719a7ea837f680d', name: "search", class: "absolute top-1/2 left-[14px] -translate-y-1/2 text-lightest", "aria-hidden": "true" }), hAsync("input", { key: '0445caabbf5e3077b708a2b8bdbe0fcee3133398', id: this.inputId || this.name, name: this.name, placeholder: this.placeholder, value: this.value || '', required: this.required, disabled: this.disabled, type: "search", "aria-label": this.placeholder, class: `input pl-36 ${this.decorate}`,
|
|
12828
12889
|
//onInput={this.onInput}
|
|
12829
12890
|
onChange: this.onChange })));
|
|
12830
12891
|
}
|
|
@@ -12878,12 +12939,16 @@ class EdsInputSelect {
|
|
|
12878
12939
|
const selectId = this.inputId || this.name;
|
|
12879
12940
|
const placeholderText = this.placeholder || `Pick from the list`;
|
|
12880
12941
|
const describedBy = this.hasMessage || this.error ? `${this.name}-error` : undefined;
|
|
12881
|
-
return (hAsync("div", { key: '
|
|
12942
|
+
return (hAsync("div", { key: '303df3cd45f076ae5b29f301c9dc742e1664887a', class: "relative" }, hAsync("select", { key: '7635ec7c53e7f07c7c71ab25e8475ed53a8d013e', id: selectId, name: this.name, class: {
|
|
12882
12943
|
input: true,
|
|
12883
12944
|
'input-error': this.error,
|
|
12945
|
+
// No real value yet → the placeholder option is showing. Lets CSS
|
|
12946
|
+
// render the select text in the light placeholder colour (grey-500),
|
|
12947
|
+
// matching text inputs, instead of the dark default text colour.
|
|
12948
|
+
'is-placeholder': !this.value && this.value !== 0,
|
|
12884
12949
|
'px-4': true,
|
|
12885
12950
|
'py-2': true
|
|
12886
|
-
}, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": describedBy, disabled: this.disabled, required: this.required, onChange: this.handleChange }, hAsync("option", { key: '
|
|
12951
|
+
}, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": describedBy, disabled: this.disabled, required: this.required, onChange: this.handleChange }, hAsync("option", { key: '793cd7db90936a9746810075246b5408710ce7ac', value: "", disabled: true, selected: !this.value || this.value === '' }, placeholderText), this.options.map((opt, index) => (hAsync("option", { key: index, value: opt.value, selected: opt.value === this.value }, opt.label)))), hAsync("span", { key: '41a1eb4a753c304148ee6cdc71049fa15cbd61f6', class: "bg-dark rounded-xs absolute top-1/2 right-[6px] flex h-28 w-28 -translate-y-1/2 items-center justify-center" }, hAsync("eds-icon-wrapper", { key: '4ee4022f9d47fc26b27006f144fc598367f50169', class: "w-20 h-20", name: "chevron-right" }))));
|
|
12887
12952
|
}
|
|
12888
12953
|
static get cmpMeta() { return {
|
|
12889
12954
|
"$flags$": 0,
|
|
@@ -12932,7 +12997,7 @@ class EdsKgLearningResources {
|
|
|
12932
12997
|
}
|
|
12933
12998
|
async fetchData() {
|
|
12934
12999
|
const now = Date.now();
|
|
12935
|
-
if (cachedData &&
|
|
13000
|
+
if (cachedData && now - cacheTimestamp < CACHE_TTL) {
|
|
12936
13001
|
this.software = cachedData;
|
|
12937
13002
|
return;
|
|
12938
13003
|
}
|
|
@@ -12941,7 +13006,7 @@ class EdsKgLearningResources {
|
|
|
12941
13006
|
try {
|
|
12942
13007
|
const params = new URLSearchParams({
|
|
12943
13008
|
size: this.size.toString(),
|
|
12944
|
-
resolve_names: this.resolveNames.toString()
|
|
13009
|
+
resolve_names: this.resolveNames.toString()
|
|
12945
13010
|
});
|
|
12946
13011
|
const response = await fetch(`${this.apiEndpoint}?${params}`);
|
|
12947
13012
|
if (!response.ok) {
|
|
@@ -12963,29 +13028,25 @@ class EdsKgLearningResources {
|
|
|
12963
13028
|
getFilteredSoftware() {
|
|
12964
13029
|
let filtered = this.software;
|
|
12965
13030
|
if (this.filterType) {
|
|
12966
|
-
filtered = filtered.filter(sw => sw.learning_resources_types.includes(this.filterType));
|
|
13031
|
+
filtered = filtered.filter((sw) => sw.learning_resources_types.includes(this.filterType));
|
|
12967
13032
|
}
|
|
12968
13033
|
if (this.filterLevel) {
|
|
12969
|
-
filtered = filtered.filter(sw => sw.learning_resources_levels.includes(this.filterLevel));
|
|
13034
|
+
filtered = filtered.filter((sw) => sw.learning_resources_levels.includes(this.filterLevel));
|
|
12970
13035
|
}
|
|
12971
13036
|
if (this.searchQuery) {
|
|
12972
13037
|
const q = this.searchQuery.toLowerCase();
|
|
12973
|
-
filtered = filtered.filter(sw => sw.name.toLowerCase().includes(q) ||
|
|
12974
|
-
sw.learning_resources.some(lr => {
|
|
12975
|
-
var _a, _b;
|
|
12976
|
-
return ((_a = lr.name) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(q)) ||
|
|
12977
|
-
((_b = lr.abstract) === null || _b === void 0 ? void 0 : _b.toLowerCase().includes(q));
|
|
12978
|
-
}));
|
|
13038
|
+
filtered = filtered.filter((sw) => sw.name.toLowerCase().includes(q) ||
|
|
13039
|
+
sw.learning_resources.some((lr) => { var _a, _b; return ((_a = lr.name) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(q)) || ((_b = lr.abstract) === null || _b === void 0 ? void 0 : _b.toLowerCase().includes(q)); }));
|
|
12979
13040
|
}
|
|
12980
13041
|
return filtered;
|
|
12981
13042
|
}
|
|
12982
13043
|
getFilteredResources(resources) {
|
|
12983
13044
|
let filtered = resources;
|
|
12984
13045
|
if (this.filterType) {
|
|
12985
|
-
filtered = filtered.filter(lr => lr.type === this.filterType);
|
|
13046
|
+
filtered = filtered.filter((lr) => lr.type === this.filterType);
|
|
12986
13047
|
}
|
|
12987
13048
|
if (this.filterLevel) {
|
|
12988
|
-
filtered = filtered.filter(lr => lr.educational_level === this.filterLevel);
|
|
13049
|
+
filtered = filtered.filter((lr) => lr.educational_level === this.filterLevel);
|
|
12989
13050
|
}
|
|
12990
13051
|
return filtered;
|
|
12991
13052
|
}
|
|
@@ -13012,15 +13073,15 @@ class EdsKgLearningResources {
|
|
|
13012
13073
|
'video tutorial': 'primary',
|
|
13013
13074
|
'user documentation': 'dark',
|
|
13014
13075
|
'video presentation': 'inverse',
|
|
13015
|
-
'slide deck': 'strong'
|
|
13076
|
+
'slide deck': 'strong'
|
|
13016
13077
|
};
|
|
13017
13078
|
return map[type] || 'brand-dark';
|
|
13018
13079
|
}
|
|
13019
13080
|
getLevelTagIntent(level) {
|
|
13020
13081
|
const map = {
|
|
13021
|
-
|
|
13022
|
-
|
|
13023
|
-
|
|
13082
|
+
beginner: 'brand',
|
|
13083
|
+
intermediate: 'dark',
|
|
13084
|
+
advanced: 'strong'
|
|
13024
13085
|
};
|
|
13025
13086
|
return map[level] || 'brand-dark';
|
|
13026
13087
|
}
|
|
@@ -13031,11 +13092,11 @@ class EdsKgLearningResources {
|
|
|
13031
13092
|
}
|
|
13032
13093
|
renderResources(sw) {
|
|
13033
13094
|
const filtered = this.getFilteredResources(sw.learning_resources);
|
|
13034
|
-
return (hAsync("div", { class: "resources-content" }, sw.kg_search_url && (hAsync("div", { class: "kg-link" }, hAsync("eds-link", { url: sw.kg_search_url, label: "View in EBRAINS Knowledge Graph", intent: "cta", external: true }))), hAsync("table", { class: "resources-table" }, hAsync("thead", null, hAsync("tr", null, hAsync("th", { class: "col-name" }, "Name"), hAsync("th", { class: "col-type" }, "Type"), hAsync("th", { class: "col-level" }, "Level"))), hAsync("tbody", null, filtered.map(lr => (hAsync("tr", { class: `resource-row ${lr.iri ? 'resource-row--clickable' : ''}`, onClick: () => {
|
|
13095
|
+
return (hAsync("div", { class: "resources-content" }, sw.kg_search_url && (hAsync("div", { class: "kg-link" }, hAsync("eds-link", { url: sw.kg_search_url, label: "View in EBRAINS Knowledge Graph", intent: "cta", external: true }))), hAsync("table", { class: "resources-table" }, hAsync("thead", null, hAsync("tr", null, hAsync("th", { class: "col-name" }, "Name"), hAsync("th", { class: "col-type" }, "Type"), hAsync("th", { class: "col-level" }, "Level"))), hAsync("tbody", null, filtered.map((lr) => (hAsync("tr", { class: `resource-row ${lr.iri ? 'resource-row--clickable' : ''}`, onClick: () => {
|
|
13035
13096
|
if (lr.iri) {
|
|
13036
13097
|
window.open(lr.iri, '_blank', 'noopener,noreferrer');
|
|
13037
13098
|
}
|
|
13038
|
-
} }, hAsync("td", { class: "col-name" }, hAsync("span", { class: "resource-name" }, lr.name || 'Untitled'), lr.abstract &&
|
|
13099
|
+
} }, hAsync("td", { class: "col-name" }, hAsync("span", { class: "resource-name" }, lr.name || 'Untitled'), lr.abstract && hAsync("p", { class: "resource-desc" }, lr.abstract)), hAsync("td", { class: "col-type" }, lr.type && hAsync("eds-tag", { label: lr.type, intent: this.getTagIntent(lr.type), size: "medium" })), hAsync("td", { class: "col-level" }, lr.educational_level && (hAsync("eds-tag", { label: lr.educational_level, intent: this.getLevelTagIntent(lr.educational_level), size: "medium" })))))))), filtered.length === 0 && hAsync("p", { class: "no-results" }, "No resources match the current filters.")));
|
|
13039
13100
|
}
|
|
13040
13101
|
render() {
|
|
13041
13102
|
// Always render the same outer scaffold (header + content area) so the
|
|
@@ -13044,7 +13105,7 @@ class EdsKgLearningResources {
|
|
|
13044
13105
|
const filtered = !this.loading && !this.error ? this.getFilteredSoftware() : [];
|
|
13045
13106
|
// const allTypes = this.getAllTypes();
|
|
13046
13107
|
// const allLevels = this.getAllLevels();
|
|
13047
|
-
return (hAsync("div", { key: '
|
|
13108
|
+
return (hAsync("div", { key: 'aef669885e2bc85b30f70b3db12fbf4040a306a9', class: "lr-container" }, hAsync("div", { key: '95413849959947a851e27a404aa21368aa895e96', class: "lr-header" }, hAsync("h2", { key: '10353aae716a1408f3f49d70501684a633bf7b51', class: "lr-heading" }, this.heading)), this.loading && (hAsync("div", { key: 'd3318b411c4e27551997a697aa165fe4afb8f3fa', class: "loading", role: "status", "aria-live": "polite" }, hAsync("eds-spinner", { key: 'b242ace225a2b93d5d8e6e4fd3b78a23778d1995', size: "sm", variant: "primary", background: "transparent", message: "Loading learning resources..." }))), this.error && !this.loading && hAsync("eds-alert", { key: 'c0a5cf3aa2830cb96f253f10a34babc4bdb9aedb', intent: "error", message: this.error }), !this.loading && !this.error && (hAsync("div", { key: '83671b3aea2286fe508742ae81d8d0d4aae9863c', class: "accordion-list" }, filtered.map((sw) => (hAsync("eds-accordion", { heading: sw.name, description: this.renderAccordionDescription(sw), variant: this.variant, icon: "book", switchBg: true, clampText: false }, this.renderResources(sw)))), filtered.length === 0 && hAsync("p", { key: '2d344afbcaa2f18bddf2872fd1cf1eb0993ce632', class: "no-results" }, "No software matches the current filters.")))));
|
|
13048
13109
|
}
|
|
13049
13110
|
get el() { return getElement(this); }
|
|
13050
13111
|
static get style() { return EdsKgLearningResourcesStyle0; }
|
|
@@ -13111,7 +13172,7 @@ class EdsKgWebServicesSelect {
|
|
|
13111
13172
|
// Check cache first
|
|
13112
13173
|
const cachedEntry = webServicesCache.get(cacheKey);
|
|
13113
13174
|
const now = Date.now();
|
|
13114
|
-
if (cachedEntry &&
|
|
13175
|
+
if (cachedEntry && now - cachedEntry.timestamp < CACHE_DURATION) {
|
|
13115
13176
|
// Use cached data
|
|
13116
13177
|
this.webServices = cachedEntry.data;
|
|
13117
13178
|
}
|
|
@@ -13130,7 +13191,7 @@ class EdsKgWebServicesSelect {
|
|
|
13130
13191
|
});
|
|
13131
13192
|
}
|
|
13132
13193
|
// Format options for eds-input-field: "Localizoom (ebrains-localizoom)"
|
|
13133
|
-
this.selectOptions = this.webServices.map(service => ({
|
|
13194
|
+
this.selectOptions = this.webServices.map((service) => ({
|
|
13134
13195
|
label: `${service.name} (${service.short_name})`,
|
|
13135
13196
|
value: service.short_name
|
|
13136
13197
|
}));
|
|
@@ -13245,12 +13306,8 @@ const linkStyles = cva([
|
|
|
13245
13306
|
'rounded-full',
|
|
13246
13307
|
'aria-disabled:bg-dark aria-disabled:text-lightest'
|
|
13247
13308
|
],
|
|
13248
|
-
cta: [
|
|
13249
|
-
|
|
13250
|
-
],
|
|
13251
|
-
'cta-brand': [
|
|
13252
|
-
'cta-link-brand !px-0 !py-0 !min-h-0 !h-auto'
|
|
13253
|
-
]
|
|
13309
|
+
cta: ['cta-link !px-0 !py-0 !min-h-0 !h-auto'],
|
|
13310
|
+
'cta-brand': ['cta-link-brand !px-0 !py-0 !min-h-0 !h-auto']
|
|
13254
13311
|
},
|
|
13255
13312
|
iconSmall: {
|
|
13256
13313
|
true: '',
|
|
@@ -13481,7 +13538,7 @@ class EdsLink {
|
|
|
13481
13538
|
const labelClasses = this.hideLabelOnSmallScreen
|
|
13482
13539
|
? 'hidden lg:flex' // Tailwind example: hidden on small screens, visible on larger
|
|
13483
13540
|
: '';
|
|
13484
|
-
return (hAsync("a", { key: '
|
|
13541
|
+
return (hAsync("a", { key: 'a447ffc8ba377ceb4fe0dc199ad7225e222d4cf3', class: `${classes || ''}`, href: isInteractive ? safeUrl : undefined, target: this.external && isInteractive ? '_blank' : undefined, rel: this.external && isInteractive ? 'noopener noreferrer' : undefined, tabIndex: isInteractive ? 0 : -1, "aria-label": isIconOnly ? this.ariaLabel || 'Link' : undefined, "aria-disabled": this.disabled ? 'true' : undefined, "aria-current": this.current ? 'page' : undefined, role: this.disabled ? 'link' : undefined, download: this.download ? '' : undefined, onClick: (event) => this.handleClick(event), onKeyDown: (event) => this.handleKeyDown(event) }, hAsync("span", { key: '72d84592cfd7e48e983e281d8e8f1d8a2b739e26', class: "z-1 relative inline-flex items-center justify-center" }, this.renderLeftIcon(), this.label && (hAsync("span", { key: 'a101036d3206e7f610c04dfc9d0a4dcd5c1a2b4f', class: `${labelClasses} ${this.icon ? (this.iconPos === 'right' ? (this.size === 'large' ? 'pr-4' : 'pr-2') : this.size === 'large' ? 'pl-4' : 'pl-2') : ''}` }, this.label)), this.renderRightIcon())));
|
|
13485
13542
|
}
|
|
13486
13543
|
get el() { return getElement(this); }
|
|
13487
13544
|
static get style() { return EdsLinkStyle0; }
|
|
@@ -13514,37 +13571,29 @@ const edsLogoCss = ".w-\\[130px\\]{width:130px}.mr-auto{margin-right:auto}.text-
|
|
|
13514
13571
|
var EdsLogoStyle0 = edsLogoCss;
|
|
13515
13572
|
|
|
13516
13573
|
/**
|
|
13517
|
-
* `EdsLogo`
|
|
13518
|
-
*
|
|
13519
|
-
* Key Features:
|
|
13520
|
-
* - Supports various logo styles and orientations.
|
|
13521
|
-
* - Emits a custom `matomoEvent` for tracking click interactions.
|
|
13574
|
+
* `EdsLogo` renders the clickable EBRAINS brand mark (inline SVG).
|
|
13522
13575
|
*
|
|
13523
13576
|
* Props:
|
|
13524
|
-
* - `
|
|
13525
|
-
*
|
|
13526
|
-
* - `
|
|
13577
|
+
* - `variant` (attribute `type`): `'positive'` (dark logo for light
|
|
13578
|
+
* backgrounds) or `'negative'` (light logo for dark backgrounds).
|
|
13579
|
+
* - `href`: where the logo links to (defaults to `/`). The logo is the
|
|
13580
|
+
* click-to-home affordance in eds-header, eds-fullscreen-menu and the
|
|
13581
|
+
* eds-form brand hero.
|
|
13527
13582
|
*
|
|
13528
|
-
*
|
|
13529
|
-
* - `matomoEvent`: Emitted when the logo is clicked, carrying metadata for analytics tracking, including the event `category`, `tag`, `name`, and `action`.
|
|
13583
|
+
* Clicks emit an analytics event (category/tag/name/action).
|
|
13530
13584
|
*
|
|
13531
|
-
*
|
|
13585
|
+
* NOTE: the SVG has a viewBox but no intrinsic width, so the host needs a
|
|
13586
|
+
* sized block parent to render (e.g. eds-header wraps it in a fixed-width
|
|
13587
|
+
* container).
|
|
13532
13588
|
*/
|
|
13533
13589
|
class EdsLogo {
|
|
13534
13590
|
constructor(hostRef) {
|
|
13535
13591
|
registerInstance(this, hostRef);
|
|
13536
13592
|
this.href = '/';
|
|
13537
|
-
this.orientation = 'horizontal';
|
|
13538
13593
|
this.variant = 'positive';
|
|
13539
|
-
this.label = 'Home';
|
|
13540
13594
|
}
|
|
13541
13595
|
/**
|
|
13542
|
-
*
|
|
13543
|
-
* Emits a `matomoEvent` for analytics tracking with details about the interaction.
|
|
13544
|
-
* - `category`: Component type (e.g., "ui-component").
|
|
13545
|
-
* - `tag`: The HTML tag name of the component.
|
|
13546
|
-
* - `name`: Event name, set as "logo".
|
|
13547
|
-
* - `action`: The action, set as "click".
|
|
13596
|
+
* Emits an analytics event when the logo link is clicked.
|
|
13548
13597
|
*/
|
|
13549
13598
|
handleClick() {
|
|
13550
13599
|
sendAnalytics({
|
|
@@ -13554,18 +13603,9 @@ class EdsLogo {
|
|
|
13554
13603
|
action: 'click'
|
|
13555
13604
|
});
|
|
13556
13605
|
}
|
|
13557
|
-
/**
|
|
13558
|
-
* Determines the appropriate SVG content based on the `orientation` and `type` props.
|
|
13559
|
-
*/
|
|
13560
|
-
getLogo() {
|
|
13561
|
-
if (this.variant == 'negative') {
|
|
13562
|
-
return logoNegative;
|
|
13563
|
-
}
|
|
13564
|
-
return logoPositive;
|
|
13565
|
-
}
|
|
13566
13606
|
render() {
|
|
13567
|
-
const logoContent = this.
|
|
13568
|
-
return (hAsync("a", { key: '
|
|
13607
|
+
const logoContent = this.variant === 'negative' ? logoNegative : logoPositive;
|
|
13608
|
+
return (hAsync("a", { key: '3576feaa13063508c317d8b31817165de79ced77', href: this.href, onClick: () => this.handleClick(), class: "eds-logo-wrapper", "aria-label": "Home" }, hAsync("div", { key: 'b43ef52813a59ba47e4a07c3d410b007a27ca186', innerHTML: logoContent })));
|
|
13569
13609
|
}
|
|
13570
13610
|
get el() { return getElement(this); }
|
|
13571
13611
|
static get style() { return EdsLogoStyle0; }
|
|
@@ -13574,9 +13614,7 @@ class EdsLogo {
|
|
|
13574
13614
|
"$tagName$": "eds-logo",
|
|
13575
13615
|
"$members$": {
|
|
13576
13616
|
"href": [1],
|
|
13577
|
-
"
|
|
13578
|
-
"variant": [1, "type"],
|
|
13579
|
-
"label": [1]
|
|
13617
|
+
"variant": [1, "type"]
|
|
13580
13618
|
},
|
|
13581
13619
|
"$listeners$": undefined,
|
|
13582
13620
|
"$lazyBundleId$": "-",
|
|
@@ -13780,7 +13818,15 @@ class EdsModal {
|
|
|
13780
13818
|
'md:top-20'
|
|
13781
13819
|
].join(' ');
|
|
13782
13820
|
case 'bottom':
|
|
13783
|
-
return [
|
|
13821
|
+
return [
|
|
13822
|
+
'bottom-16',
|
|
13823
|
+
'left-0',
|
|
13824
|
+
'w-full',
|
|
13825
|
+
'md:left-1/2',
|
|
13826
|
+
'md:w-auto',
|
|
13827
|
+
'md:-translate-x-1/2',
|
|
13828
|
+
'md:bottom-20'
|
|
13829
|
+
].join(' ');
|
|
13784
13830
|
/*case 'left':
|
|
13785
13831
|
…
|
|
13786
13832
|
case 'right':
|
|
@@ -13803,11 +13849,13 @@ class EdsModal {
|
|
|
13803
13849
|
}
|
|
13804
13850
|
trapFocus(event) {
|
|
13805
13851
|
var _a;
|
|
13806
|
-
if (event.key !== 'Tab')
|
|
13852
|
+
if (event.key !== 'Tab') {
|
|
13807
13853
|
return;
|
|
13854
|
+
}
|
|
13808
13855
|
const focusableElements = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
|
|
13809
|
-
if (!focusableElements || focusableElements.length === 0)
|
|
13856
|
+
if (!focusableElements || focusableElements.length === 0) {
|
|
13810
13857
|
return;
|
|
13858
|
+
}
|
|
13811
13859
|
const firstElement = focusableElements[0];
|
|
13812
13860
|
const lastElement = focusableElements[focusableElements.length - 1];
|
|
13813
13861
|
if (event.shiftKey) {
|
|
@@ -13816,11 +13864,9 @@ class EdsModal {
|
|
|
13816
13864
|
event.preventDefault();
|
|
13817
13865
|
}
|
|
13818
13866
|
}
|
|
13819
|
-
else {
|
|
13820
|
-
|
|
13821
|
-
|
|
13822
|
-
event.preventDefault();
|
|
13823
|
-
}
|
|
13867
|
+
else if (document.activeElement === lastElement) {
|
|
13868
|
+
firstElement.focus();
|
|
13869
|
+
event.preventDefault();
|
|
13824
13870
|
}
|
|
13825
13871
|
}
|
|
13826
13872
|
lockBodyScroll() {
|
|
@@ -13903,8 +13949,9 @@ class EdsModal {
|
|
|
13903
13949
|
* Closes the modal when the Escape key is pressed and handles focus trapping on Tab.
|
|
13904
13950
|
*/
|
|
13905
13951
|
handleKeyDown(event) {
|
|
13906
|
-
if (!this.isOpen)
|
|
13952
|
+
if (!this.isOpen) {
|
|
13907
13953
|
return;
|
|
13954
|
+
}
|
|
13908
13955
|
if (event.key === 'Escape') {
|
|
13909
13956
|
this.close();
|
|
13910
13957
|
}
|
|
@@ -14024,14 +14071,14 @@ class EdsNps {
|
|
|
14024
14071
|
}
|
|
14025
14072
|
render() {
|
|
14026
14073
|
const count = this.max - this.min + 1;
|
|
14027
|
-
return (hAsync("div", { key: '
|
|
14074
|
+
return (hAsync("div", { key: 'edbeca6a946c3b355161d09707d6732dd5a79e67', class: "eds-nps" }, hAsync("eds-input-label", { key: 'cf2b345b98407ee204a914e50183f5f895698adb', id: "nps-question", name: "nps-question", label: this.question }), hAsync("div", { key: '423d0d8b676c8d3a72efd71f092a6b041a42c007', class: "eds-nps__scale" }, hAsync("div", { key: 'b93fdd4168213fd5835a1253c5731c8dfa860572', id: "nps-buttons", role: "radiogroup", "aria-labelledby": "nps-question", onKeyDown: this.handleKeyNav, class: "flex flex-wrap gap-2 my-8" }, Array.from({ length: count }, (_, i) => {
|
|
14028
14075
|
const val = this.min + i;
|
|
14029
14076
|
const isSelected = val === this.internalValue;
|
|
14030
14077
|
const tabIndex = isSelected || (this.internalValue == null && i === 0) ? 0 : -1;
|
|
14031
14078
|
return (hAsync("div", { class: "flex", key: val }, hAsync("eds-button", { ref: (el) => (this.btnRefs[i] = el), size: "large", role: "radio", "aria-checked": isSelected ? 'true' : 'false', "aria-label": `${val}`, onClick: () => this.onSelect(val), tabIndex: tabIndex, intent: isSelected ? 'brand' : 'brandLight', class: isSelected ? 'eds-nps__btn is-selected' : 'eds-nps__btn', "extra-class": "!block !px-0 w-full", label: `${val}`, pill: true, onFocus: () => {
|
|
14032
14079
|
this.internalValue = val;
|
|
14033
14080
|
} })));
|
|
14034
|
-
})), hAsync("div", { key: '
|
|
14081
|
+
})), hAsync("div", { key: '035bf1b3da3c481084201b1edb76a4d3e900a878', class: "flex justify-between eds-nps__labels" }, hAsync("span", { key: '218622e6374ffa7b137b38dde7654e7b671cea6a', class: "f-ui-04 text-light ml-4" }, this.leftLabel), hAsync("span", { key: '66d04e813fa6eee2fb52b7f48540b647016e0fe7', class: "f-ui-04 text-light mr-4" }, this.rightLabel)))));
|
|
14035
14082
|
}
|
|
14036
14083
|
get el() { return getElement(this); }
|
|
14037
14084
|
static get watchers() { return {
|
|
@@ -14307,7 +14354,7 @@ class EdsPagination {
|
|
|
14307
14354
|
}
|
|
14308
14355
|
render() {
|
|
14309
14356
|
const navigableIndex = -1; // Track index for keyboard navigation
|
|
14310
|
-
return (hAsync("div", { key: '
|
|
14357
|
+
return (hAsync("div", { key: '7968465b6c55f17657aa5bd3271448a9d780bec7' }, this.total > 0 && this.mode === 'default' && (hAsync("p", { key: 'e266baaf3b45095b1e0d90c493d254405fa317b7', class: "f-ui-03 text-light mb-28 w-full text-center", "aria-live": "polite", id: "pagination-info" }, hAsync("span", { key: '2acbccf0cb69248fb36b2479eb925d5cb728a3b5', class: "text-light sr-only" }, "Results:"), this.pageResults())), this.mode === 'navigator' || (this.lastPage && this.lastPage > 1) ? (hAsync("nav", { "aria-label": "Pagination Navigation", "aria-describedby": this.mode === 'default' ? 'pagination-info' : undefined, onKeyDown: this.handleKeyDown }, hAsync("ul", { class: "flex items-center justify-center gap-x-8", role: "list" }, hAsync("li", { class: "mr-auto" }, this.useButtons ? (hAsync("div", { class: "pagination-button-wrapper", onFocus: () => this.handleItemFocus(navigableIndex) }, hAsync("eds-button", { label: this.prevLabel, disabled: this.mode === 'navigator' ? !this.prevUrl : this.isFirstPage(), "aria-label": "Go to previous page", icon: "chevron-left", "icon-pos": "left", size: "small", "icon-small": "true", intent: "ghost", "extra-class": "!p-8 lg:!pr-12 pagination-button", onClick: (event) => {
|
|
14311
14358
|
if (this.mode === 'default' && !this.isFirstPage()) {
|
|
14312
14359
|
this.handlePageClick(event, (this.currentPage || 1) - 1);
|
|
14313
14360
|
}
|
|
@@ -14455,7 +14502,7 @@ EdsPie.PALETTES = {
|
|
|
14455
14502
|
'#d8d8d8', // grey-400
|
|
14456
14503
|
'#9dffb4', // green-300
|
|
14457
14504
|
'#e6e6e6', // grey-300
|
|
14458
|
-
'#d3ffdc'
|
|
14505
|
+
'#d3ffdc' // green-200
|
|
14459
14506
|
],
|
|
14460
14507
|
mono: [
|
|
14461
14508
|
'#666666', // grey-700
|
|
@@ -14466,7 +14513,7 @@ EdsPie.PALETTES = {
|
|
|
14466
14513
|
'#6e6e6e', // grey-600
|
|
14467
14514
|
'#d8d8d8', // grey-400
|
|
14468
14515
|
'#f2f2f2', // grey-200
|
|
14469
|
-
'#242424'
|
|
14516
|
+
'#242424' // grey-900
|
|
14470
14517
|
]
|
|
14471
14518
|
};
|
|
14472
14519
|
|
|
@@ -14513,14 +14560,7 @@ class EdsProgressBar {
|
|
|
14513
14560
|
]
|
|
14514
14561
|
.filter(Boolean)
|
|
14515
14562
|
.join(' ');
|
|
14516
|
-
const fillClasses = [
|
|
14517
|
-
'inner',
|
|
14518
|
-
'h-full',
|
|
14519
|
-
'transition-all',
|
|
14520
|
-
'duration-300',
|
|
14521
|
-
'bg-accent',
|
|
14522
|
-
'z-0'
|
|
14523
|
-
]
|
|
14563
|
+
const fillClasses = ['inner', 'h-full', 'transition-all', 'duration-300', 'bg-accent', 'z-0']
|
|
14524
14564
|
.filter(Boolean)
|
|
14525
14565
|
.join(' ');
|
|
14526
14566
|
return (hAsync("div", { role: "progressbar", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": progressValue, "aria-valuetext": `${progressValue}%`, class: outerClasses }, hAsync("div", { class: fillClasses, style: { width: `${progressValue}%` } }), hAsync("div", { class: "absolute inset-0 flex items-center justify-center pointer-events-none z-10" }, hAsync("span", { class: "text-default f-ui-01" }, progressValue, "%"))));
|
|
@@ -14621,7 +14661,7 @@ class EdsRating {
|
|
|
14621
14661
|
this.onSelect(next);
|
|
14622
14662
|
}
|
|
14623
14663
|
render() {
|
|
14624
|
-
return (hAsync("div", { key: '
|
|
14664
|
+
return (hAsync("div", { key: '57a4d7bc36daac45ba1b2a6924a6976919614c99', id: "rating-buttons", role: "group", "aria-labelledby": "rating", class: "stars flex space-x-1 my-8", onKeyDown: (e) => this.handleKeyNav(e) }, Array.from({ length: this.ratingCount }, (_, index) => {
|
|
14625
14665
|
const starRating = index + 1;
|
|
14626
14666
|
const isSelected = starRating <= this.internalRating;
|
|
14627
14667
|
// Use the mapping text if available; otherwise, fall back to a generic label.
|
|
@@ -14649,7 +14689,7 @@ class EdsRating {
|
|
|
14649
14689
|
}; }
|
|
14650
14690
|
}
|
|
14651
14691
|
|
|
14652
|
-
const edsSearchSelectCss = ":host{display:block;width:100%;font-family:var(--f-ui-02-fontFamily, 'IBM Plex Sans', system-ui, sans-serif)}.eds-ss{position:relative;display:block;width:100%}.eds-ss__labelrow{display:flex;justify-content:space-between;margin-bottom:0.25rem}.eds-ss__hint{margin-top:0.5rem;margin-left:0.5rem;font-family:var(--f-ui-05-fontFamily);font-weight:var(--f-ui-05-fontWeight);font-size:var(--f-ui-05-fontSize);line-height:var(--f-ui-05-lineHeight);letter-spacing:var(--f-ui-05-letterSpacing);color:var(--grey-600)}.eds-ss__control{position:relative}.eds-ss__box{display:flex;flex-wrap:wrap;align-items:center;gap:0.35rem;width:100%;box-sizing:border-box;min-height:2.5rem;padding:6px 0.75rem;padding-right:3.75rem;border-width:2px;border-style:solid;border-color:rgba(0, 0, 0, 0.1);border-radius:8px;background:var(--white, #fff);transition-property:color, background-color, border-color;transition-timing-function:cubic-bezier(0, 0, 0.2, 1);transition-duration:300ms}.eds-ss__box:hover{border-color:var(--brand-black)}.eds-ss__box:focus-within{border-color:var(--brand-black);outline:3px solid var(--brand-green);outline-offset:2px}.eds-ss__box.is-error{border-color:var(--red-700)}.eds-ss__box.is-disabled{cursor:not-allowed;background-color:var(--grey-300)}.eds-ss__input{flex:1;min-width:6rem;border:none;outline:none;background:transparent;padding:4px 0;color:var(--brand-black);font-family:var(--f-ui-02-light-fontFamily);font-weight:var(--f-ui-02-light-fontWeight);font-size:var(--f-ui-02-light-fontSize);line-height:var(--f-ui-02-light-lineHeight);letter-spacing:var(--f-ui-02-light-letterSpacing)}.eds-ss__input::placeholder{color:var(--grey-500)}.eds-ss__input:disabled{cursor:not-allowed;color:var(--grey-500)}.eds-ss__chip{display:inline-flex;align-items:center;gap:0.35rem;padding:4px 0.4rem 4px 0.7rem;background:rgba(0, 200, 123, 0.12);color:var(--brand-green-dark, #00A867);border-radius:6px;font-family:var(--f-ui-02-fontFamily);font-size:var(--f-ui-02-fontSize);font-weight:600;line-height:1.4;max-width:100%}.eds-ss__chip-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eds-ss__chip-x{flex-shrink:0;border:none;background:none;cursor:pointer;color:var(--brand-green-dark, #00A867);font-size:1.2rem;line-height:1;padding:0 2px}.eds-ss__chip-x:hover{color:var(--brand-black, #07140D)}.eds-ss__clear,.eds-ss__chevron{position:absolute;top:50%;transform:translateY(-50%)}.eds-ss__chevron{right:6px;width:1.75rem;height:1.75rem;display:flex;align-items:center;justify-content:center;background-color:var(--grey-300);border-radius:4px;color:var(--brand-black);pointer-events:none}.eds-ss__clear{right:2.6rem;color:var(--grey-600, #6e6e6e);background:none;border:none;cursor:pointer;font-size:1.05rem;line-height:1}.eds-ss__clear:hover{color:var(--brand-black, #07140D)}.eds-ss__list{position:absolute;z-index:50;left:0;right:0;margin:0.25rem 0 0;padding:0.25rem;list-style:none;max-height:18rem;overflow-y:auto;background:var(--white, #fff);border:2px solid rgba(0, 0, 0, 0.1);border-radius:8px;box-shadow:0 8px 24px rgba(0, 0, 0, 0.12)}.eds-ss__option{padding:0.5rem 0.6rem;border-radius:6px;cursor:pointer;color:var(--brand-black, #07140D);font-family:var(--f-ui-02-fontFamily);font-size:var(--f-ui-02-fontSize);line-height:var(--f-ui-02-lineHeight);letter-spacing:var(--f-ui-02-letterSpacing)}.eds-ss__option.is-active{background:rgba(0, 200, 123, 0.1)}.eds-ss__option.is-selected{font-weight:600;color:var(--brand-green-dark, #00A867)}.eds-ss__status,.eds-ss__more{padding:0.5rem 0.6rem;font-family:var(--f-ui-05-fontFamily);font-size:var(--f-ui-05-fontSize);line-height:var(--f-ui-05-lineHeight);color:var(--grey-600, #6e6e6e)}.eds-ss__status.is-error{color:var(--red-700, #d64545)}.eds-ss__more{border-top:1px solid rgba(0, 0, 0, 0.1);margin-top:0.25rem;font-style:italic}";
|
|
14692
|
+
const edsSearchSelectCss = ":host{display:block;width:100%;font-family:var(--f-ui-02-fontFamily, 'IBM Plex Sans', system-ui, sans-serif)}.eds-ss{position:relative;display:block;width:100%}.eds-ss__labelrow{display:flex;justify-content:space-between;margin-bottom:0.25rem}.eds-ss__hint{margin-top:0.5rem;margin-left:0.5rem;font-family:var(--f-ui-05-fontFamily);font-weight:var(--f-ui-05-fontWeight);font-size:var(--f-ui-05-fontSize);line-height:var(--f-ui-05-lineHeight);letter-spacing:var(--f-ui-05-letterSpacing);color:var(--grey-600)}.eds-ss__control{position:relative}.eds-ss__box{display:flex;flex-wrap:wrap;align-items:center;gap:0.35rem;width:100%;box-sizing:border-box;min-height:2.5rem;padding:6px 0.75rem;padding-right:3.75rem;border-width:2px;border-style:solid;border-color:rgba(0, 0, 0, 0.1);border-radius:8px;background:var(--white, #fff);transition-property:color, background-color, border-color;transition-timing-function:cubic-bezier(0, 0, 0.2, 1);transition-duration:300ms}.eds-ss__box:hover{border-color:var(--brand-black)}.eds-ss__box:focus-within{border-color:var(--brand-black);outline:3px solid var(--brand-green);outline-offset:2px}.eds-ss__box.is-error{border-color:var(--red-700)}.eds-ss__box.is-disabled{cursor:not-allowed;background-color:var(--grey-300)}.eds-ss__input{flex:1;min-width:6rem;border:none;outline:none;background:transparent;padding:4px 0;color:var(--brand-black);font-family:var(--f-ui-02-light-fontFamily);font-weight:var(--f-ui-02-light-fontWeight);font-size:var(--f-ui-02-light-fontSize);line-height:var(--f-ui-02-light-lineHeight);letter-spacing:var(--f-ui-02-light-letterSpacing)}.eds-ss__input::placeholder{color:var(--grey-500);opacity:1}.eds-ss__input:disabled{cursor:not-allowed;color:var(--grey-500)}.eds-ss__chip{display:inline-flex;align-items:center;gap:0.35rem;padding:4px 0.4rem 4px 0.7rem;background:rgba(0, 200, 123, 0.12);color:var(--brand-green-dark, #00A867);border-radius:6px;font-family:var(--f-ui-02-fontFamily);font-size:var(--f-ui-02-fontSize);font-weight:600;line-height:1.4;max-width:100%}.eds-ss__chip-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eds-ss__chip-x{flex-shrink:0;border:none;background:none;cursor:pointer;color:var(--brand-green-dark, #00A867);font-size:1.2rem;line-height:1;padding:0 2px}.eds-ss__chip-x:hover{color:var(--brand-black, #07140D)}.eds-ss__clear,.eds-ss__chevron{position:absolute;top:50%;transform:translateY(-50%)}.eds-ss__chevron{right:6px;width:1.75rem;height:1.75rem;display:flex;align-items:center;justify-content:center;background-color:var(--grey-300);border-radius:4px;color:var(--brand-black);pointer-events:none}.eds-ss__clear{right:2.6rem;color:var(--grey-600, #6e6e6e);background:none;border:none;cursor:pointer;font-size:1.05rem;line-height:1}.eds-ss__clear:hover{color:var(--brand-black, #07140D)}.eds-ss__list{position:absolute;z-index:50;left:0;right:0;margin:0.25rem 0 0;padding:0.25rem;list-style:none;max-height:18rem;overflow-y:auto;background:var(--white, #fff);border:2px solid rgba(0, 0, 0, 0.1);border-radius:8px;box-shadow:0 8px 24px rgba(0, 0, 0, 0.12)}.eds-ss__option{padding:0.5rem 0.6rem;border-radius:6px;cursor:pointer;color:var(--brand-black, #07140D);font-family:var(--f-ui-02-fontFamily);font-size:var(--f-ui-02-fontSize);line-height:var(--f-ui-02-lineHeight);letter-spacing:var(--f-ui-02-letterSpacing)}.eds-ss__option.is-active{background:rgba(0, 200, 123, 0.1)}.eds-ss__option.is-selected{font-weight:600;color:var(--brand-green-dark, #00A867)}.eds-ss__status,.eds-ss__more{padding:0.5rem 0.6rem;font-family:var(--f-ui-05-fontFamily);font-size:var(--f-ui-05-fontSize);line-height:var(--f-ui-05-lineHeight);color:var(--grey-600, #6e6e6e)}.eds-ss__status.is-error{color:var(--red-700, #d64545)}.eds-ss__more{border-top:1px solid rgba(0, 0, 0, 0.1);margin-top:0.25rem;font-style:italic}.mt-6{margin-top:0.375rem}";
|
|
14653
14693
|
var EdsSearchSelectStyle0 = edsSearchSelectCss;
|
|
14654
14694
|
|
|
14655
14695
|
/**
|
|
@@ -14700,8 +14740,9 @@ class EdsSearchSelect {
|
|
|
14700
14740
|
this.onKeyDown = (e) => {
|
|
14701
14741
|
if (e.key === 'ArrowDown') {
|
|
14702
14742
|
e.preventDefault();
|
|
14703
|
-
if (!this.open)
|
|
14743
|
+
if (!this.open) {
|
|
14704
14744
|
return this.openMenu();
|
|
14745
|
+
}
|
|
14705
14746
|
this.activeIndex = Math.min(this.activeIndex + 1, this.visibleItems.length - 1);
|
|
14706
14747
|
}
|
|
14707
14748
|
else if (e.key === 'ArrowUp') {
|
|
@@ -14728,8 +14769,9 @@ class EdsSearchSelect {
|
|
|
14728
14769
|
// would be false even for our own clicks and wrongly close on open. composedPath()
|
|
14729
14770
|
// walks through every shadow boundary and contains our host iff the click was ours.
|
|
14730
14771
|
this.onDocumentClick = (e) => {
|
|
14731
|
-
if (this.open && !e.composedPath().includes(this.host))
|
|
14772
|
+
if (this.open && !e.composedPath().includes(this.host)) {
|
|
14732
14773
|
this.closeMenu();
|
|
14774
|
+
}
|
|
14733
14775
|
};
|
|
14734
14776
|
this.name = undefined;
|
|
14735
14777
|
this.label = undefined;
|
|
@@ -14789,15 +14831,17 @@ class EdsSearchSelect {
|
|
|
14789
14831
|
}
|
|
14790
14832
|
cacheLabels(opts) {
|
|
14791
14833
|
(opts || []).forEach((o) => {
|
|
14792
|
-
if (o && o.value != null)
|
|
14834
|
+
if (o && o.value != null) {
|
|
14793
14835
|
this.labelCache[String(o.value)] = o.label;
|
|
14836
|
+
}
|
|
14794
14837
|
});
|
|
14795
14838
|
}
|
|
14796
14839
|
/** The current selection as a value array (works for single + multi). */
|
|
14797
14840
|
get selectedValues() {
|
|
14798
14841
|
const v = this.value;
|
|
14799
|
-
if (Array.isArray(v))
|
|
14842
|
+
if (Array.isArray(v)) {
|
|
14800
14843
|
return v.map(String).filter((s) => s !== '');
|
|
14844
|
+
}
|
|
14801
14845
|
if (typeof v === 'string' && v !== '') {
|
|
14802
14846
|
return this.multiple ? v.split(',').filter(Boolean) : [v];
|
|
14803
14847
|
}
|
|
@@ -14831,10 +14875,10 @@ class EdsSearchSelect {
|
|
|
14831
14875
|
// --- Data --------------------------------------------------------------
|
|
14832
14876
|
filterInline(q) {
|
|
14833
14877
|
const needle = q.trim().toLowerCase();
|
|
14834
|
-
if (!needle)
|
|
14878
|
+
if (!needle) {
|
|
14835
14879
|
return this.inlineOptions;
|
|
14836
|
-
|
|
14837
|
-
|
|
14880
|
+
}
|
|
14881
|
+
return this.inlineOptions.filter((o) => o.label.toLowerCase().includes(needle) || String(o.value).toLowerCase().includes(needle));
|
|
14838
14882
|
}
|
|
14839
14883
|
async fetchRemote(q) {
|
|
14840
14884
|
this.loading = true;
|
|
@@ -14843,8 +14887,9 @@ class EdsSearchSelect {
|
|
|
14843
14887
|
const params = new URLSearchParams({ [this.searchParam]: q, limit: String(this.limit) });
|
|
14844
14888
|
const url = `${this.apiBase}/datasets/${encodeURIComponent(this.source)}/search?${params}`;
|
|
14845
14889
|
const resp = await fetch(url);
|
|
14846
|
-
if (!resp.ok)
|
|
14890
|
+
if (!resp.ok) {
|
|
14847
14891
|
throw new Error(`Search failed: ${resp.statusText}`);
|
|
14892
|
+
}
|
|
14848
14893
|
const data = await resp.json();
|
|
14849
14894
|
this.items = data.items || [];
|
|
14850
14895
|
this.cacheLabels(this.items);
|
|
@@ -14887,14 +14932,16 @@ class EdsSearchSelect {
|
|
|
14887
14932
|
}
|
|
14888
14933
|
// --- Interaction -------------------------------------------------------
|
|
14889
14934
|
openMenu() {
|
|
14890
|
-
if (this.disabled)
|
|
14935
|
+
if (this.disabled) {
|
|
14891
14936
|
return;
|
|
14937
|
+
}
|
|
14892
14938
|
this.open = true;
|
|
14893
14939
|
this.activeIndex = -1;
|
|
14894
14940
|
// Populate on first open (initial page for remote, full list for inline).
|
|
14895
14941
|
// Immediate fetch on open — debounce only applies to typing.
|
|
14896
|
-
if (!this.items.length || this.isRemote)
|
|
14942
|
+
if (!this.items.length || this.isRemote) {
|
|
14897
14943
|
this.runSearch(this.query, true);
|
|
14944
|
+
}
|
|
14898
14945
|
}
|
|
14899
14946
|
closeMenu() {
|
|
14900
14947
|
this.open = false;
|
|
@@ -14937,14 +14984,28 @@ class EdsSearchSelect {
|
|
|
14937
14984
|
render() {
|
|
14938
14985
|
const selected = this.selectedValues;
|
|
14939
14986
|
const hasSelection = selected.length > 0;
|
|
14940
|
-
const inputValue = this.multiple ? this.query :
|
|
14987
|
+
const inputValue = this.multiple ? this.query : this.open ? this.query : this.selectedLabel;
|
|
14941
14988
|
const placeholder = this.multiple
|
|
14942
|
-
?
|
|
14943
|
-
|
|
14944
|
-
|
|
14945
|
-
|
|
14989
|
+
? hasSelection
|
|
14990
|
+
? ''
|
|
14991
|
+
: this.placeholder
|
|
14992
|
+
: hasSelection && !this.open
|
|
14993
|
+
? this.selectedLabel
|
|
14994
|
+
: this.placeholder;
|
|
14995
|
+
return (hAsync("div", { key: 'c07301b4d8b6dceeea092423faeefdb51df5882a', class: "eds-ss" }, (this.label || this.hint) && (hAsync("div", { key: '852ddc433b142caed852c7503d68aab968808480', class: "eds-ss__labelrow" }, this.label && (hAsync("eds-input-label", { key: 'd44b4925954172a7ad5dec8e71b363630fc8cd3b', name: `${this.name}-input`, label: this.label, required: this.required, disabled: this.disabled })), this.hint && (hAsync("p", { key: '964933f90c1526383364fa4a76b6b31846a6e3e0', id: `${this.name}-hint`, class: "eds-ss__hint" }, this.hint)))), hAsync("div", { key: '69b226ececf5431ce220f5686e01f18aba100b8d', class: "eds-ss__control relative" }, hAsync("div", { key: '942ba3e7020e2a9ae1eb4176b1d7b7444368baa3', class: { 'eds-ss__box': true, 'is-error': this.error || !!this.fetchError, 'is-disabled': this.disabled } }, this.multiple &&
|
|
14996
|
+
selected.map((v) => (hAsync("span", { class: "eds-ss__chip", key: v }, hAsync("span", { class: "eds-ss__chip-label" }, this.labelFor(v)), !this.disabled && (hAsync("button", { type: "button", class: "eds-ss__chip-x", "aria-label": `Remove ${this.labelFor(v)}`, onMouseDown: (e) => {
|
|
14997
|
+
e.preventDefault();
|
|
14998
|
+
this.removeValue(v, e);
|
|
14999
|
+
} }, "\u00D7"))))), hAsync("input", { key: 'c41ce7b8e648f0c9e688ae94b0a1a25945ad8715', id: `${this.name}-input`, class: "eds-ss__input", type: "text", role: "combobox", autocomplete: "off", "aria-expanded": this.open ? 'true' : 'false', "aria-controls": this.listboxId, "aria-autocomplete": "list", placeholder: placeholder, value: inputValue, disabled: this.disabled, required: this.required && !hasSelection, onFocus: () => this.openMenu(), onInput: this.onInput, onKeyDown: this.onKeyDown })), !this.multiple && hasSelection && !this.disabled && (hAsync("button", { key: '331e43093fc5749fc369bf976119610b2a310576', type: "button", class: "eds-ss__clear", "aria-label": "Clear selection", onClick: this.clear }, "\u00D7")), hAsync("span", { key: '11b78efe2584e65cb533fb88746ad38da47f2b8d', class: "eds-ss__chevron", "aria-hidden": "true" }, hAsync("eds-icon-wrapper", { key: 'ca62bbe9b3f90b1625208584a6b9e5a154acc5be', name: "chevron-right", size: 20 }))), this.open && (hAsync("ul", { key: 'f4739dc147217d1d575494d0bdd83427f898ddc3', class: "eds-ss__list", id: this.listboxId, role: "listbox" }, this.loading && hAsync("li", { key: 'def95414349449021ec318cae0e3990621992e3e', class: "eds-ss__status" }, "Searching\u2026"), !this.loading && this.fetchError && hAsync("li", { key: '32d940c717170d0e53200ff552bf513e3e6e5fe1', class: "eds-ss__status is-error" }, this.fetchError), !this.loading && !this.fetchError && this.visibleItems.length === 0 && (hAsync("li", { key: 'bea6ededb51b4baab76eca8a237d4a740d3478da', class: "eds-ss__status" }, "No matches")), !this.loading &&
|
|
14946
15000
|
!this.fetchError &&
|
|
14947
|
-
this.visibleItems.map((opt, i) => (hAsync("li", { key: opt.value, class: {
|
|
15001
|
+
this.visibleItems.map((opt, i) => (hAsync("li", { key: opt.value, class: {
|
|
15002
|
+
'eds-ss__option': true,
|
|
15003
|
+
'is-active': i === this.activeIndex,
|
|
15004
|
+
'is-selected': selected.includes(String(opt.value))
|
|
15005
|
+
}, role: "option", "aria-selected": selected.includes(String(opt.value)) ? 'true' : 'false', onMouseEnter: () => (this.activeIndex = i), onMouseDown: (e) => {
|
|
15006
|
+
e.preventDefault();
|
|
15007
|
+
this.select(opt);
|
|
15008
|
+
} }, opt.label))), !this.loading && !this.fetchError && this.hiddenCount > 0 && (hAsync("li", { key: '8d6fe6aa8041a948a19004a03728b1439469e28e', class: "eds-ss__more" }, "+", this.hiddenCount, " more \u2014 keep typing to narrow")))), hAsync("div", { key: 'dfb6a12b7eff98bd05b674d385db1dc2e6a17ac2', class: "mt-6" }, hAsync("eds-input-footer", { key: '2f0b9dbc247dea65d3c7abea1a6384b496e586b8', name: this.name, message: this.message, error: this.error, "error-message": this.errorMessage }))));
|
|
14948
15009
|
}
|
|
14949
15010
|
get host() { return getElement(this); }
|
|
14950
15011
|
static get watchers() { return {
|
|
@@ -15014,7 +15075,7 @@ class EdsSectionCore {
|
|
|
15014
15075
|
}
|
|
15015
15076
|
render() {
|
|
15016
15077
|
const TagType = this.tag; // Set dynamic tag type (div or section)
|
|
15017
|
-
return (hAsync(TagType, { key: '
|
|
15078
|
+
return (hAsync(TagType, { key: 'cee3905fc5e268c768fbc58b413ee074591888b7' }, hAsync("eds-section-heading", { key: '9ba05e76c5e348b1209283b7f95a475408758c3b', headingLevel: this.headingLevel, sectionTitle: this.sectionTitle }), hAsync("slot", { key: '8e5d27261133cd900d13940ce928946b1c378277' })));
|
|
15018
15079
|
}
|
|
15019
15080
|
static get style() { return EdsSectionCoreStyle0; }
|
|
15020
15081
|
static get cmpMeta() { return {
|
|
@@ -15069,12 +15130,12 @@ class EdsSectionHeading {
|
|
|
15069
15130
|
render() {
|
|
15070
15131
|
const TagType = this.tag; // Dynamically set tag type for the container
|
|
15071
15132
|
const HeadingTag = this.headingLevel; // Dynamically set heading level
|
|
15072
|
-
return (hAsync(TagType, { key: '
|
|
15133
|
+
return (hAsync(TagType, { key: '8791e5d816bfdc80087f3f7e5dbab60d0ac4a523', class: {
|
|
15073
15134
|
'ui-section-header flex flex-wrap items-center justify-between gap-x-12 gap-y-8': true,
|
|
15074
15135
|
container: this.withContainer,
|
|
15075
15136
|
'pt-48': this.spacingLarge,
|
|
15076
15137
|
'pt-28': !this.spacingLarge
|
|
15077
|
-
} }, hAsync(HeadingTag, { key: '
|
|
15138
|
+
} }, hAsync(HeadingTag, { key: 'e2e7ca5effc12e6c9c8c3418c4097920ec80e53e', class: this.getHeadingClass() }, this.sectionTitle)));
|
|
15078
15139
|
}
|
|
15079
15140
|
static get cmpMeta() { return {
|
|
15080
15141
|
"$flags$": 0,
|
|
@@ -15332,7 +15393,7 @@ class EdsSocialNetworks {
|
|
|
15332
15393
|
const isInverse = this.variant === 'inverse';
|
|
15333
15394
|
const textClass = isInverse ? 'text-inverse' : '';
|
|
15334
15395
|
const linkIntent = isInverse ? 'inverse' : 'strong';
|
|
15335
|
-
return (hAsync("nav", { key: '
|
|
15396
|
+
return (hAsync("nav", { key: '42abfdc0d94bad2fa273de7a476099df0a5103ff', "aria-label": "Social media" }, hAsync("p", { key: 'c2eb9600afd49b5b178392f0f46efd58909f8843', class: `f-ui-02 ${textClass}` }, this.heading), hAsync("ul", { key: 'b71a410550b06d89947ee9475af98c19cbe7e130', class: "mt-12 flex gap-4" }, this.socialNetworks.map((network, index) => (hAsync("li", { key: index }, hAsync("eds-link", { external: true, "aria-label": `EBRAINS on ${network.label}`, url: network.url, icon: network.icon, intent: linkIntent })))))));
|
|
15336
15397
|
}
|
|
15337
15398
|
static get style() { return EdsSocialNetworksStyle0; }
|
|
15338
15399
|
static get cmpMeta() { return {
|
|
@@ -15424,7 +15485,7 @@ class EdsSpinner {
|
|
|
15424
15485
|
alignItems: 'center',
|
|
15425
15486
|
justifyContent: 'center'
|
|
15426
15487
|
};
|
|
15427
|
-
return (hAsync(Host, { key: '
|
|
15488
|
+
return (hAsync(Host, { key: '4b78f045f987eb40289d2829bab08f28324f13d2' }, hAsync("div", { key: '05fcd319080518845630c6fd4bccda02032c3c5f', class: "spinner-overlay", style: overlayStyle }, hAsync("span", { key: 'c1e24a0e3f3f9704ad9a118724f3437124e4f36f', class: "spinner", style: spinnerStyle }), this.message && hAsync("p", { key: '947cd986f00100e950b1c2380b651c6baebca142', class: "f-ui-01" }, this.message))));
|
|
15428
15489
|
}
|
|
15429
15490
|
static get style() { return EdsSpinnerStyle0; }
|
|
15430
15491
|
static get cmpMeta() { return {
|
|
@@ -15508,7 +15569,7 @@ class EdsSplashScreen {
|
|
|
15508
15569
|
}; }
|
|
15509
15570
|
}
|
|
15510
15571
|
|
|
15511
|
-
const edsStepsCss = "blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}.steps{position:sticky;margin-left:16px;border-left:1px solid var(--soft-color, #ddd);padding-left:23px;counter-reset:step}.steps h3{counter-increment:step;font-size:var(--f-heading-05-fontSize);font-weight:var(--f-heading-05-fontWeight);line-height:var(--f-heading-05-lineHeight);position:relative}.steps h3::before{content:counter(step);position:absolute;left:-40px;display:flex;align-items:center;justify-content:center;width:32px;height:32px;font-size:1rem;border:1px solid #ccc;background:var(--grey-900);color:#fff;border-radius:50%}.steps h4,.steps h5{counter-increment:step;font-size:var(--f-heading-06-fontSize);font-weight:var(--f-heading-06-fontWeight);line-height:var(--f-heading-06-lineHeight);position:relative}.steps h4::before,.steps h5::before{content:counter(step);position:absolute;left:-40px;top:-2px;display:flex;align-items:center;justify-content:center;width:31px;height:31px;font-size:0.875rem;border:1px solid #ccc;background:#333;color:#fff;border-radius:50%}.steps blockquote{margin-top:16px;margin-bottom:16px;font-style:italic;color:#aaa;padding-left:6px}.steps-img-placeholder{width:100%;height:200px;background:linear-gradient(to bottom, #9CE142, #00C959, #00A595);}.bg-\\[\\#00A595\\]{--tw-bg-opacity:1;background-color:rgb(0 165 149 / var(--tw-bg-opacity))}.relative{position:relative}.f-heading-04{font-family:var(--f-heading-04-fontFamily);font-weight:var(--f-heading-04-fontWeight);font-size:var(--f-heading-04-fontSize);line-height:var(--f-heading-04-lineHeight);letter-spacing:var(--f-heading-04-letterSpacing)}.f-body-02{font-family:var(--f-body-02-fontFamily);font-weight:var(--f-body-02-fontWeight);font-size:var(--f-body-02-fontSize);line-height:var(--f-body-02-lineHeight);letter-spacing:var(--f-body-02-letterSpacing)}.f-ui-02{font-family:var(--f-ui-02-fontFamily);font-weight:var(--f-ui-02-fontWeight);font-size:var(--f-ui-02-fontSize);line-height:var(--f-ui-02-lineHeight);letter-spacing:var(--f-ui-02-letterSpacing)}.f-ui-03{font-family:var(--f-ui-03-fontFamily);font-weight:var(--f-ui-03-fontWeight);font-size:var(--f-ui-03-fontSize);line-height:var(--f-ui-03-lineHeight);letter-spacing:var(--f-ui-03-letterSpacing)}.text-center{text-align:center}.text-default{color:var(--brand-black)}.text-inverse{color:var(--white)}.text-light{color:var(--grey-light)}.text-lighter{color:var(--grey-dark)}.w-full{width:100%}.h-52{height:3.25rem}.h-96{height:6rem}.h-\\[200px\\]{height:200px}.justify-between{justify-content:space-between}.mt-16{margin-top:1rem}.mt-32{margin-top:2rem}.mt-64{margin-top:4rem}.my-16{margin-top:1rem;margin-bottom:1rem}.mb-12{margin-bottom:0.75rem}.mb-16{margin-bottom:1rem}.last\\:mb-0:last-child{margin-bottom:0rem}.last\\:mt-16:last-child{margin-top:1rem}.border-softer{border:2px solid rgba(0, 0, 0, .1)}.relative{position:relative}.flex{display:flex}.inline-flex{display:inline-flex}.grow{flex-grow:1}.rounded{border-radius:0.25rem}.rounded-lg{border-radius:16px}.rounded-t-lg{border-top-left-radius:16px;border-top-right-radius:16px}.border-2{border-width:2px}.p-8{padding:0.5rem}.p-24{padding:1.5rem}.bg-default{background-color:var(--grey-light)}.bg-inverse{background-color:var(--white)}.top-2{top:0.125rem}.bottom-2{bottom:0.125rem}.left-2{left:0.125rem}.right-2{right:0.125rem}.-translate-x-1\\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\\/2{--tw-translate-y:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.overflow-hidden{overflow:hidden}.space-y-8{--tw-space-y-reverse:0;margin-top:calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0.5rem * var(--tw-space-y-reverse))}.space-y-16{--tw-space-y-reverse:0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.ml-8{margin-left:0.5rem}.gap-y-16{row-gap:1rem}.gap-x-16{-moz-column-gap:1rem;column-gap:1rem}.flex{display:flex}.grid{display:grid}.hidden{display:none}.block{display:block}.items-center{align-items:center}.px-8{padding-left:0.5rem;padding-right:0.5rem}.pb-20{padding-bottom:1.25rem}.eds-steps__title[role=\"button\"]{cursor:pointer}.eds-steps__title.is-disabled{cursor:not-allowed;color:rgba(0, 0, 0, 0.5);}.eds-steps__title.is-disabled::before{opacity:1;filter:none}.steps--horizontal{display:flex;flex-direction:column;gap:2rem}.horizontal-indicators{display:flex;
|
|
15572
|
+
const edsStepsCss = "blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}.steps{position:sticky;margin-left:16px;border-left:1px solid var(--soft-color, #ddd);padding-left:23px;counter-reset:step}.steps h3{counter-increment:step;font-size:var(--f-heading-05-fontSize);font-weight:var(--f-heading-05-fontWeight);line-height:var(--f-heading-05-lineHeight);position:relative}.steps h3::before{content:counter(step);position:absolute;left:-40px;display:flex;align-items:center;justify-content:center;width:32px;height:32px;font-size:1rem;border:1px solid #ccc;background:var(--grey-900);color:#fff;border-radius:50%}.steps h4,.steps h5{counter-increment:step;font-size:var(--f-heading-06-fontSize);font-weight:var(--f-heading-06-fontWeight);line-height:var(--f-heading-06-lineHeight);position:relative}.steps h4::before,.steps h5::before{content:counter(step);position:absolute;left:-40px;top:-2px;display:flex;align-items:center;justify-content:center;width:31px;height:31px;font-size:0.875rem;border:1px solid #ccc;background:#333;color:#fff;border-radius:50%}.steps blockquote{margin-top:16px;margin-bottom:16px;font-style:italic;color:#aaa;padding-left:6px}.steps-img-placeholder{width:100%;height:200px;background:linear-gradient(to bottom, #9CE142, #00C959, #00A595);}.bg-\\[\\#00A595\\]{--tw-bg-opacity:1;background-color:rgb(0 165 149 / var(--tw-bg-opacity))}.relative{position:relative}.f-heading-04{font-family:var(--f-heading-04-fontFamily);font-weight:var(--f-heading-04-fontWeight);font-size:var(--f-heading-04-fontSize);line-height:var(--f-heading-04-lineHeight);letter-spacing:var(--f-heading-04-letterSpacing)}.f-body-02{font-family:var(--f-body-02-fontFamily);font-weight:var(--f-body-02-fontWeight);font-size:var(--f-body-02-fontSize);line-height:var(--f-body-02-lineHeight);letter-spacing:var(--f-body-02-letterSpacing)}.f-ui-02{font-family:var(--f-ui-02-fontFamily);font-weight:var(--f-ui-02-fontWeight);font-size:var(--f-ui-02-fontSize);line-height:var(--f-ui-02-lineHeight);letter-spacing:var(--f-ui-02-letterSpacing)}.f-ui-03{font-family:var(--f-ui-03-fontFamily);font-weight:var(--f-ui-03-fontWeight);font-size:var(--f-ui-03-fontSize);line-height:var(--f-ui-03-lineHeight);letter-spacing:var(--f-ui-03-letterSpacing)}.text-center{text-align:center}.text-default{color:var(--brand-black)}.text-inverse{color:var(--white)}.text-light{color:var(--grey-light)}.text-lighter{color:var(--grey-dark)}.w-full{width:100%}.h-52{height:3.25rem}.h-96{height:6rem}.h-\\[200px\\]{height:200px}.justify-between{justify-content:space-between}.mt-16{margin-top:1rem}.mt-32{margin-top:2rem}.mt-64{margin-top:4rem}.my-16{margin-top:1rem;margin-bottom:1rem}.mb-12{margin-bottom:0.75rem}.mb-16{margin-bottom:1rem}.last\\:mb-0:last-child{margin-bottom:0rem}.last\\:mt-16:last-child{margin-top:1rem}.border-softer{border:2px solid rgba(0, 0, 0, .1)}.relative{position:relative}.flex{display:flex}.inline-flex{display:inline-flex}.grow{flex-grow:1}.rounded{border-radius:0.25rem}.rounded-lg{border-radius:16px}.rounded-t-lg{border-top-left-radius:16px;border-top-right-radius:16px}.border-2{border-width:2px}.p-8{padding:0.5rem}.p-24{padding:1.5rem}.bg-default{background-color:var(--grey-light)}.bg-inverse{background-color:var(--white)}.top-2{top:0.125rem}.bottom-2{bottom:0.125rem}.left-2{left:0.125rem}.right-2{right:0.125rem}.-translate-x-1\\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\\/2{--tw-translate-y:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.overflow-hidden{overflow:hidden}.space-y-8{--tw-space-y-reverse:0;margin-top:calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0.5rem * var(--tw-space-y-reverse))}.space-y-16{--tw-space-y-reverse:0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.ml-8{margin-left:0.5rem}.gap-y-16{row-gap:1rem}.gap-x-16{-moz-column-gap:1rem;column-gap:1rem}.flex{display:flex}.grid{display:grid}.hidden{display:none}.block{display:block}.items-center{align-items:center}.px-8{padding-left:0.5rem;padding-right:0.5rem}.pb-20{padding-bottom:1.25rem}.eds-steps__title[role=\"button\"]{cursor:pointer}.eds-steps__title.is-disabled{cursor:not-allowed;color:rgba(0, 0, 0, 0.5);}.eds-steps__title.is-disabled::before{opacity:1;filter:none}.steps--horizontal{display:flex;flex-direction:column;gap:2rem}.horizontal-indicators{display:flex;align-items:flex-start;gap:0;padding:0;margin-top:1.75rem;margin-bottom:0}.horizontal-step{display:flex;flex-direction:column;align-items:flex-start;gap:0.6rem;cursor:pointer;flex:1 1 0;min-width:0;position:relative}.horizontal-step:last-child{flex:0 0 auto}.horizontal-step:not(:last-child)::after{content:'';position:absolute;top:1.375rem;left:calc(2.75rem + 0.4rem);width:calc(100% - 2.75rem - 0.8rem);height:3px;border-radius:2px;background-color:#e0e0e0;transform:translateY(-50%);z-index:1}.horizontal-step>span{text-align:left;align-self:stretch}.horizontal-step.is-completed:not(:last-child)::after{background-color:var(--brand-green-dark);}.step-indicator{width:2.75rem;height:2.75rem;border-radius:50%;border:2px solid #e0e0e0;display:flex;align-items:center;justify-content:center;background-color:white;transition:all 0.3s ease;flex:0 0 auto}.horizontal-step.is-active .step-indicator{border-color:var(--brand-green-dark);background-color:var(--brand-green-dark);color:var(--white)}.horizontal-step.is-completed .step-indicator{border-color:var(--brand-green-dark);background-color:var(--white)}.horizontal-step.is-disabled{opacity:0.5;cursor:not-allowed}.step-number{font-family:var(--font-family-mono, 'IBM Plex Mono', monospace);font-weight:500;font-size:0.95rem}.step-label{font-family:var(--font-family-mono, 'IBM Plex Mono', monospace);font-size:9.5px;letter-spacing:0.07em;text-transform:uppercase;font-weight:500;color:var(--dark-grey, #7a7b7a)}.horizontal-step.is-active .step-label{color:var(--brand-green-dark)}.step-content{padding:0.5rem 0;margin-left:0;margin-right:0}@media (min-width: 700px){.step-content{padding:1.5rem 0}}.opacity-50{opacity:0.5}.eds-steps__title[role=\"button\"]{cursor:pointer}.theme-brand.steps h3::before,.theme-brand.steps h4::before,.theme-brand.steps h5::before{background:var(--brand-green);color:var(--brand-black);border-color:var(--brand-green);font-weight:600}.theme-brand .step-indicator{background-color:var(--grey-light);border-color:transparent;color:var(--dark-grey, #7a7b7a)}.theme-brand .horizontal-step.is-active .step-indicator{border-color:var(--brand-green);background-color:var(--brand-green);color:var(--brand-black);box-shadow:0 0 0 4px rgba(0, 255, 157, 0.2)}.theme-brand .horizontal-step.is-completed .step-indicator{border-color:var(--brand-green);background-color:var(--brand-green);color:var(--brand-black)}.theme-brand .horizontal-step.is-completed:not(:last-child)::after{background-color:var(--brand-green)}.theme-brand .horizontal-step.is-active .step-label,.theme-brand .horizontal-step.is-completed .step-label{color:var(--brand-black)}.theme-brand .step-number{font-weight:600}.theme-default.steps h3::before,.theme-default.steps h4::before,.theme-default.steps h5::before{background:var(--grey-900);color:#fff;border-color:#ccc}.theme-default .step-indicator{background-color:white;border-color:#e0e0e0}.theme-default .horizontal-step.is-active .step-indicator{border-color:var(--brand-green-dark);background-color:var(--brand-green-dark);color:var(--white)}.theme-default .horizontal-step.is-completed .step-indicator{border-color:var(--brand-green-dark);background-color:var(--white)}.theme-default .horizontal-step.is-completed:not(:last-child)::after{background-color:var(--brand-green-dark)}.theme-default .horizontal-step.is-active .step-label{color:var(--brand-green-dark)}";
|
|
15512
15573
|
var EdsStepsStyle0 = edsStepsCss;
|
|
15513
15574
|
|
|
15514
15575
|
class EdsSteps {
|
|
@@ -15518,6 +15579,9 @@ class EdsSteps {
|
|
|
15518
15579
|
this.finished = createEvent(this, "finished", 7);
|
|
15519
15580
|
this.next = createEvent(this, "next", 7);
|
|
15520
15581
|
this.back = createEvent(this, "back", 7);
|
|
15582
|
+
this.onResize = () => {
|
|
15583
|
+
this.isMobile = typeof window !== 'undefined' && window.innerWidth < 750;
|
|
15584
|
+
};
|
|
15521
15585
|
this.handleTitleClick = (index) => {
|
|
15522
15586
|
// In linear mode, do NOT collapse; only navigate if allowed.
|
|
15523
15587
|
if (this.type === 'linear') {
|
|
@@ -15545,11 +15609,11 @@ class EdsSteps {
|
|
|
15545
15609
|
};
|
|
15546
15610
|
this.handleNext = () => {
|
|
15547
15611
|
const lastIndex = this.parsedSteps.length - 1;
|
|
15548
|
-
// On last step
|
|
15612
|
+
// On last step: stay put and just emit finished. Collapsing (activeStep = -1)
|
|
15613
|
+
// left the form as an empty shell when the host rejected the submit (e.g.
|
|
15614
|
+
// single-submission already used); the success path navigates away.
|
|
15549
15615
|
if (this.activeStep >= lastIndex) {
|
|
15550
15616
|
this.finished.emit();
|
|
15551
|
-
this.activeStep = -1; // collapse the content
|
|
15552
|
-
this.step.emit(this.activeStep); // notify change (-1 sentinel)
|
|
15553
15617
|
return;
|
|
15554
15618
|
}
|
|
15555
15619
|
const target = this.activeStep + 1;
|
|
@@ -15593,6 +15657,7 @@ class EdsSteps {
|
|
|
15593
15657
|
this.headingLevel = 'h4';
|
|
15594
15658
|
this.collapsibleTitles = false;
|
|
15595
15659
|
this.activeStep = 0;
|
|
15660
|
+
this.isMobile = false;
|
|
15596
15661
|
}
|
|
15597
15662
|
handleDisableNextChange(newValue) {
|
|
15598
15663
|
if (typeof newValue === 'string' && newValue.trim().startsWith('[')) {
|
|
@@ -15604,8 +15669,23 @@ class EdsSteps {
|
|
|
15604
15669
|
}
|
|
15605
15670
|
}
|
|
15606
15671
|
}
|
|
15672
|
+
/** Nav button size: comfortable on desktop, compact on mobile. */
|
|
15673
|
+
get navBtnSize() {
|
|
15674
|
+
return this.isMobile ? 'small' : 'large';
|
|
15675
|
+
}
|
|
15607
15676
|
componentWillLoad() {
|
|
15608
15677
|
this.handleDisableNextChange(this.disableNext);
|
|
15678
|
+
this.onResize();
|
|
15679
|
+
}
|
|
15680
|
+
connectedCallback() {
|
|
15681
|
+
if (typeof window !== 'undefined') {
|
|
15682
|
+
window.addEventListener('resize', this.onResize);
|
|
15683
|
+
}
|
|
15684
|
+
}
|
|
15685
|
+
disconnectedCallback() {
|
|
15686
|
+
if (typeof window !== 'undefined') {
|
|
15687
|
+
window.removeEventListener('resize', this.onResize);
|
|
15688
|
+
}
|
|
15609
15689
|
}
|
|
15610
15690
|
componentDidLoad() {
|
|
15611
15691
|
if (this.type === 'linear') {
|
|
@@ -15705,7 +15785,7 @@ class EdsSteps {
|
|
|
15705
15785
|
this.handleTitleClick(index);
|
|
15706
15786
|
}
|
|
15707
15787
|
};
|
|
15708
|
-
return (hAsync("div", { class: `horizontal-step ${isActive ? 'is-active' : ''} ${isCompleted ? 'is-completed' : ''}`, onClick: () => !forwardBlocked && this.handleTitleClick(index), onKeyDown: onKey, role: "button", tabindex: forwardBlocked ? -1 : 0, "aria-label": `Step ${index + 1}: ${step.title}`, "aria-current": isActive ? 'step' : undefined, "aria-disabled": forwardBlocked ? 'true' : 'false' }, hAsync("div", { class: "step-indicator" }, hAsync("span", { class: "step-number" }, index + 1)), hAsync("span", { class: `
|
|
15788
|
+
return (hAsync("div", { class: `horizontal-step ${isActive ? 'is-active' : ''} ${isCompleted ? 'is-completed' : ''}`, onClick: () => !forwardBlocked && this.handleTitleClick(index), onKeyDown: onKey, role: "button", tabindex: forwardBlocked ? -1 : 0, "aria-label": `Step ${index + 1}: ${step.title}`, "aria-current": isActive ? 'step' : undefined, "aria-disabled": forwardBlocked ? 'true' : 'false' }, hAsync("div", { class: "step-indicator" }, hAsync("span", { class: "step-number" }, index + 1)), hAsync("span", { class: `step-label ${forwardBlocked ? 'opacity-50' : ''}` }, step.title)));
|
|
15709
15789
|
}
|
|
15710
15790
|
render() {
|
|
15711
15791
|
const steps = this.parsedSteps;
|
|
@@ -15718,7 +15798,7 @@ class EdsSteps {
|
|
|
15718
15798
|
return null;
|
|
15719
15799
|
}
|
|
15720
15800
|
const marginClass = this.orientation === 'horizontal' ? 'mt-64' : 'mt-32';
|
|
15721
|
-
return (hAsync("div", { class: "step-content", key: index, id: `eds-step-panel-${index}` }, hAsync("slot", { name: `step-${index}` }, hAsync("div", { class: "f-body-02 text-lighter", innerHTML: step.content })), hAsync("div", { class: `flex items-center justify-between ${marginClass}` }, hAsync("eds-button", { label: this.backLabel, intent: "
|
|
15801
|
+
return (hAsync("div", { class: "step-content", key: index, id: `eds-step-panel-${index}` }, hAsync("slot", { name: `step-${index}` }, hAsync("div", { class: "f-body-02 text-lighter", innerHTML: step.content })), hAsync("div", { class: `flex items-center justify-between ${marginClass}` }, hAsync("eds-button", { label: this.backLabel, intent: "primary", icon: "chevron-left", iconPos: "left", onClick: this.handleBack, disabled: index === 0, class: index === 0 ? 'hidden' : 'block', size: this.navBtnSize, iconSmall: this.isMobile }), (!isLast || this.showFinish) && (hAsync("eds-button", { label: isLast ? this.finishLabel : this.nextLabel, intent: isLast ? 'brand' : 'primary', icon: "chevron-right", onClick: this.handleNext, disabled: this.isNextDisabledFor(index), size: this.navBtnSize, iconSmall: this.isMobile, class: index > 0 ? 'ml-8' : null }))), hAsync("slot", { name: `actions-${index}` })));
|
|
15722
15802
|
})));
|
|
15723
15803
|
}
|
|
15724
15804
|
// Vertical Linear
|
|
@@ -15726,7 +15806,7 @@ class EdsSteps {
|
|
|
15726
15806
|
return (hAsync("div", { class: `steps ${themeClass}` }, steps.map((step, index) => {
|
|
15727
15807
|
const isLast = index === steps.length - 1;
|
|
15728
15808
|
const marginClass = this.orientation === 'horizontal' ? 'mt-64' : 'mt-32';
|
|
15729
|
-
return (hAsync("div", { class: "step mb-16", key: index }, this.renderHeading(step.title, index), this.activeStep === index && (hAsync("div", { class: "content grid gap-y-16", id: `eds-step-panel-${index}` }, hAsync("slot", { name: `step-${index}` }, hAsync("div", { class: "my-16 f-body-02 text-lighter", innerHTML: step.content })), hAsync("div", { class: `flex items-center justify-between ${marginClass}` }, hAsync("eds-button", { label: this.backLabel, intent: "
|
|
15809
|
+
return (hAsync("div", { class: "step mb-16", key: index }, this.renderHeading(step.title, index), this.activeStep === index && (hAsync("div", { class: "content grid gap-y-16", id: `eds-step-panel-${index}` }, hAsync("slot", { name: `step-${index}` }, hAsync("div", { class: "my-16 f-body-02 text-lighter", innerHTML: step.content })), hAsync("div", { class: `flex items-center justify-between ${marginClass}` }, hAsync("eds-button", { label: this.backLabel, intent: "primary", icon: "chevron-left", iconPos: "left", onClick: this.handleBack, disabled: index === 0, class: index === 0 ? 'hidden' : 'block', size: this.navBtnSize, iconSmall: this.isMobile }), (!isLast || this.showFinish) && (hAsync("eds-button", { label: isLast ? this.finishLabel : this.nextLabel, intent: isLast ? 'brand' : 'primary', icon: "chevron-right", onClick: this.handleNext, disabled: this.isNextDisabledFor(index), size: this.navBtnSize, iconSmall: this.isMobile, class: index > 0 ? 'ml-8' : null }))), hAsync("slot", { name: `actions-${index}` })))));
|
|
15730
15810
|
})));
|
|
15731
15811
|
}
|
|
15732
15812
|
// Static
|
|
@@ -15753,7 +15833,8 @@ class EdsSteps {
|
|
|
15753
15833
|
"disableNext": [1032, "disable-next"],
|
|
15754
15834
|
"headingLevel": [513, "heading-level"],
|
|
15755
15835
|
"collapsibleTitles": [4, "collapsible-titles"],
|
|
15756
|
-
"activeStep": [32]
|
|
15836
|
+
"activeStep": [32],
|
|
15837
|
+
"isMobile": [32]
|
|
15757
15838
|
},
|
|
15758
15839
|
"$listeners$": undefined,
|
|
15759
15840
|
"$lazyBundleId$": "-",
|
|
@@ -15761,7 +15842,7 @@ class EdsSteps {
|
|
|
15761
15842
|
}; }
|
|
15762
15843
|
}
|
|
15763
15844
|
|
|
15764
|
-
const edsStepsV2Css = "blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}.steps{position:sticky;margin-left:16px;border-left:1px solid var(--soft-color, #ddd);padding-left:23px;counter-reset:step}.steps h3{counter-increment:step;font-size:var(--f-heading-05-fontSize);font-weight:var(--f-heading-05-fontWeight);line-height:var(--f-heading-05-lineHeight);position:relative}.steps h3::before{content:counter(step);position:absolute;left:-41px;display:flex;align-items:center;justify-content:center;width:32px;height:32px;font-size:1rem;border:1px solid #ccc;background:var(--grey-900);color:#fff;border-radius:50%}.steps h4,.steps h5{counter-increment:step;font-size:var(--f-heading-06-fontSize);font-weight:var(--f-heading-06-fontWeight);line-height:var(--f-heading-06-lineHeight);position:relative}.steps h4::before,.steps h5::before{content:counter(step);position:absolute;left:-40px;top
|
|
15845
|
+
const edsStepsV2Css = "blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}.steps{position:sticky;margin-left:16px;border-left:1px solid var(--soft-color, #ddd);padding-left:23px;counter-reset:step}.steps h3{counter-increment:step;font-size:var(--f-heading-05-fontSize);font-weight:var(--f-heading-05-fontWeight);line-height:var(--f-heading-05-lineHeight);position:relative}.steps h3::before{content:counter(step);position:absolute;left:-41px;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:32px;height:32px;font-size:1rem;border:1px solid #ccc;background:var(--grey-900);color:#fff;border-radius:50%}.steps h4,.steps h5{counter-increment:step;font-size:var(--f-heading-06-fontSize);font-weight:var(--f-heading-06-fontWeight);line-height:var(--f-heading-06-lineHeight);position:relative}.steps-body{margin-top:16px}@media (max-width: 749px){.steps h3,.steps h4,.steps h5{font-size:var(--f-ui-01-fontSize);line-height:var(--f-ui-01-lineHeight)}.steps-body{margin-top:32px}}.steps h4::before,.steps h5::before{content:counter(step);position:absolute;left:-40px;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:30px;height:30px;font-size:0.875rem;border:1px solid #ccc;background:#333;color:#fff;border-radius:50%}.steps blockquote{margin-top:16px;margin-bottom:16px;font-style:italic;color:#aaa;padding-left:6px}.steps-img-placeholder{width:100%;height:200px;background:linear-gradient(to bottom, #9CE142, #00C959, #00A595);}.bg-\\[\\#00A595\\]{--tw-bg-opacity:1;background-color:rgb(0 165 149 / var(--tw-bg-opacity))}.relative{position:relative}.f-heading-04{font-family:var(--f-heading-04-fontFamily);font-weight:var(--f-heading-04-fontWeight);font-size:var(--f-heading-04-fontSize);line-height:var(--f-heading-04-lineHeight);letter-spacing:var(--f-heading-04-letterSpacing)}.f-body-02{font-family:var(--f-body-02-fontFamily);font-weight:var(--f-body-02-fontWeight);font-size:var(--f-body-02-fontSize);line-height:var(--f-body-02-lineHeight);letter-spacing:var(--f-body-02-letterSpacing)}.f-ui-02{font-family:var(--f-ui-02-fontFamily);font-weight:var(--f-ui-02-fontWeight);font-size:var(--f-ui-02-fontSize);line-height:var(--f-ui-02-lineHeight);letter-spacing:var(--f-ui-02-letterSpacing)}.f-ui-03{font-family:var(--f-ui-03-fontFamily);font-weight:var(--f-ui-03-fontWeight);font-size:var(--f-ui-03-fontSize);line-height:var(--f-ui-03-lineHeight);letter-spacing:var(--f-ui-03-letterSpacing)}.text-center{text-align:center}.text-default{color:var(--brand-black)}.text-accent{color:var(--brand-green)}.text-inverse{color:var(--white)}.text-light{color:var(--grey-light)}.text-lighter{color:var(--grey-dark)}.w-full{width:100%}.h-52{height:3.25rem}.h-96{height:6rem}.h-\\[200px\\]{height:200px}.justify-between{justify-content:space-between}.mt-16{margin-top:1rem}.mt-32{margin-top:2rem}.mt-64{margin-top:4rem}.mb-16{margin-bottom:1rem}.mb-32{margin-bottom:2rem}.my-16{margin-top:1rem;margin-bottom:1rem}.mb-12{margin-bottom:0.75rem}.last\\:mb-0:last-child{margin-bottom:0rem}.last\\:mt-16:last-child{margin-top:1rem}.border-softer{border:none}.relative{position:relative}.flex{display:flex}.inline-flex{display:inline-flex}.grow{flex-grow:1}.rounded{border-radius:0.25rem}.rounded-lg{border-radius:16px}.rounded-t-lg{border-top-left-radius:16px;border-top-right-radius:16px}.border-2{border-width:0}.p-8{padding:0.5rem}.p-24{padding:1.5rem}.bg-default{background-color:var(--grey-light)}.bg-inverse{background-color:var(--white)}.bg-strongest{background-color:var(--brand-black)}.top-2{top:0.125rem}.bottom-2{bottom:0.125rem}.left-2{left:0.125rem}.right-2{right:0.125rem}.-translate-x-1\\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\\/2{--tw-translate-y:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.overflow-hidden{overflow:hidden}.space-y-8{--tw-space-y-reverse:0;margin-top:calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0.5rem * var(--tw-space-y-reverse))}.space-y-16{--tw-space-y-reverse:0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.ml-8{margin-left:0.5rem}.gap-y-16{row-gap:1rem}.gap-x-16{-moz-column-gap:1rem;column-gap:1rem}.flex{display:flex}.grid{display:grid}.hidden{display:none}.block{display:block}.items-center{align-items:center}.px-8{padding-left:0.5rem;padding-right:0.5rem}.pb-20{padding-bottom:1.25rem}.eds-steps__title[role=\"button\"]{cursor:pointer}.eds-steps__title.is-disabled{cursor:not-allowed;color:rgba(0, 0, 0, 0.5);}.eds-steps__title.is-disabled::before{opacity:1;filter:none}.steps--horizontal{display:flex;flex-direction:column;gap:2rem}.horizontal-indicators{display:flex;align-items:flex-start;gap:0;padding:0;margin-top:1.75rem;margin-bottom:0}.step-content-aligned{padding-left:0;padding-right:0}.horizontal-step{display:flex;flex-direction:column;align-items:flex-start;gap:0.6rem;cursor:pointer;flex:1 1 0;min-width:0;position:relative}.horizontal-step:last-child{flex:0 0 auto}.horizontal-step:not(:last-child)::after{content:'';position:absolute;top:1.375rem;left:calc(2.75rem + 0.4rem);width:calc(100% - 2.75rem - 0.8rem);height:3px;border-radius:2px;background-color:#e0e0e0;transform:translateY(-50%);z-index:1}.horizontal-step>span{text-align:left;align-self:stretch}.horizontal-step.is-completed:not(:last-child)::after{background-color:var(--brand-green);}.step-indicator{width:2.75rem;height:2.75rem;border-radius:50%;border:2px solid #e0e0e0;display:flex;align-items:center;justify-content:center;background-color:white;transition:all 0.3s ease;flex:0 0 auto;z-index:2}.horizontal-step.is-active .step-indicator{border-color:var(--brand-green-dark);background-color:var(--brand-green-dark);color:var(--white)}.horizontal-step.is-completed .step-indicator{border-color:var(--brand-green-dark);background-color:var(--white)}.horizontal-step.is-disabled{opacity:0.5;cursor:not-allowed}.step-number{font-family:var(--font-family-mono, 'IBM Plex Mono', monospace);font-weight:500;font-size:0.95rem}.step-label{font-family:var(--font-family-mono, 'IBM Plex Mono', monospace);font-size:9.5px;letter-spacing:0.07em;text-transform:uppercase;font-weight:500;color:var(--dark-grey, #7a7b7a)}.horizontal-step.is-active .step-label{color:var(--brand-green-dark)}.step-content{padding:0.5rem 0;margin-left:0;margin-right:0}@media (min-width: 700px){.step-content{padding:1.5rem 0}}.opacity-50{opacity:0.5}.bg-dark{background-color:var(--grey-light)}.bg-darker{background-color:var(--grey-dark)}.theme-brand.steps h3::before,.theme-brand.steps h4::before,.theme-brand.steps h5::before{background:var(--brand-green);color:var(--brand-black);border-color:var(--brand-green);font-weight:600}.theme-brand.steps h3.is-completed::before,.theme-brand.steps h4.is-completed::before,.theme-brand.steps h5.is-completed::before{content:'';}.theme-brand.steps .step-checkmark-icon{position:absolute;left:-39px;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:30px;height:30px;z-index:1}.theme-brand.steps h3 .step-checkmark-icon{left:-41px;width:32px;height:32px;top:50%}.theme-brand .step-indicator{background-color:var(--grey-light);border-color:transparent;color:var(--dark-grey, #7a7b7a)}.theme-brand .horizontal-step.is-active .step-indicator{border-color:var(--brand-green);background-color:var(--brand-green);color:var(--brand-black);box-shadow:0 0 0 4px rgba(0, 255, 157, 0.2)}.theme-brand .horizontal-step.is-completed .step-indicator{border-color:var(--brand-green);background-color:var(--brand-green);color:var(--brand-black)}.theme-brand .horizontal-step.is-completed .step-number{display:none}.theme-brand .horizontal-step:not(:last-child)::after{background-color:var(--grey-light);}.theme-brand .horizontal-step.is-completed:not(:last-child)::after{background-color:var(--brand-green)}.theme-brand .horizontal-step.is-active .step-label,.theme-brand .horizontal-step.is-completed .step-label{color:var(--brand-black)}.theme-brand .step-number{font-weight:600}.theme-default.steps h3::before,.theme-default.steps h4::before,.theme-default.steps h5::before{background:var(--grey-900);color:#fff;border-color:#ccc}.theme-default .step-indicator{background-color:white;border-color:#e0e0e0}.theme-default .horizontal-step.is-active .step-indicator{border-color:var(--brand-green-dark);background-color:var(--brand-green-dark);color:var(--white)}.theme-default .horizontal-step.is-completed .step-indicator{border-color:var(--brand-green-dark);background-color:var(--white)}.theme-default .horizontal-step.is-completed:not(:last-child)::after{background-color:var(--brand-green-dark)}.theme-default .horizontal-step.is-active .step-label{color:var(--brand-green-dark)}.effect-focus-within{outline-width:3px;outline-offset:2px;outline-color:var(--brand-green)}.effect-focus-within:focus-within{outline-style:solid}";
|
|
15765
15846
|
var EdsStepsV2Style0 = edsStepsV2Css;
|
|
15766
15847
|
|
|
15767
15848
|
class EdsStepsV2 {
|
|
@@ -15771,6 +15852,9 @@ class EdsStepsV2 {
|
|
|
15771
15852
|
this.finished = createEvent(this, "finished", 7);
|
|
15772
15853
|
this.next = createEvent(this, "next", 7);
|
|
15773
15854
|
this.back = createEvent(this, "back", 7);
|
|
15855
|
+
this.onResize = () => {
|
|
15856
|
+
this.isMobile = typeof window !== 'undefined' && window.innerWidth < 750;
|
|
15857
|
+
};
|
|
15774
15858
|
this.handleTitleClick = (index) => {
|
|
15775
15859
|
// In linear mode, do NOT collapse; only navigate if allowed.
|
|
15776
15860
|
if (this.type === 'linear') {
|
|
@@ -15798,11 +15882,12 @@ class EdsStepsV2 {
|
|
|
15798
15882
|
};
|
|
15799
15883
|
this.handleNext = () => {
|
|
15800
15884
|
const lastIndex = this.parsedSteps.length - 1;
|
|
15801
|
-
// On last step:
|
|
15885
|
+
// On last step: stay on the last step and just emit finished. Collapsing
|
|
15886
|
+
// here (activeStep = -1) left the form as an empty "Step 0" shell whenever
|
|
15887
|
+
// the host's submit was rejected (e.g. single-submission already used) —
|
|
15888
|
+
// the success path navigates away, so there's nothing to collapse for.
|
|
15802
15889
|
if (this.activeStep >= lastIndex) {
|
|
15803
15890
|
this.finished.emit();
|
|
15804
|
-
this.activeStep = -1; // collapse the content
|
|
15805
|
-
this.step.emit(this.activeStep); // notify change (-1 sentinel)
|
|
15806
15891
|
return;
|
|
15807
15892
|
}
|
|
15808
15893
|
const target = this.activeStep + 1;
|
|
@@ -15846,9 +15931,15 @@ class EdsStepsV2 {
|
|
|
15846
15931
|
this.backLabel = 'Back';
|
|
15847
15932
|
this.finishLabel = 'Finish';
|
|
15848
15933
|
this.showFinish = true;
|
|
15934
|
+
this.card = true;
|
|
15849
15935
|
this.disableNext = false;
|
|
15850
15936
|
this.headingLevel = 'h4';
|
|
15851
15937
|
this.activeStep = 0;
|
|
15938
|
+
this.isMobile = false;
|
|
15939
|
+
}
|
|
15940
|
+
/** Nav button size: comfortable on desktop, compact on mobile. */
|
|
15941
|
+
get navBtnSize() {
|
|
15942
|
+
return this.isMobile ? 'small' : 'large';
|
|
15852
15943
|
}
|
|
15853
15944
|
handleDisableNextChange(newValue) {
|
|
15854
15945
|
if (typeof newValue === 'string' && newValue.trim().startsWith('[')) {
|
|
@@ -15883,6 +15974,17 @@ class EdsStepsV2 {
|
|
|
15883
15974
|
}
|
|
15884
15975
|
componentWillLoad() {
|
|
15885
15976
|
this.handleDisableNextChange(this.disableNext);
|
|
15977
|
+
this.onResize();
|
|
15978
|
+
}
|
|
15979
|
+
connectedCallback() {
|
|
15980
|
+
if (typeof window !== 'undefined') {
|
|
15981
|
+
window.addEventListener('resize', this.onResize);
|
|
15982
|
+
}
|
|
15983
|
+
}
|
|
15984
|
+
disconnectedCallback() {
|
|
15985
|
+
if (typeof window !== 'undefined') {
|
|
15986
|
+
window.removeEventListener('resize', this.onResize);
|
|
15987
|
+
}
|
|
15886
15988
|
}
|
|
15887
15989
|
componentDidLoad() {
|
|
15888
15990
|
if (this.type === 'linear') {
|
|
@@ -15903,7 +16005,9 @@ class EdsStepsV2 {
|
|
|
15903
16005
|
linkElement.dispatchEvent(event);
|
|
15904
16006
|
}
|
|
15905
16007
|
articleClasses() {
|
|
15906
|
-
|
|
16008
|
+
// The card chrome is opt-out so a host that already provides the frame
|
|
16009
|
+
// (e.g. a multi-step form's outer form-style wrapper) isn't double-bordered.
|
|
16010
|
+
return this.card ? 'border-softer relative rounded-lg border-2' : 'relative';
|
|
15907
16011
|
}
|
|
15908
16012
|
get parsedSteps() {
|
|
15909
16013
|
return parseData(this.steps);
|
|
@@ -15967,21 +16071,26 @@ class EdsStepsV2 {
|
|
|
15967
16071
|
this.handleTitleClick(index);
|
|
15968
16072
|
}
|
|
15969
16073
|
};
|
|
15970
|
-
return (hAsync("div", { class: `horizontal-step ${isActive ? 'is-active' : ''} ${isCompleted ? 'is-completed' : ''}`, onClick: () => !forwardBlocked && this.handleTitleClick(index), onKeyDown: onKey, role: "button", tabindex: forwardBlocked ? -1 : 0, "aria-label": `Step ${index + 1}: ${step.title}`, "aria-current": isActive ? 'step' : undefined, "aria-disabled": forwardBlocked ? 'true' : 'false' }, hAsync("div", { class: "step-indicator" }, isCompleted ? (hAsync("eds-icon-wrapper", { name: "checkmark", size: 20 })) : (hAsync("span", { class: "step-number" }, index + 1))), hAsync("span", { class: `
|
|
16074
|
+
return (hAsync("div", { class: `horizontal-step ${isActive ? 'is-active' : ''} ${isCompleted ? 'is-completed' : ''}`, onClick: () => !forwardBlocked && this.handleTitleClick(index), onKeyDown: onKey, role: "button", tabindex: forwardBlocked ? -1 : 0, "aria-label": `Step ${index + 1}: ${step.title}`, "aria-current": isActive ? 'step' : undefined, "aria-disabled": forwardBlocked ? 'true' : 'false' }, hAsync("div", { class: "step-indicator" }, isCompleted ? (hAsync("eds-icon-wrapper", { name: "checkmark", size: 20 })) : (hAsync("span", { class: "step-number" }, index + 1))), hAsync("span", { class: `step-label ${forwardBlocked ? 'opacity-50' : ''}` }, step.title)));
|
|
15971
16075
|
}
|
|
15972
16076
|
render() {
|
|
15973
16077
|
const steps = this.parsedSteps;
|
|
15974
|
-
|
|
16078
|
+
// Top margin separates the buttons from the fields; bottom margin gives them
|
|
16079
|
+
// breathing room from whatever follows (e.g. the next vertical step).
|
|
16080
|
+
const marginClass = this.orientation === 'horizontal' ? 'mt-64 mb-16' : 'mt-32 mb-32';
|
|
15975
16081
|
const themeClass = this.theme === 'brand' ? 'theme-brand' : 'theme-default';
|
|
15976
|
-
return (hAsync("div", { key: '
|
|
16082
|
+
return (hAsync("div", { key: '84383c5655004ccc0bcc144f3765c2d0b000cad6', class: this.articleClasses() }, this.imageSrc ? (hAsync("div", { class: "w-full mb-12 rounded-t-lg overflow-hidden border-2" }, hAsync("eds-img", { src: this.imageSrc, width: this.imageWidth, "with-bg": "true", "lazy-load": "true", alt: "Step illustration" }))) : (this.message && (hAsync("div", { class: `w-full ${this.theme === 'brand' ? 'bg-strongest' : 'bg-darker'} rounded-t-lg border-2` }, hAsync("div", { class: "p-24" }, hAsync("span", { class: `${this.theme === 'brand' ? 'text-accent' : 'text-inverse'} f-heading-04` }, this.message))))), hAsync("div", { key: 'd5fb5bbf6a48b90bf0db1e79a61ba5e445986368', class: "steps-body pb-20", style: {
|
|
16083
|
+
paddingLeft: 'var(--eds-steps-padding-x, 0.5rem)',
|
|
16084
|
+
paddingRight: 'var(--eds-steps-padding-x, 0.5rem)'
|
|
16085
|
+
} }, this.type === 'linear' && this.orientation === 'horizontal' ? (hAsync("div", { class: `steps--horizontal ${themeClass}`, style: { '--step-count': steps.length.toString() } }, hAsync("div", { class: "horizontal-indicators" }, steps.map((step, index) => this.renderHorizontalIndicator(step, index))), steps.map((step, index) => {
|
|
15977
16086
|
const isLast = index === steps.length - 1;
|
|
15978
16087
|
if (this.activeStep !== index) {
|
|
15979
16088
|
return null;
|
|
15980
16089
|
}
|
|
15981
|
-
return (hAsync("div", { class: "step-content", key: index, id: `eds-step-panel-${index}` }, hAsync("slot", { name: `step-${index}` }, hAsync("div", { class: "f-body-02 text-lighter", innerHTML: step.content })), hAsync("div", { class: `flex items-center justify-between ${marginClass}` }, hAsync("eds-button", { label: this.backLabel, intent: "primary", icon: "arrow-left", iconPos: "left", onClick: this.handleBack, disabled: index === 0, class: index === 0 ? 'hidden' : 'block', size:
|
|
16090
|
+
return (hAsync("div", { class: "step-content", key: index, id: `eds-step-panel-${index}` }, hAsync("slot", { name: `step-${index}` }, hAsync("div", { class: "f-body-02 text-lighter", innerHTML: step.content })), hAsync("div", { class: `flex items-center justify-between ${marginClass}` }, hAsync("eds-button", { label: this.backLabel, intent: "primary", icon: "arrow-left", iconPos: "left", onClick: this.handleBack, disabled: index === 0, class: index === 0 ? 'hidden' : 'block', size: this.navBtnSize, iconSmall: this.isMobile, pill: true }), (!isLast || this.showFinish) && (hAsync("eds-button", { label: isLast ? this.finishLabel : this.nextLabel, intent: isLast ? 'brand' : 'primary', icon: "arrow-right", onClick: this.handleNext, disabled: this.isNextDisabledFor(index), size: this.navBtnSize, iconSmall: this.isMobile, class: index > 0 ? 'ml-8' : null, pill: true }))), hAsync("slot", { name: `actions-${index}` })));
|
|
15982
16091
|
}))) : this.type === 'linear' ? (hAsync("div", { class: `steps ${themeClass}` }, steps.map((step, index) => {
|
|
15983
16092
|
const isCompleted = this.activeStep > index;
|
|
15984
|
-
return (hAsync("div", { class: `${index === 0 ? 'step' : 'step mt-16'} ${isCompleted ? 'is-completed' : ''}`, key: index }, this.renderHeading(step.title, index), this.activeStep === index && (hAsync("div", { class: "content grid gap-y-16", id: `eds-step-panel-${index}` }, hAsync("slot", { name: `step-${index}` }, hAsync("div", { class: "my-16 f-body-02 text-lighter", innerHTML: step.content })), hAsync("div", { class: `flex items-center justify-between ${marginClass}` }, hAsync("eds-button", { label: this.backLabel, intent: "
|
|
16093
|
+
return (hAsync("div", { class: `${index === 0 ? 'step' : 'step mt-16'} ${isCompleted ? 'is-completed' : ''}`, key: index }, this.renderHeading(step.title, index), this.activeStep === index && (hAsync("div", { class: "content grid gap-y-16", id: `eds-step-panel-${index}` }, hAsync("slot", { name: `step-${index}` }, hAsync("div", { class: "my-16 f-body-02 text-lighter", innerHTML: step.content })), hAsync("div", { class: `flex items-center justify-between ${marginClass}` }, hAsync("eds-button", { label: this.backLabel, intent: "primary", icon: "chevron-left", iconPos: "left", onClick: this.handleBack, disabled: index === 0, class: index === 0 ? 'hidden' : 'block', size: this.navBtnSize, iconSmall: this.isMobile, pill: true }), (index < steps.length - 1 || this.showFinish) && (hAsync("eds-button", { label: index === steps.length - 1 ? this.finishLabel : this.nextLabel, intent: index === steps.length - 1 ? 'brand' : 'primary', icon: "chevron-right", onClick: this.handleNext, disabled: this.isNextDisabledFor(index), size: this.navBtnSize, iconSmall: this.isMobile, class: index > 0 ? 'ml-8' : null, pill: true })))))));
|
|
15985
16094
|
}))) : (hAsync("div", { class: `steps space-y-8 ${themeClass}` }, steps.map((step, index) => (hAsync("div", { class: "step", key: index }, this.renderHeading(step.title, index), hAsync("div", { class: "content", id: `eds-step-panel-${index}` }, hAsync("div", { class: "content-body" }, hAsync("slot", { name: `step-${index}` }, hAsync("div", { class: "my-16 f-body-02 text-lighter", innerHTML: step.content }))))))))))));
|
|
15986
16095
|
}
|
|
15987
16096
|
get el() { return getElement(this); }
|
|
@@ -16005,9 +16114,11 @@ class EdsStepsV2 {
|
|
|
16005
16114
|
"backLabel": [1, "back-label"],
|
|
16006
16115
|
"finishLabel": [1, "finish-label"],
|
|
16007
16116
|
"showFinish": [4, "show-finish"],
|
|
16117
|
+
"card": [4],
|
|
16008
16118
|
"disableNext": [1032, "disable-next"],
|
|
16009
16119
|
"headingLevel": [513, "heading-level"],
|
|
16010
|
-
"activeStep": [32]
|
|
16120
|
+
"activeStep": [32],
|
|
16121
|
+
"isMobile": [32]
|
|
16011
16122
|
},
|
|
16012
16123
|
"$listeners$": undefined,
|
|
16013
16124
|
"$lazyBundleId$": "-",
|
|
@@ -16015,7 +16126,7 @@ class EdsStepsV2 {
|
|
|
16015
16126
|
}; }
|
|
16016
16127
|
}
|
|
16017
16128
|
|
|
16018
|
-
const edsSwitchCss = ":host{display:inline-block}.switch-container{display:inline-flex;align-items:center}.switch-label{font-family:var(--f-ui-02-light-fontFamily);font-weight:var(--f-ui-02-light-fontWeight);font-size:var(--f-ui-02-light-fontSize);line-height:var(--f-ui-02-light-lineHeight);letter-spacing:var(--f-ui-02-light-letterSpacing)}button.switch{position:relative;display:inline-flex;align-items:center;width:50px;height:26px;border:none;border-radius:13px;background-color:var(--grey-dark);padding:0;cursor:pointer;transition:background-color 0.2s}button.switch.switch--checked{background-color:var(--brand-green)}button.switch.switch--disabled{opacity:0.6;cursor:not-allowed}.switch-handle{position:absolute;width:22px;height:22px;border-radius:50%;background-color:#fff;top:2px;left:2px;transition:transform 0.2s}button.switch.switch--checked .switch-handle{transform:translateX(24px)}.ml-8{margin-left:0.5rem}.mr-8{margin-right:0.5rem}.switch:focus{outline:2px solid #005fcc;outline-offset:2px}.switch:focus:not(:focus-visible){outline:none}.switch:focus-visible{outline-width:3px;outline-offset:2px;outline-color:var(--brand-green)}.segmented-container{display:inline-flex;gap:0.5rem;background:var(--grey-light);padding:0.5rem;border-radius:2rem}.segmented-btn{padding:0.5rem 1.5rem;background:transparent;border:none;border-radius:1.5rem;font-family:var(--
|
|
16129
|
+
const edsSwitchCss = ":host{display:inline-block}.switch-container{display:inline-flex;align-items:center}.switch-label{font-family:var(--f-ui-02-light-fontFamily);font-weight:var(--f-ui-02-light-fontWeight);font-size:var(--f-ui-02-light-fontSize);line-height:var(--f-ui-02-light-lineHeight);letter-spacing:var(--f-ui-02-light-letterSpacing)}button.switch{position:relative;display:inline-flex;align-items:center;width:50px;height:26px;border:none;border-radius:13px;background-color:var(--grey-dark);padding:0;cursor:pointer;transition:background-color 0.2s}button.switch.switch--checked{background-color:var(--brand-green)}button.switch.switch--disabled{opacity:0.6;cursor:not-allowed}.switch-handle{position:absolute;width:22px;height:22px;border-radius:50%;background-color:#fff;top:2px;left:2px;transition:transform 0.2s}button.switch.switch--checked .switch-handle{transform:translateX(24px)}.ml-8{margin-left:0.5rem}.mr-8{margin-right:0.5rem}.switch:focus{outline:2px solid #005fcc;outline-offset:2px}.switch:focus:not(:focus-visible){outline:none}.switch:focus-visible{outline-width:3px;outline-offset:2px;outline-color:var(--brand-green)}.segmented-container{display:inline-flex;gap:0.5rem;background:var(--grey-light);padding:0.5rem;border-radius:2rem}.segmented-btn{padding:0.5rem 1.5rem;background:transparent;border:none;border-radius:1.5rem;font-family:var(--plex-sans, 'IBM Plex Sans', system-ui, sans-serif);font-size:14px;font-weight:500;cursor:pointer;transition:all 0.3s;color:var(--body-l, #5a5f5c);white-space:nowrap}.segmented-btn--active{background:var(--brand-green);color:var(--brand-black)}.segmented-btn:hover:not(.segmented-btn--active):not(.segmented-btn--disabled){color:var(--brand-black)}.segmented-container--dark{background:#fff;border:1px solid var(--grey-300, #e2e2e2);padding:4px;gap:3px}.segmented-container--dark .segmented-btn{padding:9px 30px;border-radius:999px;transition:0.14s}.segmented-container--dark .segmented-btn--active{background:var(--brand-black, #07140d);color:#fff}.segmented-btn--disabled{opacity:0.6;cursor:not-allowed}.segmented-btn:focus{outline:2px solid #005fcc;outline-offset:2px}.segmented-btn:focus:not(:focus-visible){outline:none}.segmented-btn:focus-visible{outline-width:3px;outline-offset:2px;outline-color:var(--brand-green)}.f-ui-03{font-family:var(--f-ui-03-fontFamily);font-weight:var(--f-ui-03-fontWeight);font-size:var(--f-ui-03-fontSize);letter-spacing:var(--f-ui-03-letterSpacing)}";
|
|
16019
16130
|
var EdsSwitchStyle0 = edsSwitchCss;
|
|
16020
16131
|
|
|
16021
16132
|
class EdsSwitch {
|
|
@@ -16051,7 +16162,7 @@ class EdsSwitch {
|
|
|
16051
16162
|
this.variant = 'toggle';
|
|
16052
16163
|
}
|
|
16053
16164
|
render() {
|
|
16054
|
-
if (this.variant === 'segmented') {
|
|
16165
|
+
if (this.variant === 'segmented' || this.variant === 'segmented-dark') {
|
|
16055
16166
|
return this.renderSegmented();
|
|
16056
16167
|
}
|
|
16057
16168
|
return this.renderToggle();
|
|
@@ -16079,7 +16190,10 @@ class EdsSwitch {
|
|
|
16079
16190
|
}, onClick: this.toggleSwitch, onKeyDown: this.handleKeyDown, disabled: this.disabled }, hAsync("span", { class: "switch-handle" })), this.labelOn && (hAsync("span", { id: `${switchId}-on`, class: "switch-label switch-label--on ml-8" }, this.labelOn))));
|
|
16080
16191
|
}
|
|
16081
16192
|
renderSegmented() {
|
|
16082
|
-
return (hAsync("div", { class:
|
|
16193
|
+
return (hAsync("div", { class: {
|
|
16194
|
+
'segmented-container': true,
|
|
16195
|
+
'segmented-container--dark': this.variant === 'segmented-dark'
|
|
16196
|
+
}, role: "group", "aria-label": "View toggle" }, hAsync("button", { type: "button", tabindex: this.disabled ? '-1' : '0', class: {
|
|
16083
16197
|
'segmented-btn': true,
|
|
16084
16198
|
'segmented-btn--active': !this.checked,
|
|
16085
16199
|
'segmented-btn--disabled': this.disabled
|
|
@@ -16087,7 +16201,7 @@ class EdsSwitch {
|
|
|
16087
16201
|
if (!this.disabled && this.checked) {
|
|
16088
16202
|
this.toggleSwitch();
|
|
16089
16203
|
}
|
|
16090
|
-
}, onKeyDown: this.handleKeyDown, disabled: this.disabled, "aria-pressed": !this.checked ? 'true' : 'false' }, hAsync("span",
|
|
16204
|
+
}, onKeyDown: this.handleKeyDown, disabled: this.disabled, "aria-pressed": !this.checked ? 'true' : 'false' }, hAsync("span", null, this.labelOff)), hAsync("button", { type: "button", tabindex: this.disabled ? '-1' : '0', class: {
|
|
16091
16205
|
'segmented-btn': true,
|
|
16092
16206
|
'segmented-btn--active': this.checked,
|
|
16093
16207
|
'segmented-btn--disabled': this.disabled
|
|
@@ -16095,7 +16209,7 @@ class EdsSwitch {
|
|
|
16095
16209
|
if (!this.disabled && !this.checked) {
|
|
16096
16210
|
this.toggleSwitch();
|
|
16097
16211
|
}
|
|
16098
|
-
}, onKeyDown: this.handleKeyDown, disabled: this.disabled, "aria-pressed": this.checked ? 'true' : 'false' }, hAsync("span",
|
|
16212
|
+
}, onKeyDown: this.handleKeyDown, disabled: this.disabled, "aria-pressed": this.checked ? 'true' : 'false' }, hAsync("span", null, this.labelOn))));
|
|
16099
16213
|
}
|
|
16100
16214
|
get el() { return getElement(this); }
|
|
16101
16215
|
static get style() { return EdsSwitchStyle0; }
|
|
@@ -16441,9 +16555,7 @@ class EdsTable {
|
|
|
16441
16555
|
const paginatedRows = this.getPaginatedRows();
|
|
16442
16556
|
const lastPage = Math.ceil(this.totalRows / this.rowsPerPage);
|
|
16443
16557
|
const showControls = this.showViewToggle || this.searchEnabled;
|
|
16444
|
-
return (hAsync("div", { key: '
|
|
16445
|
-
? this.renderCardView(paginatedRows)
|
|
16446
|
-
: this.renderTableView(paginatedRows), this.shouldEnablePagination() && (hAsync("div", { key: '3f7faafdd6147855cb8812ff6303c335c7fd1f35', class: "mt-20" }, hAsync("eds-pagination", { key: '17705ba01a8ca8cc79bacfce34e55f11ce53d70c', currentPage: this.currentPage, lastPage: lastPage, perPage: this.rowsPerPage, total: this.totalRows, mode: "default" })))));
|
|
16558
|
+
return (hAsync("div", { key: '8a025e9e12285aa3444b2f83e0b68af55cbe32e6' }, showControls && (hAsync("div", { key: 'f97864d8b61db7ec4fa623ecadc3c225464a6c84', class: "controls-container flex-col flex-md-row items-start items-md-center justify-between gap-16 mb-16" }, this.showViewToggle && (hAsync("div", { key: 'ddf8b1c0fb59fe81efa22a4dc02b414d41ae7208', class: "view-toggle-wrapper" }, hAsync("eds-switch", { key: 'c3631986b456a88559face6a2ce7ce8acd5d01c2', variant: "segmented", labelOff: "Table View", labelOn: "Card View", checked: this.view === 'card', onUiswitch: this.handleViewChange }))), this.searchEnabled && (hAsync("div", { key: 'a02d7f163dd2bb34bb26ae60bd5b018ed07291d9', class: `search-wrapper w-full ${this.showViewToggle ? 'w-md-400' : ''}` }, hAsync("eds-input-field", { key: 1, icon: "search", name: "search", "aria-label": "Search", type: "text", placeholder: "Search...", onInput: (event) => this.handleSearch(event) }))))), this.view === 'card' ? this.renderCardView(paginatedRows) : this.renderTableView(paginatedRows), this.shouldEnablePagination() && (hAsync("div", { key: 'ecf412674a951b4d19e87385270cb49e64e590f6', class: "mt-20" }, hAsync("eds-pagination", { key: 'fe1365ecb4d249548ba0c936a48b6141ff14ad0e', currentPage: this.currentPage, lastPage: lastPage, perPage: this.rowsPerPage, total: this.totalRows, mode: "default" })))));
|
|
16447
16559
|
}
|
|
16448
16560
|
get hostEl() { return getElement(this); }
|
|
16449
16561
|
static get watchers() { return {
|
|
@@ -16629,19 +16741,12 @@ class EdsTabs {
|
|
|
16629
16741
|
}
|
|
16630
16742
|
}
|
|
16631
16743
|
render() {
|
|
16632
|
-
const containerClasses = [
|
|
16633
|
-
|
|
16634
|
-
`tabs-container-${this.variant}`
|
|
16635
|
-
].join(' ');
|
|
16636
|
-
return (hAsync("div", { key: '646f43031cde2e0ab84d2830fd9477841b3c757b', id: `${this.identifier}` }, hAsync("div", { key: '2eb01c96640c6fc602777f227525066e5970489e', class: containerClasses }, hAsync("nav", { key: 'b419fc7414574ea70b19433a3c5daa63b5ad6652', role: "tablist", class: "tabs-nav", "aria-label": this.navAriaLabel }, this.parsedTabs.map((tab, index) => {
|
|
16744
|
+
const containerClasses = ['tabs-container', `tabs-container-${this.variant}`].join(' ');
|
|
16745
|
+
return (hAsync("div", { key: '39b1e8fc98303be43fbbd0e67807786fe0ad8fef', id: `${this.identifier}` }, hAsync("div", { key: '3cef6bd5804c110e51560c7b58de5cb77eadbbb6', class: containerClasses }, hAsync("nav", { key: 'b59ed6ad2fe067b2c39b1db43cd4242eec1b01bf', role: "tablist", class: "tabs-nav", "aria-label": this.navAriaLabel }, this.parsedTabs.map((tab, index) => {
|
|
16637
16746
|
const isActive = index === this.activeIndex;
|
|
16638
|
-
const tabClasses = [
|
|
16639
|
-
'tab',
|
|
16640
|
-
`tab-${this.variant}`,
|
|
16641
|
-
isActive ? 'tab-active' : ''
|
|
16642
|
-
].filter(Boolean).join(' ');
|
|
16747
|
+
const tabClasses = ['tab', `tab-${this.variant}`, isActive ? 'tab-active' : ''].filter(Boolean).join(' ');
|
|
16643
16748
|
return (hAsync("button", { class: tabClasses, type: "button", role: "tab", "aria-selected": isActive ? 'true' : 'false', tabIndex: isActive ? 0 : -1, "aria-label": tab.ariaLabel || tab.label, "aria-controls": `panel-${index}`, id: `tab-${index}`, ref: (el) => this.setTabRef(el, index), onClick: () => this.handleTabClick(index, tab.label, true), onKeyDown: (e) => this.onKeyDown(e, index) }, tab.label || tab.ariaLabel));
|
|
16644
|
-
}))), hAsync("div", { key: '
|
|
16749
|
+
}))), hAsync("div", { key: '224717af5f59fbea2683dd33144760be8c553bb8', class: "tab-panels" }, this.parsedTabs.map((_, index) => (hAsync("div", { role: "tabpanel", id: `panel-${index}`, "aria-labelledby": `tab-${index}`, hidden: index !== this.activeIndex, tabIndex: index === this.activeIndex ? 0 : -1 }, hAsync("slot", { name: `panel-${index}` })))))));
|
|
16645
16750
|
}
|
|
16646
16751
|
get el() { return getElement(this); }
|
|
16647
16752
|
static get watchers() { return {
|
|
@@ -16704,7 +16809,7 @@ class EdsTag {
|
|
|
16704
16809
|
}
|
|
16705
16810
|
render() {
|
|
16706
16811
|
const classes = tagStyles({ intent: this.intent, size: this.size });
|
|
16707
|
-
return (hAsync("span", { key: '
|
|
16812
|
+
return (hAsync("span", { key: 'f9399ed92717576781bff9fb5f117743d50720af', class: classes }, hAsync("span", { key: '9500083dfbddd73539de9e1c5b738bf7a3415624', style: { position: 'relative', zIndex: '1' } }, this.label)));
|
|
16708
16813
|
}
|
|
16709
16814
|
static get style() { return EdsTagStyle0; }
|
|
16710
16815
|
static get cmpMeta() { return {
|
|
@@ -16766,7 +16871,7 @@ class EdsTimeline {
|
|
|
16766
16871
|
}
|
|
16767
16872
|
}
|
|
16768
16873
|
render() {
|
|
16769
|
-
return (hAsync("div", { key: '
|
|
16874
|
+
return (hAsync("div", { key: '3816dfeeec536ae803b069e5f5e5112f476dffed', class: "max-w-sidebar mx-auto px-4 py-8" }, hAsync("div", { key: '360b8c6752eab781870de60aa1f89889eff644d3', class: "relative" }, hAsync("div", { key: 'eda9ed9904dfe7c8c0fff2295666666cfbd3763a', class: "absolute w-4 left-1/2 transform -translate-x-1/2 bg-strong h-full z-0" }), hAsync("div", { key: '5f7b736ed512cf4752c66c8a0c9010822d8b4f44', class: "space-y-16" }, this.parsedEvents.map((event, index) => (hAsync("div", { class: "relative flex" }, hAsync("div", { class: `w-1/2 ${index % 2 === 0 ? 'pr-4' : ''}` }, index % 2 === 0 && (hAsync("eds-card-generic", { title: event.title, url: "#", description: event.description, intent: "secondary", tags: JSON.stringify(event.completed
|
|
16770
16875
|
? [{ label: 'completed', style: 'accent' }]
|
|
16771
16876
|
: [{ label: 'pending', style: 'default' }]), onClick: () => this.handleEventClick(event) }))), hAsync("div", { class: "flex items-center justify-center relative" }, event.completed ? (hAsync("div", { class: "w-32 h-32 bg-accent rounded-full shadow flex items-center justify-center" })) : (hAsync("div", { class: "w-32 h-32 bg-strong rounded-full shadow flex items-center justify-center" }))), hAsync("div", { class: `w-1/2 ${index % 2 !== 0 ? 'pl-4' : ''}` }, index % 2 !== 0 && (hAsync("eds-card-generic", { title: event.title, url: "#", description: event.description, intent: "secondary", tags: JSON.stringify(event.completed
|
|
16772
16877
|
? [{ label: 'completed', style: 'accent' }]
|
|
@@ -16791,7 +16896,7 @@ class EdsTimeline {
|
|
|
16791
16896
|
}; }
|
|
16792
16897
|
}
|
|
16793
16898
|
|
|
16794
|
-
const edsToastCss = ".relative{position:relative}.right-4{right:0.25rem}.bottom-4{bottom:0.25rem}.w-auto{width:auto}.flex{display:flex}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-4{gap:0.25rem}.f-ui-02{font-family:var(--f-ui-02-fontFamily);font-weight:var(--f-ui-02-fontWeight);font-size:var(--f-ui-02-fontSize);line-height:var(--f-ui-02-lineHeight);letter-spacing:var(--f-ui-02-letterSpacing)}.ml-8{margin-left:0.5rem}.p-12{padding:0.75rem}.rounded-sm{border-radius:8px}.rounded-xs{border-radius:4px}.rounded-lg{border-radius:16px}.shadow-md{--tw-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),\n 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),\n var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.bg-dark{background-color:var(--grey-light)}.bg-success{background-color:var(--brand-green)}.bg-error{background-color:var(--red-200)}.bg-warning{background-color:var(--yellow-200)}.text-light{color:var(--grey-dark)}.text-current{color:currentColor}.text-default{color:var(--brand-black)}.text-accent{color:var(--brand-green)}.bg-inverse{background-color:var(--white)}.bg-strongest{background-color:var(--brand-black)}.border-l-\\[3px\\]{border-left-width:3px}.border-accent{border-color:var(--brand-green)}.py-16{padding-top:1rem;padding-bottom:1rem}.px-20{padding-left:1.25rem;padding-right:1.25rem}.rounded-r-4{border-top-right-radius:4px;border-bottom-right-radius:4px}.f-ui-02{font-family:var(--f-ui-02-fontFamily);font-weight:var(--f-ui-02-fontWeight);font-size:var(--f-ui-02-fontSize);line-height:var(--f-ui-02-lineHeight);letter-spacing:var(--f-ui-02-letterSpacing)}.opacity-50{opacity:0.5}.hover\\:opacity-100:hover{opacity:1}";
|
|
16899
|
+
const edsToastCss = ":host{display:block}.relative{position:relative}.right-4{right:0.25rem}.bottom-4{bottom:0.25rem}.w-auto{width:auto}.flex{display:flex}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-4{gap:0.25rem}.f-ui-02{font-family:var(--f-ui-02-fontFamily);font-weight:var(--f-ui-02-fontWeight);font-size:var(--f-ui-02-fontSize);line-height:var(--f-ui-02-lineHeight);letter-spacing:var(--f-ui-02-letterSpacing)}.ml-8{margin-left:0.5rem}.p-12{padding:0.75rem}.rounded-sm{border-radius:8px}.rounded-xs{border-radius:4px}.rounded-lg{border-radius:16px}.shadow-md{--tw-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),\n 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),\n var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.bg-dark{background-color:var(--grey-light)}.bg-success{background-color:var(--brand-green)}.bg-error{background-color:var(--red-200)}.bg-warning{background-color:var(--yellow-200)}.text-light{color:var(--grey-dark)}.text-current{color:currentColor}.text-default{color:var(--brand-black)}.text-accent{color:var(--brand-green)}.bg-inverse{background-color:var(--white)}.bg-strongest{background-color:var(--brand-black)}.border-l-\\[3px\\]{border-left-width:3px}.border-accent{border-color:var(--brand-green)}.py-16{padding-top:1rem;padding-bottom:1rem}.px-20{padding-left:1.25rem;padding-right:1.25rem}.rounded-r-4{border-top-right-radius:4px;border-bottom-right-radius:4px}.f-ui-02{font-family:var(--f-ui-02-fontFamily);font-weight:var(--f-ui-02-fontWeight);font-size:var(--f-ui-02-fontSize);line-height:var(--f-ui-02-lineHeight);letter-spacing:var(--f-ui-02-letterSpacing)}.opacity-50{opacity:0.5}.hover\\:opacity-100:hover{opacity:1}.banner{--rail:#7a7b7a;--surface:#ffffff;--line:#e2e2e2;--icon-bg:#f0f0f0;--icon-fg:#5a5f5c;--title:#07140d;--msg:#8a8c8a;display:flex;flex-wrap:wrap;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--rail);border-radius:12px;padding:15px 18px}.banner--brand,.banner--info{--rail:var(--brand-green, #00ff9d);--icon-bg:rgba(0, 255, 157, 0.12);--icon-fg:var(--green-d, #00c87b);--title:var(--brand-black, #07140d);--msg:#8a8c8a}.banner--success{--rail:var(--green-d, #00c87b);--surface:#f0fbf6;--line:#cdeede;--icon-bg:rgba(0, 200, 123, 0.12);--icon-fg:var(--green-d, #00c87b);--title:#0a6b46;--msg:#5a7a6c}.banner--warning{--rail:#b26b00;--surface:#fff6e6;--line:#f0dcb4;--icon-bg:rgba(178, 107, 0, 0.12);--icon-fg:#b26b00;--title:#b26b00;--msg:#8a6a2a}.banner--error{--rail:#c0392b;--surface:#fdf0ee;--line:#f2cfc9;--icon-bg:rgba(192, 57, 43, 0.1);--icon-fg:#c0392b;--title:#c0392b;--msg:#8d5049}.banner-ic{flex:0 0 auto;width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--icon-bg);color:var(--icon-fg)}.banner-copy{flex:1 1 auto;min-width:0}.banner-title{font-family:var(--sans, 'IBM Plex Sans', system-ui, sans-serif);font-size:14.5px;font-weight:600;color:var(--title)}.banner-msg{font-family:var(--mono, 'IBM Plex Mono', ui-monospace, monospace);font-size:10.5px;letter-spacing:0.04em;color:var(--msg);line-height:1.45;margin-top:3px}.banner-title+.banner-msg{margin-top:3px}.banner-actions{flex:0 0 auto;display:flex;align-items:center;gap:16px}.banner-x{flex:0 0 auto;border:none;background:transparent;color:var(--msg);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:4px;border-radius:6px;opacity:0.6;transition:opacity 0.14s, background 0.14s}.banner-x:hover{opacity:1;background:rgba(0, 0, 0, 0.05)}@media (max-width: 1024px){.banner-actions{gap:12px}}";
|
|
16795
16900
|
var EdsToastStyle0 = edsToastCss;
|
|
16796
16901
|
|
|
16797
16902
|
const toastStyles = cva(['relative bottom-4 w-auto rounded-xs p-12'], {
|
|
@@ -16801,6 +16906,8 @@ const toastStyles = cva(['relative bottom-4 w-auto rounded-xs p-12'], {
|
|
|
16801
16906
|
success: 'bg-success text-dark',
|
|
16802
16907
|
error: 'bg-error text-dark',
|
|
16803
16908
|
warning: 'bg-warning text-dark',
|
|
16909
|
+
info: 'bg-dark text-dark',
|
|
16910
|
+
neutral: 'bg-dark text-dark',
|
|
16804
16911
|
brand: 'bg-strongest text-accent',
|
|
16805
16912
|
brandInverse: 'bg-inverse text-default'
|
|
16806
16913
|
}
|
|
@@ -16809,6 +16916,16 @@ const toastStyles = cva(['relative bottom-4 w-auto rounded-xs p-12'], {
|
|
|
16809
16916
|
intent: 'default'
|
|
16810
16917
|
}
|
|
16811
16918
|
});
|
|
16919
|
+
/** Fallback leading icon per intent for the `banner` variant. */
|
|
16920
|
+
const DEFAULT_BANNER_ICON = {
|
|
16921
|
+
default: 'information',
|
|
16922
|
+
neutral: 'information',
|
|
16923
|
+
info: 'information',
|
|
16924
|
+
brand: 'information',
|
|
16925
|
+
success: 'checkmark',
|
|
16926
|
+
warning: 'warning',
|
|
16927
|
+
error: 'warning'
|
|
16928
|
+
};
|
|
16812
16929
|
class EdsToast {
|
|
16813
16930
|
constructor(hostRef) {
|
|
16814
16931
|
registerInstance(this, hostRef);
|
|
@@ -16822,12 +16939,23 @@ class EdsToast {
|
|
|
16822
16939
|
};
|
|
16823
16940
|
this.message = undefined;
|
|
16824
16941
|
this.intent = 'default';
|
|
16942
|
+
this.variant = 'toast';
|
|
16943
|
+
this.heading = undefined;
|
|
16944
|
+
this.icon = undefined;
|
|
16945
|
+
this.dismissible = false;
|
|
16825
16946
|
this.duration = undefined;
|
|
16826
16947
|
this.visible = true;
|
|
16948
|
+
this.hasActions = false;
|
|
16949
|
+
}
|
|
16950
|
+
componentWillLoad() {
|
|
16951
|
+
// Slotted actions live in light DOM (children with slot="actions").
|
|
16952
|
+
this.hasActions = !!this.el.querySelector('[slot="actions"]');
|
|
16827
16953
|
}
|
|
16828
16954
|
componentDidLoad() {
|
|
16829
16955
|
const btn = this.el.shadowRoot.querySelector('eds-button');
|
|
16830
|
-
|
|
16956
|
+
if (btn) {
|
|
16957
|
+
this.emitContext(btn);
|
|
16958
|
+
}
|
|
16831
16959
|
}
|
|
16832
16960
|
/**
|
|
16833
16961
|
* Emits a custom event called `parentContext` for a given button element.
|
|
@@ -16853,10 +16981,18 @@ class EdsToast {
|
|
|
16853
16981
|
// Clear the timeout when the component is removed
|
|
16854
16982
|
clearTimeout(this.dismissTimeout);
|
|
16855
16983
|
}
|
|
16984
|
+
renderBanner() {
|
|
16985
|
+
const iconName = this.icon || DEFAULT_BANNER_ICON[this.intent] || 'information';
|
|
16986
|
+
const showClose = this.dismissible || (this.duration && this.duration > 0);
|
|
16987
|
+
return (hAsync("div", { class: `banner banner--${this.intent}`, role: "status", "aria-live": "polite" }, hAsync("span", { class: "banner-ic", "aria-hidden": "true" }, hAsync("eds-icon-wrapper", { name: iconName, size: 20 })), hAsync("div", { class: "banner-copy" }, this.heading && hAsync("div", { class: "banner-title" }, this.heading), hAsync("div", { class: "banner-msg" }, this.message)), this.hasActions && (hAsync("div", { class: "banner-actions" }, hAsync("slot", { name: "actions" }))), showClose && (hAsync("button", { type: "button", class: "banner-x", "aria-label": "Dismiss", onClick: () => this.dismissToast() }, hAsync("eds-icon-wrapper", { name: "close", size: 16 })))));
|
|
16988
|
+
}
|
|
16856
16989
|
render() {
|
|
16857
16990
|
if (!this.visible) {
|
|
16858
16991
|
return null;
|
|
16859
16992
|
}
|
|
16993
|
+
if (this.variant === 'banner') {
|
|
16994
|
+
return this.renderBanner();
|
|
16995
|
+
}
|
|
16860
16996
|
const classes = toastStyles({ intent: this.intent });
|
|
16861
16997
|
return (hAsync("div", { class: classes, role: "alert", "aria-live": "assertive" }, hAsync("div", { class: "flex items-center justify-between gap-4" }, hAsync("span", { class: "f-ui-02" }, this.message), hAsync("eds-button", { intent: "ghost", size: "large", icon: "close", "aria-label": "Close Toast", onClick: () => this.dismissToast(), "extra-class": "ml-8" }))));
|
|
16862
16998
|
}
|
|
@@ -16868,8 +17004,13 @@ class EdsToast {
|
|
|
16868
17004
|
"$members$": {
|
|
16869
17005
|
"message": [1],
|
|
16870
17006
|
"intent": [1],
|
|
17007
|
+
"variant": [1],
|
|
17008
|
+
"heading": [1],
|
|
17009
|
+
"icon": [1],
|
|
17010
|
+
"dismissible": [4],
|
|
16871
17011
|
"duration": [2],
|
|
16872
|
-
"visible": [32]
|
|
17012
|
+
"visible": [32],
|
|
17013
|
+
"hasActions": [32]
|
|
16873
17014
|
},
|
|
16874
17015
|
"$listeners$": undefined,
|
|
16875
17016
|
"$lazyBundleId$": "-",
|
|
@@ -16942,7 +17083,7 @@ class EdsToastManager {
|
|
|
16942
17083
|
this.toasts = this.toasts.filter((t) => t.id !== id);
|
|
16943
17084
|
}
|
|
16944
17085
|
render() {
|
|
16945
|
-
return (hAsync("div", { key: '
|
|
17086
|
+
return (hAsync("div", { key: 'bd01d186b0fa0dc2d44c169dfd2634cdcf80e906', class: "toast-container" }, this.toasts.map((t) => (hAsync("div", { key: t.id }, hAsync("eds-toast", { message: t.message, intent: t.intent, onClick: () => this.removeToast(t.id) }))))));
|
|
16946
17087
|
}
|
|
16947
17088
|
get hostElement() { return getElement(this); }
|
|
16948
17089
|
static get style() { return EdsToastManagerStyle0; }
|
|
@@ -16981,7 +17122,7 @@ class EdsTooltip {
|
|
|
16981
17122
|
}
|
|
16982
17123
|
render() {
|
|
16983
17124
|
const positionClass = this.position === 'bottom' ? 'top-full mt-2' : 'bottom-full mb-2';
|
|
16984
|
-
return (hAsync("div", { key: '
|
|
17125
|
+
return (hAsync("div", { key: '70fac9a2e9d60c2dd24961d162c5230dcf5d6232', class: "relative w-full inline-block group" }, hAsync("slot", { key: '02e4f975a0b23905883663f773a221c747906a11' }), hAsync("div", { key: 'cff74243e3b7bd0111bb0e6023367ac88b50c379', class: `absolute ${positionClass}
|
|
16985
17126
|
rounded-xs bg-strongest text-inverse
|
|
16986
17127
|
f-ui-03-light pointer-events-none
|
|
16987
17128
|
z-10 px-4 opacity-0 transition-opacity duration-150 ease-in-out
|
|
@@ -17071,16 +17212,17 @@ class EdsTrlBadge {
|
|
|
17071
17212
|
this.href = undefined;
|
|
17072
17213
|
}
|
|
17073
17214
|
esc(s) {
|
|
17074
|
-
return String(s).replace(/&/g, '&').replace(/</g, '<')
|
|
17075
|
-
.replace(/>/g, '>').replace(/"/g, '"');
|
|
17215
|
+
return String(s).replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"');
|
|
17076
17216
|
}
|
|
17077
17217
|
/** Maturity tier → value/pip colour (brand palette). */
|
|
17078
17218
|
levelColor() {
|
|
17079
17219
|
const n = Number(this.level);
|
|
17080
|
-
if (n >= 7)
|
|
17220
|
+
if (n >= 7) {
|
|
17081
17221
|
return '#00FF9D';
|
|
17082
|
-
|
|
17222
|
+
}
|
|
17223
|
+
if (n >= 4) {
|
|
17083
17224
|
return '#00C87B';
|
|
17225
|
+
}
|
|
17084
17226
|
return '#7A7B7A';
|
|
17085
17227
|
}
|
|
17086
17228
|
/** Readable value text on a coloured segment (black on green, light on grey). */
|
|
@@ -17089,10 +17231,12 @@ class EdsTrlBadge {
|
|
|
17089
17231
|
}
|
|
17090
17232
|
fullText() {
|
|
17091
17233
|
const parts = [`${this.label} ${this.level}`];
|
|
17092
|
-
if (this.assessed)
|
|
17234
|
+
if (this.assessed) {
|
|
17093
17235
|
parts.push(`assessed ${this.assessed}`);
|
|
17094
|
-
|
|
17236
|
+
}
|
|
17237
|
+
if (this.methodology) {
|
|
17095
17238
|
parts.push(`methodology ${this.methodology}`);
|
|
17239
|
+
}
|
|
17096
17240
|
return parts.join(' · ');
|
|
17097
17241
|
}
|
|
17098
17242
|
/** Build the inner markup + intrinsic dimensions for the chosen variant. */
|
|
@@ -17132,8 +17276,8 @@ class EdsTrlBadge {
|
|
|
17132
17276
|
const stroke = dark ? '#34473d' : '#07140D';
|
|
17133
17277
|
const labelColor = dark ? '#ECECEC' : '#07140D';
|
|
17134
17278
|
const sep = dark ? '#5a6b62' : '#9aa39d';
|
|
17135
|
-
const value = dark ? valColor :
|
|
17136
|
-
const w = Math.ceil(logoSpace +
|
|
17279
|
+
const value = dark ? valColor : Number(this.level) >= 4 ? '#00966a' : '#7A7B7A';
|
|
17280
|
+
const w = Math.ceil(logoSpace + `${this.label} · ${this.level}`.length * CW + 12);
|
|
17137
17281
|
const inner = `<defs>${markDefs(uid)}</defs>` +
|
|
17138
17282
|
`<rect x=".5" y=".5" width="${w - 1}" height="23" rx="6" fill="${bg}" stroke="${stroke}"/>${markGroup(uid, 8, 4, 16)}` +
|
|
17139
17283
|
`<text x="30" y="16" ${mono} font-size="11" letter-spacing=".3">` +
|
|
@@ -17187,12 +17331,12 @@ class EdsTrlBadge {
|
|
|
17187
17331
|
const k = this.size ? this.size / h : 1;
|
|
17188
17332
|
const outW = Math.round(w * k);
|
|
17189
17333
|
const outH = Math.round(h * k);
|
|
17190
|
-
return `<svg xmlns="http://www.w3.org/2000/svg" width="${outW}" height="${outH}" ` +
|
|
17191
|
-
`viewBox="0 0 ${w} ${h}" role="img" aria-label="${aria}"><title>${aria}</title>${inner}</svg
|
|
17334
|
+
return (`<svg xmlns="http://www.w3.org/2000/svg" width="${outW}" height="${outH}" ` +
|
|
17335
|
+
`viewBox="0 0 ${w} ${h}" role="img" aria-label="${aria}"><title>${aria}</title>${inner}</svg>`);
|
|
17192
17336
|
}
|
|
17193
17337
|
render() {
|
|
17194
17338
|
const svg = this.buildSvg();
|
|
17195
|
-
return (hAsync(Host, { key: '
|
|
17339
|
+
return (hAsync(Host, { key: '8da5cadf8dc1cef28dd16902013905bfefdd67aa' }, this.href ? (hAsync("a", { class: "link", href: this.href, "aria-label": this.fullText(), innerHTML: svg })) : (hAsync("span", { class: "link", innerHTML: svg }))));
|
|
17196
17340
|
}
|
|
17197
17341
|
static get style() { return EdsTrlBadgeStyle0; }
|
|
17198
17342
|
static get cmpMeta() { return {
|
|
@@ -17235,7 +17379,6 @@ class EdsUser {
|
|
|
17235
17379
|
this.intent = 'ghost';
|
|
17236
17380
|
this.dropdownLabel = 'Account';
|
|
17237
17381
|
this.expanded = false;
|
|
17238
|
-
this.shortMode = false;
|
|
17239
17382
|
}
|
|
17240
17383
|
/**
|
|
17241
17384
|
* Helper getter to ensure we work with a User object.
|
|
@@ -17252,7 +17395,6 @@ class EdsUser {
|
|
|
17252
17395
|
}
|
|
17253
17396
|
return this.user;
|
|
17254
17397
|
}
|
|
17255
|
-
async componentWillLoad() { }
|
|
17256
17398
|
get initials() {
|
|
17257
17399
|
var _a, _b, _c, _d;
|
|
17258
17400
|
const user = this.parsedUser;
|
|
@@ -17267,7 +17409,7 @@ class EdsUser {
|
|
|
17267
17409
|
render() {
|
|
17268
17410
|
const user = this.parsedUser;
|
|
17269
17411
|
//const iconName = this.expanded ? 'chevron-down' : 'chevron-right';
|
|
17270
|
-
return (hAsync("div", { key: '
|
|
17412
|
+
return (hAsync("div", { key: '680e43b28d6f449f1bc527a205bc8cb1593c2e3b', class: "block" }, hAsync("div", { key: '472e128751bbd16584d2c17a0f05de9ce39b3618', class: "flex items-center" }, hAsync("eds-dropdown", { key: 'b8e77167f98bcc07280a440ab8c086ab72650866', ref: (el) => (this.dropdownEl = el), intent: this.intent, "aria-label": "User Menu", "dropdown-pos": "right", "dropdown-offset": "false", icon: "user", label: this.dropdownLabel, class: "text-default", onDropdown: this.handleDropdown }, hAsync("div", { key: 'd55809a0ab5387f867d27669198c7e9bfc206383', class: "min-w-[280px] p-8" }, hAsync("div", { key: 'e703e71577d4d1e78664fa807de67551483069c1', class: "flex gap-x-16", "data-dropdown-no-close": true }, hAsync("eds-avatar", { key: '7672f9a4f84bc13ab079a7e6185eff87aa15a1f7', "first-name": user.given_name, "last-name": user.family_name, initials: this.initials, color: "black" }), hAsync("div", { key: 'ac9e6e17465d52a247b289224ce3ea473989c1ee', class: "max-w-full" }, user.name && hAsync("p", { key: 'caab9568a17e0bbc68c418f070b93ae6f21fad21', class: "f-ui-01 text-default w-full text-ellipsis" }, user.name), user.preferred_username && hAsync("p", { key: '0ba0fbec86e6600ee4eb0e0827a78e7292808ab1', class: "f-ui-03-light text-light mt-4" }, user.preferred_username), user.email && hAsync("p", { key: 'a3f8870af9bdd001cf5e894b71f8403bff639608', class: "f-ui-03-light text-light mt-4" }, user.email))), hAsync("div", { key: 'd230d82178d53043406e26f264c3fe26d7a87211', class: "text-default flex w-full flex-col gap-y-8" }, hAsync("slot", { key: '5d28ca2126fbd735560e6034ea1c24e225bf2ee5' })))))));
|
|
17271
17413
|
}
|
|
17272
17414
|
get hostEl() { return getElement(this); }
|
|
17273
17415
|
static get style() { return EdsUserStyle0; }
|
|
@@ -17279,7 +17421,6 @@ class EdsUser {
|
|
|
17279
17421
|
"intent": [1],
|
|
17280
17422
|
"dropdownLabel": [1, "dropdown-label"],
|
|
17281
17423
|
"expanded": [32],
|
|
17282
|
-
"shortMode": [32],
|
|
17283
17424
|
"closeDropdown": [64]
|
|
17284
17425
|
},
|
|
17285
17426
|
"$listeners$": undefined,
|
|
@@ -17323,7 +17464,7 @@ class GradientPrimaryPalette {
|
|
|
17323
17464
|
];
|
|
17324
17465
|
}
|
|
17325
17466
|
render() {
|
|
17326
|
-
return (hAsync("ul", { key: '
|
|
17467
|
+
return (hAsync("ul", { key: '3b0f811693a70082d267a916bcbd2be0e7226e94', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16", style: {
|
|
17327
17468
|
background: 'linear-gradient(to bottom, #9CE142 0%, #00C959 50%, #00A595 100%)'
|
|
17328
17469
|
} }, this.colors.map((color) => (hAsync("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, hAsync("div", { class: "effect-height flex items-center justify-between p-16" }, hAsync("div", { class: "grid" }, hAsync("span", { class: "f-body-02" }, color.rgb), hAsync("span", { class: "f-body-02 w-full" }, color.cmyk), hAsync("eds-code-block", { code: color.hex, style: { minWidth: '150px', marginRight: '5px' } })), hAsync("div", { class: "grid" }, hAsync("span", { class: "f-body-02" }, color.pantoneC), hAsync("span", { class: "f-body-02" }, color.pantoneU))))))));
|
|
17329
17470
|
}
|
|
@@ -17396,19 +17537,19 @@ class GradientSecondaryPalette {
|
|
|
17396
17537
|
];
|
|
17397
17538
|
}
|
|
17398
17539
|
render() {
|
|
17399
|
-
return (hAsync("div", { key: '
|
|
17540
|
+
return (hAsync("div", { key: '55954a3c8ed2d1ded3844fbab0c5c98f7562bd4d' }, hAsync("ul", { key: 'ee33d6686f73a91f77ee7e1ad8932b86d116f0e1', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, hAsync("li", { key: '969b34615646cfe815f11534a54e512ff9abcd5d', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, hAsync("div", { key: 'd4d2700591ab1cfea36e8d2d06a28f0cad4367b0', class: "effect-height flex items-center justify-between p-16", style: {
|
|
17400
17541
|
background: this.colors[0].background
|
|
17401
|
-
} }, hAsync("div", { key: '
|
|
17542
|
+
} }, hAsync("div", { key: '8d8b8299c58871baea7eff4fab2844828117ef8c', class: "grid" }, hAsync("span", { key: 'e1f34c4f267598e1eb0985d4d7b617e42e2fa5fd', class: "f-body-02" }, this.colors[0].rgb), hAsync("span", { key: '0be1a29db0bb4406b77f518725342328996a900f', class: "f-body-02 w-full" }, this.colors[0].cmyk), hAsync("eds-code-block", { key: 'af6fd66bfbafc1db14b5e805d6d04a48f944b5eb', code: this.colors[0].hex, style: { minWidth: '150px', marginRight: '5px' } })), hAsync("div", { key: '808f2034ac8bc48606a63b6b3a2b4f4da8b8d77c', class: "grid" }, hAsync("span", { key: '7920838708d98113eda841e6b83534afac6346b6', class: "f-body-02" }, this.colors[0].pantoneC), hAsync("span", { key: '4144490f054eb1d80c0008fcb01bcc7274a5a1f2', class: "f-body-02" }, this.colors[0].pantoneU))), hAsync("div", { key: '6e524575f1f6bb753223f4a91e3aa9a5d244183a', class: "effect-height flex items-center justify-between p-16", style: {
|
|
17402
17543
|
background: this.colors[1].background
|
|
17403
|
-
} }, hAsync("div", { key: '
|
|
17544
|
+
} }, hAsync("div", { key: '0464ed0bddfe36aec3e6b2df236bf320c7509881', class: "grid" }, hAsync("span", { key: '6691afb081acbf9406e52457f7cbf29ed1a39443', class: "f-body-02" }, this.colors[1].rgb), hAsync("span", { key: '4e51865950984835e15e99dc99a42febf89d90ab', class: "f-body-02 w-full" }, this.colors[1].cmyk), hAsync("eds-code-block", { key: '36bab658fecf69caa0c9537597a3cc6b0ca5bb60', code: this.colors[1].hex, style: { minWidth: '150px', marginRight: '5px' } })), hAsync("div", { key: '55c28465b04f7d927f557b281ae7910c7e72cd27', class: "grid" }, hAsync("span", { key: '23df59a17b7b0aef5b3856ae0646b57eaf182de3', class: "f-body-02" }, this.colors[1].pantoneC), hAsync("span", { key: 'b1c66632ffc7a8fc744d860d290b05a58a643b07', class: "f-body-02" }, this.colors[1].pantoneU))))), hAsync("eds-block-break", { key: '1885cfb28019b3fb2a5ab3542f045ac0850ef350' }), hAsync("ul", { key: 'c30a76ff0d2245893943f13f1893671e5c4f19ff', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, hAsync("li", { key: 'b83b8b81d235daaa96010bdf2163bb0ee9f4c298', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, hAsync("div", { key: 'c4ba97bcefa96d1fc18f9dceda5b9d03c9243768', class: "effect-height flex items-center justify-between p-16", style: {
|
|
17404
17545
|
background: this.colors[2].background
|
|
17405
|
-
} }, hAsync("div", { key: '
|
|
17546
|
+
} }, hAsync("div", { key: 'f9afe9bced7e90c769e89125cdda71466d09dad9', class: "grid" }, hAsync("span", { key: '609fc9699aa5d08c32f859a415d900781846f41b', class: "f-body-02" }, this.colors[2].rgb), hAsync("span", { key: '529d2beb8cd06e19a23849832d05faf025587743', class: "f-body-02 w-full" }, this.colors[2].cmyk), hAsync("eds-code-block", { key: '8afbc63abcf2d9149fcd35665c31a9542df8242d', code: this.colors[2].hex, style: { minWidth: '150px', marginRight: '5px' } })), hAsync("div", { key: '5c29b392b41dadc2dfe232e7863cf0c2f004f198', class: "grid" }, hAsync("span", { key: '0cb9f0a85b34d945741ac1e9453ad07fc6843e25', class: "f-body-02" }, this.colors[2].pantoneC), hAsync("span", { key: 'aa20e1fe79e2f527aa467e0a6be3aa792fa5b141', class: "f-body-02" }, this.colors[2].pantoneU))), hAsync("div", { key: 'e0adb4b4b02e9871ca7257e840c82fa9359654b5', class: "effect-height flex items-center justify-between p-16", style: {
|
|
17406
17547
|
background: this.colors[3].background
|
|
17407
|
-
} }, hAsync("div", { key: '
|
|
17548
|
+
} }, hAsync("div", { key: '62039bb0fc41220d7ea29c7b3134e94171e4b023', class: "grid" }, hAsync("span", { key: 'c1679b75a0c63a35b886d9170114c307245c642c', class: "f-body-02" }, this.colors[3].rgb), hAsync("span", { key: 'de1c7ad0012fafd231671a2bb0ec86bcf90ae12e', class: "f-body-02 w-full" }, this.colors[3].cmyk), hAsync("eds-code-block", { key: 'c68180939d5f82e3606efea5f757be8c3b03a009', code: this.colors[3].hex, style: { minWidth: '150px', marginRight: '5px' } })), hAsync("div", { key: 'fcf4161319341b53b4b231cad28fb70758c0dd94', class: "grid" }, hAsync("span", { key: '3eab8efd130f25708f694e775aa7ac36c943df50', class: "f-body-02" }, this.colors[3].pantoneC), hAsync("span", { key: 'b420abe12d8f5d2dfa39a51501316c5231c88d6c', class: "f-body-02" }, this.colors[3].pantoneU))))), hAsync("eds-block-break", { key: 'f61e6b39b1e177214da443d951c5585554a06270' }), hAsync("ul", { key: '749276ac2097b23d654da7a99de04032857d9785', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, hAsync("li", { key: 'caa5fc807aa92b8969a41545ab05cb3b3adc69c6', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, hAsync("div", { key: '6be2aecc15bae9efa645b2d41ac8c3741787201b', class: "effect-height flex items-center justify-between p-16", style: {
|
|
17408
17549
|
background: this.colors[4].background
|
|
17409
|
-
} }, hAsync("div", { key: '
|
|
17550
|
+
} }, hAsync("div", { key: 'b47db3efc1d07f92d93f8efaaeb83f1924c5cb87', class: "grid" }, hAsync("span", { key: '9cb73763d0f6b3650c9e0364ddd173d83726272f', class: "f-body-02" }, this.colors[4].rgb), hAsync("span", { key: '9f9b556fe1826ea1094032f470061dfd3468985d', class: "f-body-02 w-full" }, this.colors[4].cmyk), hAsync("eds-code-block", { key: 'ffa2fccdef2ac4360e4d92e068a3b790d4a0459a', code: this.colors[4].hex, style: { minWidth: '150px', marginRight: '5px' } })), hAsync("div", { key: '7ebf088b7ffd31da2edc33be16da19595354b6e8', class: "grid" }, hAsync("span", { key: 'd5b485ad41e9c35d6d52fd28be92f31080d41dbc', class: "f-body-02" }, this.colors[4].pantoneC), hAsync("span", { key: '80d76b4944c48e6ac7f0bbd2eb05d5ecf427e8bc', class: "f-body-02" }, this.colors[4].pantoneU))), hAsync("div", { key: '1e6c989cc32c59497f3eaa330e099c51c92e0056', class: "effect-height flex items-center justify-between p-16", style: {
|
|
17410
17551
|
background: this.colors[5].background
|
|
17411
|
-
} }, hAsync("div", { key: '
|
|
17552
|
+
} }, hAsync("div", { key: '5ccc68d4f200bd755b3bccec8f67c0cb5471ac27', class: "grid" }, hAsync("span", { key: 'b5f71a9d4e8de4eec9f88765feeb39087b48dd1b', class: "f-body-02" }, this.colors[5].rgb), hAsync("span", { key: '9f6a9886a899b3a37addc9bf312ae7e10b999866', class: "f-body-02 w-full" }, this.colors[5].cmyk), hAsync("eds-code-block", { key: 'ae01dbf19c98571240867c52cf68a8fdebe24c5f', code: this.colors[5].hex, style: { minWidth: '150px', marginRight: '5px' } })), hAsync("div", { key: 'dab594140bb31548e9ebae53bb525ab93691c086', class: "grid" }, hAsync("span", { key: '088f126b8b288c0f2475c13a3aa85e5a22ef4728', class: "f-body-02" }, this.colors[5].pantoneC), hAsync("span", { key: '853fad90eafd82e6381eaad65e5efb7a68362474', class: "f-body-02" }, this.colors[5].pantoneU)))))));
|
|
17412
17553
|
}
|
|
17413
17554
|
static get cmpMeta() { return {
|
|
17414
17555
|
"$flags$": 0,
|
|
@@ -17471,11 +17612,11 @@ class GradientSupportPalette {
|
|
|
17471
17612
|
];
|
|
17472
17613
|
}
|
|
17473
17614
|
render() {
|
|
17474
|
-
return (hAsync("ul", { key: '
|
|
17615
|
+
return (hAsync("ul", { key: '2bc6d57d63ae18aa162ed8a66f3ca270720fcf63', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, hAsync("li", { key: '5a96685deaaceb7ab166b022748b78d569c4b0ae', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, hAsync("div", { key: '931d9f72eb8ac4d19f80b4e2f1a7d97b8df34841', class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: this.colors[0].background } }, hAsync("div", { key: '62d6fb428628a3bd416ee470debd176fef9d8fc7', class: "grid" }, hAsync("span", { key: '4bda9dd2bd7fe1d6023a7de77c90dfc30e352089', class: "f-body-02" }, this.colors[0].rgb), hAsync("span", { key: '8ae8f17c22b7235baad34fc595040d9d51f07a43', class: "f-body-02 w-full" }, this.colors[0].cmyk), hAsync("eds-code-block", { key: 'af14dfaa87fb6de3b528da4ecc3d3226c16c2c89', code: this.colors[0].hex, style: { minWidth: '150px', marginRight: '5px' } })), hAsync("div", { key: '5f9040d0cf3768a602e9c3ef4605f3f957551251', class: "grid" }, hAsync("span", { key: '4db5920188fe1916ab1f1998623fc7f4913f6972', class: "f-body-02" }, this.colors[0].pantoneC || 'N/A'), hAsync("span", { key: '52402b3e615f2f674b6faef8c7a3a2ed15f1aad3', class: "f-body-02" }, this.colors[0].pantoneU || 'N/A')))), hAsync("li", { key: '78a2b0b368946e40be43063cab0450843cac701c', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, hAsync("div", { key: 'd720a4a85437cbd0ab36ac89e150042b15cd6cf6', class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: this.colors[1].background } }, hAsync("div", { key: '1ab1dce596f2dc0ebfd4bbddf4f0831c37d9460c', class: "grid" }, hAsync("span", { key: '40ac839dd4933379ff391009155f35c682ae7927', class: "f-body-02" }, this.colors[1].rgb), hAsync("span", { key: 'cf8df47df9313c06f98b156f082848a6a33d88c2', class: "f-body-02 w-full" }, this.colors[1].cmyk), hAsync("eds-code-block", { key: '0ce5f69e74ce7b357f07f54e04df564b28687c4b', code: this.colors[1].hex, style: { minWidth: '150px', marginRight: '5px' } })), hAsync("div", { key: 'b2c3989b94876f2418e20528542e35316b86365e', class: "grid" }, hAsync("span", { key: 'b2308e2721ab016eb788444c420c8667eb76e652', class: "f-body-02" }, this.colors[1].pantoneC || 'N/A'), hAsync("span", { key: 'e587289f3b254a8d6ddc80bdc5806d7dc9220011', class: "f-body-02" }, this.colors[1].pantoneU || 'N/A')))), hAsync("li", { key: '3da665043c0d50b3ca6019dcc1a7dc9286b5d375', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, hAsync("div", { key: 'dc1a6f96c760f5f8a3c08997d3b54aac9d9888b8', class: "effect-height flex items-center justify-between p-16", style: {
|
|
17475
17616
|
background: this.colors[2].background
|
|
17476
|
-
} }, hAsync("div", { key: '
|
|
17617
|
+
} }, hAsync("div", { key: '03a1133bd3081865b579ec9e2b6b05253d31b03a', class: "grid" }, hAsync("span", { key: '7a29e5ffbe13527b4f624143ca1ed55a5a0bd5b7', class: "f-body-02" }, this.colors[2].rgb), hAsync("span", { key: 'd7087945fa2a7a42b8b3bd84eb63f9049da7dc82', class: "f-body-02 w-full" }, this.colors[2].cmyk), hAsync("eds-code-block", { key: 'cff25a4ed5ab919ba63ac52a0c6c61ab06029f41', code: this.colors[2].hex, style: { minWidth: '150px', marginRight: '5px' } })), hAsync("div", { key: '0fa42c934995f16a76c0c4b17ac057187d1ee516', class: "grid" }, hAsync("span", { key: '4e3a8c38cd60088275ca874d50b181f81f70aab2', class: "f-body-02" }, this.colors[2].pantoneC), hAsync("span", { key: 'aeb9282692211a5708fdda19c4e4397c256fa981', class: "f-body-02" }, this.colors[2].pantoneU))), hAsync("div", { key: '34f8ba04679de87eb1fe64270a3355d4730953f7', class: "effect-height flex items-center justify-between p-16", style: {
|
|
17477
17618
|
background: this.colors[3].background
|
|
17478
|
-
} }, hAsync("div", { key: '
|
|
17619
|
+
} }, hAsync("div", { key: '0d9d115feb671ea6a37f3679925f4de6748ef69c', class: "grid" }, hAsync("span", { key: 'b6bb3e244a141000c880c9de1ff7fa13b8173a93', class: "f-body-02" }, this.colors[3].rgb), hAsync("span", { key: 'db6b6a1506829dcd5becb9793e3393f6f189efc3', class: "f-body-02 w-full" }, this.colors[3].cmyk), hAsync("eds-code-block", { key: '965fe2bfc65134f2c41c91c93ad7a6268e76b334', code: this.colors[3].hex, style: { minWidth: '150px', marginRight: '5px' } })), hAsync("div", { key: '0139cb83f5cd3d2350721eef750d4069ccfe25c6', class: "grid" }, hAsync("span", { key: '4da26735fc80c68461954fe9ed80ea23aedd4e59', class: "f-body-02" }, this.colors[3].pantoneC), hAsync("span", { key: '58cb3656d60250f39536aacafd0b5587d34b8561', class: "f-body-02" }, this.colors[3].pantoneU)))), hAsync("li", { key: '6ba0e69f38d17ac5c815ad080e0a47c29579e2d8', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, hAsync("div", { key: '40c29529b7ad63c3206533af0a5025d5426a612d', class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: this.colors[4].background } }, hAsync("div", { key: '054d8e9939f7ee072a639323df5c0c883144ff8e', class: "grid" }, hAsync("span", { key: 'dac5d5b64277aab4e0caafd0e5e4baf1509975fe', class: "f-body-02" }, this.colors[4].rgb), hAsync("span", { key: '8a93ed0436d2a27eda72c9f2a66014bc7c23bea8', class: "f-body-02 w-full" }, this.colors[4].cmyk), hAsync("eds-code-block", { key: '5945fdf834b30dce6975ee39a32916a85cd671f4', code: this.colors[4].hex, style: { minWidth: '150px', marginRight: '5px' } })), hAsync("div", { key: '6cb3c7e3e7a54ba48b3108b7733cfd8ac2ca9b73', class: "grid" }, hAsync("span", { key: 'fe085679e7c4c948d99c0dfefd8b82d361160534', class: "f-body-02" }, this.colors[4].pantoneC || 'N/A'), hAsync("span", { key: 'db516be172480131e88ee1a32a1e9d4b799960ee', class: "f-body-02" }, this.colors[4].pantoneU || 'N/A'))))));
|
|
17479
17620
|
}
|
|
17480
17621
|
static get cmpMeta() { return {
|
|
17481
17622
|
"$flags$": 0,
|
|
@@ -17529,7 +17670,7 @@ class IncorrectUseOfColors {
|
|
|
17529
17670
|
registerInstance(this, hostRef);
|
|
17530
17671
|
}
|
|
17531
17672
|
render() {
|
|
17532
|
-
return (hAsync("div", { key: '
|
|
17673
|
+
return (hAsync("div", { key: 'a6d5c05544bb0af37aeec022d53c9ebd64e891cc', class: "container" }, hAsync("div", { key: '058290373f57f7f887f79a41d0441f0791037220', class: "mb-8" }, hAsync("eds-alert", { key: 'f6168be82e7a540a1940314134c9eb57dbd1fae4', message: "Note that, each of the four colour tones cannot be mixed in the same composition.", intent: "error" })), hAsync("div", { key: 'c05365d2dcdce23a750c752cef81a7843fe9b54f', class: "flex" }, hAsync("div", { key: '16ca87385a2e3a8fc108df30d628f78534a1b057', class: "w-full" }, hAsync("ul", { key: 'f8c62eec7f63fb153c1785ede3a2cf535dfad6e5', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, primary.map((color) => (hAsync("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, hAsync("div", { class: "w-full min-h-[150px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))), hAsync("div", { key: '9c918b52798d9a50a4b4171dd3d2df0ff276a8fa', class: "w-full" }, hAsync("ul", { key: 'f93524796d29dfc7d85da5a86a937519df10cdd3', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, incorrect.map((color) => (hAsync("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, hAsync("div", { class: "w-full min-h-[90px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))))));
|
|
17533
17674
|
}
|
|
17534
17675
|
static get cmpMeta() { return {
|
|
17535
17676
|
"$flags$": 0,
|
|
@@ -17552,7 +17693,64 @@ class LogoSpace {
|
|
|
17552
17693
|
registerInstance(this, hostRef);
|
|
17553
17694
|
}
|
|
17554
17695
|
render() {
|
|
17555
|
-
return (hAsync("div", { key: '
|
|
17696
|
+
return (hAsync("div", { key: 'd8adaf2c085aef0029453aef21a527c8e2677ca5', class: "container" }, hAsync("ul", { key: 'f9919afa9a7788769934fa408e3647f409ad436b', class: "not-prose grid-layout grid-cols-6 gap-y-8 md:gap-y-12 lg:gap-y-16" }, hAsync("li", { key: '4defd03de432869a1acd5735011b6dbbbb18b6a8', class: "grid-col-span-6 xxl:grid-col-span-3 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, hAsync("div", { key: 'fa018de1f0dcbfc32dc6ed5e00618bf238c7e928', class: "logo-clear-space mx-auto", style: { position: 'relative', padding: '2.5rem', background: '#f5f5f5', borderRadius: '8px' } }, hAsync("div", { key: 'd275d9edb872b43a183e8a76b1c9531d981d585c', style: {
|
|
17697
|
+
position: 'absolute',
|
|
17698
|
+
top: '0',
|
|
17699
|
+
left: '50%',
|
|
17700
|
+
transform: 'translateX(-50%)',
|
|
17701
|
+
display: 'flex',
|
|
17702
|
+
flexDirection: 'column',
|
|
17703
|
+
alignItems: 'center'
|
|
17704
|
+
} }, hAsync("span", { key: '11163f214005427e024b04ce1df24f41b8145f57', style: {
|
|
17705
|
+
fontSize: '11px',
|
|
17706
|
+
fontWeight: '600',
|
|
17707
|
+
color: '#00C87B',
|
|
17708
|
+
fontFamily: 'IBM Plex Mono, monospace'
|
|
17709
|
+
} }, "E"), hAsync("div", { key: 'ef4d8d4f7318eba7a9e4cfc8f32119d2c9e23477', style: { width: '1px', height: '12px', borderLeft: '1px dashed #00C87B' } })), hAsync("div", { key: 'ffe1a1ae439d3fd9b129acd336e75aa19624c2b6', style: {
|
|
17710
|
+
position: 'absolute',
|
|
17711
|
+
bottom: '0',
|
|
17712
|
+
left: '50%',
|
|
17713
|
+
transform: 'translateX(-50%)',
|
|
17714
|
+
display: 'flex',
|
|
17715
|
+
flexDirection: 'column',
|
|
17716
|
+
alignItems: 'center'
|
|
17717
|
+
} }, hAsync("div", { key: '7b8342fd5b5202dfaa6da0665d91bcd3a47f79a7', style: { width: '1px', height: '12px', borderLeft: '1px dashed #00C87B' } }), hAsync("span", { key: '4efc55d4f8a642acfb77a571694ea05460d12594', style: {
|
|
17718
|
+
fontSize: '11px',
|
|
17719
|
+
fontWeight: '600',
|
|
17720
|
+
color: '#00C87B',
|
|
17721
|
+
fontFamily: 'IBM Plex Mono, monospace'
|
|
17722
|
+
} }, "E")), hAsync("div", { key: '70eb593013f530ef57f9794266ec8909d6f6bbd8', style: {
|
|
17723
|
+
position: 'absolute',
|
|
17724
|
+
left: '4px',
|
|
17725
|
+
top: '50%',
|
|
17726
|
+
transform: 'translateY(-50%)',
|
|
17727
|
+
display: 'flex',
|
|
17728
|
+
alignItems: 'center'
|
|
17729
|
+
} }, hAsync("span", { key: 'eeaf30fd53b36844e52b2e92142b8f8adbaacca2', style: {
|
|
17730
|
+
fontSize: '11px',
|
|
17731
|
+
fontWeight: '600',
|
|
17732
|
+
color: '#00C87B',
|
|
17733
|
+
fontFamily: 'IBM Plex Mono, monospace'
|
|
17734
|
+
} }, "E"), hAsync("div", { key: '27682de58b8ac8bf1d7f17d25ab4e2429e7c5897', style: { height: '1px', width: '12px', borderTop: '1px dashed #00C87B' } })), hAsync("div", { key: 'ced953919078e5ddd4b5c70d750693b89e4d8cbc', style: {
|
|
17735
|
+
position: 'absolute',
|
|
17736
|
+
right: '4px',
|
|
17737
|
+
top: '50%',
|
|
17738
|
+
transform: 'translateY(-50%)',
|
|
17739
|
+
display: 'flex',
|
|
17740
|
+
alignItems: 'center'
|
|
17741
|
+
} }, hAsync("div", { key: '4fe3e43ca20645c3631119cf089aa9f3d83be1f4', style: { height: '1px', width: '12px', borderTop: '1px dashed #00C87B' } }), hAsync("span", { key: '27ca09a454a253730b7cb1ac4246b36c54748745', style: {
|
|
17742
|
+
fontSize: '11px',
|
|
17743
|
+
fontWeight: '600',
|
|
17744
|
+
color: '#00C87B',
|
|
17745
|
+
fontFamily: 'IBM Plex Mono, monospace'
|
|
17746
|
+
} }, "E")), hAsync("div", { key: 'df5159d9341ceebeaca350e5589a59c5f14c8b9a', style: {
|
|
17747
|
+
border: '1px dashed rgba(0, 200, 123, 0.5)',
|
|
17748
|
+
borderRadius: '4px',
|
|
17749
|
+
padding: '1rem',
|
|
17750
|
+
display: 'flex',
|
|
17751
|
+
alignItems: 'center',
|
|
17752
|
+
justifyContent: 'center'
|
|
17753
|
+
} }, hAsync("eds-logo", { key: '1fe938ec424cf65abffa2b1421f9e5ad5fd7f29a', variant: "positive", href: "#", style: { display: 'block', width: '250px' } })))), hAsync("li", { key: '7db8f82af5f6231048d040d8d96c6c8aabada665', class: "grid-col-span-6 xxl:grid-col-span-3 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, hAsync("div", { key: '8912e3482e1590b4f0cbcf1a8d3a02492b24c2f1', class: "text-center mt-16" }, hAsync("p", { key: '94c6b05c888b177afcce6f0eb8ee2c8b0328a89d', class: "f-body-01" }, "To ensure legibility, follow these minimum size guidelines:"), hAsync("eds-table", { key: 'b02c7b046b2b11effc65ff9c889a962b3b6bd2f5', data: '[\n { "Media": "Print", "Min Size": "0.75 cm" },\n { "Media": "Web", "Min Size": "29 px" }\n ]', config: '{\n "Media": { "format": "bold" }\n }' }))))));
|
|
17556
17754
|
}
|
|
17557
17755
|
static get style() { return LogoSpaceStyle0; }
|
|
17558
17756
|
static get cmpMeta() { return {
|
|
@@ -17576,7 +17774,7 @@ class LogoVariationsHorizontal {
|
|
|
17576
17774
|
registerInstance(this, hostRef);
|
|
17577
17775
|
}
|
|
17578
17776
|
render() {
|
|
17579
|
-
return (hAsync("div", { key: '
|
|
17777
|
+
return (hAsync("div", { key: '5011adf9e8af3aac24dca24120996b52643e601b', class: "container" }, hAsync("ul", { key: '2b8d7d8ea5c09140279d199372dd06e336e78bc1', class: "not-prose grid-layout grid-cols-6 gap-y-8 md:gap-y-12 lg:gap-y-16" }, hAsync("li", { key: 'eaeac5d7de69e2b8a745d4961fb26cf411f4cf91', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, hAsync("p", { key: '44c29035848feb5380b5efb20b37e5f86d65314f', class: "f-body-01 text-center my-4" }, "#1 Positive"), hAsync("div", { key: 'b438024e4b9fe2ede6e1d8193d5021f84d78baeb', class: "coloured" }, hAsync("eds-logo", { key: '196ccaa50454d4b26c14d7187736fec16f89349a', variant: "positive", href: "#" }))), hAsync("li", { key: '9eb5bbaf4081f2265ea60d2d2099ca039f190389', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, hAsync("p", { key: '9b95ee3022aafc4c68ea8bed146dd3780b9ef4f2', class: "f-body-01 text-center my-4" }, "#2 Negative"), hAsync("div", { key: '137e1f0451b41bb66c36151e6967e14002bde4ac', class: "bg-default" }, hAsync("eds-logo", { key: '9d97fade01d3e8b59e69d4ba6758ee41f84ef571', variant: "negative", href: "#" }))))));
|
|
17580
17778
|
}
|
|
17581
17779
|
static get style() { return LogoVariationsHorizontalStyle0; }
|
|
17582
17780
|
static get cmpMeta() { return {
|
|
@@ -17608,7 +17806,7 @@ class LogoVariationsTabs {
|
|
|
17608
17806
|
}
|
|
17609
17807
|
}
|
|
17610
17808
|
render() {
|
|
17611
|
-
return hAsync("div", { key: '
|
|
17809
|
+
return hAsync("div", { key: '5be7df6877ce83e4cdf3652b6e66640e90fb3081', class: "container" }, this.renderContent());
|
|
17612
17810
|
}
|
|
17613
17811
|
static get cmpMeta() { return {
|
|
17614
17812
|
"$flags$": 0,
|
|
@@ -17635,7 +17833,7 @@ class LogoVariationsVertical {
|
|
|
17635
17833
|
this.type = undefined;
|
|
17636
17834
|
}
|
|
17637
17835
|
render() {
|
|
17638
|
-
return (hAsync("div", { key: '
|
|
17836
|
+
return (hAsync("div", { key: '67acdc82a0e7dbc0aa07e6607d31c81939ee5d7a', class: "container" }, hAsync("ul", { key: '8c7eb2ee978a402cd85c570e61eb523721dffdd9', class: "not-prose grid-layout grid-cols-6 gap-y-8 md:gap-y-12 lg:gap-y-16" }, hAsync("li", { key: 'f6620aaf501e6dc5168e5d0d2baa238ce82680fa', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, hAsync("p", { key: 'abeb6b64713250a61476e2947dae5490ca18afea', class: "f-body-01 text-center my-4" }, "#1 Positive"), hAsync("div", { key: '825f3020ce0e73ac80b78e2bbb898c26cb1d2190', class: "mx-auto coloured w-[300px]" }, hAsync("eds-logo", { key: '6aaa41b6beaf9fbcdcce1c6f3130a4db3c97afb4', variant: "positive", href: "#" }))), hAsync("li", { key: '91db370167cecb19689bc2b13d7155a906d14a12', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, hAsync("p", { key: 'b44bf3c628adf0d1f5ca3c1e9dc48e5a6b09a9ee', class: "f-body-01 text-center my-4" }, "#2 Negative"), hAsync("div", { key: '3e9ffec9903d8cfdb38ca64c8a69c201024f593d', class: "mx-auto bg-default w-[300px]" }, hAsync("eds-logo", { key: 'cfb79e36eb78bd046c783cc4f210febfe30e28e9', variant: "negative", href: "#" }))))));
|
|
17639
17837
|
}
|
|
17640
17838
|
static get style() { return LogoVariationsVerticalStyle0; }
|
|
17641
17839
|
static get cmpMeta() { return {
|
|
@@ -17662,7 +17860,7 @@ class LogoWrongUsage {
|
|
|
17662
17860
|
registerInstance(this, hostRef);
|
|
17663
17861
|
}
|
|
17664
17862
|
render() {
|
|
17665
|
-
return (hAsync("div", { key: '
|
|
17863
|
+
return (hAsync("div", { key: 'f2917e2a6ea6fb5e2eb31dd1bc915a20256ff676', class: "container" }, hAsync("ul", { key: 'd80a9c848c64f2603fa0aef5dd6cde3e9947eb64', class: "not-prose grid-layout grid-cols-6 gap-y-8 md:gap-y-12 lg:gap-y-16" }, hAsync("li", { key: 'acbdc5eba5aa42a629e0af955b8b05b693c04280', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, hAsync("div", { key: 'ee377c6fc03df3ea4d36de8f488ff0e3d01795f0', class: "mx-auto no-other-bg-color logo", innerHTML: logoPositive }), hAsync("p", { key: 'ff57d7ac90e5dc0fd03aa3cce651f8a7b05f4215', class: "f-ui-02 text-center" }, "Do not use with backgrounds that make legibility difficult")), hAsync("li", { key: '39ff08699d8640290f529f2bf3bee718770f452a', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, hAsync("div", { key: '9f718c4ff9148444c2b039c4afba117fd84959bf', class: "mx-auto no-other-color logo non-brand-color", innerHTML: logoPositive }), hAsync("p", { key: '263702a71e19f66e5e133d50ff5a05d78334aa22', class: "f-ui-02 text-center" }, "Do not apply other colors")), hAsync("li", { key: '18261985b96396ab2b6fc2a782acd101565756de', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, hAsync("div", { key: 'f6cd02054601479517153821e15c51c07aac549d', class: "mx-auto distorted logo", innerHTML: logoPositive }), hAsync("p", { key: 'cdfd4f9640d3f85a96f194b146a63ff39fb02be6', class: "f-ui-02 text-center" }, "Do not deform the logo")), hAsync("li", { key: '609660c30557cebaa4798f7f13706cf62c5985ce', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, hAsync("div", { key: '80c7f31b812f42ae2de7ab04e8ab237bd09d5951', class: "mx-auto effects logo", innerHTML: logoPositive }), hAsync("p", { key: 'a0ef2f9c5358be703f6e997bf7f2d865ac7e743b', class: "f-ui-02 text-center" }, "Do not apply effects")), hAsync("li", { key: '52d87ca2b6fc2bd650f5051dae0a98a54b9c8681', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, hAsync("div", { key: '78af2276be724f7e989ad46698de80679759d614', class: "mx-auto rotated logo", innerHTML: logoPositive }), hAsync("p", { key: '8fe1680390e358afd2febdac98a5b91f043e3ce3', class: "f-ui-02 text-center" }, "Do not rotate the logo")), hAsync("li", { key: 'dc503648d2ed6aa8b116cd5a3bdcfcf8fdabbe7c', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, hAsync("div", { key: 'b33e68a6e1ea1a21cab8832b46fc8a6305151edf', class: "mx-auto outlined logo", innerHTML: logoPositive }), hAsync("p", { key: '59f356aa9af489175849716b43903567acbb202d', class: "f-ui-02 text-center" }, "Do not apply outlines")), hAsync("li", { key: '9754f0dc1a175ede68a9caf494d2e603e06f9bf1', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, hAsync("div", { key: '1636ab42d0f934b54e44b55c67f99c6f936b02d5', class: "mx-auto" }, hAsync("div", { key: '710300090e0862499e6d712b1155275a1a58ea18', class: "bg-accent p-16" }, hAsync("div", { key: '71792d037786e7cd5321e969fca8421422daa387', class: "text-inverse", innerHTML: logoPositive })), hAsync("p", { key: '185980c11a566e4ad84dfbf5d0c063f1730b2f3b', class: "f-ui-02 text-center" }, "Do not use the green background for the logo version of the logo with backgrounds with the same tones"))))));
|
|
17666
17864
|
}
|
|
17667
17865
|
static get style() { return LogoWrongUsageStyle0; }
|
|
17668
17866
|
static get cmpMeta() { return {
|
|
@@ -17706,7 +17904,7 @@ class SvgRepository {
|
|
|
17706
17904
|
icon: { format: 'svg' },
|
|
17707
17905
|
name: { format: 'bold' }
|
|
17708
17906
|
};
|
|
17709
|
-
return (hAsync("div", { key: '
|
|
17907
|
+
return (hAsync("div", { key: '623499f3d4e926067be51c7049442ea1d0782439', class: "full-width" }, hAsync("eds-table", { key: 'cec77964e4c9c9e0876f2db6e5a199220be58b7c', "table-data": JSON.stringify(svgData), config: JSON.stringify(tableConfig), "rows-per-page": 10, "search-enabled": true, "pagination-enabled": true })));
|
|
17710
17908
|
}
|
|
17711
17909
|
get hostEl() { return getElement(this); }
|
|
17712
17910
|
static get style() { return SvgRepositoryStyle0; }
|
|
@@ -17980,7 +18178,7 @@ class TokenList {
|
|
|
17980
18178
|
render() {
|
|
17981
18179
|
// Check if `show` prop is provided; if not, display all sections
|
|
17982
18180
|
const sectionsToDisplay = this.show ? { [this.show]: colors[this.show] } : colors;
|
|
17983
|
-
return (hAsync("section", { key: '
|
|
18181
|
+
return (hAsync("section", { key: 'de737cb2dcf5942c1e4a8b67bf5c757c9ca6564b', class: "w-full mt-28" }, Object.entries(sectionsToDisplay).map(([sectionName, sectionContent]) =>
|
|
17984
18182
|
// Only render sections that exist in `colors`
|
|
17985
18183
|
sectionContent ? this.renderSection(sectionName, sectionContent) : null)));
|
|
17986
18184
|
}
|
|
@@ -18013,7 +18211,7 @@ class TokenRadii {
|
|
|
18013
18211
|
registerInstance(this, hostRef);
|
|
18014
18212
|
}
|
|
18015
18213
|
render() {
|
|
18016
|
-
return (hAsync("section", { key: '
|
|
18214
|
+
return (hAsync("section", { key: '199f8893d44b2c1087056d8c6d922652e08d78bd', class: "w-full mt-28" }, hAsync("ul", { key: '175e5d717cb3e8a2ef32d3ace1a37fa3b305fda2', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(radii).map(([key, value]) => (hAsync("li", { class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, hAsync("div", { class: `w-full p-16 block lg:flex items-center justify-center text-center border-3 border-soft rounded-${key}` }, hAsync("eds-code-block", { language: "Utility Class", code: `rounded-${key}`, class: "mx-auto min-w-[200px] sm:mb-4 sm:max-w-[200px] mr-auto" }), hAsync("eds-code-block", { code: `border-radius:${value}`, language: "css", class: "mx-auto min-w-[200px] sm:max-w-[200px] ml-auto" }))))))));
|
|
18017
18215
|
}
|
|
18018
18216
|
static get cmpMeta() { return {
|
|
18019
18217
|
"$flags$": 0,
|
|
@@ -18042,7 +18240,7 @@ class TokenRatios {
|
|
|
18042
18240
|
registerInstance(this, hostRef);
|
|
18043
18241
|
}
|
|
18044
18242
|
render() {
|
|
18045
|
-
return (hAsync("section", { key: '
|
|
18243
|
+
return (hAsync("section", { key: '0f19e93b3841aa49c36e1195c25b01aa445158ce', class: "w-full" }, hAsync("eds-section-core", { key: '750e15f4957fa7b0d0e050be22a5fcc06d947203', tag: "div", "section-title": "Aspect Ratios", "heading-level": "h3" }, hAsync("ul", { key: '217447bc36c9ce0ccd309d0712711e30f704f5ef', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(ratios).map(([key, value]) => (hAsync("li", { class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, hAsync("div", { class: "container ratio-box flex items-center justify-center text-center border-2 border-soft", style: {
|
|
18046
18244
|
aspectRatio: value.replace('/', ':'), // Cast to string to resolve TypeScript error
|
|
18047
18245
|
width: '100%', // Full width to show the aspect ratio correctly
|
|
18048
18246
|
maxWidth: '300px'
|
|
@@ -18109,7 +18307,7 @@ class TokenShadows {
|
|
|
18109
18307
|
registerInstance(this, hostRef);
|
|
18110
18308
|
}
|
|
18111
18309
|
render() {
|
|
18112
|
-
return (hAsync("section", { key: '
|
|
18310
|
+
return (hAsync("section", { key: '178756bcd7a0192ed59e4cca5850529ed79d14ff', class: "w-full mt-28" }, hAsync("ul", { key: 'f50430eca17728500d9bf3a074530f29e02708fb', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(shadowTokens).map(([category, tokens]) => Object.entries(tokens).map(([key, value]) => (hAsync("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col items-center mt-16" }, hAsync("div", { class: "w-full p-16 block lg:flex items-center justify-center text-center border-2 border-soft", style: { boxShadow: value } }, hAsync("eds-code-block", { code: `${category}-${key}`, language: "Utility Class", class: "mr-auto sm:mb-4 min-w-[200px]" }), hAsync("eds-code-block", { code: `${value}`, language: "css", class: "ml-auto min-w-[200px]" })))))))));
|
|
18113
18311
|
}
|
|
18114
18312
|
static get cmpMeta() { return {
|
|
18115
18313
|
"$flags$": 0,
|
|
@@ -18129,7 +18327,7 @@ class TokenSpacing {
|
|
|
18129
18327
|
registerInstance(this, hostRef);
|
|
18130
18328
|
}
|
|
18131
18329
|
render() {
|
|
18132
|
-
return (hAsync("div", { key: '
|
|
18330
|
+
return (hAsync("div", { key: '21c919b5124094eb34f820327f439c0198758b2a', class: "w-full" }, hAsync("ul", { key: '9dea1c4eb37380b4cf00c1e2b4ccc3b69eca5536', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, hAsync("li", { key: 'bf719062fc2724411a54076a272acf4d06f8cdad', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, hAsync("div", { key: '6bab4e4c52e273faead36180c744593c5365d012', class: "container p-8 item-center border-2 border-soft" }, hAsync("div", { key: 'b1327b6ce1ccca9f3ea64cc5eac0987a76209e04', class: "spacing-sample m-16 bg-strong" }, hAsync("span", { key: '188476bd66a4dff9fa395275088ef94c92f2afca', class: "f-body-01 text-inverse" }, "Margin: 1rem / m-16")))), hAsync("li", { key: '8ba0cdfbde803aa803b21641e4c15917ccbd8988', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, hAsync("div", { key: 'b1b88688a7ff18ac204d49c0536875c0b5a717ab', class: "container p-8 item-center border-2 border-soft" }, hAsync("div", { key: 'b72362f8a8460253e39927f1efde1115aed0a873', class: "spacing-sample ml-64 bg-strong" }, hAsync("span", { key: '156be8010b2a809d71354ba28c7908f4fe58064f', class: "f-body-01 text-inverse" }, "Margin Left: 4rem / ml-64")))), hAsync("li", { key: '228d4fecc2d4b7f5958048d0d15c548455287392', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, hAsync("div", { key: '9c92a7fe82b51896bc1ee2462f66efa9251c2fcc', class: "container p-8 item-center border-2 border-soft" }, hAsync("div", { key: '7059294203bace35afd2ed57b77807e2db806219', class: "spacing-sample mt-32 bg-strong" }, hAsync("span", { key: '2e8ec24a3c550ca536a5701c04e0bed7844bc297', class: "f-body-01 text-inverse" }, "Margin Top: 2rem / mt-32")))), hAsync("li", { key: 'd79846088a37e1f03a409d11ba69b3ff3cafa5dd', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, hAsync("div", { key: '0bd8e24e7369fd83c3de2fe7e841c0f3e97cd80b', class: "container p-8 item-center border-2 border-soft" }, hAsync("div", { key: 'c502d2567fb9dc49516390a9a8405c31ab324f0a', class: "spacing-sample p-32 bg-strong" }, hAsync("span", { key: '6f07cec99d6fe8c32053ca3c407c336c7a40a64c', class: "f-body-01 text-inverse" }, "Padding: 2rem / p-32")))), hAsync("li", { key: 'f6ddca79e1ab773c7a2f64653fbae0d49c03e071', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, hAsync("div", { key: 'bad00c444c75c5a458f66f8b480b69263e9d1548', class: "container p-8 item-center border-2 border-soft" }, hAsync("div", { key: 'd889c0216ded4bc9fce48d68ab7d8008bf9bd045', class: "spacing-sample pt-32 bg-strong" }, hAsync("span", { key: '3b00250165aeb560641e99b5859266f1cecd7baf', class: "f-body-01 text-inverse" }, "Padding Top: 2rem / pt-32")))), hAsync("li", { key: '53077e307812a3d15f534070e4ceb8dd39e22255', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, hAsync("div", { key: '9e7e1a60ef73524b630845bc686e9a44714c6de7', class: "container p-8 item-center border-2 border-soft" }, hAsync("div", { key: 'c8e3e113b805376f03f9ffe2f2afa985f5e19739', class: "spacing-sample pl-32 bg-strong" }, hAsync("span", { key: '924878b9f3c36c8b83112ed93ba354527037f6bd', class: "f-body-01 text-inverse" }, "Padding Left: 2rem / pl-32")))))));
|
|
18133
18331
|
}
|
|
18134
18332
|
static get cmpMeta() { return {
|
|
18135
18333
|
"$flags$": 0,
|
|
@@ -18377,7 +18575,7 @@ class TokenTypography {
|
|
|
18377
18575
|
registerInstance(this, hostRef);
|
|
18378
18576
|
}
|
|
18379
18577
|
render() {
|
|
18380
|
-
return (hAsync("section", { key: '
|
|
18578
|
+
return (hAsync("section", { key: 'cfb9e2e38963772af466109521bbaedbf5852e2a', class: "w-full" }, hAsync("ul", { key: '452fa03a44c1082ae4c260245b7dcb2df308ef4f', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(typography.typesets)
|
|
18381
18579
|
.filter(([typeKey]) => typeKey !== 'displays') // Exclude "displays"
|
|
18382
18580
|
.flatMap(([typeKey, typeValues]) => Object.entries(typeValues).map(([size, style]) => (hAsync("li", { class: "grid-col-span-12 flex flex-col mt-16" }, hAsync("div", { class: "w-full p-16 border border-soft rounded", style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1.5rem', alignItems: 'center' } }, hAsync("div", { style: {
|
|
18383
18581
|
fontFamily: style.fontFamily || typography.families['plex-sans'],
|
|
@@ -18385,7 +18583,13 @@ class TokenTypography {
|
|
|
18385
18583
|
fontSize: style.fontSize,
|
|
18386
18584
|
lineHeight: style.lineHeight,
|
|
18387
18585
|
letterSpacing: style.letterSpacing
|
|
18388
|
-
} }, hAsync("span", { class: "text-default" }, `${typeKey}`), hAsync("div", { style: {
|
|
18586
|
+
} }, hAsync("span", { class: "text-default" }, `${typeKey}`), hAsync("div", { style: {
|
|
18587
|
+
fontSize: '12px',
|
|
18588
|
+
fontWeight: '400',
|
|
18589
|
+
color: '#7A7B7A',
|
|
18590
|
+
marginTop: '4px',
|
|
18591
|
+
fontFamily: '"IBM Plex Mono", monospace'
|
|
18592
|
+
} }, size, " \u00B7 class: f-", typeKey)), hAsync("div", null, hAsync("eds-code-block", { code: [
|
|
18389
18593
|
`/* Utility: f-${typeKey} | Screen: ${size}:f-${typeKey} */`,
|
|
18390
18594
|
style.fontSize && `font-size: ${style.fontSize};`,
|
|
18391
18595
|
style.lineHeight && `line-height: ${style.lineHeight};`,
|