@undrr/undrr-mangrove 2.0.0 → 2.1.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/README.md +9 -5
- package/components/BookCard.js +2 -2
- package/components/Breadcrumbs.js +2 -2
- package/components/Checkbox.js +2 -2
- package/components/Chips.js +2 -2
- package/components/CopyButton.js +2 -2
- package/components/CtaButton.js +2 -2
- package/components/Drawer.js +3 -3
- package/components/Drawer.js.LICENSE.txt +3 -1
- package/components/EmbedContainer.js +2 -2
- package/components/Footer.js +2 -2
- package/components/FormAction.js +2 -2
- package/components/FormErrorSummary.js +2 -2
- package/components/FormGroup.js +2 -2
- package/components/FullWidth.js +2 -2
- package/components/Gallery.js +3 -3
- package/components/Hero.js +3 -3
- package/components/HighlightBox.js +2 -2
- package/components/HorizontalBookCard.js +3 -3
- package/components/HorizontalBookCard.js.LICENSE.txt +3 -1
- package/components/HorizontalCard.js +3 -3
- package/components/HorizontalCard.js.LICENSE.txt +3 -1
- package/components/IconCard.js +3 -3
- package/components/IconCard.js.LICENSE.txt +3 -1
- package/components/Legend.js +2 -2
- package/components/Loader.js +3 -3
- package/components/MegaMenu.js +3 -3
- package/components/Notice.js +2 -2
- package/components/PageHeader.js +2 -2
- package/components/Pager.js +2 -2
- package/components/ProgressBar.js +9 -0
- package/components/ProgressBar.js.LICENSE.txt +9 -0
- package/components/QuoteHighlight.js +3 -3
- package/components/QuoteHighlight.js.LICENSE.txt +3 -1
- package/components/Radio.js +2 -2
- package/components/Range.js +2 -2
- package/components/ScrollContainer.js +2 -2
- package/components/SegmentedControl.js +2 -2
- package/components/Select.js +2 -2
- package/components/ServiceNotice.js +2 -2
- package/components/ShareButtons.js +3 -3
- package/components/ShowMore.js +3 -3
- package/components/SkipLink.js +2 -2
- package/components/StatsCard.js +3 -3
- package/components/StatsCard.js.LICENSE.txt +3 -1
- package/components/SyndicationSearchWidget.js +3 -3
- package/components/Tab.js +2 -2
- package/components/TextCta.js +3 -3
- package/components/TextCta.js.LICENSE.txt +3 -1
- package/components/TextInput.js +2 -2
- package/components/Textarea.js +2 -2
- package/components/Tree.js +2 -2
- package/components/UserFeedback.js +2 -2
- package/components/VerticalCard.js +3 -3
- package/components/VerticalCard.js.LICENSE.txt +3 -1
- package/components/hydrate.js +3 -3
- package/css/style-all.css +147 -128
- package/css/style-all.css.map +1 -1
- package/css/style-delta.css +147 -128
- package/css/style-delta.css.map +1 -1
- package/css/style-gutenberg.css +12 -12
- package/css/style-gutenberg.css.map +1 -1
- package/css/style-irp.css +147 -128
- package/css/style-irp.css.map +1 -1
- package/css/style-mcr.css +147 -128
- package/css/style-mcr.css.map +1 -1
- package/css/style-preventionweb.css +147 -128
- package/css/style-preventionweb.css.map +1 -1
- package/css/style.css +147 -128
- package/css/style.css.map +1 -1
- package/docs/EDITORIAL-MANUAL.md +193 -0
- package/docs/llms-editorial-manual.txt +200 -0
- package/docs/llms-motion.txt +125 -0
- package/docs/llms-page-building.txt +1140 -0
- package/docs/llms-search-widget.txt +765 -0
- package/error-pages/401.html +1 -1
- package/error-pages/403.html +1 -1
- package/error-pages/404.html +1 -1
- package/error-pages/429.html +1 -1
- package/error-pages/500.html +1 -1
- package/error-pages/502.html +1 -1
- package/error-pages/503.html +1 -1
- package/error-pages/504.html +1 -1
- package/error-pages/5xx.html +1 -1
- package/error-pages/challenge.html +1 -1
- package/error-pages/managed-challenge.html +1 -1
- package/js/cite-this.js +994 -0
- package/js/on-this-page-nav.js +80 -1
- package/js/show-more.js +149 -21
- package/package.json +6 -1
- package/scss/Atom/BaseTypography/Abbr/abbr.scss +1 -1
- package/scss/Atom/BaseTypography/Blockquote/blockquote.scss +1 -1
- package/scss/Atom/BaseTypography/Cite/cite.scss +1 -1
- package/scss/Atom/BaseTypography/Code/code.scss +1 -1
- package/scss/Atom/BaseTypography/Mark/mark.scss +1 -1
- package/scss/Atom/BaseTypography/Quotation/quotation.scss +1 -1
- package/scss/Atom/BaseTypography/Small/small.scss +1 -1
- package/scss/Atom/Colors/color.scss +1 -1
- package/scss/Atom/EmptyState/empty-state.scss +1 -1
- package/scss/Atom/Icons/_icon-definitions.scss +35 -3
- package/scss/Atom/Icons/icons.scss +1 -1
- package/scss/Atom/Images/AuthorImage/author-image.scss +10 -3
- package/scss/Atom/Images/Image/image.scss +1 -1
- package/scss/Atom/Images/ImageCaptionCredit/image-caption-credit.scss +7 -2
- package/scss/Atom/Images/ImageCredit/image-credit.scss +1 -1
- package/scss/Atom/Layout/Container/container.scss +1 -1
- package/scss/Atom/Layout/Grid/grid.scss +1 -1
- package/scss/Atom/Layout/Spacing/spacing.scss +1 -1
- package/scss/Atom/Logo/logo.scss +1 -1
- package/scss/Atom/Navigation/Breadcrumb/breadcrumb.scss +1 -1
- package/scss/Atom/Navigation/MenuItems/menu-items.scss +1 -1
- package/scss/Atom/ReachElement/Details/details.scss +5 -3
- package/scss/Atom/ReachElement/Figcaption/figcaption.scss +1 -1
- package/scss/Atom/StatusLabel/status-label.scss +1 -1
- package/scss/Atom/Table/table.scss +1 -1
- package/scss/Atom/Tag/tag.scss +1 -1
- package/scss/Atom/Video/video.scss +1 -1
- package/scss/Components/Boilerplate/boilerplate.scss +1 -1
- package/scss/Components/Breadcrumbs/breadcrumbs.scss +1 -1
- package/scss/Components/Buttons/Chips/chips.scss +1 -1
- package/scss/Components/Buttons/CopyButton/copy-button.scss +1 -1
- package/scss/Components/Buttons/CtaButton/buttons.scss +1 -1
- package/scss/Components/Buttons/CtaButton/cta-button.scss +1 -1
- package/scss/Components/Buttons/ShareButtons/share-buttons.scss +90 -1
- package/scss/Components/Cards/Card/card.scss +9 -3
- package/scss/Components/Cards/StatsCard/stats-card.scss +9 -2
- package/scss/Components/CiteThis/cite-this.scss +339 -0
- package/scss/Components/CookieConsentBanner/cookie-consent-banner.scss +1 -1
- package/scss/Components/DataViz/Legend/legend.scss +1 -1
- package/scss/Components/ErrorPages/error-pages.scss +1 -1
- package/scss/Components/Footer/footer.scss +1 -1
- package/scss/Components/Forms/Checkbox/checkbox.scss +1 -1
- package/scss/Components/Forms/FormAction/form-action.scss +1 -1
- package/scss/Components/Forms/FormGroup/form-group.scss +1 -1
- package/scss/Components/Forms/InputFields/input-fields.scss +1 -1
- package/scss/Components/Forms/Radio/radio.scss +1 -1
- package/scss/Components/Forms/Range/range.scss +1 -1
- package/scss/Components/Forms/SegmentedControl/segmented-control.scss +1 -1
- package/scss/Components/Forms/Select/select.scss +1 -1
- package/scss/Components/Forms/TextInput/text-input.scss +1 -1
- package/scss/Components/Forms/Textarea/textarea.scss +1 -1
- package/scss/Components/Forms/_form-base.scss +1 -1
- package/scss/Components/Gallery/gallery.scss +41 -16
- package/scss/Components/Hero/hero.scss +166 -1
- package/scss/Components/HighlightBox/highlight-box.scss +1 -1
- package/scss/Components/MegaMenu/mega-menu.scss +43 -122
- package/scss/Components/MegaMenu/megamenu.scss +1 -1
- package/scss/Components/Navigation/Drawer/drawer.scss +11 -1
- package/scss/Components/Navigation/Tree/tree.scss +1 -1
- package/scss/Components/Notice/notice.scss +1 -1
- package/scss/Components/OnThisPageNav/on-this-page-nav.scss +109 -4
- package/scss/Components/PageHeader/page-header.scss +1 -1
- package/scss/Components/Pager/pager.scss +1 -1
- package/scss/Components/PreviewAccess/preview-access.scss +1 -1
- package/scss/Components/ProgressBar/progress-bar.scss +215 -0
- package/scss/Components/QuoteHighlight/quote-highlight.scss +1 -1
- package/scss/Components/ScrollContainer/scroll-container.scss +1 -1
- package/scss/Components/Snackbar/snackbar.scss +1 -1
- package/scss/Components/SyndicationSearchWidget/_deprecated-teaser-hide.scss +1 -1
- package/scss/Components/SyndicationSearchWidget/syndication-search-widget.scss +253 -128
- package/scss/Components/Tab/tab.scss +3 -2
- package/scss/Components/TableOfContents/table-of-contents.scss +1 -1
- package/scss/Components/TextCta/text-cta.scss +1 -1
- package/scss/Components/TextCta/textcta.scss +1 -1
- package/scss/Components/UserFeedback/user-feedback.scss +1 -1
- package/scss/Molecules/ImageCaption/image-caption.scss +17 -3
- package/scss/Molecules/SectionHeader/section-header.scss +1 -1
- package/scss/Molecules/SectionHeader/sectionheader.scss +1 -1
- package/scss/Patterns/HubHeader/hub-header.scss +1 -1
- package/scss/Patterns/RichContent/rich-content.scss +177 -0
- package/scss/Patterns/_shared/pattern-demo.scss +6 -1
- package/scss/Utilities/EmbedContainer/embed-container.scss +1 -1
- package/scss/Utilities/FullWidth/full-width.scss +1 -1
- package/scss/Utilities/Loader/loader.scss +133 -12
- package/scss/Utilities/Normalize/normalize.scss +1 -1
- package/scss/Utilities/PagePatterns/page-patterns.scss +1 -1
- package/scss/Utilities/ShowMore/show-more.scss +7 -1
- package/scss/Utilities/SkipLink/skip-link.scss +1 -1
- package/scss/assets/scss/_components.scss +5 -0
- package/scss/assets/scss/_foundational.scss +23 -8
- package/scss/assets/scss/_mixins.scss +5 -0
- package/scss/assets/scss/_variables.scss +2 -2
package/css/style.css
CHANGED
|
@@ -4,8 +4,8 @@
|
|
|
4
4
|
*
|
|
5
5
|
* Storybook: https://mangrove.undrr.org/
|
|
6
6
|
* LLMs context: https://mangrove.undrr.org/llms.txt
|
|
7
|
-
* Repository: https://github.com/
|
|
8
|
-
* Version: 2.
|
|
7
|
+
* Repository: https://github.com/PreventionWeb/undrr-mangrove
|
|
8
|
+
* Version: 2.1.0
|
|
9
9
|
*
|
|
10
10
|
* ██╗ ██╗███╗ ██╗██████╗ ██████╗ ██████╗
|
|
11
11
|
* ██║ ██║████╗ ██║██╔══██╗██╔══██╗██╔══██╗
|
|
@@ -372,9 +372,8 @@
|
|
|
372
372
|
|
|
373
373
|
/* Font size utilities end */
|
|
374
374
|
/* typography start */*,:after,:before{box-sizing:border-box;overflow-wrap:break-word}html{-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{color:rgb(var(--mg-color-text));font-size:var(--mg-font-size-300);line-height:var(--mg-font-line-height-700)}body,button{font-family:var(--mg-font-family-text)}caption,h1,h2,h3,h4,h5,h6{margin:var(--mg-spacing-100) var(--mg-spacing-0);padding:var(--mg-spacing-0);text-wrap:balance}h1:lang(ar),h2:lang(ar),h3:lang(ar){font-family:var(--mg-font-family-heading)}h1{font-size:var(--mg-font-size-600);letter-spacing:.02em;line-height:1.08}h1,h2{font-weight:700}h2{font-size:var(--mg-font-size-500);line-height:1.1}h3{font-size:var(--mg-font-size-400)}h3,h4,h5{font-weight:600;line-height:1.15}h4,h5{font-size:var(--mg-font-size-300)}h6{font-size:var(--mg-font-size-200);font-weight:700;letter-spacing:.024em;line-height:1.15}p{margin-top:0}ol,ul{list-style-position:outside;margin:0 0 var(--mg-spacing-100);padding-left:var(--mg-spacing-200)}ol li,ul li{margin-bottom:var(--mg-spacing-0);padding-left:var(--mg-spacing-0)}dl{line-height:1.37;margin:var(--mg-spacing-0)}dt{font-weight:600;margin-bottom:var(--mg-spacing-25)}dd{margin-bottom:var(--mg-spacing-50);margin-inline-start:var(--mg-spacing-200)
|
|
375
|
-
/* medium design */}@media (width >= 48em){dd{margin-bottom:var(--mg-spacing-100);margin-inline-start:var(--mg-spacing-300)}}dd+dt{margin-block-start:var(--mg-spacing-100)}header{text-wrap:balance}hr{border:0;border-block-start:2px solid rgb(var(--mg-color-neutral-400));margin-block:var(--mg-spacing-200)}img{height:auto;max-width:100%}a{color:rgb(var(--mg-color-interactive));text-decoration:none}@media (prefers-reduced-motion:no-preference){a{transition:color .15s ease}}a:hover{color:rgb(var(--mg-color-interactive-active));text-decoration:underline}a:focus-visible{box-shadow:0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-color-neutral-0));outline:var(--mg-focus-ring-width) solid rgb(var(--mg-color-focus-ring));outline-offset:var(--mg-focus-ring-offset);text-decoration:underline}.mg-content p a{text-decoration:underline}@media (prefers-reduced-motion:reduce){*,:after,:before{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}[dir=rtl] ol
|
|
376
|
-
/* medium design */}@media (width >= 48em){[dir=rtl] ol
|
|
377
|
-
/* medium design */}@media (width >= 48em){[dir=rtl] ol li,[dir=rtl] ul li{padding-right:.5625rem}}[dir=rtl] h1,[dir=rtl] h2,[dir=rtl] h3,[dir=rtl] h4,[dir=rtl] h5,[dir=rtl] h6{font-weight:700}
|
|
375
|
+
/* medium design */}@media (width >= 48em){dd{margin-bottom:var(--mg-spacing-100);margin-inline-start:var(--mg-spacing-300)}}dd+dt{margin-block-start:var(--mg-spacing-100)}header{text-wrap:balance}hr{border:0;border-block-start:2px solid rgb(var(--mg-color-neutral-400));margin-block:var(--mg-spacing-200)}img{height:auto;max-width:100%}a{color:rgb(var(--mg-color-interactive));text-decoration:none}@media (prefers-reduced-motion:no-preference){a{transition:color .15s ease}}a:hover{color:rgb(var(--mg-color-interactive-active));text-decoration:underline}a:focus-visible{box-shadow:0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-color-neutral-0));outline:var(--mg-focus-ring-width) solid rgb(var(--mg-color-focus-ring));outline-offset:var(--mg-focus-ring-offset);text-decoration:underline}:where(.mg-content p) a:not(:where(.mg-button,.mg-icon-button,[role=button])){text-decoration:underline}@media (prefers-reduced-motion:reduce){*,:after,:before{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}:where([dir=rtl]) ol,:where([dir=rtl]) ul{--mg-list-item-indent-rtl:0.5625rem;direction:rtl;padding-left:0;padding-right:.6875rem
|
|
376
|
+
/* medium design */}@media (width >= 48em){:where([dir=rtl]) ol,:where([dir=rtl]) ul{padding-right:.8125rem}}:where([dir=rtl]) ol li,:where([dir=rtl]) ul li{padding-left:0;padding-right:var(--mg-list-item-indent-rtl)}[dir=rtl] h1,[dir=rtl] h2,[dir=rtl] h3,[dir=rtl] h4,[dir=rtl] h5,[dir=rtl] h6{font-weight:700}
|
|
378
377
|
|
|
379
378
|
/* typography end */
|
|
380
379
|
/**
|
|
@@ -383,7 +382,7 @@
|
|
|
383
382
|
* Cross-browser HTML element reset and foundational base styles ensuring consistent baseline rendering.
|
|
384
383
|
*
|
|
385
384
|
* Full documentation:
|
|
386
|
-
* https://github.com/
|
|
385
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Utilities/Normalize/Normalize.mdx
|
|
387
386
|
*/
|
|
388
387
|
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
|
|
389
388
|
/* Document
|
|
@@ -553,7 +552,7 @@
|
|
|
553
552
|
* Styles for HTML <abbr> elements with subtle dotted underlines and accessible expansion styling.
|
|
554
553
|
*
|
|
555
554
|
* Full documentation:
|
|
556
|
-
* https://github.com/
|
|
555
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Atom/BaseTypography/BaseTypography.mdx
|
|
557
556
|
*/abbr[title]{border-bottom:2px dashed rgb(var(--mg-color-red-900));text-decoration:none}
|
|
558
557
|
|
|
559
558
|
/**
|
|
@@ -562,7 +561,7 @@
|
|
|
562
561
|
* Typography and border accent styles for standard HTML <blockquote> elements.
|
|
563
562
|
*
|
|
564
563
|
* Full documentation:
|
|
565
|
-
* https://github.com/
|
|
564
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Atom/BaseTypography/BaseTypography.mdx
|
|
566
565
|
*/.mg-body blockquote,.mg-content blockquote{font-size:var(--mg-font-size-600);font-weight:600;line-height:1.16;margin:0
|
|
567
566
|
/* medium design */}@media (width >= 48em){.mg-body blockquote,.mg-content blockquote{font-size:var(--mg-font-size-900);line-height:1.15}}
|
|
568
567
|
|
|
@@ -572,7 +571,7 @@
|
|
|
572
571
|
* Typographic styles for HTML <cite> citation references.
|
|
573
572
|
*
|
|
574
573
|
* Full documentation:
|
|
575
|
-
* https://github.com/
|
|
574
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Atom/BaseTypography/BaseTypography.mdx
|
|
576
575
|
*/.mg-body cite,.mg-content cite{display:block;font-style:inherit;font-weight:400;margin-top:.703125rem}
|
|
577
576
|
|
|
578
577
|
/**
|
|
@@ -581,7 +580,7 @@
|
|
|
581
580
|
* Monospace typographic styling for inline <code> elements.
|
|
582
581
|
*
|
|
583
582
|
* Full documentation:
|
|
584
|
-
* https://github.com/
|
|
583
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Atom/BaseTypography/BaseTypography.mdx
|
|
585
584
|
*/.mg-code,code{background:rgb(var(--mg-color-interactive)/.08);border:0;border-radius:var(--mg-radius-form-input);-webkit-box-decoration-break:clone;box-decoration-break:clone;box-shadow:inset 0 0 0 1px rgb(var(--mg-color-interactive)/.2);color:rgb(var(--mg-color-interactive));font-family:var(--mg-font-family-code);font-size:.875em;font-variant-ligatures:none;font-weight:500;line-height:1.4;overflow-wrap:anywhere;padding:var(--mg-spacing-25) var(--mg-spacing-50)}pre{margin-block:var(--mg-spacing-100);overflow-x:auto;position:relative}pre>code{border:none;border-radius:.375rem;overflow-wrap:normal;padding:var(--mg-spacing-150)}.mg-code--block,pre>code{background:rgb(var(--mg-color-neutral-800));color:rgb(var(--mg-color-neutral-0));direction:ltr;display:block;line-height:1.6;unicode-bidi:isolate}.mg-code--block{border:none;border-radius:.25rem;overflow-wrap:anywhere;overflow-x:auto;padding:var(--mg-spacing-100) var(--mg-spacing-150)}pre:has(>code[class*=language-])>code,pre[data-language]>code{padding-block-start:var(--mg-spacing-250)}pre:has(>code[class*=language-]):after,pre[data-language]:after{color:rgb(var(--mg-color-neutral-300));font-family:var(--mg-font-family-text);font-size:var(--mg-font-size-100);font-weight:600;letter-spacing:.1em;line-height:1;pointer-events:none;position:absolute;right:var(--mg-spacing-100);text-transform:uppercase;top:var(--mg-spacing-75);user-select:none}pre[data-language]:after{content:attr(data-language)}pre:has(>code.language-bash):after{content:"Bash"}pre:has(>code.language-javascript):after{content:"JavaScript"}pre:has(>code.language-jsx):after{content:"JSX"}figure.mg-code-block{border-radius:.375rem;margin-block:var(--mg-spacing-100);overflow:hidden}figure.mg-code-block figcaption{background:rgb(var(--mg-color-neutral-700));color:rgb(var(--mg-color-neutral-200));font-family:var(--mg-font-family-text);font-size:var(--mg-font-size-200);font-style:normal;line-height:1.6;padding:var(--mg-spacing-50) var(--mg-spacing-150)}figure.mg-code-block pre{margin-block:0}figure.mg-code-block pre:has(>code[class*=language-]):after,figure.mg-code-block pre[data-language]:after{display:none}figure.mg-code-block pre>code{border-radius:0;padding-block-start:var(--mg-spacing-150)}[dir=rtl] pre:has(>code[class*=language-]):after,[dir=rtl] pre[data-language]:after{left:var(--mg-spacing-100);right:auto}.react-syntax-highlighter-line-number{display:inline-block;min-width:2.5em;padding-right:var(--mg-spacing-100);pointer-events:none;text-align:right;user-select:none}.react-syntax-highlighter-line-number,.token.cdata,.token.comment,.token.doctype,.token.prolog{color:rgb(var(--mg-color-neutral-300))}.token.boolean,.token.keyword{color:var(--sendai-purple-400)}.token.attr-value,.token.char,.token.regex,.token.selector,.token.string{color:var(--sendai-turquoise-400)}.token.number,.token.unit{color:var(--sendai-orange-400)}.token.function{color:rgb(var(--mg-color-blue-200))}.token.class-name,.token.tag{color:rgb(var(--mg-color-blue-100))}.token.attr-name,.token.variable{color:rgb(var(--mg-color-blue-300))}.token.operator,.token.punctuation{color:rgb(var(--mg-color-neutral-100))}
|
|
586
585
|
|
|
587
586
|
/**
|
|
@@ -590,7 +589,7 @@
|
|
|
590
589
|
* Highlight styling for HTML <mark> elements using theme-aware highlight colors.
|
|
591
590
|
*
|
|
592
591
|
* Full documentation:
|
|
593
|
-
* https://github.com/
|
|
592
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Atom/BaseTypography/BaseTypography.mdx
|
|
594
593
|
*/mark{background:var(--mg-color-yellow-light);font-size:var(--mg-font-size-200);padding:var(--mg-spacing-25)
|
|
595
594
|
/* medium design */}@media (width >= 48em){mark{font-size:var(--mg-font-size-300)}}
|
|
596
595
|
|
|
@@ -600,7 +599,7 @@
|
|
|
600
599
|
* Inline quotation typography and glyph styles for <q> elements.
|
|
601
600
|
*
|
|
602
601
|
* Full documentation:
|
|
603
|
-
* https://github.com/
|
|
602
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Atom/BaseTypography/BaseTypography.mdx
|
|
604
603
|
*/q{font-style:italic}
|
|
605
604
|
|
|
606
605
|
/**
|
|
@@ -609,7 +608,7 @@
|
|
|
609
608
|
* Reduced scale typography styles for fine print and secondary metadata (<small>).
|
|
610
609
|
*
|
|
611
610
|
* Full documentation:
|
|
612
|
-
* https://github.com/
|
|
611
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Atom/BaseTypography/BaseTypography.mdx
|
|
613
612
|
*/
|
|
614
613
|
/**
|
|
615
614
|
* Color Utilities
|
|
@@ -617,7 +616,7 @@
|
|
|
617
616
|
* Color swatch and background/text utility helper classes across brand palettes.
|
|
618
617
|
*
|
|
619
618
|
* Full documentation:
|
|
620
|
-
* https://github.com/
|
|
619
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Atom/Colors/color.mdx
|
|
621
620
|
*/
|
|
622
621
|
/**
|
|
623
622
|
* Icons
|
|
@@ -625,7 +624,7 @@
|
|
|
625
624
|
* Base styles, icon sizing, font-family setup, and alignment classes for Mangrove icons.
|
|
626
625
|
*
|
|
627
626
|
* Full documentation:
|
|
628
|
-
* https://github.com/
|
|
627
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Atom/Icons/Icons.mdx
|
|
629
628
|
*/
|
|
630
629
|
/**
|
|
631
630
|
* Icon Definitions
|
|
@@ -634,8 +633,8 @@
|
|
|
634
633
|
* Generated by scripts/icon-build.cjs — do not edit by hand.
|
|
635
634
|
*
|
|
636
635
|
* Full documentation:
|
|
637
|
-
* https://github.com/
|
|
638
|
-
*/.mg-icon-globe:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20M2 12h20"/></svg>')}.mg-icon-languages:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="m5 8 6 6m-7 0 6-6 2-3M2 5h12M7 2h1m14 20-5-10-5 10m2-4h6"/></svg>')}.mg-icon-search:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="m21 21-4.34-4.34"/><circle cx="11" cy="11" r="8"/></svg>')}.mg-icon-calendar-alt:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M8 2v3m8-3v3"/><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M3 9h18M8 13h.01M12 13h.01M16 13h.01M8 17h.01M12 17h.01M16 17h.01"/></svg>')}.mg-icon-chart-bar:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M3 3v16a2 2 0 0 0 2 2h16m-3-4V9m-5 8V5M8 17v-3"/></svg>')}.mg-icon-envelope:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"/><rect width="20" height="16" x="2" y="4" rx="2"/></svg>')}.mg-icon-newspaper:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M15 18h-5m8-4h-8m-6 8h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-4 0v-9a2 2 0 0 1 2-2h2"/><rect width="8" height="4" x="10" y="6" rx="1"/></svg>')}.mg-icon-building:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M10 12h4m-4-4h4m0 13v-3a2 2 0 0 0-4 0v3"/><path d="M6 10H4a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-2"/><path d="M6 21V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v16"/></svg>')}.mg-icon-landmark:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M10 18v-7m1.119-8.795a2 2 0 0 1 1.762 0l7.84 3.846A.5.5 0 0 1 20.5 7h-17a.5.5 0 0 1-.22-.949zM14 18v-7m4 7v-7M3 22h18M6 18v-7"/></svg>')}.mg-icon-graduation-cap:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M21.42 10.922a1 1 0 0 0-.019-1.838L12.83 5.18a2 2 0 0 0-1.66 0L2.6 9.08a1 1 0 0 0 0 1.832l8.57 3.908a2 2 0 0 0 1.66 0zM22 10v6"/><path d="M6 12.5V16a6 3 0 0 0 12 0v-3.5"/></svg>')}.mg-icon-business-time:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M12 12h.01M16 6V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2m14 7a18.15 18.15 0 0 1-20 0"/><rect width="20" height="14" x="2" y="6" rx="2"/></svg>')}.mg-icon-pen-nib:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M15.707 21.293a1 1 0 0 1-1.414 0l-1.586-1.586a1 1 0 0 1 0-1.414l5.586-5.586a1 1 0 0 1 1.414 0l1.586 1.586a1 1 0 0 1 0 1.414z"/><path d="m18 13-1.375-6.874a1 1 0 0 0-.746-.776L3.235 2.028a1 1 0 0 0-1.207 1.207L5.35 15.879a1 1 0 0 0 .776.746L13 18M2.3 2.3l7.286 7.286"/><circle cx="11" cy="11" r="2"/></svg>')}.mg-icon-code-branch:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M15 6a9 9 0 0 0-9 9V3"/><circle cx="18" cy="6" r="3"/><circle cx="6" cy="18" r="3"/></svg>')}.mg-icon-life-ring:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="m4.93 4.93 4.24 4.24m5.66 0 4.24-4.24m-4.24 9.9 4.24 4.24m-9.9-4.24-4.24 4.24"/><circle cx="12" cy="12" r="4"/></svg>')}.mg-icon-lightbulb:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5m0 4h6m-5 4h4"/></svg>')}.mg-icon-cubes:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M2.97 12.92A2 2 0 0 0 2 14.63v3.24a2 2 0 0 0 .97 1.71l3 1.8a2 2 0 0 0 2.06 0L12 19v-5.5l-5-3zM7 16.5l-4.74-2.85M7 16.5l5-3m-5 3v5.17m5-8.17V19l3.97 2.38a2 2 0 0 0 2.06 0l3-1.8a2 2 0 0 0 .97-1.71v-3.24a2 2 0 0 0-.97-1.71L17 10.5zm5 3-5-3m5 3 4.74-2.85M17 16.5v5.17"/><path d="M7.97 4.42A2 2 0 0 0 7 6.13v4.37l5 3 5-3V6.13a2 2 0 0 0-.97-1.71l-3-1.8a2 2 0 0 0-2.06 0zM12 8 7.26 5.15M12 8l4.74-2.85M12 13.5V8"/></svg>')}.mg-icon-sort-alpha-down:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="m3 16 4 4 4-4m-4 4V4m13 4h-5m0 2V6.5a2.5 2.5 0 0 1 5 0V10m-5 4h5l-5 6h5"/></svg>')}.mg-icon-tags:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M13.172 2a2 2 0 0 1 1.414.586l6.71 6.71a2.4 2.4 0 0 1 0 3.408l-4.592 4.592a2.4 2.4 0 0 1-3.408 0l-6.71-6.71A2 2 0 0 1 6 9.172V3a1 1 0 0 1 1-1zM2 7v6.172a2 2 0 0 0 .586 1.414l6.71 6.71a2.4 2.4 0 0 0 3.191.193"/><circle cx="10.5" cy="6.5" r=".5" fill="currentColor"/></svg>')}.mg-icon-power-off:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M12 2v10m6.4-5.4a9 9 0 1 1-12.77.04"/></svg>')}.mg-icon-user:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>')}.mg-icon-file:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"/><path d="M14 2v5a1 1 0 0 0 1 1h5"/></svg>')}.mg-icon-file-alt:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"/><path d="M14 2v5a1 1 0 0 0 1 1h5M10 9H8m8 4H8m8 4H8"/></svg>')}.mg-icon-times:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M18 6 6 18M6 6l12 12"/></svg>')}.mg-icon-link:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>')}.mg-icon-download:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M12 15V3m9 12v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="m7 10 5 5 5-5"/></svg>')}.mg-icon-external-link:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M15 3h6v6m-11 5L21 3m-3 10v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/></svg>')}.mg-icon-filter:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M10 20a1 1 0 0 0 .553.895l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .517-1.341L21.74 4.67A1 1 0 0 0 21 3H3a1 1 0 0 0-.742 1.67l7.225 7.989A2 2 0 0 1 10 14z"/></svg>')}.mg-icon-eye:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/></svg>')}.mg-icon-refresh:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/><path d="M21 3v5h-5m5 4a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/><path d="M8 16H3v5"/></svg>')}.mg-icon-clone:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>')}.mg-icon-share:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><path d="m8.59 13.51 6.83 3.98m-.01-10.98-6.82 3.98"/></svg>')}.mg-icon-qrcode:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><rect width="5" height="5" x="3" y="3" rx="1"/><rect width="5" height="5" x="16" y="3" rx="1"/><rect width="5" height="5" x="3" y="16" rx="1"/><path d="M21 16h-3a2 2 0 0 0-2 2v3m5 0v.01M12 7v3a2 2 0 0 1-2 2H7m-4 0h.01M12 3h.01M12 16v.01M16 12h1m4 0v.01M12 21v-1"/></svg>')}.mg-icon-rss:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M4 11a9 9 0 0 1 9 9M4 4a16 16 0 0 1 16 16"/><circle cx="5" cy="19" r="1"/></svg>')}.mg-icon-left:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="m12 19-7-7 7-7m7 7H5"/></svg>')}.mg-icon-right:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M5 12h14m-7-7 7 7-7 7"/></svg>')}.mg-icon-angle-circled-left:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="m14 16-4-4 4-4"/></svg>')}.mg-icon-angle-circled-right:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="m10 8 4 4-4 4"/></svg>')}.mg-icon-menu:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M4 5h16M4 12h16M4 19h16"/></svg>')}.mg-icon-info-circle:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4m0-4h.01"/></svg>')}.mg-icon-handshake:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="m11 17 2 2a1 1 0 1 0 3-3"/><path d="m14 14 2.5 2.5a1 1 0 1 0 3-3l-3.88-3.88a3 3 0 0 0-4.24 0l-.88.88a1 1 0 1 1-3-3l2.81-2.81a5.79 5.79 0 0 1 7.06-.87l.47.28a2 2 0 0 0 1.42.25L21 4"/><path d="m21 3 1 11h-2M3 3 2 14l6.5 6.5a1 1 0 1 0 3-3M3 4h8"/></svg>')}.mg-icon-map:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M14.106 5.553a2 2 0 0 0 1.788 0l3.659-1.83A1 1 0 0 1 21 4.619v12.764a1 1 0 0 1-.553.894l-4.553 2.277a2 2 0 0 1-1.788 0l-4.212-2.106a2 2 0 0 0-1.788 0l-3.659 1.83A1 1 0 0 1 3 19.381V6.618a1 1 0 0 1 .553-.894l4.553-2.277a2 2 0 0 1 1.788 0zm.894.211v15M9 3.236v15"/></svg>')}.mg-icon-bar-chart:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M3 3v16a2 2 0 0 0 2 2h16m-3-4V9m-5 8V5M8 17v-3"/></svg>')}.mg-icon-close:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M18 6 6 18M6 6l12 12"/></svg>')}.mg-icon-copy:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>')}.mg-icon-arrow-left:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="m12 19-7-7 7-7m7 7H5"/></svg>')}.mg-icon-arrow-right:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M5 12h14m-7-7 7 7-7 7"/></svg>')}.mg-icon-hamburger:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M4 5h16M4 12h16M4 19h16"/></svg>')}.mg-icon-calendar:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M8 2v3m8-3v3"/><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M3 9h18M8 13h.01M12 13h.01M16 13h.01M8 17h.01M12 17h.01M16 17h.01"/></svg>')}.mg-icon-reload:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/><path d="M21 3v5h-5m5 4a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/><path d="M8 16H3v5"/></svg>')}.mg-icon-exclamation-triangle:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3M12 9v4m0 4h.01"/></svg>')}.mg-icon-circle-plus:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M8 12h8m-4-4v8"/></svg>')}.mg-icon-user-circle:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="10" r="3"/><path d="M7 20.662V19a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v1.662"/></svg>')}.mg-icon-user-tag:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M11.5 15H7a4 4 0 0 0-4 4v2m18.378-4.374a1 1 0 0 0-3.004-3.004l-4.01 4.012a2 2 0 0 0-.506.854l-.837 2.87a.5.5 0 0 0 .62.62l2.87-.837a2 2 0 0 0 .854-.506z"/><circle cx="10" cy="7" r="4"/></svg>')}.mg-icon-sign-out-alt:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="m16 17 5-5-5-5m5 5H9m0 9H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/></svg>')}.mg-icon-earthquake:before{--mg-icon-svg:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 40 48'%3E%3Cpath d='M39.6 18 20.7.3c-.4-.4-1-.4-1.4 0L.4 18c-.2.3-.4.6-.4 1v28c0 .6.4 1 1 1h13.2l8.9-8.9-8.4-7.6c-.5-.4-.7-.9-.7-1.5s.3-1.1.7-1.5l5.4-4.6-3.5-3.5c-.8-.8-.8-2 0-2.8l4-4c.8-.8 2-.8 2.8 0s.8 2 0 2.8L20.8 19l3.6 3.6q.6.6.6 1.5c0 .6-.3 1.1-.7 1.4L19 30l8.3 7.5c.8.7.9 2 .1 2.8l-.1.1-7.5 7.6H39c.6 0 1-.4 1-1V19c0-.4-.2-.7-.4-1' style='fill:%23011e41'/%3E%3C/svg%3E")}.mg-icon-tsunami:before{--mg-icon-svg:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 48 48'%3E%3Cpath d='m47.9 19.5-7.8-5.4h-.3L32 19.5c-.1 0-.1.1-.1.2v6.4h-.7c-1.6 0-3.2.4-4.6 1.2-.8.5-1.7.8-2.7.8-3.3-.1-5.9-2.7-6-6-.1-3.1 2.4-5.8 5.5-5.9.9 0 1.8.2 2.5.7 1 .5 2.2.2 2.7-.8s.2-2.2-.8-2.7q-2.1-1.2-4.5-1.2c-5.4.1-9.6 4.5-9.5 9.9.1 5.5 4.5 9.8 10 10 1.6 0 3.2-.4 4.6-1.2.8-.5 1.7-.8 2.7-.8s1.9.2 2.7.8c1.2.7 2.6 1.2 4 1.2h.7c1.6 0 3.2-.4 4.6-1.2.5-.3 1.1-.6 1.7-.7h1c.7 0 1.3.1 2 .2V19.6c.2 0 .2-.1.1-.1M46 42c-1.6 0-3.2.4-4.6 1.2-1.7 1-3.8 1-5.4 0-1.4-.8-3-1.3-4.6-1.2-1.6 0-3.2.4-4.6 1.2-.9.6-1.8.8-2.8.8s-1.9-.2-2.7-.8c-1.4-.8-3-1.3-4.6-1.2-1.6 0-3.2.4-4.6 1.2-.8.5-1.7.8-2.7.8s-1.9-.2-2.7-.8C5.2 42.4 3.6 42 2 42c-1.1 0-2 .9-2 2s.9 2 2 2c1 0 1.9.2 2.7.8 1.4.8 3 1.3 4.6 1.2 1.6 0 3.2-.4 4.6-1.2.8-.5 1.7-.8 2.7-.8s1.9.2 2.7.8c1.4.8 3 1.3 4.6 1.2 1.6 0 3.2-.4 4.6-1.2 1.7-1 3.8-1 5.4 0 2.9 1.7 6.4 1.7 9.3 0 .9-.6 1.8-.8 2.8-.8 1.1 0 2-.9 2-2s-.9-2-2-2m0-8c-1.6 0-3.2.4-4.6 1.2-1.7 1-3.8 1-5.4 0-1.4-.8-3-1.3-4.6-1.2-1.6 0-3.2.4-4.6 1.2-.9.6-1.8.8-2.8.8s-1.9-.2-2.7-.8c-1.4-.8-3-1.3-4.6-1.2-1.6 0-3.2.4-4.6 1.2-.8.5-1.7.8-2.7.8s-1.9-.2-2.7-.8C5.2 34.4 3.6 34 2 34c-1.1 0-2 .9-2 2s.9 2 2 2c1 0 1.9.2 2.7.8 1.4.8 3 1.3 4.6 1.2 1.6 0 3.2-.4 4.6-1.2.8-.5 1.7-.8 2.7-.8s1.9.2 2.7.8c1.4.8 3 1.3 4.6 1.2 1.6 0 3.2-.4 4.6-1.2 1.7-1 3.8-1 5.4 0 2.9 1.7 6.4 1.7 9.3 0 .9-.6 1.8-.8 2.8-.8 1.1 0 2-.9 2-2s-.9-2-2-2' style='fill:%23011e41'/%3E%3Cpath d='M4.1 31.1c1.1 0 2-.9 2-2 0-.3-.1-.6-.2-.9-4.2-8.1-1.1-18.1 7-22.3 2.4-1.2 5-1.9 7.6-1.9 4.2.1 8.1 1.7 11.1 4.5.8.7 2.1.7 2.8-.1s.7-2.1-.1-2.8C30.6 2.1 25.7.1 20.5 0 9.2 0 0 9.2 0 20.5c0 3.3.8 6.6 2.3 9.5.4.7 1.1 1.1 1.8 1.1' style='fill:%23011e41'/%3E%3C/svg%3E")}.mg-icon-flood:before{--mg-icon-svg:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 48 48'%3E%3Cpath d='M47.8 12 33.2.1q-.15-.15-.3 0L18.2 12c-.1.1-.2.2-.2.4v17.7c1.2.2 2.3.5 3.3 1.1.8.6 1.7.8 2.7.8s1.9-.2 2.7-.8c1.4-.8 3-1.3 4.6-1.2 1.6 0 3.2.4 4.6 1.2 1.7 1 3.8 1 5.4 0 1.4-.8 3-1.3 4.6-1.2.7 0 1.3.1 2 .2V12.4c.1-.2 0-.3-.1-.4M46 42c-1.6 0-3.2.4-4.6 1.2-1.7 1-3.8 1-5.4 0-1.4-.8-3-1.3-4.6-1.2-1.6 0-3.2.4-4.6 1.2-.9.6-1.8.8-2.8.8s-1.9-.2-2.7-.8c-1.4-.8-3-1.3-4.6-1.2-1.6 0-3.2.4-4.6 1.2-.8.5-1.8.8-2.7.8-1 0-1.9-.2-2.7-.8C5.2 42.4 3.6 42 2 42c-1.1 0-2 .9-2 2s.9 2 2 2c1 0 1.9.2 2.7.8 1.4.8 3 1.3 4.6 1.2 1.6 0 3.2-.4 4.6-1.2.8-.5 1.8-.8 2.7-.8 1 0 1.9.2 2.7.8 1.4.8 3 1.3 4.6 1.2 1.6 0 3.2-.4 4.6-1.2 1.7-1 3.8-1 5.4 0 2.9 1.7 6.4 1.7 9.3 0 .9-.6 1.8-.8 2.8-.8 1.1 0 2-.9 2-2s-.9-2-2-2m0-8c-1.6 0-3.2.4-4.6 1.2-1.7 1-3.8 1-5.4 0-1.4-.8-3-1.3-4.6-1.2-1.6 0-3.2.4-4.6 1.2-.9.6-1.8.8-2.8.8s-1.9-.2-2.7-.8c-1.4-.8-3-1.3-4.6-1.2-1.6 0-3.2.4-4.6 1.2-.8.5-1.7.8-2.7.8s-1.9-.2-2.7-.8C5.2 34.4 3.6 34 2 34c-1.1 0-2 .9-2 2s.9 2 2 2c1 0 1.9.2 2.7.8 1.4.8 3 1.3 4.6 1.2 1.6 0 3.2-.4 4.6-1.2.8-.5 1.7-.8 2.7-.8s1.9.2 2.7.8c1.4.8 3 1.3 4.6 1.2 1.6 0 3.2-.4 4.6-1.2 1.7-1 3.8-1 5.4 0 2.9 1.7 6.4 1.7 9.3 0 .9-.6 1.8-.8 2.8-.8 1.1 0 2-.9 2-2s-.9-2-2-2' style='fill:%23011e41'/%3E%3C/svg%3E")}.mg-icon-flash-flood:before{--mg-icon-svg:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 48 48'%3E%3Cpath d='M1.5 9h11.4l-3.4 3.4c-.6.6-.6 1.5 0 2.1s1.5.6 2.1 0l6-6c.6-.6.6-1.5 0-2.1l-6-6C11-.1 10-.1 9.4.4s-.5 1.6 0 2.2L12.9 6H1.5C.7 6 0 6.7 0 7.5S.7 9 1.5 9m46.3 3L33.2.1q-.15-.15-.3 0L18.2 12c-.1.1-.2.2-.2.4v17.7c1.2.2 2.3.5 3.3 1.1.8.6 1.7.8 2.7.8s1.9-.2 2.7-.8c1.4-.8 3-1.3 4.6-1.2 1.6 0 3.2.4 4.6 1.2 1.7 1 3.8 1 5.4 0 1.4-.8 3-1.3 4.6-1.2.7 0 1.3.1 2 .2V12.4c.1-.2 0-.3-.1-.4M46 42c-1.6 0-3.2.4-4.6 1.2-1.7 1-3.8 1-5.4 0-1.4-.8-3-1.3-4.6-1.2-1.6 0-3.2.4-4.6 1.2-.9.6-1.8.8-2.8.8s-1.9-.2-2.7-.8c-1.4-.8-3-1.3-4.6-1.2-1.6 0-3.2.4-4.6 1.2-.8.5-1.8.8-2.7.8-1 0-1.9-.2-2.7-.8C5.2 42.4 3.6 42 2 42c-1.1 0-2 .9-2 2s.9 2 2 2c1 0 1.9.2 2.7.8 1.4.8 3 1.3 4.6 1.2 1.6 0 3.2-.4 4.6-1.2.8-.5 1.8-.8 2.7-.8 1 0 1.9.2 2.7.8 1.4.8 3 1.3 4.6 1.2 1.6 0 3.2-.4 4.6-1.2 1.7-1 3.8-1 5.4 0 2.9 1.7 6.4 1.7 9.3 0 .9-.6 1.8-.8 2.8-.8 1.1 0 2-.9 2-2s-.9-2-2-2m0-8c-1.6 0-3.2.4-4.6 1.2-1.7 1-3.8 1-5.4 0-1.4-.8-3-1.3-4.6-1.2-1.6 0-3.2.4-4.6 1.2-.9.6-1.8.8-2.8.8s-1.9-.2-2.7-.8c-1.4-.8-3-1.3-4.6-1.2-1.6 0-3.2.4-4.6 1.2-.8.5-1.7.8-2.7.8s-1.9-.2-2.7-.8C5.2 34.4 3.6 34 2 34c-1.1 0-2 .9-2 2s.9 2 2 2c1 0 1.9.2 2.7.8 1.4.8 3 1.3 4.6 1.2 1.6 0 3.2-.4 4.6-1.2.8-.5 1.7-.8 2.7-.8s1.9.2 2.7.8c1.4.8 3 1.3 4.6 1.2 1.6 0 3.2-.4 4.6-1.2 1.7-1 3.8-1 5.4 0 2.9 1.7 6.4 1.7 9.3 0 .9-.6 1.8-.8 2.8-.8 1.1 0 2-.9 2-2s-.9-2-2-2' style='fill:%23011e41'/%3E%3C/svg%3E")}.mg-icon-cyclone:before{--mg-icon-svg:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 48 48'%3E%3Cpath d='M47.6 24.3c-.9-1.5-2.7-2-4.1-1.2l-4.6 2.7c.4-3.1-.2-6.3-1.8-9.1 0-.1-.1-.1-.1-.2l-8.7-15c-.8-1.4-2.6-1.9-4-1.1h-.1c-1.4.8-1.9 2.6-1.1 4L25.8 9c-3.2-.4-6.5.3-9.3 1.9l-.1.1-15 8.6c-1.4.8-1.9 2.6-1.1 4v.1c.8 1.4 2.6 1.9 4 1.1L9 22.1c-.4 3.2.3 6.4 1.9 9.2v.1l8.7 15c.8 1.4 2.6 1.9 4 1.1h.1c1.4-.8 1.9-2.6 1.1-4l-2.7-4.6c3.1.4 6.2-.2 8.9-1.7.1-.1.2-.1.4-.2l15-8.7c1.6-.8 2-2.6 1.2-4m-31.4 4.2c-2.5-4.3-1-9.7 3.2-12.3h.1c.1 0 0 0 0 0 4.3-2.4 9.7-1 12.2 3.3v.1c0 .1 0 0 0 0 2.4 4.3 1 9.8-3.3 12.3-4.2 2.4-9.7.9-12.2-3.4' style='fill:%23011e41'/%3E%3C/svg%3E")}.mg-icon-drought:before{--mg-icon-svg:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 48 48'%3E%3Cpath d='M45.5 43H35V20c0-2.2 1.8-4 4-4s4 1.8 4 4v.7c-1.2.6-2 1.8-2 3.2 0 1.7 2.9 5.4 3.4 6.1 0 0 .1.1.2 0 .5-.7 3.4-4.4 3.4-6.1 0-1.3-.8-2.6-2-3.2V20c0-3.8-3.1-6.9-7-7-3.9 0-7 3.1-7 7v5h-3c-2.6.3-4.7 2.3-5 5v1.7c-1.2.6-2 1.8-2 3.2 0 1.7 2.9 5.4 3.4 6.1 0 0 .1.1.2 0 .5-.7 3.4-4.4 3.4-6.1 0-1.3-.8-2.6-2-3.2v-1.2c0-1.4 1.1-2.5 2.5-2.5H32v15H2.5C1.1 43 0 44.1 0 45.5S1.1 48 2.5 48h43c1.4 0 2.5-1.1 2.5-2.5S46.9 43 45.5 43m-33-37c.8 0 1.5-.7 1.5-1.5v-3c0-.8-.7-1.5-1.5-1.5S11 .7 11 1.5v3c0 .8.7 1.5 1.5 1.5M11 20.5v3c0 .8.7 1.5 1.5 1.5s1.5-.7 1.5-1.5v-3c0-.8-.7-1.5-1.5-1.5s-1.5.7-1.5 1.5m8.2-12.6 2.1-2.1c.6-.6.6-1.5 0-2.1s-1.5-.6-2.1 0l-2.1 2.1c-.6.6-.6 1.5 0 2.1s1.5.6 2.1 0M5.8 17.1l-2.1 2.1c-.6.6-.6 1.5 0 2.1s1.5.6 2.1 0l2.1-2.1c.6-.6.6-1.5 0-2.1s-1.5-.6-2.1 0M19 12.5c0 .8.7 1.5 1.5 1.5h3c.8 0 1.5-.7 1.5-1.5s-.7-1.5-1.5-1.5h-3c-.8 0-1.5.7-1.5 1.5M1.5 14h3c.8 0 1.5-.7 1.5-1.5S5.3 11 4.5 11h-3c-.8 0-1.5.7-1.5 1.5S.7 14 1.5 14m15.6 3.1c-.6.6-.6 1.5 0 2.1l2.1 2.1c.6.6 1.5.6 2.1 0s.6-1.5 0-2.1l-2.1-2.1c-.6-.6-1.5-.6-2.1 0M5.8 7.9c.6.6 1.5.6 2.1 0s.6-1.5 0-2.1L5.8 3.7c-.6-.6-1.5-.6-2.1 0s-.6 1.5 0 2.1z' style='fill:%23011e41'/%3E%3Ccircle cx='12.5' cy='12.5' r='4.5' style='fill:%23011e41'/%3E%3C/svg%3E")}.mg-icon-volcano:before{--mg-icon-svg:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 48 48'%3E%3Cpath d='M47.9 47.2 29.3 29.6c-.7-.7-1.7-.8-2.5-.3-1.7 1.2-3.9 1.2-5.6 0-.8-.5-1.8-.4-2.5.3L.1 47.2c-.2.2-.2.5 0 .7.1 0 .3.1.4.1h47c.3 0 .5-.2.5-.5 0-.1-.1-.3-.1-.3M25 24.5c0 .8.7 1.5 1.5 1.5s1.5-.7 1.5-1.5v-8c-.2-3.4 2.4-6.3 5.8-6.4 2.5-.1 4.7 1.8 4.8 4.4.1 1.9-1.3 3.5-3.2 3.6-1.3-.1-2.4-1.1-2.5-2.4 0-.8-.7-1.5-1.6-1.4-.8 0-1.5.7-1.4 1.6.2 3 2.7 5.3 5.7 5.1 3.5-.2 6.2-3.2 6.1-6.7-.2-4.2-3.8-7.4-8-7.2-5 .2-8.9 4.5-8.7 9.5zM14.2 11.9c.8 0 1.5-.6 1.6-1.4 0-.8-.6-1.5-1.4-1.6-1.4-.1-2.5-1.3-2.4-2.6.1-1.9 1.7-3.4 3.6-3.3 2.6.2 4.6 2.4 4.4 5v16.5c0 .8.7 1.5 1.5 1.5s1.5-.7 1.5-1.5V8.1c.2-4.2-3-7.8-7.3-8.1C12.2-.2 9.2 2.6 9 6.1c-.1 3 2.2 5.6 5.2 5.8' style='fill:%23011e41'/%3E%3C/svg%3E")}.mg-icon-landslide:before{--mg-icon-svg:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 48 48'%3E%3Cpath d='M47.6 19.7c-.4-1.1-1.3-2-2.4-2.4s-2.4-.4-3.5 0c-.7.3-1 1.2-.6 1.8v.1c.3.6 1 .9 1.7.7.4-.1.8 0 1.2.1.3.1.6.4.8.8.4 1.1-.1 2.4-1.2 2.9-.8.3-1.7.3-2.5 0s-1.4-.9-1.7-1.7L32.9 7.9c-.4-.7-1.2-1.1-2-.7-.7.4-1.1 1.2-.7 2l6.5 14.1c.6 1.5 1.8 2.7 3.3 3.3.7.3 1.6.5 2.4.5s1.6-.2 2.4-.5c2.6-1.2 3.9-4.2 2.8-6.9M21 7.3c-.5-1.1-1.8-1.6-3-1.1-.5.2-.9.6-1.1 1.1L.2 44.8c-.5 1.1 0 2.5 1.1 3 .3.1.6.2 1 .2h33.5c1.2 0 2.3-1 2.3-2.2 0-.3-.1-.6-.2-.9zm16.1 2.2c.2.3.5.5.9.5h5c.4 0 .7-.2.9-.5l2-4c.2-.3.2-.7 0-1l-2-4c-.2-.3-.5-.5-.9-.5h-5c-.4 0-.7.2-.9.5l-2 4c-.2.3-.2.7 0 1z' style='fill:%23011e41'/%3E%3C/svg%3E")}.mg-icon-analysis:before{--mg-icon-svg:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ctitle%3EAsset 734%3C/title%3E%3Cg data-name='Layer 2'%3E%3Cpath d='M8.38 33.8 1.2 40.98a4.115 4.115 0 0 0 5.82 5.82l7.18-7.18a24 24 0 0 1-5.82-5.82M22 20h-4a1.003 1.003 0 0 0-1 1v4.94a12.57 12.57 0 0 0 6 5.52V21a1.003 1.003 0 0 0-1-1m16-6h-4a1.003 1.003 0 0 0-1 1v16.46a12.57 12.57 0 0 0 6-5.52V15a1.003 1.003 0 0 0-1-1m-8 3h-4a1.003 1.003 0 0 0-1 1v14.14a12.7 12.7 0 0 0 6 0V18a1.003 1.003 0 0 0-1-1' style='fill:%23009edb'/%3E%3Cpath d='M28 0a20 20 0 1 0 20 20A19.995 19.995 0 0 0 28 0m11 30.18A15 15 0 0 1 13 20a15 15 0 1 1 26 10.18' style='fill:%23009edb'/%3E%3C/g%3E%3C/svg%3E")}.mg-icon-assessment:before{--mg-icon-svg:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ctitle%3EAsset 735%3C/title%3E%3Cg data-name='Layer 2'%3E%3Cpath d='M2 11h2.23a8.993 8.993 0 0 0 17.54 0h4.46a8.993 8.993 0 0 0 17.54 0H46a2 2 0 0 0 0-4h-2.23a8.993 8.993 0 0 0-17.54 0h-4.46A8.993 8.993 0 0 0 4.23 7H2a2 2 0 0 0 0 4m28.424-4A4.931 4.931 0 1 1 30 9a5 5 0 0 1 .424-2m-22 0A4.931 4.931 0 1 1 8 9a5 5 0 0 1 .424-2M47 23H17a1.003 1.003 0 0 0-1 1v3.99h15A3.013 3.013 0 0 1 34.01 31v17H48V24a1.003 1.003 0 0 0-1-1' style='fill:%23009edb'/%3E%3Cpath d='M30 30H2a2.006 2.006 0 0 0-2 2v15.93l.07.07h31.92l.01-.01V32a2.006 2.006 0 0 0-2-2m-4.5 15h-19a1.5 1.5 0 0 1 0-3h19a1.5 1.5 0 0 1 0 3m0-6h-19a1.5 1.5 0 0 1 0-3h19a1.5 1.5 0 0 1 0 3' style='fill:%23009edb'/%3E%3C/g%3E%3C/svg%3E")}.mg-icon-coordination:before{--mg-icon-svg:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ctitle%3EAsset 673%3C/title%3E%3Cg data-name='Layer 2'%3E%3Ccircle cx='24' cy='24' r='6' style='fill:%23009edb'/%3E%3Cpath d='M32 18h9a2 2 0 0 0 0-4h-4.172L47.414 3.414A2 2 0 1 0 44.586.586L34 11.172V7a2 2 0 0 0-4 0v9a2 2 0 0 0 2 2m-20.828-4H7a2 2 0 0 0 0 4h9a2 2 0 0 0 2-2V7a2 2 0 0 0-4 0v4.172L3.414.586A2 2 0 0 0 .586 3.414Zm25.656 20H41a2 2 0 0 0 0-4h-9a2 2 0 0 0-2 2v9a2 2 0 0 0 4 0v-4.172l10.586 10.586a2 2 0 0 0 2.828-2.828ZM16 30H7a2 2 0 0 0 0 4h4.172L.586 44.586a2 2 0 1 0 2.828 2.828L14 36.828V41a2 2 0 0 0 4 0v-9a2 2 0 0 0-2-2' style='fill:%23009edb'/%3E%3C/g%3E%3C/svg%3E")}.mg-icon-data:before{--mg-icon-svg:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 48'%3E%3Ctitle%3EAsset 766%3C/title%3E%3Cg data-name='Layer 2'%3E%3Cpath d='M33 0H3a3 3 0 0 0-3 3v42a3 3 0 0 0 3 3h30a3 3 0 0 0 3-3V3a3 3 0 0 0-3-3m-1 44H4V4h28Z' style='fill:%23009edb'/%3E%3Cpath d='m22.56 13.56.44-.439V20.5a1.5 1.5 0 0 0 3 0v-11a1.5 1.5 0 0 0-2.56-1.06l-3 3a1.5 1.5 0 0 0 2.12 2.12m-8.486 12.554a1.5 1.5 0 0 0-1.635.325l-3 3a1.5 1.5 0 0 0 2.122 2.122l.439-.44V38.5a1.5 1.5 0 0 0 3 0v-11a1.5 1.5 0 0 0-.926-1.386M22 40h3a3 3 0 0 0 3-3v-8a3 3 0 0 0-3-3h-3a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3m0-11h3v8h-3Zm-11-7h3a3 3 0 0 0 3-3v-8a3 3 0 0 0-3-3h-3a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3m0-11h3v8h-3Z' style='fill:%23009edb'/%3E%3C/g%3E%3C/svg%3E")}.mg-icon-help:before{--mg-icon-svg:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 48'%3E%3Ctitle%3EAsset 951%3C/title%3E%3Cg data-name='Layer 2'%3E%3Ccircle cx='14' cy='44' r='4' style='fill:%23009edb'/%3E%3Cpath d='M28 14a14 14 0 0 0-28 0 4 4 0 0 0 8 0 6 6 0 1 1 6 6 4 4 0 0 0-4 4v9a4 4 0 0 0 8 0v-5.59A14.02 14.02 0 0 0 28 14' style='fill:%23009edb'/%3E%3C/g%3E%3C/svg%3E")}.mg-icon-information-management:before{--mg-icon-svg:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 44.064'%3E%3Ctitle%3EAsset 745%3C/title%3E%3Cpath d='M2 8.017h4.317a6.007 6.007 0 0 0 11.334 0H46a2 2 0 0 0 0-4H17.651a6.006 6.006 0 0 0-11.334 0H2a2 2 0 0 0 0 4M11.984 4a2.016 2.016 0 1 1-2.016 2.017A2.02 2.02 0 0 1 11.984 4M46 36.049H25.683a6.006 6.006 0 0 0-11.334 0H2a2 2 0 0 0 0 4h12.349a6.007 6.007 0 0 0 11.334 0H46a2 2 0 0 0 0-4m-25.984 4.015a2.016 2.016 0 1 1 2.016-2.015 2.02 2.02 0 0 1-2.016 2.015M46 20.032h-4.317a6.007 6.007 0 0 0-11.334 0H2a2 2 0 0 0 0 4h28.349a6.006 6.006 0 0 0 11.334 0H46a2 2 0 0 0 0-4m-9.984 4.017a2.016 2.016 0 1 1 2.016-2.017 2.02 2.02 0 0 1-2.016 2.017' data-name='Layer 2' style='fill:%23009edb'/%3E%3C/svg%3E")}.mg-icon-location:before{--mg-icon-svg:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 47.867'%3E%3Ctitle%3EAsset 769%3C/title%3E%3Cpath d='M16 0C7.16 0 0 7.6 0 16.96c0 8.06 11.83 25.67 15.15 30.45a1.018 1.018 0 0 0 1.7 0C20.17 42.63 32 25.02 32 16.96 32 7.6 24.84 0 16 0m0 23.87a8 8 0 1 1 8-8 8 8 0 0 1-8 8' data-name='Layer 2' style='fill:%23009edb'/%3E%3C/svg%3E")}.mg-icon-monitoring:before{--mg-icon-svg:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ctitle%3EAsset 752%3C/title%3E%3Cg data-name='Layer 2'%3E%3Cpath d='M8.38 33.8 1.2 40.98a4.115 4.115 0 0 0 5.82 5.82l7.18-7.18a24 24 0 0 1-5.82-5.82M28 0a20 20 0 1 0 20 20A19.995 19.995 0 0 0 28 0m11 30.18A15 15 0 0 1 13 20a15 15 0 1 1 26 10.18' style='fill:%23009edb'/%3E%3Cpath d='m39.414 18.586-6-6a2 2 0 1 0-2.828 2.828L33.172 18H18a2 2 0 0 0 0 4h15.172l-2.586 2.586a2 2 0 1 0 2.828 2.828l6-6a2 2 0 0 0 0-2.828' style='fill:%23009edb'/%3E%3C/g%3E%3C/svg%3E")}.mg-icon-notification:before{--mg-icon-svg:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 38 48'%3E%3Ctitle%3EAsset 958%3C/title%3E%3Cpath d='M18 48h2a4 4 0 0 0 4-4H14a4 4 0 0 0 4 4m15.5-15h-.167l-1.88-14.1A12.55 12.55 0 0 0 24 9.048V5a5 5 0 0 0-10 0v4.048A12.55 12.55 0 0 0 6.547 18.9L4.667 33H4.5a4.5 4.5 0 0 0 0 9h29a4.5 4.5 0 0 0 0-9M19 3a2 2 0 1 1-2 2 2 2 0 0 1 2-2' data-name='Layer 2' style='fill:%23009edb'/%3E%3C/svg%3E")}.mg-icon-print:before{--mg-icon-svg:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 42'%3E%3Ctitle%3EAsset 936%3C/title%3E%3Cg data-name='Layer 2'%3E%3Cpath d='M44 1c0-.552-.689-1-1.538-1H5.538C4.688 0 4 .448 4 1v3h40Zm2 5H2a2.006 2.006 0 0 0-2 2v15.96a2.006 2.006 0 0 0 2 2h6v-9.97h32v9.97h6a2.006 2.006 0 0 0 2-2V8a2.006 2.006 0 0 0-2-2m-15 7a2 2 0 1 1 2-2 2.006 2.006 0 0 1-2 2m7 0a2 2 0 1 1 2-2 2.006 2.006 0 0 1-2 2' style='fill:%23009edb'/%3E%3Cpath d='M10 25.96V41a1.003 1.003 0 0 0 1 1h26a1.003 1.003 0 0 0 1-1V17.99H10ZM34 35H14a1 1 0 0 1 0-2h20a1 1 0 0 1 0 2m0-6H14a1 1 0 0 1 0-2h20a1 1 0 0 1 0 2' style='fill:%23009edb'/%3E%3C/g%3E%3C/svg%3E")}.mg-icon-public-information:before{--mg-icon-svg:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 48'%3E%3Ctitle%3EAsset 757%3C/title%3E%3Cg data-name='Layer 2'%3E%3Crect width='16' height='33' x='6' rx='7.979' style='fill:%23009edb'/%3E%3Cpath d='M28 24.5a1.5 1.5 0 0 0-3 0 11 11 0 1 1-22 0 1.5 1.5 0 0 0-3 0 13.996 13.996 0 0 0 12 13.846V44H8a2.02 2.02 0 0 0-1.755 3.001A1.92 1.92 0 0 0 7.978 48H20a2.02 2.02 0 0 0 1.755-3.002A1.92 1.92 0 0 0 20.022 44H16v-5.665A14.02 14.02 0 0 0 28 24.5' style='fill:%23009edb'/%3E%3C/g%3E%3C/svg%3E")}.mg-icon-report:before{--mg-icon-svg:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 48'%3E%3Ctitle%3EAsset 772%3C/title%3E%3Cg data-name='Layer 2'%3E%3Cpath d='M35 0H13a1.003 1.003 0 0 0-1 1v11h11a3 3 0 0 1 2.23 1H32a1 1 0 0 1 0 2h-6v3h6a1 1 0 0 1 0 2h-6v3h6a1 1 0 0 1 0 2h-6v9h9a1.003 1.003 0 0 0 1-1V1a1.003 1.003 0 0 0-1-1m-3 10H16a1 1 0 0 1 0-2h16a1 1 0 0 1 0 2' style='fill:%23009edb'/%3E%3Cpath d='M23 14H1a1.003 1.003 0 0 0-1 1v32a1.003 1.003 0 0 0 1 1h22a1.003 1.003 0 0 0 1-1V15a1.003 1.003 0 0 0-1-1M4 22h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2m0 5h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2m16 12H4a1 1 0 0 1 0-2h16a1 1 0 0 1 0 2M4 34a1 1 0 0 1 0-2h16a1 1 0 0 1 0 2Z' style='fill:%23009edb'/%3E%3C/g%3E%3C/svg%3E")}.mg-icon-storm-surge:before{--mg-icon-svg:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 48 48'%3E%3Cpath d='M46 42c-1.6 0-3.2.4-4.6 1.2-1.7 1-3.8 1-5.4 0-1.4-.8-3-1.3-4.6-1.2-1.6 0-3.2.4-4.6 1.2-.9.6-1.8.8-2.8.8s-1.9-.2-2.7-.8c-1.4-.8-3-1.3-4.6-1.2-1.6 0-3.2.4-4.6 1.2-.8.5-1.8.8-2.7.8-1 0-1.9-.2-2.7-.8C5.2 42.4 3.6 42 2 42c-1.1 0-2 .9-2 2s.9 2 2 2c1 0 1.9.2 2.7.8 1.4.8 3 1.3 4.6 1.2 1.6 0 3.2-.4 4.6-1.2.8-.5 1.8-.8 2.7-.8 1 0 1.9.2 2.7.8 1.4.8 3 1.3 4.6 1.2 1.6 0 3.2-.4 4.6-1.2 1.7-1 3.8-1 5.4 0 2.9 1.7 6.4 1.7 9.3 0 .9-.6 1.8-.8 2.8-.8 1.1 0 2-.9 2-2s-.9-2-2-2m0-8c-1.6 0-3.2.4-4.6 1.2-1.7 1-3.8 1-5.4 0-1.4-.8-3-1.3-4.6-1.2-1.6 0-3.2.4-4.6 1.2-.9.6-1.8.8-2.8.8s-1.9-.2-2.7-.8c-1.4-.8-3-1.3-4.6-1.2-1.6 0-3.2.4-4.6 1.2-.8.5-1.8.8-2.7.8-1 0-1.9-.2-2.7-.8C5.2 34.4 3.6 34 2 34c-1.1 0-2 .9-2 2s.9 2 2 2c1 0 1.9.2 2.7.8 1.4.8 3 1.3 4.6 1.2 1.6 0 3.2-.4 4.6-1.2.8-.5 1.8-.8 2.7-.8 1 0 1.9.2 2.7.8 1.4.8 3 1.3 4.6 1.2 1.6 0 3.2-.4 4.6-1.2 1.7-1 3.8-1 5.4 0 2.9 1.7 6.4 1.7 9.3 0 .9-.6 1.8-.8 2.8-.8 1.1 0 2-.9 2-2s-.9-2-2-2M8 22h28.5c3.5 0 6.6-2.5 7.3-5.9.1-.5.2-1.1.2-1.6 0-4.1-3.4-7.5-7.5-7.5-.9 0-1.8.2-2.7.5A9.51 9.51 0 0 0 22.5.2C18.2 1.1 15 5 15 9.4c-2.5-1.1-5.5 0-6.6 2.6-.3.6-.4 1.3-.4 2-2.2 0-4 1.8-4 4s1.8 4 4 4m3 2.5L7.5 28c-.7.7-.7 1.8 0 2.5s1.8.7 2.5 0l3.5-3.5c.7-.7.7-1.8 0-2.5s-1.8-.7-2.5 0m12 0L19.5 28c-.7.7-.7 1.8 0 2.5s1.8.7 2.5 0l3.5-3.5c.7-.7.7-1.8 0-2.5s-1.8-.7-2.5 0m12 0L31.5 28c-.7.7-.7 1.8 0 2.5s1.8.7 2.5 0l3.5-3.5c.7-.7.7-1.8 0-2.5s-1.8-.7-2.5 0' style='fill:%23011e41'/%3E%3C/svg%3E")}.mg-icon-tornado:before{--mg-icon-svg:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 48 48'%3E%3Cpath d='M24.5 41h-3c-1.9 0-3.5 1.6-3.5 3.5s1.6 3.5 3.5 3.5h3c1.9 0 3.5-1.6 3.5-3.5S26.4 41 24.5 41m6-10h-9c-1.9 0-3.5 1.6-3.5 3.5s1.6 3.5 3.5 3.5h9c1.9 0 3.5-1.6 3.5-3.5S32.4 31 30.5 31m1.5-6.5c0-1.9-1.6-3.5-3.5-3.5h-16C10.6 21 9 22.6 9 24.5s1.6 3.5 3.5 3.5h16c1.9 0 3.5-1.6 3.5-3.5M39.5 11h-26c-1.9 0-3.5 1.6-3.5 3.5s1.6 3.5 3.5 3.5h26c1.9 0 3.5-1.6 3.5-3.5S41.4 11 39.5 11m5-11h-41C1.6 0 0 1.6 0 3.5S1.6 7 3.5 7h41C46.4 7 48 5.4 48 3.5S46.4 0 44.5 0' style='fill:%23011e41'/%3E%3C/svg%3E")}.mg-icon-heatwave:before{--mg-icon-svg:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 34 48'%3E%3Cpath d='M16 6.5C16 2.9 13.1 0 9.5 0S3 2.9 3 6.5v25.1c-3.8 3.6-4 9.6-.4 13.4s9.6 4 13.4.4c1.9-1.8 3-4.3 3-6.9s-1.1-5.1-3-6.9zM9.5 45C5.9 45 3 42.1 3 38.5c0-2 .9-3.8 2.4-5.1L6 33V6.5C6 4.6 7.6 3 9.5 3S13 4.6 13 6.5V33l.6.5c2.8 2.2 3.3 6.3 1 9.1-1.3 1.5-3.1 2.4-5.1 2.4' style='fill:%23011e41'/%3E%3Cpath d='M11 34.8V8.5c0-.8-.7-1.5-1.5-1.5S8 7.7 8 8.5v26.3C6 35.6 5 38 5.8 40S9 43 11 42.2s3-3.2 2.2-5.2c-.4-1-1.2-1.8-2.2-2.2M32.5 10H28V5.5c0-.8-.7-1.5-1.5-1.5S25 4.7 25 5.5V10h-4.5c-.8 0-1.5.7-1.5 1.5s.7 1.5 1.5 1.5H25v4.5c0 .8.7 1.5 1.5 1.5s1.5-.7 1.5-1.5V13h4.5c.8 0 1.5-.7 1.5-1.5s-.7-1.5-1.5-1.5' style='fill:%23011e41'/%3E%3C/svg%3E")}.mg-icon-cold-wave:before{--mg-icon-svg:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 34 48'%3E%3Cpath d='M16 6.5C16 2.9 13.1 0 9.5 0S3 2.9 3 6.5v25.1c-3.8 3.6-4 9.6-.4 13.4s9.6 4 13.4.4c1.9-1.8 3-4.3 3-6.9s-1.1-5.1-3-6.9zM9.5 45C5.9 45 3 42.1 3 38.5c0-2 .9-3.8 2.4-5.1L6 33V6.5C6 4.6 7.6 3 9.5 3S13 4.6 13 6.5V33l.6.5c2.8 2.2 3.3 6.3 1 9.1-1.3 1.5-3.1 2.4-5.1 2.4' style='fill:%23011e41'/%3E%3Cpath d='M11 34.8v-9.3c0-.8-.7-1.5-1.5-1.5S8 24.7 8 25.5v9.3C6 35.6 5 38 5.8 40S9 43 11 42.2s3-3.2 2.2-5.2c-.4-1-1.2-1.8-2.2-2.2M32.5 10h-12c-.8 0-1.5.7-1.5 1.5s.7 1.5 1.5 1.5h12c.8 0 1.5-.7 1.5-1.5s-.7-1.5-1.5-1.5' style='fill:%23011e41'/%3E%3C/svg%3E")}.mg-icon-heavy-rain:before{--mg-icon-svg:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 48 40'%3E%3Cpath d='M11.2 31c-.5 0-.9.2-1.3.5L4.5 37c-.7.7-.7 1.8 0 2.5s1.8.7 2.5 0l5.5-5.5c.7-.7.7-1.8 0-2.5-.4-.3-.8-.5-1.3-.5m13 0c-.5 0-.9.2-1.3.5L17.5 37c-.7.7-.7 1.8 0 2.5s1.8.7 2.5 0l5.5-5.5c.7-.7.7-1.8 0-2.5-.3-.3-.8-.5-1.3-.5m13 0c-.5 0-.9.2-1.3.5L30.5 37c-.7.7-.7 1.8 0 2.5s1.8.7 2.5 0l5.5-5.5c.7-.7.7-1.8 0-2.5-.3-.3-.8-.5-1.3-.5M39 9c-1.1 0-2.2.2-3.2.6-1-6.3-7-10.5-13.2-9.4-5.5.9-9.5 5.6-9.6 11.2-3.1-1.1-6.5.5-7.7 3.6-.3.9-.4 2-.2 3h-.6C2 18 0 20 0 22.5S2 27 4.5 27H39c4.3 0 8-3 8.8-7.2.1-.6.2-1.2.2-1.8 0-5-4-9-9-9' style='fill:%23011e41'/%3E%3C/svg%3E")}.mg-icon-snowfall:before{--mg-icon-svg:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 43.6 48'%3E%3Cpath d='M41.1 20.3c.2 0 .3.1.5.1 1.1 0 2-.9 2-2 0-.9-.6-1.7-1.5-1.9l-2.1-.7 1.9-1.1c1-.5 1.3-1.8.7-2.7s-1.8-1.3-2.7-.7l-1.9 1 .6-2.2c.3-1.1-.3-2.2-1.4-2.5s-2.2.5-2.5 1.5l-1.6 6-6.5 3.7c-.8-.8-1.8-1.3-2.8-1.6v-6.5l4.4-4.4c.8-.8.8-2 0-2.8s-2-.8-2.8 0l-1.6 1.6V2c0-1.1-.9-2-2-2s-2 .9-2 2v3.2l-1.6-1.6c-.8-.8-2-.8-2.8 0s-.8 2 0 2.8l4.4 4.4v6.5c-1 .3-2 .9-2.8 1.6l-6.5-3.7-1.6-6c-.3-1.1-1.4-1.7-2.4-1.5-1.1.3-1.7 1.4-1.4 2.5l.6 2.2-1.9-1.1c-1-.6-2.2-.3-2.8.7s-.2 2.2.7 2.7l1.9 1.1-2.2.6c-1.1.3-1.7 1.4-1.4 2.5.2.9 1 1.5 1.9 1.5.2 0 .4 0 .5-.1l6-1.6 6.5 3.7c-.3 1.1-.3 2.2 0 3.2l-5.6 3.2-6-1.6c-1.1-.3-2.2.3-2.4 1.4s.3 2.2 1.4 2.4l2.2.6-2.7 1.6C.8 33.8.5 35 1 36c.6 1 1.8 1.3 2.7.7l2.7-1.6-.6 2.2c-.3 1.1.4 2.2 1.4 2.4.2 0 .3.1.5.1.9 0 1.7-.6 1.9-1.5l1.6-6 5.6-3.2c.8.8 1.8 1.3 2.8 1.6v7.5l-4.4 4.4c-.8.8-.8 2 0 2.8s2 .8 2.8 0l1.6-1.6V46c0 1.1.9 2 2 2s2-.9 2-2v-2.2l1.6 1.6c.8.8 2 .8 2.8 0s.8-2 0-2.8l-4.4-4.4v-7.5c1-.3 2-.9 2.8-1.6l5.6 3.2 1.6 6c.2.9 1 1.5 1.9 1.5.2 0 .4 0 .5-.1 1.1-.3 1.7-1.4 1.4-2.4l-.6-2.2 2.7 1.6c1 .6 2.2.2 2.7-.7.5-1 .2-2.2-.7-2.7l-2.7-1.6 2.2-.6c1.1-.3 1.7-1.4 1.4-2.4-.3-1.1-1.4-1.7-2.4-1.4l-6 1.6-5.6-3.2c.3-1.1.3-2.2 0-3.2l6.5-3.7zM21.8 27c-1.7 0-3-1.3-3-3s1.3-3 3-3 3 1.3 3 3-1.3 3-3 3' style='fill:%23011e41'/%3E%3C/svg%3E")}.mg-icon-fire:before{--mg-icon-svg:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 34 48'%3E%3Cpath d='M17.4.2c-.2-.2-.5-.3-.8-.1l-.1.1C13.9 3.5 0 22.5 0 31c0 9.4 7.6 17 17 17s17-7.6 17-17C34 22.5 20.1 3.5 17.4.2M17 43c-4.4 0-8-3.6-8-8 0-4 6.6-12.4 7.8-13.9.1-.1.2-.1.4 0C18.4 22.6 25 31 25 35c0 4.4-3.6 8-8 8' style='fill:%23011e41'/%3E%3C/svg%3E")}.mg-icon-epidemic:before{--mg-icon-svg:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 48 42'%3E%3Cpath d='M48 29.5V29c0-7-5.5-12.7-12.5-13 0-.1-.1-.1-.1-.2C38.1 11 37.3 5 33.5 1.1l-.4-.4c-.9-.9-2.5-1-3.4 0s-1 2.5 0 3.5l.3.4C31.4 6 32.1 8 32 10c0 .5-.1 1.1-.2 1.6-4.6-3.5-10.9-3.5-15.5 0-.2-.5-.3-1.1-.3-1.6-.1-2 .6-3.9 1.9-5.4l.3-.4c1-1 .9-2.5 0-3.5s-2.5-1-3.4 0l-.3.3c-3.8 4-4.6 9.9-1.9 14.7 0 .1-.1.1-.1.2C5.5 16.3 0 22 0 29v.5C0 30.9 1.1 32 2.5 32S5 30.9 5 29.5V29h-.1.1c0-3.7 2.5-6.8 6-7.7v.7c0 5.3 3.2 10.1 8.2 12.1A8.14 8.14 0 0 1 13 37h-.5c-1.4 0-2.5 1.1-2.5 2.5s1.1 2.5 2.5 2.5h.5c4.5 0 8.6-2.3 11-6.1 2.4 3.8 6.5 6.1 11 6.1h.6c1.4 0 2.5-1.1 2.5-2.5S37 37 35.6 37H35c-2.4 0-4.7-1.1-6.2-2.9 4.9-2 8.2-6.7 8.2-12.1v-.7c3.5.9 6 4.1 6 7.7h.1-.1v.5c0 1.4 1.1 2.5 2.5 2.5s2.5-1.1 2.5-2.5M24 13c2.2 0 4.3.8 5.9 2.2-.1.1-.2.3-.4.4-3 3.1-7.8 3.1-10.9.2l-.2-.2-.4-.4c1.7-1.4 3.8-2.2 6-2.2m-9 9v-.7c4 1 6.6 5 5.8 9.1-3.5-1.3-5.8-4.6-5.8-8.4m12.1 8.4c-.8-4.1 1.8-8.1 5.8-9.1v.7c.1 3.8-2.2 7.1-5.8 8.4' style='fill:%23011e41'/%3E%3C/svg%3E")}.mg-icon-resilience:before{--mg-icon-svg:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 48 48'%3E%3Cpath d='M46.7 1.3c-1.8-1.8-4.6-1.8-6.4 0-.3.3-.6.7-.8 1.1.9.7 1.6 1.7 2 2.7.6 1.6.6 3.4-.1 5L39 15.6v27.9c0 2.5 2 4.5 4.5 4.5s4.5-2 4.5-4.5v-39c0-1.2-.5-2.3-1.3-3.2' style='fill:%23011e41'/%3E%3Cpath d='M39.6 9.3c1-2.3 0-4.9-2.3-5.9s-4.9 0-5.9 2.3l-.5 1c2.3 2.1 2.8 5.6 1 8.1L18.7 34.2l-3.3 7.5c-1 2.3 0 4.9 2.3 5.9.6.2 1.2.4 1.8.4 1.8 0 3.4-1.1 4.1-2.7L39 10.7z' style='fill:%23011e41'/%3E%3Cpath d='m20.1 28.6 3.1-4.6 7-10.2c1.3-1.9.9-4.4-.9-5.8-.1-.1-.2-.1-.3-.2l-.6-.3c-2-.9-4.5-.3-5.7 1.5L.8 41c-.5.7-.8 1.6-.8 2.5C0 46 2 48 4.5 48c1.5 0 2.9-.7 3.7-2L17 33.2z' style='fill:%23011e41'/%3E%3C/svg%3E")}.mg-icon-preparedness:before{--mg-icon-svg:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 48 48'%3E%3Cpath d='M13.4 35.6c-.8-.8-2-.8-2.8 0l-3.1 3.1-3.1-3.1c-.8-.8-2-.8-2.8 0s-.8 2 0 2.8l3.1 3.1-3.1 3.1c-.8.8-.8 2 0 2.8s2 .8 2.8 0l3.1-3.1 3.1 3.1c.8.8 2 .8 2.8 0s.8-2 0-2.8l-3.1-3.1 3.1-3.1c.8-.8.8-2 0-2.8m-.8-18L6 24.2l-2.6-2.6c-.8-.8-2-.8-2.8 0s-.8 2 0 2.8l4 4c.8.8 2 .8 2.8 0l8-8c.8-.8.8-2 0-2.8s-2-.8-2.8 0M45 22H23c-1.7 0-3 1.3-3 3s1.3 3 3 3h22c1.7 0 3-1.3 3-3s-1.3-3-3-3M12.6.6 6 7.2 3.4 4.6c-.8-.8-2-.8-2.8 0s-.8 2 0 2.8l4 4c.8.8 2 .8 2.8 0l8-8c.8-.8.8-2 0-2.8s-2-.8-2.8 0M23 11h22c1.7 0 3-1.3 3-3s-1.3-3-3-3H23c-1.7 0-3 1.3-3 3s1.3 3 3 3m22 28H23c-1.7 0-3 1.3-3 3s1.3 3 3 3h22c1.7 0 3-1.3 3-3s-1.3-3-3-3' style='fill-rule:evenodd;clip-rule:evenodd;fill:%23011e41'/%3E%3C/svg%3E")}.mg-icon-response:before{--mg-icon-svg:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 48 48'%3E%3Cpath d='M2.5 26C3.9 26 5 24.9 5 23.5 5 17.1 10.3 12 16.6 12h22.8l-2.7 2.7c-1 1-1 2.6 0 3.5 1 1 2.6 1 3.5 0l7-7c1-1 1-2.6 0-3.5l-7-7c-1-1-2.6-1-3.5 0-1 1-1 2.6 0 3.5L39.5 7H16.9C7.8 6.8.2 14 0 23.1v.4C0 24.9 1.1 26 2.5 26m37.8-3.3c-1-1-2.6-1-3.5 0-1 1-1 2.6 0 3.5l2.7 2.7H16.9C7.8 28.8.2 36 0 45.1v.4C0 46.9 1.1 48 2.5 48S5 46.9 5 45.5C5 39.1 10.3 34 16.6 34h22.8l-2.7 2.7c-1 1-1 2.6 0 3.5s2.6 1 3.5 0l7-7c1-1 1-2.6 0-3.5z' style='fill:%23011e41'/%3E%3C/svg%3E")}.mg-icon-affected-population:before{--mg-icon-svg:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 48 48'%3E%3Cpath d='M7.7 37.4.6 44.6c-.8.8-.8 2.1 0 2.8.8.8 2.1.8 2.8 0l7.1-7.2c.8-.8.8-2.1 0-2.8-.8-.8-2-.8-2.8 0m31.1-26.3c.5 0 1-.2 1.4-.6l7.2-7.1c.8-.8.8-2 0-2.8s-2-.8-2.8 0l-7.2 7.1c-.8.8-.8 2 0 2.8.4.4.9.6 1.4.6m1.5 26.3c-.8-.8-2-.8-2.8 0s-.8 2 0 2.8l7.1 7.2c.8.8 2 .8 2.8 0s.8-2 0-2.8zM7.8 10.5c.8.8 2.1.8 2.8 0 .8-.8.8-2.1 0-2.8L3.4.6C2.6-.2 1.3-.2.6.6s-.8 2.1 0 2.8zM24 10c-7.4 0-13 5.2-13 12 0 1.1.9 2 2 2s2-.9 2-2c-.1-2.8 1.5-5.4 4-6.7V46c0 1.1.9 2 2 2s2-.9 2-2V31h2v15c0 1.1.9 2 2 2s2-.9 2-2V15.3c2.5 1.3 4.1 3.9 4 6.7 0 1.1.9 2 2 2s2-.9 2-2c0-6.8-5.6-12-13-12' style='fill:%23011e41'/%3E%3Ccircle cx='24' cy='4' r='4' style='fill:%23011e41'/%3E%3C/svg%3E")}.mg-icon-people-in-need:before{--mg-icon-svg:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 48 34'%3E%3Cpath d='M1.5 19c.8 0 1.5-.7 1.5-1.5 0-2.2 1.1-4.2 3-5.4V21c0 2.2 1.8 4 4 4s4-1.8 4-4v-8.9c1.9 1.1 3 3.2 3 5.4 0 .8.7 1.5 1.5 1.5s1.5-.7 1.5-1.5c0-1.1.4-2.1 1-2.9V18c0 1.7 1.3 3 3 3s3-1.3 3-3v-3.5c.7.8 1 1.9 1 2.9 0 .8.7 1.5 1.5 1.5s1.5-.7 1.5-1.5c.2-2.5 1.7-4.7 4-5.7L33.1 19c-.5 2.7 1.2 5.4 3.9 5.9s5.4-1.2 5.9-3.9c.1-.6.1-1.3 0-2L41 11.8c2.3 1 3.8 3.2 4 5.7 0 .8.7 1.5 1.5 1.5s1.5-.7 1.5-1.5C48 12.1 43.7 8 38 8c-3.5-.1-6.8 1.6-8.7 4.6-2.2-3-6.4-3.5-9.4-1.3-.5.4-.9.8-1.3 1.3C16.8 9.7 13.5 7.9 10 8 4.3 8 0 12.1 0 17.5c0 .8.7 1.5 1.5 1.5' style='fill:%23011e41'/%3E%3Ccircle cx='38' cy='3' r='3' style='fill:%23011e41'/%3E%3Ccircle cx='10' cy='3' r='3' style='fill:%23011e41'/%3E%3Cpath d='M24 8c1.4 0 2.5-1.1 2.5-2.5S25.4 3 24 3s-2.5 1.1-2.5 2.5S22.6 8 24 8m22 22H2c-1.1 0-2 .9-2 2s.9 2 2 2h44c1.1 0 2-.9 2-2s-.9-2-2-2' style='fill:%23011e41'/%3E%3C/svg%3E")}.mg-icon-internally-displaced:before{--mg-icon-svg:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 48 43'%3E%3Cpath d='m47.5 20.4-6.9-6.9c-.6-.6-1.6-.6-2.2 0s-.6 1.6 0 2.2l4.3 4.3H29.5c-.8 0-1.5.7-1.5 1.5s.7 1.5 1.5 1.5h13.3l-4.4 4.3c-.6.6-.6 1.6 0 2.2s1.6.6 2.2 0l6.9-6.9c.7-.6.7-1.6 0-2.2M29.8 2.8c-.7-2.1-3-3.2-5.1-2.5s-3.2 3-2.5 5.1 3 3.2 5.1 2.5c2-.8 3.2-3.1 2.5-5.1m-9.1 20.7 3.9-7.8c1.2-2.4.2-5.3-2.1-6.5L20 7.9c-.1-.1-.3-.1-.4-.2-6.9-3-14.9-.2-18.3 6.5-.5 1-.1 2.3.9 2.8s2.3.1 2.8-.9c1.9-3.8 6-5.9 10.2-5.4L.2 40c-.5 1-.1 2.3.9 2.8s2.3.1 2.8-.9l9-17.7 4.5 2.3c4.8 2.6 6.7 8.7 4.2 13.6-.5 1-.1 2.3.9 2.8s2.3.1 2.8-.9c3.3-6.5 1.4-14.4-4.6-18.5' style='fill:%23011e41'/%3E%3C/svg%3E")}.mg-icon-refugee:before{--mg-icon-svg:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 48 47.1'%3E%3Cpath d='M29.8 6.8c-.7-2.1-3-3.2-5.1-2.5s-3.2 3-2.5 5.1 3 3.2 5.1 2.5c2-.7 3.2-3 2.5-5.1m-9.1 20.8 3.9-7.8c1.2-2.4.2-5.3-2.1-6.5L20 12c-.1-.1-.3-.1-.4-.2-6.9-3-14.9-.2-18.3 6.5-.5 1-.1 2.3.9 2.8s2.3.1 2.8-.9c1.9-3.8 6-5.9 10.2-5.4L.2 44c-.5 1-.1 2.3.9 2.8s2.3.1 2.8-.9l9-17.7 4.5 2.3c4.8 2.6 6.7 8.7 4.2 13.6-.5 1-.1 2.3.9 2.8s2.3.1 2.8-.9c3.3-6.5 1.4-14.3-4.6-18.4m26.8-5.2-6.9-6.9c-.6-.6-1.6-.6-2.2 0s-.6 1.6 0 2.2l4.3 4.3H29.5c-.8 0-1.5.7-1.5 1.5s.7 1.5 1.5 1.5h13.3l-4.4 4.3c-.6.6-.6 1.6 0 2.2s1.6.6 2.2 0l6.9-6.9c.7-.6.7-1.6 0-2.2' style='fill:%23011e41'/%3E%3Cpath d='M33.5 28c-.8 0-1.5.7-1.5 1.5v5c0 .8.7 1.5 1.5 1.5s1.5-.7 1.5-1.5v-5c0-.8-.7-1.5-1.5-1.5m0-9c.8 0 1.5-.7 1.5-1.5v-5c0-.8-.7-1.5-1.5-1.5s-1.5.7-1.5 1.5v5c0 .8.7 1.5 1.5 1.5m0-11c.8 0 1.5-.7 1.5-1.5v-5c0-.8-.7-1.5-1.5-1.5S32 .7 32 1.5v5c0 .8.7 1.5 1.5 1.5m0 31c-.8 0-1.5.7-1.5 1.5v5c0 .8.7 1.5 1.5 1.5s1.5-.7 1.5-1.5v-5c0-.8-.7-1.5-1.5-1.5' style='fill:%23011e41'/%3E%3C/svg%3E")}.mg-icon-shelter:before{--mg-icon-svg:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 48 48'%3E%3Cpath d='M24 18c-6 0-10.5 4.1-10.5 9.5 0 .8.7 1.5 1.5 1.5s1.5-.7 1.5-1.5c0-2.4 1.4-4.5 3.5-5.6v24.6c0 .8.7 1.5 1.5 1.5s1.5-.7 1.5-1.5V34h2v12.5c0 .8.7 1.5 1.5 1.5s1.5-.7 1.5-1.5V21.9c2.1 1 3.5 3.2 3.5 5.6 0 .8.7 1.5 1.5 1.5s1.5-.7 1.5-1.5C34.5 22.1 30 18 24 18' style='fill:%23011e41'/%3E%3Ccircle cx='24.1' cy='13' r='3' style='fill:%23011e41'/%3E%3Cpath d='M46.8 12.8 25.3.3c-.8-.5-1.7-.5-2.5 0L1.2 12.8C.5 13.3 0 14.1 0 15v30.5C0 46.9 1.1 48 2.5 48S5 46.9 5 45.5V16.4l19-11 19 11v29.1c0 1.4 1.1 2.5 2.5 2.5s2.5-1.1 2.5-2.5V15c0-.9-.5-1.7-1.2-2.2' style='fill:%23011e41'/%3E%3C/svg%3E")}.mg-icon-infrastructure:before{--mg-icon-svg:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 48 48'%3E%3Cpath d='M26 0v48h22V0zm13 42c0 1.1-.9 2-2 2s-2-.9-2-2v-6c0-1.1.9-2 2-2s2 .9 2 2zm0-15c0 1.1-.9 2-2 2s-2-.9-2-2v-6c0-1.1.9-2 2-2s2 .9 2 2zm0-15c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2zM0 32c4.7 0 9 3.3 9 8v8h6v-8c0-4.7 4.3-8 9-8v-8H0z' style='fill:%23011e41'/%3E%3C/svg%3E")}.mg-icon-facebook:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24"><path d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12"/></svg>')}.mg-icon-twitter:before,.mg-icon-x-social:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>')}.mg-icon-linkedin:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.06 2.06 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065m1.782 13.019H3.555V9h3.564zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0z"/></svg>')}.mg-icon-youtube:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24"><path d="M23.498 6.186a3.02 3.02 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.02 3.02 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.02 3.02 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.02 3.02 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814M9.545 15.568V8.432L15.818 12z"/></svg>')}.mg-icon-flickr:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24"><path d="M0 12C0 5.373 5.373 0 12 0s12 5.373 12 12-5.373 12-12 12S0 18.627 0 12m8.5-3a3 3 0 1 0 0 6 3 3 0 0 0 0-6m7 0a3 3 0 1 0 0 6 3 3 0 0 0 0-6"/></svg>')}.mg-icon-sdg-wheel:before{--mg-icon-svg:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 166.33 166.33'%3E%3Cpath fill='%2364ad35' d='M46.73 62.84c1.82-3.09 4.02-5.92 6.55-8.43L31.79 30.84A73.7 73.7 0 0 0 18.14 48.6z'/%3E%3Cpath fill='%23e7b717' d='M99.42 46.19c3.26 1.49 6.28 3.4 9.01 5.65l21.55-23.53a73.7 73.7 0 0 0-19.1-11.92z'/%3E%3Cpath fill='%23c31a23' d='m148.77 53.28-28.56 14.24a41.3 41.3 0 0 1 2.86 10.09l31.77-3a72.6 72.6 0 0 0-6.07-21.33'/%3E%3Cpath fill='%23489835' d='m118.16 63.39 28.56-14.24a73.4 73.4 0 0 0-13.35-17.72l-21.55 23.53c2.46 2.52 4.59 5.35 6.34 8.43'/%3E%3Cpath fill='%23417f3d' d='M41.06 83.69c0-.64.02-1.29.05-1.92L9.33 78.93c-.1 1.57-.16 3.17-.16 4.77 0 6.09.76 12.02 2.16 17.68l30.7-8.81c-.63-2.87-.97-5.83-.97-8.88'/%3E%3Cpath fill='%23f8c300' d='M114.16 109.81c-2.26 2.75-4.87 5.2-7.75 7.29l16.78 27.17a73.8 73.8 0 0 0 16.43-15.26z'/%3E%3Cpath fill='%23e23623' d='M123.52 83.69c0 3.01-.33 5.94-.95 8.77l30.69 8.82a72.9 72.9 0 0 0 2.01-22.08l-31.78 3c.02.5.03.99.03 1.49'/%3E%3Cpath fill='%23f39d19' d='m50.93 110.41-25.4 19.31a73.5 73.5 0 0 0 16.59 15.03l16.78-27.14a40.7 40.7 0 0 1-7.97-7.2'/%3E%3Cpath fill='%232693d1' d='M41.57 77.18c.57-3.59 1.61-7.02 3.05-10.24L16.06 52.72a72.9 72.9 0 0 0-6.3 21.61z'/%3E%3Cpath fill='%23a4183d' d='m119.29 146.73-16.76-27.13a40.8 40.8 0 0 1-9.78 3.97l5.92 31.39c7.35-1.7 14.29-4.5 20.62-8.23'/%3E%3Cpath fill='%233cb9e1' d='M121.35 96.9a41.4 41.4 0 0 1-4.46 9.19l25.49 19.22a72.7 72.7 0 0 0 9.64-19.59z'/%3E%3Cpath fill='%23e86120' d='M88.23 124.48c-1.94.28-3.93.43-5.94.43-1.62 0-3.23-.1-4.8-.28l-5.91 31.39c3.5.52 7.07.79 10.71.79 4.03 0 7.99-.33 11.85-.96z'/%3E%3Cpath fill='%23de1931' d='M84.92 42.54c3.54.23 6.96.9 10.2 1.97l11.46-29.79a72.7 72.7 0 0 0-21.67-4.1v31.92z'/%3E%3Cpath fill='%23d80460' d='M72.95 123.85c-3.57-.83-6.97-2.13-10.12-3.83l-16.79 27.15c6.46 3.7 13.52 6.44 21.01 8.03z'/%3E%3Cpath fill='%231b4469' d='M69.9 44.36a40.7 40.7 0 0 1 10.42-1.85V10.59c-7.68.2-15.04 1.6-21.96 4z'/%3E%3Cpath fill='%23ca9a12' d='M48.13 106.75A41.3 41.3 0 0 1 43.27 97l-30.67 8.8a72.5 72.5 0 0 0 10.13 20.25z'/%3E%3Cpath fill='%2305659b' d='M56.74 51.35c2.7-2.13 5.66-3.93 8.84-5.35L54.04 16.25a73 73 0 0 0-18.81 11.52z'/%3E%3C/svg%3E")}@font-face{font-family:FontAwesome;font-weight:400;src:url(../fonts/mangrove-icon-set/font/mangrove-icon-set.woff2) format("woff2"),url(../fonts/mangrove-icon-set/font/mangrove-icon-set.ttf) format("truetype")}.fa,.fa-before:before,.fab,.fas,.mg-icon{font-family:FontAwesome,sans-serif;font-style:normal}.fa-before:before{padding-inline-end:.5em}.fa-2x{font-size:2em}.fa-rss:before{content:"\f09e"}.fa-file-alt:before{content:"\f15c"}.fa-file:before{content:"\f15b"}.fa-facebook:before{content:"\f230"}.fa-twitter:before,.fa-x-social:before{content:"\f099"}.fa-linkedin:before{content:"\f0e1"}.fa-flickr:before{content:"\f16e"}.fa-youtube:before{content:"\f16a"}.fa-search:before{content:"\e808"}.fa-envelope-o:before,.fa-envelope:before{content:"\e806"}.fa-newspaper:before{content:"\f1ea"}.fa-bar-chart:before,.fa-chart-bar:before{content:"\e80b"}.fa-graduation-cap:before{content:"\f19d"}.fa-calendar-alt:before{content:"\f133"}.fa-building:before{content:"\f0f7"}.fa-landmark:before{content:"\f19c"}.fa-pen-nib:before{content:"\f0f6"}.fa-business-time:before{content:"\e809"}.fa-code-branch:before{content:"\f126"}.fa-life-ring:before{content:"\f1cd"}.fa-lightbulb:before{content:"\f0eb"}.fa-cubes:before{content:"\f1b3"}.fa-sort-alpha-down:before,.fa-tags:before{content:"\e800"}.fa-power-off:before{content:"\f090"}.fa-user:before{content:"\e805"}.fa-times:before{content:"\f00d"}.fa-link:before{content:"\e802"}.fa-clone:before{content:"\f24d"}.fa-share:before{content:"\f1e0"}.fa-globe:before{content:"\f0ac"}.fa-qrcode:before{content:"\e899"}.fa-left:before{content:"\f177"}.fa-right:before{content:"\f178"}.fa-angle-circled-right:before{content:"\f138"}.fa-angle-circled-left:before{content:"\f137"}.fa-menu:before{content:"\f0c9"}.mg-icon{forced-color-adjust:none;vertical-align:-.125em}.mg-icon:not([class*=fa-]):before{background-color:currentColor;content:"";display:inline-block;height:1em;mask-image:var(--mg-icon-svg);mask-position:center;mask-repeat:no-repeat;mask-size:contain;width:1em}@media (forced-colors:active){.mg-icon:not([class*=fa-]):before{background-color:CanvasText}}.mg-icon--multicolor:before{background-color:transparent;background-image:var(--mg-icon-svg);background-position:50%;background-repeat:no-repeat;background-size:contain;mask-image:none}[dir=rtl] .mg-icon-angle-circled-left:before,[dir=rtl] .mg-icon-angle-circled-right:before,[dir=rtl] .mg-icon-arrow-left:before,[dir=rtl] .mg-icon-arrow-right:before,[dir=rtl] .mg-icon-left:before,[dir=rtl] .mg-icon-right:before{transform:scaleX(-1)}@media print{.mg-icon:not([class*=fa-]):before{background-color:#000!important;print-color-adjust:exact}}.mg-icon--sm{font-size:.875em}.mg-icon--lg{font-size:1.5em}.mg-icon--xl{font-size:2em}
|
|
636
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Atom/Icons/Icons.mdx
|
|
637
|
+
*/.mg-icon-globe:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20M2 12h20"/></svg>')}.mg-icon-languages:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="m5 8 6 6m-7 0 6-6 2-3M2 5h12M7 2h1m14 20-5-10-5 10m2-4h6"/></svg>')}.mg-icon-search:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="m21 21-4.34-4.34"/><circle cx="11" cy="11" r="8"/></svg>')}.mg-icon-calendar-alt:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M8 2v3m8-3v3"/><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M3 9h18M8 13h.01M12 13h.01M16 13h.01M8 17h.01M12 17h.01M16 17h.01"/></svg>')}.mg-icon-chart-bar:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M3 3v16a2 2 0 0 0 2 2h16m-3-4V9m-5 8V5M8 17v-3"/></svg>')}.mg-icon-envelope:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"/><rect width="20" height="16" x="2" y="4" rx="2"/></svg>')}.mg-icon-newspaper:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M15 18h-5m8-4h-8m-6 8h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-4 0v-9a2 2 0 0 1 2-2h2"/><rect width="8" height="4" x="10" y="6" rx="1"/></svg>')}.mg-icon-building:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M10 12h4m-4-4h4m0 13v-3a2 2 0 0 0-4 0v3"/><path d="M6 10H4a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-2"/><path d="M6 21V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v16"/></svg>')}.mg-icon-landmark:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M10 18v-7m1.119-8.795a2 2 0 0 1 1.762 0l7.84 3.846A.5.5 0 0 1 20.5 7h-17a.5.5 0 0 1-.22-.949zM14 18v-7m4 7v-7M3 22h18M6 18v-7"/></svg>')}.mg-icon-graduation-cap:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M21.42 10.922a1 1 0 0 0-.019-1.838L12.83 5.18a2 2 0 0 0-1.66 0L2.6 9.08a1 1 0 0 0 0 1.832l8.57 3.908a2 2 0 0 0 1.66 0zM22 10v6"/><path d="M6 12.5V16a6 3 0 0 0 12 0v-3.5"/></svg>')}.mg-icon-business-time:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M12 12h.01M16 6V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2m14 7a18.15 18.15 0 0 1-20 0"/><rect width="20" height="14" x="2" y="6" rx="2"/></svg>')}.mg-icon-pen-nib:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="m18 13-.654-4.736a4 4 0 0 0-2.756-3.266l-9.163-2.9a2 2 0 0 0-2.017.493l-.82.819a2 2 0 0 0-.492 2.017l2.9 9.163a4 4 0 0 0 3.266 2.756L13 18"/><path d="M18.648 12.352a1.205 1.205 0 0 1 1.704 0l1.296 1.296a1.205 1.205 0 0 1 0 1.704l-6.296 6.296a1.205 1.205 0 0 1-1.704 0l-1.296-1.296a1.205 1.205 0 0 1 0-1.704zM3 3l6.586 6.586"/><circle cx="11" cy="11" r="2"/></svg>')}.mg-icon-code-branch:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M15 6a9 9 0 0 0-9 9V3"/><circle cx="18" cy="6" r="3"/><circle cx="6" cy="18" r="3"/></svg>')}.mg-icon-life-ring:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="m4.93 4.93 4.24 4.24m5.66 0 4.24-4.24m-4.24 9.9 4.24 4.24m-9.9-4.24-4.24 4.24"/><circle cx="12" cy="12" r="4"/></svg>')}.mg-icon-lightbulb:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5m0 4h6m-5 4h4"/></svg>')}.mg-icon-cubes:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M2.97 12.92A2 2 0 0 0 2 14.63v3.24a2 2 0 0 0 .97 1.71l3 1.8a2 2 0 0 0 2.06 0L12 19v-5.5l-5-3zM7 16.5l-4.74-2.85M7 16.5l5-3m-5 3v5.17m5-8.17V19l3.97 2.38a2 2 0 0 0 2.06 0l3-1.8a2 2 0 0 0 .97-1.71v-3.24a2 2 0 0 0-.97-1.71L17 10.5zm5 3-5-3m5 3 4.74-2.85M17 16.5v5.17"/><path d="M7.97 4.42A2 2 0 0 0 7 6.13v4.37l5 3 5-3V6.13a2 2 0 0 0-.97-1.71l-3-1.8a2 2 0 0 0-2.06 0zM12 8 7.26 5.15M12 8l4.74-2.85M12 13.5V8"/></svg>')}.mg-icon-sort-alpha-down:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="m3 16 4 4 4-4m-4 4V4m13 4h-5m0 2V6.5a2.5 2.5 0 0 1 5 0V10m-5 4h5l-5 6h5"/></svg>')}.mg-icon-tags:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M13.172 2a2 2 0 0 1 1.414.586l6.71 6.71a2.4 2.4 0 0 1 0 3.408l-4.592 4.592a2.4 2.4 0 0 1-3.408 0l-6.71-6.71A2 2 0 0 1 6 9.172V3a1 1 0 0 1 1-1zM2 7v6.172a2 2 0 0 0 .586 1.414l6.71 6.71a2.4 2.4 0 0 0 3.191.193"/><circle cx="10.5" cy="6.5" r=".5" fill="currentColor"/></svg>')}.mg-icon-power-off:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M12 2v10m6.4-5.4a9 9 0 1 1-12.77.04"/></svg>')}.mg-icon-user:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>')}.mg-icon-file:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"/><path d="M14 2v5a1 1 0 0 0 1 1h5"/></svg>')}.mg-icon-file-alt:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"/><path d="M14 2v5a1 1 0 0 0 1 1h5M10 9H8m8 4H8m8 4H8"/></svg>')}.mg-icon-times:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M18 6 6 18M6 6l12 12"/></svg>')}.mg-icon-link:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>')}.mg-icon-download:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M12 15V3m9 12v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="m7 10 5 5 5-5"/></svg>')}.mg-icon-external-link:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M15 3h6v6m-11 5L21 3m-3 10v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/></svg>')}.mg-icon-filter:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M10 20a1 1 0 0 0 .553.895l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .517-1.341L21.74 4.67A1 1 0 0 0 21 3H3a1 1 0 0 0-.742 1.67l7.225 7.989A2 2 0 0 1 10 14z"/></svg>')}.mg-icon-eye:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/></svg>')}.mg-icon-refresh:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/><path d="M21 3v5h-5m5 4a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/><path d="M8 16H3v5"/></svg>')}.mg-icon-plus:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M5 12h14m-7-7v14"/></svg>')}.mg-icon-minus:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M5 12h14"/></svg>')}.mg-icon-pause:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><rect width="5" height="18" x="14" y="3" rx="1"/><rect width="5" height="18" x="5" y="3" rx="1"/></svg>')}.mg-icon-play:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z"/></svg>')}.mg-icon-circle-minus:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M8 12h8"/></svg>')}.mg-icon-expand:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="m15 15 6 6M15 9l6-6m0 13v5h-5m5-13V3h-5M3 16v5h5m-5 0 6-6M3 8V3h5m1 6L3 3"/></svg>')}.mg-icon-shrink:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="m15 15 6 6m-6-6v4.8m0-4.8h4.8M9 19.8V15m0 0H4.2M9 15l-6 6M15 4.2V9m0 0h4.8M15 9l6-6M9 4.2V9m0 0H4.2M9 9 3 3"/></svg>')}.mg-icon-layers:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z"/><path d="M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12"/><path d="M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17"/></svg>')}.mg-icon-clone:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>')}.mg-icon-share:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><path d="m8.59 13.51 6.83 3.98m-.01-10.98-6.82 3.98"/></svg>')}.mg-icon-qrcode:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><rect width="5" height="5" x="3" y="3" rx="1"/><rect width="5" height="5" x="16" y="3" rx="1"/><rect width="5" height="5" x="3" y="16" rx="1"/><path d="M21 16h-3a2 2 0 0 0-2 2v3m5 0v.01M12 7v3a2 2 0 0 1-2 2H7m-4 0h.01M12 3h.01M12 16v.01M16 12h1m4 0v.01M12 21v-1"/></svg>')}.mg-icon-rss:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M4 11a9 9 0 0 1 9 9M4 4a16 16 0 0 1 16 16"/><circle cx="5" cy="19" r="1"/></svg>')}.mg-icon-left:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="m12 19-7-7 7-7m7 7H5"/></svg>')}.mg-icon-right:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M5 12h14m-7-7 7 7-7 7"/></svg>')}.mg-icon-angle-circled-left:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="m14 16-4-4 4-4"/></svg>')}.mg-icon-angle-circled-right:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="m10 8 4 4-4 4"/></svg>')}.mg-icon-menu:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M4 5h16M4 12h16M4 19h16"/></svg>')}.mg-icon-info-circle:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4m0-4h.01"/></svg>')}.mg-icon-handshake:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="m11 17 2 2a1 1 0 1 0 3-3"/><path d="m14 14 2.5 2.5a1 1 0 1 0 3-3l-3.88-3.88a3 3 0 0 0-4.24 0l-.88.88a1 1 0 1 1-3-3l2.81-2.81a5.79 5.79 0 0 1 7.06-.87l.47.28a2 2 0 0 0 1.42.25L21 4"/><path d="m21 3 1 11h-2M3 3 2 14l6.5 6.5a1 1 0 1 0 3-3M3 4h8"/></svg>')}.mg-icon-map:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M14.106 5.553a2 2 0 0 0 1.788 0l3.659-1.83A1 1 0 0 1 21 4.619v12.764a1 1 0 0 1-.553.894l-4.553 2.277a2 2 0 0 1-1.788 0l-4.212-2.106a2 2 0 0 0-1.788 0l-3.659 1.83A1 1 0 0 1 3 19.381V6.618a1 1 0 0 1 .553-.894l4.553-2.277a2 2 0 0 1 1.788 0zm.894.211v15M9 3.236v15"/></svg>')}.mg-icon-bar-chart:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M3 3v16a2 2 0 0 0 2 2h16m-3-4V9m-5 8V5M8 17v-3"/></svg>')}.mg-icon-close:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M18 6 6 18M6 6l12 12"/></svg>')}.mg-icon-copy:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>')}.mg-icon-arrow-left:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="m12 19-7-7 7-7m7 7H5"/></svg>')}.mg-icon-arrow-right:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M5 12h14m-7-7 7 7-7 7"/></svg>')}.mg-icon-hamburger:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M4 5h16M4 12h16M4 19h16"/></svg>')}.mg-icon-calendar:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M8 2v3m8-3v3"/><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M3 9h18M8 13h.01M12 13h.01M16 13h.01M8 17h.01M12 17h.01M16 17h.01"/></svg>')}.mg-icon-reload:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/><path d="M21 3v5h-5m5 4a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/><path d="M8 16H3v5"/></svg>')}.mg-icon-exclamation-triangle:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3M12 9v4m0 4h.01"/></svg>')}.mg-icon-circle-plus:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M8 12h8m-4-4v8"/></svg>')}.mg-icon-user-circle:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="10" r="3"/><path d="M7 20.662V19a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v1.662"/></svg>')}.mg-icon-user-tag:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M11.5 15H7a4 4 0 0 0-4 4v2m18.378-4.374a1 1 0 0 0-3.004-3.004l-4.01 4.012a2 2 0 0 0-.506.854l-.837 2.87a.5.5 0 0 0 .62.62l2.87-.837a2 2 0 0 0 .854-.506z"/><circle cx="10" cy="7" r="4"/></svg>')}.mg-icon-sign-out-alt:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="m16 17 5-5-5-5m5 5H9m0 9H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/></svg>')}.mg-icon-earthquake:before{--mg-icon-svg:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 40 48'%3E%3Cpath d='M39.6 18 20.7.3c-.4-.4-1-.4-1.4 0L.4 18c-.2.3-.4.6-.4 1v28c0 .6.4 1 1 1h13.2l8.9-8.9-8.4-7.6c-.5-.4-.7-.9-.7-1.5s.3-1.1.7-1.5l5.4-4.6-3.5-3.5c-.8-.8-.8-2 0-2.8l4-4c.8-.8 2-.8 2.8 0s.8 2 0 2.8L20.8 19l3.6 3.6q.6.6.6 1.5c0 .6-.3 1.1-.7 1.4L19 30l8.3 7.5c.8.7.9 2 .1 2.8l-.1.1-7.5 7.6H39c.6 0 1-.4 1-1V19c0-.4-.2-.7-.4-1' style='fill:%23011e41'/%3E%3C/svg%3E")}.mg-icon-tsunami:before{--mg-icon-svg:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 48 48'%3E%3Cpath d='m47.9 19.5-7.8-5.4h-.3L32 19.5c-.1 0-.1.1-.1.2v6.4h-.7c-1.6 0-3.2.4-4.6 1.2-.8.5-1.7.8-2.7.8-3.3-.1-5.9-2.7-6-6-.1-3.1 2.4-5.8 5.5-5.9.9 0 1.8.2 2.5.7 1 .5 2.2.2 2.7-.8s.2-2.2-.8-2.7q-2.1-1.2-4.5-1.2c-5.4.1-9.6 4.5-9.5 9.9.1 5.5 4.5 9.8 10 10 1.6 0 3.2-.4 4.6-1.2.8-.5 1.7-.8 2.7-.8s1.9.2 2.7.8c1.2.7 2.6 1.2 4 1.2h.7c1.6 0 3.2-.4 4.6-1.2.5-.3 1.1-.6 1.7-.7h1c.7 0 1.3.1 2 .2V19.6c.2 0 .2-.1.1-.1M46 42c-1.6 0-3.2.4-4.6 1.2-1.7 1-3.8 1-5.4 0-1.4-.8-3-1.3-4.6-1.2-1.6 0-3.2.4-4.6 1.2-.9.6-1.8.8-2.8.8s-1.9-.2-2.7-.8c-1.4-.8-3-1.3-4.6-1.2-1.6 0-3.2.4-4.6 1.2-.8.5-1.7.8-2.7.8s-1.9-.2-2.7-.8C5.2 42.4 3.6 42 2 42c-1.1 0-2 .9-2 2s.9 2 2 2c1 0 1.9.2 2.7.8 1.4.8 3 1.3 4.6 1.2 1.6 0 3.2-.4 4.6-1.2.8-.5 1.7-.8 2.7-.8s1.9.2 2.7.8c1.4.8 3 1.3 4.6 1.2 1.6 0 3.2-.4 4.6-1.2 1.7-1 3.8-1 5.4 0 2.9 1.7 6.4 1.7 9.3 0 .9-.6 1.8-.8 2.8-.8 1.1 0 2-.9 2-2s-.9-2-2-2m0-8c-1.6 0-3.2.4-4.6 1.2-1.7 1-3.8 1-5.4 0-1.4-.8-3-1.3-4.6-1.2-1.6 0-3.2.4-4.6 1.2-.9.6-1.8.8-2.8.8s-1.9-.2-2.7-.8c-1.4-.8-3-1.3-4.6-1.2-1.6 0-3.2.4-4.6 1.2-.8.5-1.7.8-2.7.8s-1.9-.2-2.7-.8C5.2 34.4 3.6 34 2 34c-1.1 0-2 .9-2 2s.9 2 2 2c1 0 1.9.2 2.7.8 1.4.8 3 1.3 4.6 1.2 1.6 0 3.2-.4 4.6-1.2.8-.5 1.7-.8 2.7-.8s1.9.2 2.7.8c1.4.8 3 1.3 4.6 1.2 1.6 0 3.2-.4 4.6-1.2 1.7-1 3.8-1 5.4 0 2.9 1.7 6.4 1.7 9.3 0 .9-.6 1.8-.8 2.8-.8 1.1 0 2-.9 2-2s-.9-2-2-2' style='fill:%23011e41'/%3E%3Cpath d='M4.1 31.1c1.1 0 2-.9 2-2 0-.3-.1-.6-.2-.9-4.2-8.1-1.1-18.1 7-22.3 2.4-1.2 5-1.9 7.6-1.9 4.2.1 8.1 1.7 11.1 4.5.8.7 2.1.7 2.8-.1s.7-2.1-.1-2.8C30.6 2.1 25.7.1 20.5 0 9.2 0 0 9.2 0 20.5c0 3.3.8 6.6 2.3 9.5.4.7 1.1 1.1 1.8 1.1' style='fill:%23011e41'/%3E%3C/svg%3E")}.mg-icon-flood:before{--mg-icon-svg:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 48 48'%3E%3Cpath d='M47.8 12 33.2.1q-.15-.15-.3 0L18.2 12c-.1.1-.2.2-.2.4v17.7c1.2.2 2.3.5 3.3 1.1.8.6 1.7.8 2.7.8s1.9-.2 2.7-.8c1.4-.8 3-1.3 4.6-1.2 1.6 0 3.2.4 4.6 1.2 1.7 1 3.8 1 5.4 0 1.4-.8 3-1.3 4.6-1.2.7 0 1.3.1 2 .2V12.4c.1-.2 0-.3-.1-.4M46 42c-1.6 0-3.2.4-4.6 1.2-1.7 1-3.8 1-5.4 0-1.4-.8-3-1.3-4.6-1.2-1.6 0-3.2.4-4.6 1.2-.9.6-1.8.8-2.8.8s-1.9-.2-2.7-.8c-1.4-.8-3-1.3-4.6-1.2-1.6 0-3.2.4-4.6 1.2-.8.5-1.8.8-2.7.8-1 0-1.9-.2-2.7-.8C5.2 42.4 3.6 42 2 42c-1.1 0-2 .9-2 2s.9 2 2 2c1 0 1.9.2 2.7.8 1.4.8 3 1.3 4.6 1.2 1.6 0 3.2-.4 4.6-1.2.8-.5 1.8-.8 2.7-.8 1 0 1.9.2 2.7.8 1.4.8 3 1.3 4.6 1.2 1.6 0 3.2-.4 4.6-1.2 1.7-1 3.8-1 5.4 0 2.9 1.7 6.4 1.7 9.3 0 .9-.6 1.8-.8 2.8-.8 1.1 0 2-.9 2-2s-.9-2-2-2m0-8c-1.6 0-3.2.4-4.6 1.2-1.7 1-3.8 1-5.4 0-1.4-.8-3-1.3-4.6-1.2-1.6 0-3.2.4-4.6 1.2-.9.6-1.8.8-2.8.8s-1.9-.2-2.7-.8c-1.4-.8-3-1.3-4.6-1.2-1.6 0-3.2.4-4.6 1.2-.8.5-1.7.8-2.7.8s-1.9-.2-2.7-.8C5.2 34.4 3.6 34 2 34c-1.1 0-2 .9-2 2s.9 2 2 2c1 0 1.9.2 2.7.8 1.4.8 3 1.3 4.6 1.2 1.6 0 3.2-.4 4.6-1.2.8-.5 1.7-.8 2.7-.8s1.9.2 2.7.8c1.4.8 3 1.3 4.6 1.2 1.6 0 3.2-.4 4.6-1.2 1.7-1 3.8-1 5.4 0 2.9 1.7 6.4 1.7 9.3 0 .9-.6 1.8-.8 2.8-.8 1.1 0 2-.9 2-2s-.9-2-2-2' style='fill:%23011e41'/%3E%3C/svg%3E")}.mg-icon-flash-flood:before{--mg-icon-svg:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 48 48'%3E%3Cpath d='M1.5 9h11.4l-3.4 3.4c-.6.6-.6 1.5 0 2.1s1.5.6 2.1 0l6-6c.6-.6.6-1.5 0-2.1l-6-6C11-.1 10-.1 9.4.4s-.5 1.6 0 2.2L12.9 6H1.5C.7 6 0 6.7 0 7.5S.7 9 1.5 9m46.3 3L33.2.1q-.15-.15-.3 0L18.2 12c-.1.1-.2.2-.2.4v17.7c1.2.2 2.3.5 3.3 1.1.8.6 1.7.8 2.7.8s1.9-.2 2.7-.8c1.4-.8 3-1.3 4.6-1.2 1.6 0 3.2.4 4.6 1.2 1.7 1 3.8 1 5.4 0 1.4-.8 3-1.3 4.6-1.2.7 0 1.3.1 2 .2V12.4c.1-.2 0-.3-.1-.4M46 42c-1.6 0-3.2.4-4.6 1.2-1.7 1-3.8 1-5.4 0-1.4-.8-3-1.3-4.6-1.2-1.6 0-3.2.4-4.6 1.2-.9.6-1.8.8-2.8.8s-1.9-.2-2.7-.8c-1.4-.8-3-1.3-4.6-1.2-1.6 0-3.2.4-4.6 1.2-.8.5-1.8.8-2.7.8-1 0-1.9-.2-2.7-.8C5.2 42.4 3.6 42 2 42c-1.1 0-2 .9-2 2s.9 2 2 2c1 0 1.9.2 2.7.8 1.4.8 3 1.3 4.6 1.2 1.6 0 3.2-.4 4.6-1.2.8-.5 1.8-.8 2.7-.8 1 0 1.9.2 2.7.8 1.4.8 3 1.3 4.6 1.2 1.6 0 3.2-.4 4.6-1.2 1.7-1 3.8-1 5.4 0 2.9 1.7 6.4 1.7 9.3 0 .9-.6 1.8-.8 2.8-.8 1.1 0 2-.9 2-2s-.9-2-2-2m0-8c-1.6 0-3.2.4-4.6 1.2-1.7 1-3.8 1-5.4 0-1.4-.8-3-1.3-4.6-1.2-1.6 0-3.2.4-4.6 1.2-.9.6-1.8.8-2.8.8s-1.9-.2-2.7-.8c-1.4-.8-3-1.3-4.6-1.2-1.6 0-3.2.4-4.6 1.2-.8.5-1.7.8-2.7.8s-1.9-.2-2.7-.8C5.2 34.4 3.6 34 2 34c-1.1 0-2 .9-2 2s.9 2 2 2c1 0 1.9.2 2.7.8 1.4.8 3 1.3 4.6 1.2 1.6 0 3.2-.4 4.6-1.2.8-.5 1.7-.8 2.7-.8s1.9.2 2.7.8c1.4.8 3 1.3 4.6 1.2 1.6 0 3.2-.4 4.6-1.2 1.7-1 3.8-1 5.4 0 2.9 1.7 6.4 1.7 9.3 0 .9-.6 1.8-.8 2.8-.8 1.1 0 2-.9 2-2s-.9-2-2-2' style='fill:%23011e41'/%3E%3C/svg%3E")}.mg-icon-cyclone:before{--mg-icon-svg:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 48 48'%3E%3Cpath d='M47.6 24.3c-.9-1.5-2.7-2-4.1-1.2l-4.6 2.7c.4-3.1-.2-6.3-1.8-9.1 0-.1-.1-.1-.1-.2l-8.7-15c-.8-1.4-2.6-1.9-4-1.1h-.1c-1.4.8-1.9 2.6-1.1 4L25.8 9c-3.2-.4-6.5.3-9.3 1.9l-.1.1-15 8.6c-1.4.8-1.9 2.6-1.1 4v.1c.8 1.4 2.6 1.9 4 1.1L9 22.1c-.4 3.2.3 6.4 1.9 9.2v.1l8.7 15c.8 1.4 2.6 1.9 4 1.1h.1c1.4-.8 1.9-2.6 1.1-4l-2.7-4.6c3.1.4 6.2-.2 8.9-1.7.1-.1.2-.1.4-.2l15-8.7c1.6-.8 2-2.6 1.2-4m-31.4 4.2c-2.5-4.3-1-9.7 3.2-12.3h.1c.1 0 0 0 0 0 4.3-2.4 9.7-1 12.2 3.3v.1c0 .1 0 0 0 0 2.4 4.3 1 9.8-3.3 12.3-4.2 2.4-9.7.9-12.2-3.4' style='fill:%23011e41'/%3E%3C/svg%3E")}.mg-icon-drought:before{--mg-icon-svg:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 48 48'%3E%3Cpath d='M45.5 43H35V20c0-2.2 1.8-4 4-4s4 1.8 4 4v.7c-1.2.6-2 1.8-2 3.2 0 1.7 2.9 5.4 3.4 6.1 0 0 .1.1.2 0 .5-.7 3.4-4.4 3.4-6.1 0-1.3-.8-2.6-2-3.2V20c0-3.8-3.1-6.9-7-7-3.9 0-7 3.1-7 7v5h-3c-2.6.3-4.7 2.3-5 5v1.7c-1.2.6-2 1.8-2 3.2 0 1.7 2.9 5.4 3.4 6.1 0 0 .1.1.2 0 .5-.7 3.4-4.4 3.4-6.1 0-1.3-.8-2.6-2-3.2v-1.2c0-1.4 1.1-2.5 2.5-2.5H32v15H2.5C1.1 43 0 44.1 0 45.5S1.1 48 2.5 48h43c1.4 0 2.5-1.1 2.5-2.5S46.9 43 45.5 43m-33-37c.8 0 1.5-.7 1.5-1.5v-3c0-.8-.7-1.5-1.5-1.5S11 .7 11 1.5v3c0 .8.7 1.5 1.5 1.5M11 20.5v3c0 .8.7 1.5 1.5 1.5s1.5-.7 1.5-1.5v-3c0-.8-.7-1.5-1.5-1.5s-1.5.7-1.5 1.5m8.2-12.6 2.1-2.1c.6-.6.6-1.5 0-2.1s-1.5-.6-2.1 0l-2.1 2.1c-.6.6-.6 1.5 0 2.1s1.5.6 2.1 0M5.8 17.1l-2.1 2.1c-.6.6-.6 1.5 0 2.1s1.5.6 2.1 0l2.1-2.1c.6-.6.6-1.5 0-2.1s-1.5-.6-2.1 0M19 12.5c0 .8.7 1.5 1.5 1.5h3c.8 0 1.5-.7 1.5-1.5s-.7-1.5-1.5-1.5h-3c-.8 0-1.5.7-1.5 1.5M1.5 14h3c.8 0 1.5-.7 1.5-1.5S5.3 11 4.5 11h-3c-.8 0-1.5.7-1.5 1.5S.7 14 1.5 14m15.6 3.1c-.6.6-.6 1.5 0 2.1l2.1 2.1c.6.6 1.5.6 2.1 0s.6-1.5 0-2.1l-2.1-2.1c-.6-.6-1.5-.6-2.1 0M5.8 7.9c.6.6 1.5.6 2.1 0s.6-1.5 0-2.1L5.8 3.7c-.6-.6-1.5-.6-2.1 0s-.6 1.5 0 2.1z' style='fill:%23011e41'/%3E%3Ccircle cx='12.5' cy='12.5' r='4.5' style='fill:%23011e41'/%3E%3C/svg%3E")}.mg-icon-volcano:before{--mg-icon-svg:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 48 48'%3E%3Cpath d='M47.9 47.2 29.3 29.6c-.7-.7-1.7-.8-2.5-.3-1.7 1.2-3.9 1.2-5.6 0-.8-.5-1.8-.4-2.5.3L.1 47.2c-.2.2-.2.5 0 .7.1 0 .3.1.4.1h47c.3 0 .5-.2.5-.5 0-.1-.1-.3-.1-.3M25 24.5c0 .8.7 1.5 1.5 1.5s1.5-.7 1.5-1.5v-8c-.2-3.4 2.4-6.3 5.8-6.4 2.5-.1 4.7 1.8 4.8 4.4.1 1.9-1.3 3.5-3.2 3.6-1.3-.1-2.4-1.1-2.5-2.4 0-.8-.7-1.5-1.6-1.4-.8 0-1.5.7-1.4 1.6.2 3 2.7 5.3 5.7 5.1 3.5-.2 6.2-3.2 6.1-6.7-.2-4.2-3.8-7.4-8-7.2-5 .2-8.9 4.5-8.7 9.5zM14.2 11.9c.8 0 1.5-.6 1.6-1.4 0-.8-.6-1.5-1.4-1.6-1.4-.1-2.5-1.3-2.4-2.6.1-1.9 1.7-3.4 3.6-3.3 2.6.2 4.6 2.4 4.4 5v16.5c0 .8.7 1.5 1.5 1.5s1.5-.7 1.5-1.5V8.1c.2-4.2-3-7.8-7.3-8.1C12.2-.2 9.2 2.6 9 6.1c-.1 3 2.2 5.6 5.2 5.8' style='fill:%23011e41'/%3E%3C/svg%3E")}.mg-icon-landslide:before{--mg-icon-svg:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 48 48'%3E%3Cpath d='M47.6 19.7c-.4-1.1-1.3-2-2.4-2.4s-2.4-.4-3.5 0c-.7.3-1 1.2-.6 1.8v.1c.3.6 1 .9 1.7.7.4-.1.8 0 1.2.1.3.1.6.4.8.8.4 1.1-.1 2.4-1.2 2.9-.8.3-1.7.3-2.5 0s-1.4-.9-1.7-1.7L32.9 7.9c-.4-.7-1.2-1.1-2-.7-.7.4-1.1 1.2-.7 2l6.5 14.1c.6 1.5 1.8 2.7 3.3 3.3.7.3 1.6.5 2.4.5s1.6-.2 2.4-.5c2.6-1.2 3.9-4.2 2.8-6.9M21 7.3c-.5-1.1-1.8-1.6-3-1.1-.5.2-.9.6-1.1 1.1L.2 44.8c-.5 1.1 0 2.5 1.1 3 .3.1.6.2 1 .2h33.5c1.2 0 2.3-1 2.3-2.2 0-.3-.1-.6-.2-.9zm16.1 2.2c.2.3.5.5.9.5h5c.4 0 .7-.2.9-.5l2-4c.2-.3.2-.7 0-1l-2-4c-.2-.3-.5-.5-.9-.5h-5c-.4 0-.7.2-.9.5l-2 4c-.2.3-.2.7 0 1z' style='fill:%23011e41'/%3E%3C/svg%3E")}.mg-icon-analysis:before{--mg-icon-svg:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ctitle%3EAsset 734%3C/title%3E%3Cg data-name='Layer 2'%3E%3Cpath d='M8.38 33.8 1.2 40.98a4.115 4.115 0 0 0 5.82 5.82l7.18-7.18a24 24 0 0 1-5.82-5.82M22 20h-4a1.003 1.003 0 0 0-1 1v4.94a12.57 12.57 0 0 0 6 5.52V21a1.003 1.003 0 0 0-1-1m16-6h-4a1.003 1.003 0 0 0-1 1v16.46a12.57 12.57 0 0 0 6-5.52V15a1.003 1.003 0 0 0-1-1m-8 3h-4a1.003 1.003 0 0 0-1 1v14.14a12.7 12.7 0 0 0 6 0V18a1.003 1.003 0 0 0-1-1' style='fill:%23009edb'/%3E%3Cpath d='M28 0a20 20 0 1 0 20 20A19.995 19.995 0 0 0 28 0m11 30.18A15 15 0 0 1 13 20a15 15 0 1 1 26 10.18' style='fill:%23009edb'/%3E%3C/g%3E%3C/svg%3E")}.mg-icon-assessment:before{--mg-icon-svg:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ctitle%3EAsset 735%3C/title%3E%3Cg data-name='Layer 2'%3E%3Cpath d='M2 11h2.23a8.993 8.993 0 0 0 17.54 0h4.46a8.993 8.993 0 0 0 17.54 0H46a2 2 0 0 0 0-4h-2.23a8.993 8.993 0 0 0-17.54 0h-4.46A8.993 8.993 0 0 0 4.23 7H2a2 2 0 0 0 0 4m28.424-4A4.931 4.931 0 1 1 30 9a5 5 0 0 1 .424-2m-22 0A4.931 4.931 0 1 1 8 9a5 5 0 0 1 .424-2M47 23H17a1.003 1.003 0 0 0-1 1v3.99h15A3.013 3.013 0 0 1 34.01 31v17H48V24a1.003 1.003 0 0 0-1-1' style='fill:%23009edb'/%3E%3Cpath d='M30 30H2a2.006 2.006 0 0 0-2 2v15.93l.07.07h31.92l.01-.01V32a2.006 2.006 0 0 0-2-2m-4.5 15h-19a1.5 1.5 0 0 1 0-3h19a1.5 1.5 0 0 1 0 3m0-6h-19a1.5 1.5 0 0 1 0-3h19a1.5 1.5 0 0 1 0 3' style='fill:%23009edb'/%3E%3C/g%3E%3C/svg%3E")}.mg-icon-coordination:before{--mg-icon-svg:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ctitle%3EAsset 673%3C/title%3E%3Cg data-name='Layer 2'%3E%3Ccircle cx='24' cy='24' r='6' style='fill:%23009edb'/%3E%3Cpath d='M32 18h9a2 2 0 0 0 0-4h-4.172L47.414 3.414A2 2 0 1 0 44.586.586L34 11.172V7a2 2 0 0 0-4 0v9a2 2 0 0 0 2 2m-20.828-4H7a2 2 0 0 0 0 4h9a2 2 0 0 0 2-2V7a2 2 0 0 0-4 0v4.172L3.414.586A2 2 0 0 0 .586 3.414Zm25.656 20H41a2 2 0 0 0 0-4h-9a2 2 0 0 0-2 2v9a2 2 0 0 0 4 0v-4.172l10.586 10.586a2 2 0 0 0 2.828-2.828ZM16 30H7a2 2 0 0 0 0 4h4.172L.586 44.586a2 2 0 1 0 2.828 2.828L14 36.828V41a2 2 0 0 0 4 0v-9a2 2 0 0 0-2-2' style='fill:%23009edb'/%3E%3C/g%3E%3C/svg%3E")}.mg-icon-data:before{--mg-icon-svg:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 48'%3E%3Ctitle%3EAsset 766%3C/title%3E%3Cg data-name='Layer 2'%3E%3Cpath d='M33 0H3a3 3 0 0 0-3 3v42a3 3 0 0 0 3 3h30a3 3 0 0 0 3-3V3a3 3 0 0 0-3-3m-1 44H4V4h28Z' style='fill:%23009edb'/%3E%3Cpath d='m22.56 13.56.44-.439V20.5a1.5 1.5 0 0 0 3 0v-11a1.5 1.5 0 0 0-2.56-1.06l-3 3a1.5 1.5 0 0 0 2.12 2.12m-8.486 12.554a1.5 1.5 0 0 0-1.635.325l-3 3a1.5 1.5 0 0 0 2.122 2.122l.439-.44V38.5a1.5 1.5 0 0 0 3 0v-11a1.5 1.5 0 0 0-.926-1.386M22 40h3a3 3 0 0 0 3-3v-8a3 3 0 0 0-3-3h-3a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3m0-11h3v8h-3Zm-11-7h3a3 3 0 0 0 3-3v-8a3 3 0 0 0-3-3h-3a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3m0-11h3v8h-3Z' style='fill:%23009edb'/%3E%3C/g%3E%3C/svg%3E")}.mg-icon-help:before{--mg-icon-svg:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 48'%3E%3Ctitle%3EAsset 951%3C/title%3E%3Cg data-name='Layer 2'%3E%3Ccircle cx='14' cy='44' r='4' style='fill:%23009edb'/%3E%3Cpath d='M28 14a14 14 0 0 0-28 0 4 4 0 0 0 8 0 6 6 0 1 1 6 6 4 4 0 0 0-4 4v9a4 4 0 0 0 8 0v-5.59A14.02 14.02 0 0 0 28 14' style='fill:%23009edb'/%3E%3C/g%3E%3C/svg%3E")}.mg-icon-information-management:before{--mg-icon-svg:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 44.064'%3E%3Ctitle%3EAsset 745%3C/title%3E%3Cpath d='M2 8.017h4.317a6.007 6.007 0 0 0 11.334 0H46a2 2 0 0 0 0-4H17.651a6.006 6.006 0 0 0-11.334 0H2a2 2 0 0 0 0 4M11.984 4a2.016 2.016 0 1 1-2.016 2.017A2.02 2.02 0 0 1 11.984 4M46 36.049H25.683a6.006 6.006 0 0 0-11.334 0H2a2 2 0 0 0 0 4h12.349a6.007 6.007 0 0 0 11.334 0H46a2 2 0 0 0 0-4m-25.984 4.015a2.016 2.016 0 1 1 2.016-2.015 2.02 2.02 0 0 1-2.016 2.015M46 20.032h-4.317a6.007 6.007 0 0 0-11.334 0H2a2 2 0 0 0 0 4h28.349a6.006 6.006 0 0 0 11.334 0H46a2 2 0 0 0 0-4m-9.984 4.017a2.016 2.016 0 1 1 2.016-2.017 2.02 2.02 0 0 1-2.016 2.017' data-name='Layer 2' style='fill:%23009edb'/%3E%3C/svg%3E")}.mg-icon-location:before{--mg-icon-svg:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 47.867'%3E%3Ctitle%3EAsset 769%3C/title%3E%3Cpath d='M16 0C7.16 0 0 7.6 0 16.96c0 8.06 11.83 25.67 15.15 30.45a1.018 1.018 0 0 0 1.7 0C20.17 42.63 32 25.02 32 16.96 32 7.6 24.84 0 16 0m0 23.87a8 8 0 1 1 8-8 8 8 0 0 1-8 8' data-name='Layer 2' style='fill:%23009edb'/%3E%3C/svg%3E")}.mg-icon-monitoring:before{--mg-icon-svg:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ctitle%3EAsset 752%3C/title%3E%3Cg data-name='Layer 2'%3E%3Cpath d='M8.38 33.8 1.2 40.98a4.115 4.115 0 0 0 5.82 5.82l7.18-7.18a24 24 0 0 1-5.82-5.82M28 0a20 20 0 1 0 20 20A19.995 19.995 0 0 0 28 0m11 30.18A15 15 0 0 1 13 20a15 15 0 1 1 26 10.18' style='fill:%23009edb'/%3E%3Cpath d='m39.414 18.586-6-6a2 2 0 1 0-2.828 2.828L33.172 18H18a2 2 0 0 0 0 4h15.172l-2.586 2.586a2 2 0 1 0 2.828 2.828l6-6a2 2 0 0 0 0-2.828' style='fill:%23009edb'/%3E%3C/g%3E%3C/svg%3E")}.mg-icon-notification:before{--mg-icon-svg:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 38 48'%3E%3Ctitle%3EAsset 958%3C/title%3E%3Cpath d='M18 48h2a4 4 0 0 0 4-4H14a4 4 0 0 0 4 4m15.5-15h-.167l-1.88-14.1A12.55 12.55 0 0 0 24 9.048V5a5 5 0 0 0-10 0v4.048A12.55 12.55 0 0 0 6.547 18.9L4.667 33H4.5a4.5 4.5 0 0 0 0 9h29a4.5 4.5 0 0 0 0-9M19 3a2 2 0 1 1-2 2 2 2 0 0 1 2-2' data-name='Layer 2' style='fill:%23009edb'/%3E%3C/svg%3E")}.mg-icon-print:before{--mg-icon-svg:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 42'%3E%3Ctitle%3EAsset 936%3C/title%3E%3Cg data-name='Layer 2'%3E%3Cpath d='M44 1c0-.552-.689-1-1.538-1H5.538C4.688 0 4 .448 4 1v3h40Zm2 5H2a2.006 2.006 0 0 0-2 2v15.96a2.006 2.006 0 0 0 2 2h6v-9.97h32v9.97h6a2.006 2.006 0 0 0 2-2V8a2.006 2.006 0 0 0-2-2m-15 7a2 2 0 1 1 2-2 2.006 2.006 0 0 1-2 2m7 0a2 2 0 1 1 2-2 2.006 2.006 0 0 1-2 2' style='fill:%23009edb'/%3E%3Cpath d='M10 25.96V41a1.003 1.003 0 0 0 1 1h26a1.003 1.003 0 0 0 1-1V17.99H10ZM34 35H14a1 1 0 0 1 0-2h20a1 1 0 0 1 0 2m0-6H14a1 1 0 0 1 0-2h20a1 1 0 0 1 0 2' style='fill:%23009edb'/%3E%3C/g%3E%3C/svg%3E")}.mg-icon-public-information:before{--mg-icon-svg:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 48'%3E%3Ctitle%3EAsset 757%3C/title%3E%3Cg data-name='Layer 2'%3E%3Crect width='16' height='33' x='6' rx='7.979' style='fill:%23009edb'/%3E%3Cpath d='M28 24.5a1.5 1.5 0 0 0-3 0 11 11 0 1 1-22 0 1.5 1.5 0 0 0-3 0 13.996 13.996 0 0 0 12 13.846V44H8a2.02 2.02 0 0 0-1.755 3.001A1.92 1.92 0 0 0 7.978 48H20a2.02 2.02 0 0 0 1.755-3.002A1.92 1.92 0 0 0 20.022 44H16v-5.665A14.02 14.02 0 0 0 28 24.5' style='fill:%23009edb'/%3E%3C/g%3E%3C/svg%3E")}.mg-icon-report:before{--mg-icon-svg:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 48'%3E%3Ctitle%3EAsset 772%3C/title%3E%3Cg data-name='Layer 2'%3E%3Cpath d='M35 0H13a1.003 1.003 0 0 0-1 1v11h11a3 3 0 0 1 2.23 1H32a1 1 0 0 1 0 2h-6v3h6a1 1 0 0 1 0 2h-6v3h6a1 1 0 0 1 0 2h-6v9h9a1.003 1.003 0 0 0 1-1V1a1.003 1.003 0 0 0-1-1m-3 10H16a1 1 0 0 1 0-2h16a1 1 0 0 1 0 2' style='fill:%23009edb'/%3E%3Cpath d='M23 14H1a1.003 1.003 0 0 0-1 1v32a1.003 1.003 0 0 0 1 1h22a1.003 1.003 0 0 0 1-1V15a1.003 1.003 0 0 0-1-1M4 22h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2m0 5h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2m16 12H4a1 1 0 0 1 0-2h16a1 1 0 0 1 0 2M4 34a1 1 0 0 1 0-2h16a1 1 0 0 1 0 2Z' style='fill:%23009edb'/%3E%3C/g%3E%3C/svg%3E")}.mg-icon-storm-surge:before{--mg-icon-svg:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 48 48'%3E%3Cpath d='M46 42c-1.6 0-3.2.4-4.6 1.2-1.7 1-3.8 1-5.4 0-1.4-.8-3-1.3-4.6-1.2-1.6 0-3.2.4-4.6 1.2-.9.6-1.8.8-2.8.8s-1.9-.2-2.7-.8c-1.4-.8-3-1.3-4.6-1.2-1.6 0-3.2.4-4.6 1.2-.8.5-1.8.8-2.7.8-1 0-1.9-.2-2.7-.8C5.2 42.4 3.6 42 2 42c-1.1 0-2 .9-2 2s.9 2 2 2c1 0 1.9.2 2.7.8 1.4.8 3 1.3 4.6 1.2 1.6 0 3.2-.4 4.6-1.2.8-.5 1.8-.8 2.7-.8 1 0 1.9.2 2.7.8 1.4.8 3 1.3 4.6 1.2 1.6 0 3.2-.4 4.6-1.2 1.7-1 3.8-1 5.4 0 2.9 1.7 6.4 1.7 9.3 0 .9-.6 1.8-.8 2.8-.8 1.1 0 2-.9 2-2s-.9-2-2-2m0-8c-1.6 0-3.2.4-4.6 1.2-1.7 1-3.8 1-5.4 0-1.4-.8-3-1.3-4.6-1.2-1.6 0-3.2.4-4.6 1.2-.9.6-1.8.8-2.8.8s-1.9-.2-2.7-.8c-1.4-.8-3-1.3-4.6-1.2-1.6 0-3.2.4-4.6 1.2-.8.5-1.8.8-2.7.8-1 0-1.9-.2-2.7-.8C5.2 34.4 3.6 34 2 34c-1.1 0-2 .9-2 2s.9 2 2 2c1 0 1.9.2 2.7.8 1.4.8 3 1.3 4.6 1.2 1.6 0 3.2-.4 4.6-1.2.8-.5 1.8-.8 2.7-.8 1 0 1.9.2 2.7.8 1.4.8 3 1.3 4.6 1.2 1.6 0 3.2-.4 4.6-1.2 1.7-1 3.8-1 5.4 0 2.9 1.7 6.4 1.7 9.3 0 .9-.6 1.8-.8 2.8-.8 1.1 0 2-.9 2-2s-.9-2-2-2M8 22h28.5c3.5 0 6.6-2.5 7.3-5.9.1-.5.2-1.1.2-1.6 0-4.1-3.4-7.5-7.5-7.5-.9 0-1.8.2-2.7.5A9.51 9.51 0 0 0 22.5.2C18.2 1.1 15 5 15 9.4c-2.5-1.1-5.5 0-6.6 2.6-.3.6-.4 1.3-.4 2-2.2 0-4 1.8-4 4s1.8 4 4 4m3 2.5L7.5 28c-.7.7-.7 1.8 0 2.5s1.8.7 2.5 0l3.5-3.5c.7-.7.7-1.8 0-2.5s-1.8-.7-2.5 0m12 0L19.5 28c-.7.7-.7 1.8 0 2.5s1.8.7 2.5 0l3.5-3.5c.7-.7.7-1.8 0-2.5s-1.8-.7-2.5 0m12 0L31.5 28c-.7.7-.7 1.8 0 2.5s1.8.7 2.5 0l3.5-3.5c.7-.7.7-1.8 0-2.5s-1.8-.7-2.5 0' style='fill:%23011e41'/%3E%3C/svg%3E")}.mg-icon-tornado:before{--mg-icon-svg:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 48 48'%3E%3Cpath d='M24.5 41h-3c-1.9 0-3.5 1.6-3.5 3.5s1.6 3.5 3.5 3.5h3c1.9 0 3.5-1.6 3.5-3.5S26.4 41 24.5 41m6-10h-9c-1.9 0-3.5 1.6-3.5 3.5s1.6 3.5 3.5 3.5h9c1.9 0 3.5-1.6 3.5-3.5S32.4 31 30.5 31m1.5-6.5c0-1.9-1.6-3.5-3.5-3.5h-16C10.6 21 9 22.6 9 24.5s1.6 3.5 3.5 3.5h16c1.9 0 3.5-1.6 3.5-3.5M39.5 11h-26c-1.9 0-3.5 1.6-3.5 3.5s1.6 3.5 3.5 3.5h26c1.9 0 3.5-1.6 3.5-3.5S41.4 11 39.5 11m5-11h-41C1.6 0 0 1.6 0 3.5S1.6 7 3.5 7h41C46.4 7 48 5.4 48 3.5S46.4 0 44.5 0' style='fill:%23011e41'/%3E%3C/svg%3E")}.mg-icon-heatwave:before{--mg-icon-svg:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 34 48'%3E%3Cpath d='M16 6.5C16 2.9 13.1 0 9.5 0S3 2.9 3 6.5v25.1c-3.8 3.6-4 9.6-.4 13.4s9.6 4 13.4.4c1.9-1.8 3-4.3 3-6.9s-1.1-5.1-3-6.9zM9.5 45C5.9 45 3 42.1 3 38.5c0-2 .9-3.8 2.4-5.1L6 33V6.5C6 4.6 7.6 3 9.5 3S13 4.6 13 6.5V33l.6.5c2.8 2.2 3.3 6.3 1 9.1-1.3 1.5-3.1 2.4-5.1 2.4' style='fill:%23011e41'/%3E%3Cpath d='M11 34.8V8.5c0-.8-.7-1.5-1.5-1.5S8 7.7 8 8.5v26.3C6 35.6 5 38 5.8 40S9 43 11 42.2s3-3.2 2.2-5.2c-.4-1-1.2-1.8-2.2-2.2M32.5 10H28V5.5c0-.8-.7-1.5-1.5-1.5S25 4.7 25 5.5V10h-4.5c-.8 0-1.5.7-1.5 1.5s.7 1.5 1.5 1.5H25v4.5c0 .8.7 1.5 1.5 1.5s1.5-.7 1.5-1.5V13h4.5c.8 0 1.5-.7 1.5-1.5s-.7-1.5-1.5-1.5' style='fill:%23011e41'/%3E%3C/svg%3E")}.mg-icon-cold-wave:before{--mg-icon-svg:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 34 48'%3E%3Cpath d='M16 6.5C16 2.9 13.1 0 9.5 0S3 2.9 3 6.5v25.1c-3.8 3.6-4 9.6-.4 13.4s9.6 4 13.4.4c1.9-1.8 3-4.3 3-6.9s-1.1-5.1-3-6.9zM9.5 45C5.9 45 3 42.1 3 38.5c0-2 .9-3.8 2.4-5.1L6 33V6.5C6 4.6 7.6 3 9.5 3S13 4.6 13 6.5V33l.6.5c2.8 2.2 3.3 6.3 1 9.1-1.3 1.5-3.1 2.4-5.1 2.4' style='fill:%23011e41'/%3E%3Cpath d='M11 34.8v-9.3c0-.8-.7-1.5-1.5-1.5S8 24.7 8 25.5v9.3C6 35.6 5 38 5.8 40S9 43 11 42.2s3-3.2 2.2-5.2c-.4-1-1.2-1.8-2.2-2.2M32.5 10h-12c-.8 0-1.5.7-1.5 1.5s.7 1.5 1.5 1.5h12c.8 0 1.5-.7 1.5-1.5s-.7-1.5-1.5-1.5' style='fill:%23011e41'/%3E%3C/svg%3E")}.mg-icon-heavy-rain:before{--mg-icon-svg:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 48 40'%3E%3Cpath d='M11.2 31c-.5 0-.9.2-1.3.5L4.5 37c-.7.7-.7 1.8 0 2.5s1.8.7 2.5 0l5.5-5.5c.7-.7.7-1.8 0-2.5-.4-.3-.8-.5-1.3-.5m13 0c-.5 0-.9.2-1.3.5L17.5 37c-.7.7-.7 1.8 0 2.5s1.8.7 2.5 0l5.5-5.5c.7-.7.7-1.8 0-2.5-.3-.3-.8-.5-1.3-.5m13 0c-.5 0-.9.2-1.3.5L30.5 37c-.7.7-.7 1.8 0 2.5s1.8.7 2.5 0l5.5-5.5c.7-.7.7-1.8 0-2.5-.3-.3-.8-.5-1.3-.5M39 9c-1.1 0-2.2.2-3.2.6-1-6.3-7-10.5-13.2-9.4-5.5.9-9.5 5.6-9.6 11.2-3.1-1.1-6.5.5-7.7 3.6-.3.9-.4 2-.2 3h-.6C2 18 0 20 0 22.5S2 27 4.5 27H39c4.3 0 8-3 8.8-7.2.1-.6.2-1.2.2-1.8 0-5-4-9-9-9' style='fill:%23011e41'/%3E%3C/svg%3E")}.mg-icon-snowfall:before{--mg-icon-svg:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 43.6 48'%3E%3Cpath d='M41.1 20.3c.2 0 .3.1.5.1 1.1 0 2-.9 2-2 0-.9-.6-1.7-1.5-1.9l-2.1-.7 1.9-1.1c1-.5 1.3-1.8.7-2.7s-1.8-1.3-2.7-.7l-1.9 1 .6-2.2c.3-1.1-.3-2.2-1.4-2.5s-2.2.5-2.5 1.5l-1.6 6-6.5 3.7c-.8-.8-1.8-1.3-2.8-1.6v-6.5l4.4-4.4c.8-.8.8-2 0-2.8s-2-.8-2.8 0l-1.6 1.6V2c0-1.1-.9-2-2-2s-2 .9-2 2v3.2l-1.6-1.6c-.8-.8-2-.8-2.8 0s-.8 2 0 2.8l4.4 4.4v6.5c-1 .3-2 .9-2.8 1.6l-6.5-3.7-1.6-6c-.3-1.1-1.4-1.7-2.4-1.5-1.1.3-1.7 1.4-1.4 2.5l.6 2.2-1.9-1.1c-1-.6-2.2-.3-2.8.7s-.2 2.2.7 2.7l1.9 1.1-2.2.6c-1.1.3-1.7 1.4-1.4 2.5.2.9 1 1.5 1.9 1.5.2 0 .4 0 .5-.1l6-1.6 6.5 3.7c-.3 1.1-.3 2.2 0 3.2l-5.6 3.2-6-1.6c-1.1-.3-2.2.3-2.4 1.4s.3 2.2 1.4 2.4l2.2.6-2.7 1.6C.8 33.8.5 35 1 36c.6 1 1.8 1.3 2.7.7l2.7-1.6-.6 2.2c-.3 1.1.4 2.2 1.4 2.4.2 0 .3.1.5.1.9 0 1.7-.6 1.9-1.5l1.6-6 5.6-3.2c.8.8 1.8 1.3 2.8 1.6v7.5l-4.4 4.4c-.8.8-.8 2 0 2.8s2 .8 2.8 0l1.6-1.6V46c0 1.1.9 2 2 2s2-.9 2-2v-2.2l1.6 1.6c.8.8 2 .8 2.8 0s.8-2 0-2.8l-4.4-4.4v-7.5c1-.3 2-.9 2.8-1.6l5.6 3.2 1.6 6c.2.9 1 1.5 1.9 1.5.2 0 .4 0 .5-.1 1.1-.3 1.7-1.4 1.4-2.4l-.6-2.2 2.7 1.6c1 .6 2.2.2 2.7-.7.5-1 .2-2.2-.7-2.7l-2.7-1.6 2.2-.6c1.1-.3 1.7-1.4 1.4-2.4-.3-1.1-1.4-1.7-2.4-1.4l-6 1.6-5.6-3.2c.3-1.1.3-2.2 0-3.2l6.5-3.7zM21.8 27c-1.7 0-3-1.3-3-3s1.3-3 3-3 3 1.3 3 3-1.3 3-3 3' style='fill:%23011e41'/%3E%3C/svg%3E")}.mg-icon-fire:before{--mg-icon-svg:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 34 48'%3E%3Cpath d='M17.4.2c-.2-.2-.5-.3-.8-.1l-.1.1C13.9 3.5 0 22.5 0 31c0 9.4 7.6 17 17 17s17-7.6 17-17C34 22.5 20.1 3.5 17.4.2M17 43c-4.4 0-8-3.6-8-8 0-4 6.6-12.4 7.8-13.9.1-.1.2-.1.4 0C18.4 22.6 25 31 25 35c0 4.4-3.6 8-8 8' style='fill:%23011e41'/%3E%3C/svg%3E")}.mg-icon-epidemic:before{--mg-icon-svg:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 48 42'%3E%3Cpath d='M48 29.5V29c0-7-5.5-12.7-12.5-13 0-.1-.1-.1-.1-.2C38.1 11 37.3 5 33.5 1.1l-.4-.4c-.9-.9-2.5-1-3.4 0s-1 2.5 0 3.5l.3.4C31.4 6 32.1 8 32 10c0 .5-.1 1.1-.2 1.6-4.6-3.5-10.9-3.5-15.5 0-.2-.5-.3-1.1-.3-1.6-.1-2 .6-3.9 1.9-5.4l.3-.4c1-1 .9-2.5 0-3.5s-2.5-1-3.4 0l-.3.3c-3.8 4-4.6 9.9-1.9 14.7 0 .1-.1.1-.1.2C5.5 16.3 0 22 0 29v.5C0 30.9 1.1 32 2.5 32S5 30.9 5 29.5V29h-.1.1c0-3.7 2.5-6.8 6-7.7v.7c0 5.3 3.2 10.1 8.2 12.1A8.14 8.14 0 0 1 13 37h-.5c-1.4 0-2.5 1.1-2.5 2.5s1.1 2.5 2.5 2.5h.5c4.5 0 8.6-2.3 11-6.1 2.4 3.8 6.5 6.1 11 6.1h.6c1.4 0 2.5-1.1 2.5-2.5S37 37 35.6 37H35c-2.4 0-4.7-1.1-6.2-2.9 4.9-2 8.2-6.7 8.2-12.1v-.7c3.5.9 6 4.1 6 7.7h.1-.1v.5c0 1.4 1.1 2.5 2.5 2.5s2.5-1.1 2.5-2.5M24 13c2.2 0 4.3.8 5.9 2.2-.1.1-.2.3-.4.4-3 3.1-7.8 3.1-10.9.2l-.2-.2-.4-.4c1.7-1.4 3.8-2.2 6-2.2m-9 9v-.7c4 1 6.6 5 5.8 9.1-3.5-1.3-5.8-4.6-5.8-8.4m12.1 8.4c-.8-4.1 1.8-8.1 5.8-9.1v.7c.1 3.8-2.2 7.1-5.8 8.4' style='fill:%23011e41'/%3E%3C/svg%3E")}.mg-icon-resilience:before{--mg-icon-svg:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 48 48'%3E%3Cpath d='M46.7 1.3c-1.8-1.8-4.6-1.8-6.4 0-.3.3-.6.7-.8 1.1.9.7 1.6 1.7 2 2.7.6 1.6.6 3.4-.1 5L39 15.6v27.9c0 2.5 2 4.5 4.5 4.5s4.5-2 4.5-4.5v-39c0-1.2-.5-2.3-1.3-3.2' style='fill:%23011e41'/%3E%3Cpath d='M39.6 9.3c1-2.3 0-4.9-2.3-5.9s-4.9 0-5.9 2.3l-.5 1c2.3 2.1 2.8 5.6 1 8.1L18.7 34.2l-3.3 7.5c-1 2.3 0 4.9 2.3 5.9.6.2 1.2.4 1.8.4 1.8 0 3.4-1.1 4.1-2.7L39 10.7z' style='fill:%23011e41'/%3E%3Cpath d='m20.1 28.6 3.1-4.6 7-10.2c1.3-1.9.9-4.4-.9-5.8-.1-.1-.2-.1-.3-.2l-.6-.3c-2-.9-4.5-.3-5.7 1.5L.8 41c-.5.7-.8 1.6-.8 2.5C0 46 2 48 4.5 48c1.5 0 2.9-.7 3.7-2L17 33.2z' style='fill:%23011e41'/%3E%3C/svg%3E")}.mg-icon-preparedness:before{--mg-icon-svg:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 48 48'%3E%3Cpath d='M13.4 35.6c-.8-.8-2-.8-2.8 0l-3.1 3.1-3.1-3.1c-.8-.8-2-.8-2.8 0s-.8 2 0 2.8l3.1 3.1-3.1 3.1c-.8.8-.8 2 0 2.8s2 .8 2.8 0l3.1-3.1 3.1 3.1c.8.8 2 .8 2.8 0s.8-2 0-2.8l-3.1-3.1 3.1-3.1c.8-.8.8-2 0-2.8m-.8-18L6 24.2l-2.6-2.6c-.8-.8-2-.8-2.8 0s-.8 2 0 2.8l4 4c.8.8 2 .8 2.8 0l8-8c.8-.8.8-2 0-2.8s-2-.8-2.8 0M45 22H23c-1.7 0-3 1.3-3 3s1.3 3 3 3h22c1.7 0 3-1.3 3-3s-1.3-3-3-3M12.6.6 6 7.2 3.4 4.6c-.8-.8-2-.8-2.8 0s-.8 2 0 2.8l4 4c.8.8 2 .8 2.8 0l8-8c.8-.8.8-2 0-2.8s-2-.8-2.8 0M23 11h22c1.7 0 3-1.3 3-3s-1.3-3-3-3H23c-1.7 0-3 1.3-3 3s1.3 3 3 3m22 28H23c-1.7 0-3 1.3-3 3s1.3 3 3 3h22c1.7 0 3-1.3 3-3s-1.3-3-3-3' style='fill-rule:evenodd;clip-rule:evenodd;fill:%23011e41'/%3E%3C/svg%3E")}.mg-icon-response:before{--mg-icon-svg:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 48 48'%3E%3Cpath d='M2.5 26C3.9 26 5 24.9 5 23.5 5 17.1 10.3 12 16.6 12h22.8l-2.7 2.7c-1 1-1 2.6 0 3.5 1 1 2.6 1 3.5 0l7-7c1-1 1-2.6 0-3.5l-7-7c-1-1-2.6-1-3.5 0-1 1-1 2.6 0 3.5L39.5 7H16.9C7.8 6.8.2 14 0 23.1v.4C0 24.9 1.1 26 2.5 26m37.8-3.3c-1-1-2.6-1-3.5 0-1 1-1 2.6 0 3.5l2.7 2.7H16.9C7.8 28.8.2 36 0 45.1v.4C0 46.9 1.1 48 2.5 48S5 46.9 5 45.5C5 39.1 10.3 34 16.6 34h22.8l-2.7 2.7c-1 1-1 2.6 0 3.5s2.6 1 3.5 0l7-7c1-1 1-2.6 0-3.5z' style='fill:%23011e41'/%3E%3C/svg%3E")}.mg-icon-affected-population:before{--mg-icon-svg:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 48 48'%3E%3Cpath d='M7.7 37.4.6 44.6c-.8.8-.8 2.1 0 2.8.8.8 2.1.8 2.8 0l7.1-7.2c.8-.8.8-2.1 0-2.8-.8-.8-2-.8-2.8 0m31.1-26.3c.5 0 1-.2 1.4-.6l7.2-7.1c.8-.8.8-2 0-2.8s-2-.8-2.8 0l-7.2 7.1c-.8.8-.8 2 0 2.8.4.4.9.6 1.4.6m1.5 26.3c-.8-.8-2-.8-2.8 0s-.8 2 0 2.8l7.1 7.2c.8.8 2 .8 2.8 0s.8-2 0-2.8zM7.8 10.5c.8.8 2.1.8 2.8 0 .8-.8.8-2.1 0-2.8L3.4.6C2.6-.2 1.3-.2.6.6s-.8 2.1 0 2.8zM24 10c-7.4 0-13 5.2-13 12 0 1.1.9 2 2 2s2-.9 2-2c-.1-2.8 1.5-5.4 4-6.7V46c0 1.1.9 2 2 2s2-.9 2-2V31h2v15c0 1.1.9 2 2 2s2-.9 2-2V15.3c2.5 1.3 4.1 3.9 4 6.7 0 1.1.9 2 2 2s2-.9 2-2c0-6.8-5.6-12-13-12' style='fill:%23011e41'/%3E%3Ccircle cx='24' cy='4' r='4' style='fill:%23011e41'/%3E%3C/svg%3E")}.mg-icon-people-in-need:before{--mg-icon-svg:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 48 34'%3E%3Cpath d='M1.5 19c.8 0 1.5-.7 1.5-1.5 0-2.2 1.1-4.2 3-5.4V21c0 2.2 1.8 4 4 4s4-1.8 4-4v-8.9c1.9 1.1 3 3.2 3 5.4 0 .8.7 1.5 1.5 1.5s1.5-.7 1.5-1.5c0-1.1.4-2.1 1-2.9V18c0 1.7 1.3 3 3 3s3-1.3 3-3v-3.5c.7.8 1 1.9 1 2.9 0 .8.7 1.5 1.5 1.5s1.5-.7 1.5-1.5c.2-2.5 1.7-4.7 4-5.7L33.1 19c-.5 2.7 1.2 5.4 3.9 5.9s5.4-1.2 5.9-3.9c.1-.6.1-1.3 0-2L41 11.8c2.3 1 3.8 3.2 4 5.7 0 .8.7 1.5 1.5 1.5s1.5-.7 1.5-1.5C48 12.1 43.7 8 38 8c-3.5-.1-6.8 1.6-8.7 4.6-2.2-3-6.4-3.5-9.4-1.3-.5.4-.9.8-1.3 1.3C16.8 9.7 13.5 7.9 10 8 4.3 8 0 12.1 0 17.5c0 .8.7 1.5 1.5 1.5' style='fill:%23011e41'/%3E%3Ccircle cx='38' cy='3' r='3' style='fill:%23011e41'/%3E%3Ccircle cx='10' cy='3' r='3' style='fill:%23011e41'/%3E%3Cpath d='M24 8c1.4 0 2.5-1.1 2.5-2.5S25.4 3 24 3s-2.5 1.1-2.5 2.5S22.6 8 24 8m22 22H2c-1.1 0-2 .9-2 2s.9 2 2 2h44c1.1 0 2-.9 2-2s-.9-2-2-2' style='fill:%23011e41'/%3E%3C/svg%3E")}.mg-icon-internally-displaced:before{--mg-icon-svg:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 48 43'%3E%3Cpath d='m47.5 20.4-6.9-6.9c-.6-.6-1.6-.6-2.2 0s-.6 1.6 0 2.2l4.3 4.3H29.5c-.8 0-1.5.7-1.5 1.5s.7 1.5 1.5 1.5h13.3l-4.4 4.3c-.6.6-.6 1.6 0 2.2s1.6.6 2.2 0l6.9-6.9c.7-.6.7-1.6 0-2.2M29.8 2.8c-.7-2.1-3-3.2-5.1-2.5s-3.2 3-2.5 5.1 3 3.2 5.1 2.5c2-.8 3.2-3.1 2.5-5.1m-9.1 20.7 3.9-7.8c1.2-2.4.2-5.3-2.1-6.5L20 7.9c-.1-.1-.3-.1-.4-.2-6.9-3-14.9-.2-18.3 6.5-.5 1-.1 2.3.9 2.8s2.3.1 2.8-.9c1.9-3.8 6-5.9 10.2-5.4L.2 40c-.5 1-.1 2.3.9 2.8s2.3.1 2.8-.9l9-17.7 4.5 2.3c4.8 2.6 6.7 8.7 4.2 13.6-.5 1-.1 2.3.9 2.8s2.3.1 2.8-.9c3.3-6.5 1.4-14.4-4.6-18.5' style='fill:%23011e41'/%3E%3C/svg%3E")}.mg-icon-refugee:before{--mg-icon-svg:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 48 47.1'%3E%3Cpath d='M29.8 6.8c-.7-2.1-3-3.2-5.1-2.5s-3.2 3-2.5 5.1 3 3.2 5.1 2.5c2-.7 3.2-3 2.5-5.1m-9.1 20.8 3.9-7.8c1.2-2.4.2-5.3-2.1-6.5L20 12c-.1-.1-.3-.1-.4-.2-6.9-3-14.9-.2-18.3 6.5-.5 1-.1 2.3.9 2.8s2.3.1 2.8-.9c1.9-3.8 6-5.9 10.2-5.4L.2 44c-.5 1-.1 2.3.9 2.8s2.3.1 2.8-.9l9-17.7 4.5 2.3c4.8 2.6 6.7 8.7 4.2 13.6-.5 1-.1 2.3.9 2.8s2.3.1 2.8-.9c3.3-6.5 1.4-14.3-4.6-18.4m26.8-5.2-6.9-6.9c-.6-.6-1.6-.6-2.2 0s-.6 1.6 0 2.2l4.3 4.3H29.5c-.8 0-1.5.7-1.5 1.5s.7 1.5 1.5 1.5h13.3l-4.4 4.3c-.6.6-.6 1.6 0 2.2s1.6.6 2.2 0l6.9-6.9c.7-.6.7-1.6 0-2.2' style='fill:%23011e41'/%3E%3Cpath d='M33.5 28c-.8 0-1.5.7-1.5 1.5v5c0 .8.7 1.5 1.5 1.5s1.5-.7 1.5-1.5v-5c0-.8-.7-1.5-1.5-1.5m0-9c.8 0 1.5-.7 1.5-1.5v-5c0-.8-.7-1.5-1.5-1.5s-1.5.7-1.5 1.5v5c0 .8.7 1.5 1.5 1.5m0-11c.8 0 1.5-.7 1.5-1.5v-5c0-.8-.7-1.5-1.5-1.5S32 .7 32 1.5v5c0 .8.7 1.5 1.5 1.5m0 31c-.8 0-1.5.7-1.5 1.5v5c0 .8.7 1.5 1.5 1.5s1.5-.7 1.5-1.5v-5c0-.8-.7-1.5-1.5-1.5' style='fill:%23011e41'/%3E%3C/svg%3E")}.mg-icon-shelter:before{--mg-icon-svg:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 48 48'%3E%3Cpath d='M24 18c-6 0-10.5 4.1-10.5 9.5 0 .8.7 1.5 1.5 1.5s1.5-.7 1.5-1.5c0-2.4 1.4-4.5 3.5-5.6v24.6c0 .8.7 1.5 1.5 1.5s1.5-.7 1.5-1.5V34h2v12.5c0 .8.7 1.5 1.5 1.5s1.5-.7 1.5-1.5V21.9c2.1 1 3.5 3.2 3.5 5.6 0 .8.7 1.5 1.5 1.5s1.5-.7 1.5-1.5C34.5 22.1 30 18 24 18' style='fill:%23011e41'/%3E%3Ccircle cx='24.1' cy='13' r='3' style='fill:%23011e41'/%3E%3Cpath d='M46.8 12.8 25.3.3c-.8-.5-1.7-.5-2.5 0L1.2 12.8C.5 13.3 0 14.1 0 15v30.5C0 46.9 1.1 48 2.5 48S5 46.9 5 45.5V16.4l19-11 19 11v29.1c0 1.4 1.1 2.5 2.5 2.5s2.5-1.1 2.5-2.5V15c0-.9-.5-1.7-1.2-2.2' style='fill:%23011e41'/%3E%3C/svg%3E")}.mg-icon-infrastructure:before{--mg-icon-svg:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 48 48'%3E%3Cpath d='M26 0v48h22V0zm13 42c0 1.1-.9 2-2 2s-2-.9-2-2v-6c0-1.1.9-2 2-2s2 .9 2 2zm0-15c0 1.1-.9 2-2 2s-2-.9-2-2v-6c0-1.1.9-2 2-2s2 .9 2 2zm0-15c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2zM0 32c4.7 0 9 3.3 9 8v8h6v-8c0-4.7 4.3-8 9-8v-8H0z' style='fill:%23011e41'/%3E%3C/svg%3E")}.mg-icon-facebook:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24"><path d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12"/></svg>')}.mg-icon-twitter:before,.mg-icon-x-social:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>')}.mg-icon-linkedin:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.06 2.06 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065m1.782 13.019H3.555V9h3.564zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0z"/></svg>')}.mg-icon-youtube:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24"><path d="M23.498 6.186a3.02 3.02 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.02 3.02 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.02 3.02 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.02 3.02 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814M9.545 15.568V8.432L15.818 12z"/></svg>')}.mg-icon-flickr:before{--mg-icon-svg:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24"><path d="M0 12C0 5.373 5.373 0 12 0s12 5.373 12 12-5.373 12-12 12S0 18.627 0 12m8.5-3a3 3 0 1 0 0 6 3 3 0 0 0 0-6m7 0a3 3 0 1 0 0 6 3 3 0 0 0 0-6"/></svg>')}.mg-icon-sdg-wheel:before{--mg-icon-svg:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 166.33 166.33'%3E%3Cpath fill='%2364ad35' d='M46.73 62.84c1.82-3.09 4.02-5.92 6.55-8.43L31.79 30.84A73.7 73.7 0 0 0 18.14 48.6z'/%3E%3Cpath fill='%23e7b717' d='M99.42 46.19c3.26 1.49 6.28 3.4 9.01 5.65l21.55-23.53a73.7 73.7 0 0 0-19.1-11.92z'/%3E%3Cpath fill='%23c31a23' d='m148.77 53.28-28.56 14.24a41.3 41.3 0 0 1 2.86 10.09l31.77-3a72.6 72.6 0 0 0-6.07-21.33'/%3E%3Cpath fill='%23489835' d='m118.16 63.39 28.56-14.24a73.4 73.4 0 0 0-13.35-17.72l-21.55 23.53c2.46 2.52 4.59 5.35 6.34 8.43'/%3E%3Cpath fill='%23417f3d' d='M41.06 83.69c0-.64.02-1.29.05-1.92L9.33 78.93c-.1 1.57-.16 3.17-.16 4.77 0 6.09.76 12.02 2.16 17.68l30.7-8.81c-.63-2.87-.97-5.83-.97-8.88'/%3E%3Cpath fill='%23f8c300' d='M114.16 109.81c-2.26 2.75-4.87 5.2-7.75 7.29l16.78 27.17a73.8 73.8 0 0 0 16.43-15.26z'/%3E%3Cpath fill='%23e23623' d='M123.52 83.69c0 3.01-.33 5.94-.95 8.77l30.69 8.82a72.9 72.9 0 0 0 2.01-22.08l-31.78 3c.02.5.03.99.03 1.49'/%3E%3Cpath fill='%23f39d19' d='m50.93 110.41-25.4 19.31a73.5 73.5 0 0 0 16.59 15.03l16.78-27.14a40.7 40.7 0 0 1-7.97-7.2'/%3E%3Cpath fill='%232693d1' d='M41.57 77.18c.57-3.59 1.61-7.02 3.05-10.24L16.06 52.72a72.9 72.9 0 0 0-6.3 21.61z'/%3E%3Cpath fill='%23a4183d' d='m119.29 146.73-16.76-27.13a40.8 40.8 0 0 1-9.78 3.97l5.92 31.39c7.35-1.7 14.29-4.5 20.62-8.23'/%3E%3Cpath fill='%233cb9e1' d='M121.35 96.9a41.4 41.4 0 0 1-4.46 9.19l25.49 19.22a72.7 72.7 0 0 0 9.64-19.59z'/%3E%3Cpath fill='%23e86120' d='M88.23 124.48c-1.94.28-3.93.43-5.94.43-1.62 0-3.23-.1-4.8-.28l-5.91 31.39c3.5.52 7.07.79 10.71.79 4.03 0 7.99-.33 11.85-.96z'/%3E%3Cpath fill='%23de1931' d='M84.92 42.54c3.54.23 6.96.9 10.2 1.97l11.46-29.79a72.7 72.7 0 0 0-21.67-4.1v31.92z'/%3E%3Cpath fill='%23d80460' d='M72.95 123.85c-3.57-.83-6.97-2.13-10.12-3.83l-16.79 27.15c6.46 3.7 13.52 6.44 21.01 8.03z'/%3E%3Cpath fill='%231b4469' d='M69.9 44.36a40.7 40.7 0 0 1 10.42-1.85V10.59c-7.68.2-15.04 1.6-21.96 4z'/%3E%3Cpath fill='%23ca9a12' d='M48.13 106.75A41.3 41.3 0 0 1 43.27 97l-30.67 8.8a72.5 72.5 0 0 0 10.13 20.25z'/%3E%3Cpath fill='%2305659b' d='M56.74 51.35c2.7-2.13 5.66-3.93 8.84-5.35L54.04 16.25a73 73 0 0 0-18.81 11.52z'/%3E%3C/svg%3E")}@font-face{font-family:FontAwesome;font-weight:400;src:url(../fonts/mangrove-icon-set/font/mangrove-icon-set.woff2) format("woff2"),url(../fonts/mangrove-icon-set/font/mangrove-icon-set.ttf) format("truetype")}.fa,.fa-before:before,.fab,.fas,.mg-icon{font-family:FontAwesome,sans-serif;font-style:normal}.fa-before:before{padding-inline-end:.5em}.fa-2x{font-size:2em}.fa-rss:before{content:"\f09e"}.fa-file-alt:before{content:"\f15c"}.fa-file:before{content:"\f15b"}.fa-facebook:before{content:"\f230"}.fa-twitter:before,.fa-x-social:before{content:"\f099"}.fa-linkedin:before{content:"\f0e1"}.fa-flickr:before{content:"\f16e"}.fa-youtube:before{content:"\f16a"}.fa-search:before{content:"\e808"}.fa-envelope-o:before,.fa-envelope:before{content:"\e806"}.fa-newspaper:before{content:"\f1ea"}.fa-bar-chart:before,.fa-chart-bar:before{content:"\e80b"}.fa-graduation-cap:before{content:"\f19d"}.fa-calendar-alt:before{content:"\f133"}.fa-building:before{content:"\f0f7"}.fa-landmark:before{content:"\f19c"}.fa-pen-nib:before{content:"\f0f6"}.fa-business-time:before{content:"\e809"}.fa-code-branch:before{content:"\f126"}.fa-life-ring:before{content:"\f1cd"}.fa-lightbulb:before{content:"\f0eb"}.fa-cubes:before{content:"\f1b3"}.fa-sort-alpha-down:before,.fa-tags:before{content:"\e800"}.fa-power-off:before{content:"\f090"}.fa-user:before{content:"\e805"}.fa-times:before{content:"\f00d"}.fa-link:before{content:"\e802"}.fa-clone:before{content:"\f24d"}.fa-share:before{content:"\f1e0"}.fa-globe:before{content:"\f0ac"}.fa-qrcode:before{content:"\e899"}.fa-left:before{content:"\f177"}.fa-right:before{content:"\f178"}.fa-angle-circled-right:before{content:"\f138"}.fa-angle-circled-left:before{content:"\f137"}.fa-menu:before{content:"\f0c9"}.mg-icon{forced-color-adjust:none;vertical-align:-.125em}.mg-icon:not([class*=fa-]):before{background-color:currentColor;content:"";display:inline-block;height:1em;mask-image:var(--mg-icon-svg);mask-position:center;mask-repeat:no-repeat;mask-size:contain;width:1em}@media (forced-colors:active){.mg-icon:not([class*=fa-]):before{background-color:CanvasText}}.mg-icon--multicolor:before{background-color:transparent;background-image:var(--mg-icon-svg);background-position:50%;background-repeat:no-repeat;background-size:contain;mask-image:none}[dir=rtl] .mg-icon-angle-circled-left:before,[dir=rtl] .mg-icon-angle-circled-right:before,[dir=rtl] .mg-icon-arrow-left:before,[dir=rtl] .mg-icon-arrow-right:before,[dir=rtl] .mg-icon-left:before,[dir=rtl] .mg-icon-right:before{transform:scaleX(-1)}@media print{.mg-icon:not([class*=fa-]):before{background-color:#000!important;print-color-adjust:exact}}.mg-icon--sm{font-size:.875em}.mg-icon--lg{font-size:1.5em}.mg-icon--xl{font-size:2em}
|
|
639
638
|
|
|
640
639
|
/**
|
|
641
640
|
* Author Image
|
|
@@ -643,17 +642,16 @@
|
|
|
643
642
|
* Circular avatar and author profile photo styling with standardized sizing and object-fit.
|
|
644
643
|
*
|
|
645
644
|
* Full documentation:
|
|
646
|
-
* https://github.com/
|
|
645
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Atom/Images/AuthorImage/AuthorImages.mdx
|
|
647
646
|
*/
|
|
648
|
-
/* author image */.mg-author-image{--mg-author-image-accent:rgb(var(--mg-color-interactive));--mg-author-image-avatar-size:80px;--mg-author-image-hover-tint:rgb(var(--mg-color-interactive)/0.5);align-items:center;background:transparent;border:0;display:grid;gap:var(--mg-spacing-100);max-width:32rem;position:relative}.mg-author-image__avatar{background:rgb(var(--mg-color-neutral-0));border-radius:50%;box-shadow:0 0 0 2px rgb(var(--mg-color-neutral-0)),0 0 0 4px var(--mg-author-image-accent);height:var(--mg-author-image-avatar-size);overflow:hidden;position:relative;width:var(--mg-author-image-avatar-size)}.mg-author-image__avatar:before{background:linear-gradient(135deg,var(--mg-author-image-hover-tint) 0,rgb(var(--mg-color-neutral-0)/.12) 58%,rgb(var(--mg-color-neutral-0)/0) 100%);content:"";inset:0;mix-blend-mode:multiply;opacity:0;pointer-events:none;position:absolute;transform:translateY(2px);transition:opacity
|
|
649
|
-
|
|
647
|
+
/* author image */.mg-author-image{--mg-author-image-accent:rgb(var(--mg-color-interactive));--mg-author-image-avatar-size:80px;--mg-author-image-hover-tint:rgb(var(--mg-color-interactive)/0.5);align-items:center;background:transparent;border:0;display:grid;gap:var(--mg-spacing-100);max-width:32rem;position:relative}.mg-author-image__avatar{background:rgb(var(--mg-color-neutral-0));border-radius:50%;box-shadow:0 0 0 2px rgb(var(--mg-color-neutral-0)),0 0 0 4px var(--mg-author-image-accent);height:var(--mg-author-image-avatar-size);overflow:hidden;position:relative;width:var(--mg-author-image-avatar-size)}.mg-author-image__avatar:before{background:linear-gradient(135deg,var(--mg-author-image-hover-tint) 0,rgb(var(--mg-color-neutral-0)/.12) 58%,rgb(var(--mg-color-neutral-0)/0) 100%);content:"";inset:0;mix-blend-mode:multiply;opacity:0;pointer-events:none;position:absolute;transform:translateY(2px);transition:opacity var(--mg-motion-duration-fast) var(--mg-motion-easing-standard),transform var(--mg-motion-duration-fast) var(--mg-motion-easing-standard);z-index:1}.mg-author-image:hover .mg-author-image__avatar:before,.mg-author-image__link:focus-visible .mg-author-image__avatar:before,.mg-author-image__link:hover .mg-author-image__avatar:before{opacity:1;transform:translateY(0)}.mg-author-image__avatar img{display:block;object-fit:cover;object-position:center center;position:relative;transform:scale(1.02);transform-origin:center center;width:100%}.mg-author-image__body,.mg-author-image__link{color:inherit;display:grid;gap:inherit;text-decoration:none;width:100%}.mg-author-image__link:focus-visible{outline:2px solid var(--mg-author-image-accent);outline-offset:4px}.mg-author-image__content{display:grid;gap:var(--mg-spacing-25);min-width:0}.mg-author-image__name{color:rgb(var(--mg-color-neutral-900));font-size:var(--mg-font-size-300);font-weight:700;line-height:1.2;margin:0}.mg-author-image__meta{color:rgb(var(--mg-color-neutral-700));display:flex;flex-wrap:wrap;gap:0 var(--mg-spacing-50);line-height:1.4;margin:0}.mg-author-image__title{color:var(--mg-author-image-accent);font-weight:700}.mg-author-image__org{font-weight:500}.mg-author-image__separator{color:rgb(var(--mg-color-neutral-500))}.mg-author-image--inverse .mg-author-image__meta,.mg-author-image--inverse .mg-author-image__name{color:rgb(var(--mg-color-neutral-0))}.mg-author-image--inverse{--mg-author-image-hover-tint:rgb(var(--mg-color-neutral-0)/0.5)}.mg-author-image--inverse .mg-author-image__title{color:rgb(var(--mg-color-neutral-100))}.mg-author-image--inverse .mg-author-image__org,.mg-author-image--inverse .mg-author-image__separator{color:rgb(var(--mg-color-neutral-200))}.mg-author-image--inverse .mg-author-image__link:focus-visible{outline-color:rgb(var(--mg-color-focus-ring-inverse))}.mg-author-image--primary{--mg-author-image-accent:rgb(var(--mg-color-interactive))}.mg-author-image--secondary{--mg-author-image-accent:rgb(var(--mg-color-secondary));--mg-author-image-hover-tint:rgb(var(--mg-color-secondary)/0.5)}.mg-author-image--secondary .mg-author-image__title{color:rgb(var(--mg-color-text))}.mg-author-image--secondary .mg-author-image__link:focus-visible{outline-color:rgb(var(--mg-color-focus-ring))}.mg-author-image--tertiary{--mg-author-image-accent:rgb(var(--mg-color-tertiary));--mg-author-image-hover-tint:rgb(var(--mg-color-tertiary)/0.5)}.mg-author-image--small{--mg-author-image-avatar-size:64px}.mg-author-image--large{--mg-author-image-avatar-size:104px;gap:var(--mg-spacing-150)}.mg-author-image--vertical{grid-template-columns:minmax(0,1fr);justify-items:center}.mg-author-image--vertical .mg-author-image__body,.mg-author-image--vertical .mg-author-image__link{justify-items:center}.mg-author-image--vertical .mg-author-image__content{justify-items:center;text-align:center}.mg-author-image--horizontal{grid-template-columns:auto minmax(0,1fr)}.mg-author-image--horizontal .mg-author-image__content{align-content:center;text-align:start}.mg-author-image--vertical .mg-author-image__meta{justify-content:center}.mg-author-image--no-image{--mg-author-image-avatar-size:0px}.mg-author-image--no-image .mg-author-image__body,.mg-author-image--no-image .mg-author-image__link{grid-template-columns:minmax(0,1fr);justify-items:center}.mg-author-image--no-image .mg-author-image__content{justify-items:center;text-align:center}@media (prefers-reduced-motion:reduce){.mg-author-image__avatar:before{transform:none;transition:none}}
|
|
650
648
|
/**
|
|
651
649
|
* Responsive Image
|
|
652
650
|
*
|
|
653
651
|
* Fluid responsive image wrapper and image sizing utilities.
|
|
654
652
|
*
|
|
655
653
|
* Full documentation:
|
|
656
|
-
* https://github.com/
|
|
654
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Atom/Images/ImageCaptionCredit/ImageCaptionCredit.mdx
|
|
657
655
|
*/
|
|
658
656
|
/* img start */img,picture{height:auto;max-width:100%}picture{display:block}
|
|
659
657
|
|
|
@@ -664,12 +662,12 @@
|
|
|
664
662
|
* Figure, figcaption, caption text, and photo credit metadata presentation styles.
|
|
665
663
|
*
|
|
666
664
|
* Full documentation:
|
|
667
|
-
* https://github.com/
|
|
665
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Atom/Images/ImageCaptionCredit/ImageCaptionCredit.mdx
|
|
668
666
|
*/
|
|
669
667
|
/* image with caption start */.mg-image-figcaption{display:flex;flex-wrap:wrap;justify-content:center}.mg-image-figcaption .mg-image-caption{margin:var(--mg-spacing-50) var(--mg-spacing-100) 0
|
|
670
668
|
/* medium design */}@media (width >= 48em){.mg-image-figcaption .mg-image-caption{margin:var(--mg-spacing-150) 0 0;width:58.33333%}}.mg-image-figcaption.mg-image-figcaption--medium{
|
|
671
669
|
/* medium design */}@media (width >= 48em){.mg-image-figcaption.mg-image-figcaption--medium{margin:0 auto;width:58.3333%}.mg-image-figcaption.mg-image-figcaption--medium .mg-image-caption{width:100%}}.mg-image-figcaption.mg-image-figcaption--portrait{align-items:flex-end
|
|
672
|
-
/* medium design */}@media (width >= 48em){.mg-image-figcaption.mg-image-figcaption--portrait .mg-image-figcaption__cart{width:33.33333%}.mg-image-figcaption.mg-image-figcaption--portrait .mg-image-caption{display:block;margin:0 0 0 var(--mg-spacing-100);padding-bottom:0;width:25%}.mg-image-figcaption.mg-image-figcaption--portrait .mg-image-caption p{font-size:var(--mg-font-size-200);line-height:1.4;margin-bottom:var(--mg-spacing-50);padding:0}.mg-image-figcaption.mg-image-figcaption--portrait .mg-image-caption p+.mg-credits{border-top:1px solid rgb(var(--mg-color-neutral-500));margin-left:0;padding:var(--mg-spacing-50) 0 0 0}}.mg-image-figcaption.mg-image-figcaption--portrait .mg-credits{border-left:0;border-right:0;margin-bottom:var(--mg-spacing-50)}.mg-image-figcaption.mg-image-figcaption--portrait .mg-author-caption{font-size:var(--mg-font-size-200);line-height:1.5}.mg-image-figcaption__cart img{display:block}
|
|
670
|
+
/* medium design */}@media (width >= 48em){.mg-image-figcaption.mg-image-figcaption--portrait .mg-image-figcaption__cart{width:33.33333%}.mg-image-figcaption.mg-image-figcaption--portrait .mg-image-caption{display:block;margin:0 0 0 var(--mg-spacing-100);padding-bottom:0;width:25%}.mg-image-figcaption.mg-image-figcaption--portrait .mg-image-caption :where(.mg-image-caption__text),.mg-image-figcaption.mg-image-figcaption--portrait .mg-image-caption p{font-size:var(--mg-font-size-200);line-height:1.4;margin-bottom:var(--mg-spacing-50);padding:0}.mg-image-figcaption.mg-image-figcaption--portrait .mg-image-caption :where(.mg-image-caption__text)+.mg-credits,.mg-image-figcaption.mg-image-figcaption--portrait .mg-image-caption p+.mg-credits{border-top:1px solid rgb(var(--mg-color-neutral-500));margin-left:0;padding:var(--mg-spacing-50) 0 0 0}.mg-image-figcaption.mg-image-figcaption--portrait .mg-image-caption .mg-image-caption__text p:last-child{margin-bottom:0}}.mg-image-figcaption.mg-image-figcaption--portrait .mg-credits{border-left:0;border-right:0;margin-bottom:var(--mg-spacing-50)}.mg-image-figcaption.mg-image-figcaption--portrait .mg-author-caption{font-size:var(--mg-font-size-200);line-height:1.5}.mg-image-figcaption__cart img{display:block}
|
|
673
671
|
|
|
674
672
|
/* medium design */@media (width >= 48em){[dir=rtl] .mg-image-figcaption.mg-image-figcaption--portrait .mg-image-caption{margin:0 var(--mg-spacing-100) 0 0}[dir=rtl] .mg-image-figcaption.mg-image-figcaption--portrait .mg-credits{border-right:0;margin-right:0;padding:var(--mg-spacing-50) 0;padding-right:0}}
|
|
675
673
|
/* image with caption end */
|
|
@@ -679,7 +677,7 @@
|
|
|
679
677
|
* Subtle attribution and copyright credit line styling for imagery.
|
|
680
678
|
*
|
|
681
679
|
* Full documentation:
|
|
682
|
-
* https://github.com/
|
|
680
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Atom/Images/ImageCaptionCredit/ImageCaptionCredit.mdx
|
|
683
681
|
*/.mg-credits{font-size:var(--mg-font-size-200);line-height:1.4
|
|
684
682
|
/* medium design */}@media (width >= 48em){.mg-credits{font-size:var(--mg-font-size-300)}}
|
|
685
683
|
|
|
@@ -689,7 +687,7 @@
|
|
|
689
687
|
* Responsive layout containers with breakpoint-driven max widths (480/900/1164/1440px) and gutter padding.
|
|
690
688
|
*
|
|
691
689
|
* Full documentation:
|
|
692
|
-
* https://github.com/
|
|
690
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Atom/Layout/Container/Container.mdx
|
|
693
691
|
*/.mg-container{margin:0 auto;max-width:100%;padding-left:.625rem;padding-right:.625rem}@media (min-width:480px){.mg-container{max-width:480px}}@media (min-width:900px){.mg-container{max-width:900px}}@media (min-width:1164px){.mg-container{max-width:1164px}}@media (min-width:1440px){.mg-container{max-width:1440px}}@media (min-width:480px){.mg-container--slim{max-width:480px}}@media (min-width:900px){.mg-container--slim{max-width:900px}}@media (min-width:1164px){.mg-container--slim{max-width:1164px}}.mg-container--spacer>.has-background+.has-background,.mg-container--spacer>.has-background+.mg-hero,.mg-container--spacer>.mg-hero+.has-background,.mg-container--spacer>.mg-hero+.mg-container-full-width,.mg-container--spacer>.mg-hero:first-child,.mg-container--spacer>.mg-mega-wrapper,.mg-container--spacer>.mg-mega-wrapper+.mg-hero,.mg-container--spacer>.mg-u-sr-only:first-child~.mg-hero{--mg-container-spacer:0}.mg-container--spacer>*{margin-top:var(--mg-container-spacer)}.mg-container--padded{padding-bottom:var(--mg-spacing-200);padding-top:var(--mg-spacing-200)}
|
|
694
692
|
|
|
695
693
|
/**
|
|
@@ -698,7 +696,7 @@
|
|
|
698
696
|
* Flexible grid system and columnar layout utilities for structured multi-column content.
|
|
699
697
|
*
|
|
700
698
|
* Full documentation:
|
|
701
|
-
* https://github.com/
|
|
699
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Atom/Layout/Grid/Grid.mdx
|
|
702
700
|
*/
|
|
703
701
|
/* Our custom css grid based on https://stable.visual-framework.dev/components/vf-grid/ */g-grid{display:flex}.mg-grid>*{flex:1;margin:var(--mg-spacing-0) var(--mg-spacing-0) var(--mg-spacing-100) 1.2292%}.mg-grid>:first-child{margin-left:var(--mg-spacing-0)}[class*=mg-grid__]{flex-wrap:wrap}.mg-grid__col-2>*{flex:var(--mg-spacing-0) var(--mg-spacing-0) 49.38538%;max-width:49.38538%}.mg-grid__col-2>:nth-of-type(3n){margin-left:var(--mg-spacing-0)}.mg-grid__col-3>*{flex:var(--mg-spacing-0) var(--mg-spacing-0) 32.51384%;max-width:32.51384%}.mg-grid__col-3>:nth-of-type(4n){margin-left:var(--mg-spacing-0)}.mg-grid__col-4>*{flex:var(--mg-spacing-0) var(--mg-spacing-0) 24.078%;max-width:24.078%}.mg-grid__col-4>:nth-of-type(5n){margin-left:var(--mg-spacing-0)}.mg-grid__col-5>*{flex:var(--mg-spacing-0) var(--mg-spacing-0) 19.01661%;max-width:19.01661%}.mg-grid__col-5>:nth-of-type(6n){margin-left:var(--mg-spacing-0)}.mg-grid__col-6>*{flex:var(--mg-spacing-0) var(--mg-spacing-0) 15.6423%;max-width:15.6423%}.mg-grid__col-6>:nth-of-type(7n){margin-left:var(--mg-spacing-0)}@media (max-width:900px){.mg-grid{flex-wrap:wrap}.mg-grid>*{flex:0 0 49.18305%}}@supports (display:grid){.mg-grid{column-gap:var(--mg-spacing-200);display:grid;grid-column:main;row-gap:var(--mg-spacing-200)}@media (min-width:900px){.mg-grid{grid-auto-flow:column}}@media (max-width:900px){.embl-grid .mg-grid{grid-column:1/-1}}.mg-grid>*{margin:var(--mg-spacing-0);max-width:unset}[class*=grid__]{grid-auto-flow:unset}.mg-grid__col-1{grid-template-columns:repeat(1,1fr)}@media (min-width:900px){.mg-grid__col-2{grid-template-columns:repeat(2,1fr)}.mg-grid__col-3{grid-template-columns:repeat(3,1fr)}.mg-grid__col-4{grid-template-columns:repeat(2,1fr)}.mg-grid__col-5,.mg-grid__col-6{grid-template-columns:repeat(3,1fr)}}@media (min-width:1164px){.mg-grid__col-4{grid-template-columns:repeat(4,1fr)}.mg-grid__col-5{grid-template-columns:repeat(5,1fr)}.mg-grid__col-6{grid-template-columns:repeat(6,1fr)}}@media (min-width:900px){.mg-grid__col-10,.mg-grid__col-11,.mg-grid__col-12,.mg-grid__col-7,.mg-grid__col-8,.mg-grid__col-9{grid-template-columns:repeat(4,1fr)}}@media (min-width:1164px){.mg-grid__col-7{grid-template-columns:repeat(7,1fr)}.mg-grid__col-8{grid-template-columns:repeat(8,1fr)}.mg-grid__col-9{grid-template-columns:repeat(9,1fr)}.mg-grid__col-10{grid-template-columns:repeat(10,1fr)}.mg-grid__col-11{grid-template-columns:repeat(11,1fr)}.mg-grid__col-12{grid-template-columns:repeat(12,1fr)}}@media (min-width:900px){.mg-grid--auto-fit{grid-auto-columns:minmax(0,1fr);grid-auto-flow:column}}@media (min-width:48rem){.mg-grid--article{align-items:start;column-gap:var(--mg-spacing-300);grid-template-columns:minmax(0,1fr) 16rem}}.mg-grid__col--span-2{grid-column-end:span 2}.mg-grid__col--span-3{grid-column-end:span 3}.mg-grid__col--span-4{grid-column-end:span 4}.mg-grid__col--span-5{grid-column-end:span 5}.mg-grid__col--span-6{grid-column-end:span 6}.mg-grid__col--span-all{grid-column:1/-1}.mg-grid__row--span-2{grid-row-end:span 2}.mg-grid__row--span-3{grid-row-end:span 3}.mg-grid__row--span-4{grid-row-end:span 4}.mg-grid__row--span-5{grid-row-end:span 5}.mg-grid__row--span-6{grid-row-end:span 6}.mg-grid__row--span-all{grid-row:1/-1}}
|
|
704
702
|
/**
|
|
@@ -707,7 +705,7 @@
|
|
|
707
705
|
* UNDRR and partner logo presentation styles, scaling, and bilingual language variants.
|
|
708
706
|
*
|
|
709
707
|
* Full documentation:
|
|
710
|
-
* https://github.com/
|
|
708
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Atom/Logo/Logo.mdx
|
|
711
709
|
*/.mg-logo{block-size:auto;display:block;max-inline-size:100%;object-fit:contain}@media (max-width:1164px){.mg-logo--autocrop{block-size:3rem;inline-size:11.25rem;object-fit:cover;object-position:0 50%}}@media (max-width:900px){.mg-logo--autocrop{block-size:1.875rem;inline-size:7rem}}
|
|
712
710
|
|
|
713
711
|
/**
|
|
@@ -716,7 +714,7 @@
|
|
|
716
714
|
* Accessible menu list, navigation item links, and hover/focus interaction states.
|
|
717
715
|
*
|
|
718
716
|
* Full documentation:
|
|
719
|
-
* https://github.com/
|
|
717
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Atom/Typography/Links/Links.mdx
|
|
720
718
|
*/.menu li a{border:none;display:inline;letter-spacing:.03em}.menu li a:hover{color:rgb(var(--mg-color-neutral-600));cursor:pointer;text-decoration:underline}.menu li a:focus-visible{box-shadow:0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-color-neutral-0));outline:var(--mg-focus-ring-width) solid rgb(var(--mg-color-focus-ring));outline-offset:var(--mg-focus-ring-offset);text-decoration:underline}.menu li a.selected{border-bottom:2px solid rgb(var(--mg-color-red-900));padding-bottom:var(--mg-spacing-25)}
|
|
721
719
|
|
|
722
720
|
/**
|
|
@@ -725,12 +723,12 @@
|
|
|
725
723
|
* Native HTML <details> and <summary> disclosure styling with custom toggle indicators.
|
|
726
724
|
*
|
|
727
725
|
* Full documentation:
|
|
728
|
-
* https://github.com/
|
|
726
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Atom/BaseTypography/BaseTypography.mdx
|
|
729
727
|
*/
|
|
730
728
|
/* details tag start */
|
|
731
729
|
/* Baseline: usability essentials for all <details> elements */details>summary{cursor:pointer}details>summary:focus-visible{box-shadow:0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-color-neutral-0));outline:var(--mg-focus-ring-width) solid rgb(var(--mg-color-focus-ring));outline-offset:var(--mg-focus-ring-offset)}
|
|
732
730
|
|
|
733
|
-
/* Enhanced: opt-in card treatment via .mg-details */details.mg-details{border:1px solid rgb(var(--mg-color-neutral-400));border-radius:.25rem;padding:.625rem;transition:box-shadow
|
|
731
|
+
/* Enhanced: opt-in card treatment via .mg-details */details.mg-details{border:1px solid rgb(var(--mg-color-neutral-400));border-radius:.25rem;padding:.625rem;transition:box-shadow var(--mg-motion-duration-fast) var(--mg-motion-easing-standard)}details.mg-details:hover{box-shadow:0 2px 4px rgba(0,0,0,.1)}details.mg-details>summary{color:rgb(var(--mg-color-interactive));font-weight:600;list-style-type:none;min-height:3rem;padding-block:.625rem;padding-inline:.625rem 2.75rem;position:relative;transition:background-color var(--mg-motion-duration-fast) var(--mg-motion-easing-standard)}details.mg-details>summary:hover{background-color:rgb(var(--mg-color-blue-900)/.08);border-radius:.125rem}details.mg-details>summary::-webkit-details-marker{display:none}details.mg-details>summary:before{align-items:center;background:rgb(var(--mg-color-interactive)/.06);border-radius:50%;content:"+";display:flex;font-family:var(--mg-font-family-text);font-size:var(--mg-font-size-400);font-weight:400;height:1.875rem;inset-inline-end:.625rem;justify-content:center;position:absolute;top:50%;transform:translateY(-50%);width:1.875rem}@media (prefers-reduced-motion:no-preference){details.mg-details>summary:before{transition:background-color var(--mg-motion-duration-fast) var(--mg-motion-easing-standard),scale var(--mg-motion-duration-fast) var(--mg-motion-easing-standard)}}details.mg-details>summary:hover:before{background:rgb(var(--mg-color-interactive)/.12)}details.mg-details>summary:active:before{scale:.96}details.mg-details p{line-height:1.6;margin:0;padding:.625rem}details.mg-details[open]{border-color:rgb(var(--mg-color-interactive))}details.mg-details[open]>summary{border-bottom:1px solid rgb(var(--mg-color-neutral-400));margin-bottom:0;padding-bottom:.625rem}details.mg-details[open]>summary:before{content:"−";transform:translateY(-50%)}@media (prefers-reduced-motion:reduce){details.mg-details,details.mg-details>summary,details.mg-details>summary:before{transition:none}}
|
|
734
732
|
/* ==========================================================================
|
|
735
733
|
Accordion Pattern (.mg-accordion)
|
|
736
734
|
Grouped <details> disclosures with flush separators, chevron rotation,
|
|
@@ -743,7 +741,7 @@
|
|
|
743
741
|
* Typographic styles for HTML <figcaption> elements accompanying figures and media.
|
|
744
742
|
*
|
|
745
743
|
* Full documentation:
|
|
746
|
-
* https://github.com/
|
|
744
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Atom/BaseTypography/BaseTypography.mdx
|
|
747
745
|
*/
|
|
748
746
|
/* figure tag start */figure{margin:0}figure img{max-width:100%;padding-bottom:.546875rem}
|
|
749
747
|
/* figure tag end */
|
|
@@ -753,7 +751,7 @@
|
|
|
753
751
|
* Placeholder presentation for empty search results, missing data, or filtered-out views.
|
|
754
752
|
*
|
|
755
753
|
* Full documentation:
|
|
756
|
-
* https://github.com/
|
|
754
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Atom/EmptyState/EmptyState.mdx
|
|
757
755
|
*/.mg-empty-state{align-items:center;display:flex;flex-direction:column;font-family:var(--mg-font-family-text);gap:var(--mg-empty-state-gap);padding:var(--mg-empty-state-padding);text-align:center}.mg-empty-state__media{align-items:center;block-size:var(--mg-empty-state-media-size);color:var(--mg-empty-state-media-color);display:flex;inline-size:var(--mg-empty-state-media-size);justify-content:center}.mg-empty-state__media>img,.mg-empty-state__media>svg{block-size:auto;inline-size:100%}.mg-empty-state__title{color:var(--mg-empty-state-title-color);font-family:var(--mg-font-family-ui);font-size:var(--mg-empty-state-title-font-size);font-weight:700;line-height:1.3;margin:0}.mg-empty-state__description{color:var(--mg-empty-state-text-color);font-size:var(--mg-empty-state-text-font-size);line-height:1.5;margin:0;max-inline-size:var(--mg-empty-state-max-inline-size);text-wrap:pretty}.mg-empty-state__actions{align-items:center;display:flex;flex-wrap:wrap;gap:var(--mg-empty-state-actions-gap);justify-content:center;margin-block-start:var(--mg-spacing-50)}.mg-empty-state--panel{background-color:var(--mg-empty-state-panel-background);border-radius:var(--mg-empty-state-panel-radius)}.mg-empty-state--compact{gap:var(--mg-spacing-50);padding:var(--mg-empty-state-compact-padding)}.mg-empty-state--compact .mg-empty-state__media{block-size:var(--mg-empty-state-compact-media-size);inline-size:var(--mg-empty-state-compact-media-size)}.mg-empty-state--compact .mg-empty-state__description,.mg-empty-state--compact .mg-empty-state__title{font-size:var(--mg-empty-state-compact-font-size)}.mg-empty-state--start{align-items:flex-start;text-align:start}.mg-empty-state--start .mg-empty-state__actions{justify-content:flex-start}.mg-empty-state-cell{padding:0;text-align:center}
|
|
758
756
|
|
|
759
757
|
/**
|
|
@@ -762,10 +760,10 @@
|
|
|
762
760
|
* Compact status indicators and colored badge pills for states (draft, active, archived, etc.).
|
|
763
761
|
*
|
|
764
762
|
* Full documentation:
|
|
765
|
-
* https://github.com/
|
|
763
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Atom/StatusLabel/StatusLabel.mdx
|
|
766
764
|
*/@property --mg-status-label-indicator-ring{syntax:"<length>";inherits:true;initial-value:1px}.mg-status-label{align-items:center;color:var(--mg-status-label-color);display:inline-flex;font-family:var(--mg-font-family-text);font-size:var(--mg-status-label-font-size);gap:var(--mg-status-label-gap);line-height:1.5}.mg-status-label__indicator{--mg-status-label-indicator-ring:var(
|
|
767
765
|
--mg-status-label-indicator-border-width
|
|
768
|
-
);background-color:var(--mg-status-label-indicator);block-size:var(--mg-status-label-indicator-size);border:var(--mg-status-label-indicator-border-width) solid var(--mg-status-label-indicator-border-color);border-radius:var(--mg-status-label-indicator-radius);flex:0 0 auto;inline-size:var(--mg-status-label-indicator-size)}.mg-status-label--draft .mg-status-label__indicator{background-color:var(--mg-status-label-indicator--draft);block-size:calc(var(--mg-status-label-indicator-size)*.9);border-radius:calc(var(--mg-status-label-indicator-size)*.13);inline-size:calc(var(--mg-status-label-indicator-size)*.9);margin-inline:calc(var(--mg-status-label-indicator-size)*.05)}.mg-status-label--waiting-information .mg-status-label__indicator{background-color:var(--mg-status-label-indicator--waiting-information);block-size:calc(var(--mg-status-label-indicator-size)*.72);border-radius:var(--mg-status-label-indicator-size);inline-size:calc(var(--mg-status-label-indicator-size)*1.22);margin-inline:calc(var(--mg-status-label-indicator-size)*-.11)}.mg-status-label--waiting-validation .mg-status-label__indicator{background-color:var(--mg-status-label-indicator--waiting-validation);block-size:calc(var(--mg-status-label-indicator-size)*.82);border-radius:calc(var(--mg-status-label-indicator-size)*.13);inline-size:calc(var(--mg-status-label-indicator-size)*.82);margin-inline:calc(var(--mg-status-label-indicator-size)*.09);transform:rotate(45deg)}.mg-status-label--published .mg-status-label__indicator{background-color:var(--mg-status-label-indicator--published)}.mg-status-label--warning .mg-status-label__indicator{background-color:var(--mg-status-label-indicator-border-color);block-size:calc(var(--mg-status-label-indicator-size)*1.16);border:0;border-radius:0;clip-path:polygon(44.63344% 10.73313%,55.36656% 10.73313%,95.65836% 91.31672%,90.2918% 100%,9.7082% 100%,4.34164% 91.31672%);inline-size:calc(var(--mg-status-label-indicator-size)*1.16);margin-inline:calc(var(--mg-status-label-indicator-size)*-.08);position:relative}.mg-status-label--warning .mg-status-label__indicator:before{background-color:var(--mg-status-label-indicator--warning);clip-path:polygon(calc(44.63344% + var(--mg-status-label-indicator-ring)*.61803) calc(10.73313% + var(--mg-status-label-indicator-ring)*1),calc(55.36656% - var(--mg-status-label-indicator-ring)*.61803) calc(10.73313% + var(--mg-status-label-indicator-ring)*1),calc(95.65836% - var(--mg-status-label-indicator-ring)*1.14377) calc(91.31672% - var(--mg-status-label-indicator-ring)*.05146),calc(90.2918% - var(--mg-status-label-indicator-ring)*.55754) calc(100% - var(--mg-status-label-indicator-ring)*1),calc(9.7082% + var(--mg-status-label-indicator-ring)*.55754) calc(100% - var(--mg-status-label-indicator-ring)*1),calc(4.34164% + var(--mg-status-label-indicator-ring)*1.14377) calc(91.31672% - var(--mg-status-label-indicator-ring)*.05146));content:"";inset:0;position:absolute}.mg-status-label--negative .mg-status-label__indicator{background-color:var(--mg-status-label-indicator-border-color);block-size:calc(var(--mg-status-label-indicator-size)*.97);border:0;border-radius:0;clip-path:polygon(25% 0,75% 0,100% 25%,100% 75%,75% 100%,25% 100%,0 75%,0 25%);inline-size:calc(var(--mg-status-label-indicator-size)*.97);margin-inline:calc(var(--mg-status-label-indicator-size)*.015);position:relative}.mg-status-label--negative .mg-status-label__indicator:before{background-color:var(--mg-status-label-indicator--negative);clip-path:polygon(calc(25% + var(--mg-status-label-indicator-ring)*.41421) calc(var(--mg-status-label-indicator-ring)*1),calc(75% - var(--mg-status-label-indicator-ring)*.41421) calc(var(--mg-status-label-indicator-ring)*1),calc(100% - var(--mg-status-label-indicator-ring)*1) calc(25% + var(--mg-status-label-indicator-ring)*.41421),calc(100% - var(--mg-status-label-indicator-ring)*1) calc(75% - var(--mg-status-label-indicator-ring)*.41421),calc(75% - var(--mg-status-label-indicator-ring)*.41421) calc(100% - var(--mg-status-label-indicator-ring)*1),calc(25% + var(--mg-status-label-indicator-ring)*.41421) calc(100% - var(--mg-status-label-indicator-ring)*1),calc(var(--mg-status-label-indicator-ring)*1) calc(75% - var(--mg-status-label-indicator-ring)*.41421),calc(var(--mg-status-label-indicator-ring)*1) calc(25% + var(--mg-status-label-indicator-ring)*.41421));content:"";inset:0;position:absolute}@media (forced-colors:active){.mg-status-label__indicator{background-color:Canvas;border-color:CanvasText;forced-color-adjust:none;outline:1px solid CanvasText;outline-offset:-1px}.mg-status-label--negative .mg-status-label__indicator:before,.mg-status-label--warning .mg-status-label__indicator:before{background-color:CanvasText}.mg-status-label--draft .mg-status-label__indicator,.mg-status-label--negative .mg-status-label__indicator,.mg-status-label--published .mg-status-label__indicator,.mg-status-label--waiting-information .mg-status-label__indicator,.mg-status-label--waiting-validation .mg-status-label__indicator,.mg-status-label--warning .mg-status-label__indicator{background-color:CanvasText;outline:0}}@media print{.mg-status-label__indicator,.mg-status-label__indicator:before{print-color-adjust:exact}}.mg-status-label-group{display:flex;flex-wrap:wrap;gap:var(--mg-spacing-100) var(--mg-spacing-200);list-style:none;list-style-type:""
|
|
766
|
+
);background-color:var(--mg-status-label-indicator);block-size:var(--mg-status-label-indicator-size);border:var(--mg-status-label-indicator-border-width) solid var(--mg-status-label-indicator-border-color);border-radius:var(--mg-status-label-indicator-radius);flex:0 0 auto;inline-size:var(--mg-status-label-indicator-size)}.mg-status-label--draft .mg-status-label__indicator{background-color:var(--mg-status-label-indicator--draft);block-size:calc(var(--mg-status-label-indicator-size)*.9);border-radius:calc(var(--mg-status-label-indicator-size)*.13);inline-size:calc(var(--mg-status-label-indicator-size)*.9);margin-inline:calc(var(--mg-status-label-indicator-size)*.05)}.mg-status-label--waiting-information .mg-status-label__indicator{background-color:var(--mg-status-label-indicator--waiting-information);block-size:calc(var(--mg-status-label-indicator-size)*.72);border-radius:var(--mg-status-label-indicator-size);inline-size:calc(var(--mg-status-label-indicator-size)*1.22);margin-inline:calc(var(--mg-status-label-indicator-size)*-.11)}.mg-status-label--waiting-validation .mg-status-label__indicator{background-color:var(--mg-status-label-indicator--waiting-validation);block-size:calc(var(--mg-status-label-indicator-size)*.82);border-radius:calc(var(--mg-status-label-indicator-size)*.13);inline-size:calc(var(--mg-status-label-indicator-size)*.82);margin-inline:calc(var(--mg-status-label-indicator-size)*.09);transform:rotate(45deg)}.mg-status-label--published .mg-status-label__indicator{background-color:var(--mg-status-label-indicator--published)}.mg-status-label--warning .mg-status-label__indicator{background-color:var(--mg-status-label-indicator-border-color);block-size:calc(var(--mg-status-label-indicator-size)*1.16);border:0;border-radius:0;clip-path:polygon(44.63344% 10.73313%,55.36656% 10.73313%,95.65836% 91.31672%,90.2918% 100%,9.7082% 100%,4.34164% 91.31672%);inline-size:calc(var(--mg-status-label-indicator-size)*1.16);margin-inline:calc(var(--mg-status-label-indicator-size)*-.08);position:relative}.mg-status-label--warning .mg-status-label__indicator:before{background-color:var(--mg-status-label-indicator--warning);clip-path:polygon(calc(44.63344% + var(--mg-status-label-indicator-ring)*.61803) calc(10.73313% + var(--mg-status-label-indicator-ring)*1),calc(55.36656% - var(--mg-status-label-indicator-ring)*.61803) calc(10.73313% + var(--mg-status-label-indicator-ring)*1),calc(95.65836% - var(--mg-status-label-indicator-ring)*1.14377) calc(91.31672% - var(--mg-status-label-indicator-ring)*.05146),calc(90.2918% - var(--mg-status-label-indicator-ring)*.55754) calc(100% - var(--mg-status-label-indicator-ring)*1),calc(9.7082% + var(--mg-status-label-indicator-ring)*.55754) calc(100% - var(--mg-status-label-indicator-ring)*1),calc(4.34164% + var(--mg-status-label-indicator-ring)*1.14377) calc(91.31672% - var(--mg-status-label-indicator-ring)*.05146));content:"";inset:0;position:absolute}.mg-status-label--negative .mg-status-label__indicator{background-color:var(--mg-status-label-indicator-border-color);block-size:calc(var(--mg-status-label-indicator-size)*.97);border:0;border-radius:0;clip-path:polygon(25% 0,75% 0,100% 25%,100% 75%,75% 100%,25% 100%,0 75%,0 25%);inline-size:calc(var(--mg-status-label-indicator-size)*.97);margin-inline:calc(var(--mg-status-label-indicator-size)*.015);position:relative}.mg-status-label--negative .mg-status-label__indicator:before{background-color:var(--mg-status-label-indicator--negative);clip-path:polygon(calc(25% + var(--mg-status-label-indicator-ring)*.41421) calc(var(--mg-status-label-indicator-ring)*1),calc(75% - var(--mg-status-label-indicator-ring)*.41421) calc(var(--mg-status-label-indicator-ring)*1),calc(100% - var(--mg-status-label-indicator-ring)*1) calc(25% + var(--mg-status-label-indicator-ring)*.41421),calc(100% - var(--mg-status-label-indicator-ring)*1) calc(75% - var(--mg-status-label-indicator-ring)*.41421),calc(75% - var(--mg-status-label-indicator-ring)*.41421) calc(100% - var(--mg-status-label-indicator-ring)*1),calc(25% + var(--mg-status-label-indicator-ring)*.41421) calc(100% - var(--mg-status-label-indicator-ring)*1),calc(var(--mg-status-label-indicator-ring)*1) calc(75% - var(--mg-status-label-indicator-ring)*.41421),calc(var(--mg-status-label-indicator-ring)*1) calc(25% + var(--mg-status-label-indicator-ring)*.41421));content:"";inset:0;position:absolute}@media (forced-colors:active){.mg-status-label__indicator{background-color:Canvas;border-color:CanvasText;forced-color-adjust:none;outline:1px solid CanvasText;outline-offset:-1px}.mg-status-label--negative .mg-status-label__indicator:before,.mg-status-label--warning .mg-status-label__indicator:before{background-color:CanvasText}.mg-status-label--draft .mg-status-label__indicator,.mg-status-label--negative .mg-status-label__indicator,.mg-status-label--published .mg-status-label__indicator,.mg-status-label--waiting-information .mg-status-label__indicator,.mg-status-label--waiting-validation .mg-status-label__indicator,.mg-status-label--warning .mg-status-label__indicator{background-color:CanvasText;outline:0}}@media print{.mg-status-label__indicator,.mg-status-label__indicator:before{print-color-adjust:exact}}.mg-status-label-group{display:flex;flex-wrap:wrap;gap:var(--mg-spacing-100) var(--mg-spacing-200);margin:0;padding:0;--mg-list-item-indent-rtl:0;list-style:none;list-style-type:""}[dir=rtl] .mg-status-label-group,[dir=rtl] .mg-status-label-group>li{padding:0}
|
|
769
767
|
|
|
770
768
|
/**
|
|
771
769
|
* Table
|
|
@@ -773,7 +771,7 @@
|
|
|
773
771
|
* Accessible tabular data styling with striped, bordered, and responsive scrolling variants.
|
|
774
772
|
*
|
|
775
773
|
* Full documentation:
|
|
776
|
-
* https://github.com/
|
|
774
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Atom/Table/Table.mdx
|
|
777
775
|
*/
|
|
778
776
|
/* table tag start */.mg-table{border-collapse:collapse;border-spacing:0;overflow-wrap:anywhere;text-wrap:wrap;width:100%}.mg-table.mg-table--small td,.mg-table.mg-table--small th{font-size:var(--mg-font-size-250);-webkit-text-size-adjust:100%}.mg-table.mg-table--striped tr:nth-child(2n){background-color:rgb(var(--mg-color-neutral-25))}.mg-table.mg-table--border{border-collapse:collapse}.mg-table.mg-table--border td,.mg-table.mg-table--border th{border:1px solid rgb(var(--mg-color-neutral-400));border-collapse:collapse;box-sizing:border-box;min-width:50px}.mg-table.mg-table--stacked td,.mg-table.mg-table--stacked th{display:block
|
|
779
777
|
/* medium design */}@media (width >= 48em){.mg-table.mg-table--stacked td,.mg-table.mg-table--stacked th{display:table-cell}}.mg-table.mg-table--stacked thead tr{display:none
|
|
@@ -785,7 +783,7 @@
|
|
|
785
783
|
* Metadata taxonomy tags, clickable topic chips, and keyword labels with active and hover states.
|
|
786
784
|
*
|
|
787
785
|
* Full documentation:
|
|
788
|
-
* https://github.com/
|
|
786
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Atom/Tag/Tag.mdx
|
|
789
787
|
*/.mg-badge,.mg-tag,.mg-tag-container>:where(span,div,a,li){--mg-tag-background:var(--tag-color-background,rgb(var(--mg-color-tag)));--mg-tag-background-hover:var(
|
|
790
788
|
--tag-color-background-hover,rgb(var(--mg-color-tag--hover))
|
|
791
789
|
);--mg-tag-foreground:rgb(var(--mg-color-neutral-0));align-items:center;background-color:var(--mg-tag-background);border:1px solid transparent;border-radius:var(--mg-radius-tag);box-sizing:border-box;color:var(--mg-tag-foreground);display:inline-flex;font-family:var(--mg-font-family-ui);font-size:var(--mg-font-size-250);font-weight:500;line-height:1.5;max-inline-size:100%;min-block-size:1.75rem;min-inline-size:1.5rem;overflow-wrap:anywhere;padding:var(--mg-spacing-25) var(--mg-spacing-100);text-decoration:none;vertical-align:middle}.mg-tag--secondary{--mg-tag-background:var(
|
|
@@ -805,7 +803,7 @@
|
|
|
805
803
|
* Responsive HTML5 video element wrapper and aspect ratio scaling.
|
|
806
804
|
*
|
|
807
805
|
* Full documentation:
|
|
808
|
-
* https://github.com/
|
|
806
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Utilities/EmbedContainer/EmbedContainer.mdx
|
|
809
807
|
*/
|
|
810
808
|
/* video start */video{object-fit:cover}
|
|
811
809
|
|
|
@@ -816,7 +814,7 @@
|
|
|
816
814
|
* Starter scaffold and template styles for authoring new Mangrove components.
|
|
817
815
|
*
|
|
818
816
|
* Full documentation:
|
|
819
|
-
* https://github.com/
|
|
817
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/Boilerplate/Boilerplate.mdx
|
|
820
818
|
*/.mg-boilerplate{border:1px solid rgb(var(--mg-color-red-900));border-radius:var(--mg-radius-button);padding:var(--mg-spacing-100)}.mg-boilerplate__title{font-size:.9375rem;margin-bottom:.625rem}.mg-boilerplate__title a{color:rgb(var(--mg-color-interactive));text-decoration:underline;text-underline-offset:3px}.mg-boilerplate__title a:hover{text-decoration-thickness:2px}.mg-boilerplate__title a:focus-visible{box-shadow:0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-color-neutral-0));outline:var(--mg-focus-ring-width) solid rgb(var(--mg-color-focus-ring));outline-offset:var(--mg-focus-ring-offset)}.mg-boilerplate--primary{background-color:rgb(var(--mg-color-blue-200))}.mg-boilerplate--secondary{background-color:rgb(var(--mg-color-blue-100))}
|
|
821
819
|
|
|
822
820
|
/**
|
|
@@ -825,7 +823,7 @@
|
|
|
825
823
|
* Foundational styling, typography, focus rings, and validation states shared across form controls.
|
|
826
824
|
*
|
|
827
825
|
* Full documentation:
|
|
828
|
-
* https://github.com/
|
|
826
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/Forms/TextInput/TextInput.mdx
|
|
829
827
|
*/.mg-form-field{display:block;margin-bottom:var(--mg-spacing-100)}.mg-form-label{display:block;font-size:var(--mg-font-size-300)}.mg-form-label--disabled{color:rgb(var(--mg-color-neutral-400))}.mg-form-label--required:after{color:rgb(var(--mg-color-red-900));content:" *"}.mg-form-input,.mg-form-textarea,.mg-search__input{appearance:none;background-color:var(--mg-form-input-background);border:var(--mg-form-input-border-width) solid var(--mg-form-input-border-color);border-radius:var(--mg-radius-form-input);box-sizing:border-box;display:block;font-family:var(--mg-font-family-text);font-size:var(--mg-font-size-form-input);height:var(--mg-form-input-block-size);margin-top:var(--mg-spacing-25);padding:var(--mg-form-input-padding);width:100%}[placeholder].mg-form-input:not(:placeholder-shown),[placeholder].mg-form-textarea:not(:placeholder-shown),[placeholder].mg-search__input:not(:placeholder-shown){background-color:var(--mg-form-input-background--focus)}.mg-form-input::placeholder,.mg-form-textarea::placeholder,.mg-search__input::placeholder{color:rgb(var(--mg-color-neutral-500))}.mg-form-input:focus-visible,.mg-form-textarea:focus-visible,.mg-search__input:focus-visible{background-color:var(--mg-form-input-background--focus);border-color:rgb(var(--mg-color-form-focus));box-shadow:0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-color-neutral-0));outline:var(--mg-focus-ring-width) solid rgb(var(--mg-color-focus-ring));outline-offset:var(--mg-focus-ring-offset)}.mg-form-input--disabled{background-color:rgb(var(--mg-color-white));border-color:rgb(var(--mg-color-neutral-400));color:rgb(var(--mg-color-neutral-400))}.mg-form-input--disabled::placeholder{color:rgb(var(--mg-color-neutral-400))}.mg-form-input--error{border-color:rgb(var(--mg-color-red-900))}.mg-form-textarea{height:auto;max-width:100%;resize:vertical}.mg-form-textarea--disabled{background-color:rgb(var(--mg-color-white));border-color:rgb(var(--mg-color-neutral-400));color:rgb(var(--mg-color-neutral-400))}.mg-form-textarea--disabled::placeholder{color:rgb(var(--mg-color-neutral-400))}.mg-form-textarea--error{border-color:rgb(var(--mg-color-red-900))}.mg-form-select{appearance:none;background-color:var(--mg-form-input-background);background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%231a1a1a' d='M1.41 0 6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");background-position:right .390625rem center;background-repeat:no-repeat;border:var(--mg-form-input-border-width) solid var(--mg-form-input-border-color);border-radius:var(--mg-radius-form-input);box-sizing:border-box;cursor:pointer;display:block;font-family:var(--mg-font-family-text);font-size:var(--mg-font-size-form-input);height:var(--mg-form-input-block-size);margin-top:var(--mg-spacing-25);padding:var(--mg-form-input-padding);padding-right:var(--mg-spacing-200);width:100%}.mg-form-select:focus-visible{background-color:var(--mg-form-input-background--focus);border-color:rgb(var(--mg-color-form-focus));box-shadow:0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-color-neutral-0));outline:var(--mg-focus-ring-width) solid rgb(var(--mg-color-focus-ring));outline-offset:var(--mg-focus-ring-offset)}.mg-form-select--disabled{background-color:rgb(var(--mg-color-white));border-color:rgb(var(--mg-color-neutral-400));color:rgb(var(--mg-color-neutral-400));cursor:default}.mg-form-select--error{border-color:rgb(var(--mg-color-red-900))}.mg-form-check{align-items:center;display:flex;min-height:2.5rem;position:relative}.mg-form-check__input{appearance:none;border:2px solid rgb(var(--mg-color-form-check));cursor:pointer;height:1.5rem;margin:0;width:1.5rem}.mg-form-check__input:hover{border-color:rgb(var(--mg-color-form-check--hover))}.mg-form-check__input:focus-visible{box-shadow:0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-color-neutral-0));outline:var(--mg-focus-ring-width) solid rgb(var(--mg-color-focus-ring));outline-offset:var(--mg-focus-ring-offset)}.mg-form-check__input--checkbox{border-radius:var(--mg-radius-form-input)}.mg-form-check__input--radio{background-color:transparent;border-radius:100%;box-shadow:inset 0 0 0 rgb(var(--mg-color-white))}.mg-form-check__input--disabled{cursor:default}.mg-form-check__input--disabled,.mg-form-check__input--disabled:hover{border-color:rgb(var(--mg-color-neutral-400))}.mg-form-check__input--error,.mg-form-check__input--error:hover{border-color:rgb(var(--mg-color-red-900))}.mg-form-check__label{cursor:pointer;font-size:var(--mg-font-size-300);padding:0 7px}.mg-form-check__input--checkbox:checked{background-color:rgb(var(--mg-color-form-check--checked));background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='m3.5 8 3 3 6-6'/%3E%3C/svg%3E");border-color:rgb(var(--mg-color-form-check--checked))}.mg-form-check__input--radio:checked{background-color:rgb(var(--mg-color-form-check--checked));box-shadow:inset 0 0 0 3px rgb(var(--mg-color-white))}.mg-form-check__input--radio:checked:focus-visible{box-shadow:inset 0 0 0 3px rgb(var(--mg-color-white)),0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-color-neutral-0))}.mg-switch{align-items:center;cursor:pointer;display:inline-flex;gap:var(--mg-spacing-75);min-height:2.25rem;position:relative;user-select:none}.mg-switch__input{appearance:none;border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.mg-switch__input:focus-visible+.mg-switch__track{box-shadow:0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-color-neutral-0));outline:var(--mg-focus-ring-width) solid rgb(var(--mg-color-focus-ring));outline-offset:var(--mg-focus-ring-offset)}.mg-switch__input:checked+.mg-switch__track{background-color:var(--mg-switch-track-background--checked,rgb(var(--mg-color-interactive)))}.mg-switch__input:checked+.mg-switch__track .mg-switch__thumb{transform:translateX(calc(var(--mg-switch-track-inline-size, calc(var(--mg-switch-track-block-size, var(--mg-switch-size, 1.5rem)) * 1.75)) - var(--mg-switch-thumb-size, calc(var(--mg-switch-track-block-size, var(--mg-switch-size, 1.5rem)) - 2 * var(--mg-switch-track-inset, calc(var(--mg-switch-track-block-size, var(--mg-switch-size, 1.5rem)) / 12)))) - 2 * var(--mg-switch-track-inset, calc(var(--mg-switch-track-block-size, var(--mg-switch-size, 1.5rem)) / 12))))}.mg-switch__input:disabled+.mg-switch__track{cursor:not-allowed;opacity:.45}.mg-switch__input[aria-disabled=true]+.mg-switch__track{background-image:linear-gradient(var(--mg-switch-track-overlay--disabled,rgb(var(--mg-color-neutral-0)/.55)),var(--mg-switch-track-overlay--disabled,rgb(var(--mg-color-neutral-0)/.55)));cursor:not-allowed}.mg-switch__input[aria-disabled=true]+.mg-switch__track .mg-switch__thumb{box-shadow:0 1px 3px rgba(0,0,0,.113)}.mg-switch__input[aria-disabled=true]+.mg-switch__track .mg-switch__thumb:after{opacity:.45}.mg-switch__input:disabled~.mg-switch__label,.mg-switch__input[aria-disabled=true]~.mg-switch__label{color:rgb(var(--mg-color-neutral-400));cursor:not-allowed}.mg-switch--pending .mg-switch__track,.mg-switch__input[aria-busy=true]+.mg-switch__track{background-image:linear-gradient(var(--mg-switch-track-overlay--pending,rgb(var(--mg-color-neutral-500)/.4)),var(--mg-switch-track-overlay--pending,rgb(var(--mg-color-neutral-500)/.4)));cursor:progress}.mg-switch--pending .mg-switch__track .mg-switch__thumb:after,.mg-switch__input[aria-busy=true]+.mg-switch__track .mg-switch__thumb:after{border:calc(var(--mg-switch-thumb-size, calc(var(--mg-switch-track-block-size, var(--mg-switch-size, 1.5rem)) - 2 * var(--mg-switch-track-inset, calc(var(--mg-switch-track-block-size, var(--mg-switch-size, 1.5rem)) / 12)))) * .1) dotted var(--mg-switch-pending-ring-color,rgb(var(--mg-color-interactive)));border-radius:50%;box-sizing:border-box;content:"";inset:calc(var(--mg-switch-thumb-size, calc(var(--mg-switch-track-block-size, var(--mg-switch-size, 1.5rem)) - 2 * var(--mg-switch-track-inset, calc(var(--mg-switch-track-block-size, var(--mg-switch-size, 1.5rem)) / 12)))) * .2);position:absolute}@media (prefers-reduced-motion:no-preference){.mg-switch--pending .mg-switch__track .mg-switch__thumb:after,.mg-switch__input[aria-busy=true]+.mg-switch__track .mg-switch__thumb:after{animation:mg-switch-pending-spin .8s linear infinite;border-block-start-color:var(--mg-switch-pending-ring-gap-color,rgb(var(--mg-color-neutral-300)));border-style:solid}}.mg-switch--pending .mg-switch__input[aria-disabled=true]+.mg-switch__track,.mg-switch__input[aria-disabled=true][aria-busy=true]+.mg-switch__track{background-image:linear-gradient(var(--mg-switch-track-overlay--disabled,rgb(var(--mg-color-neutral-0)/.55)),var(--mg-switch-track-overlay--disabled,rgb(var(--mg-color-neutral-0)/.55))),linear-gradient(var(--mg-switch-track-overlay--pending,rgb(var(--mg-color-neutral-500)/.4)),var(--mg-switch-track-overlay--pending,rgb(var(--mg-color-neutral-500)/.4)))}.mg-switch--pending,.mg-switch:has(.mg-switch__input[aria-busy=true]),.mg-switch__input[aria-busy=true]~.mg-switch__label{cursor:progress}.mg-switch__track{align-items:center;background-color:var(--mg-switch-track-background,rgb(var(--mg-color-neutral-400)));block-size:var(--mg-switch-track-block-size,var(--mg-switch-size,1.5rem));border:var(--mg-switch-track-inset,calc(var(--mg-switch-track-block-size, var(--mg-switch-size, 1.5rem))/12)) solid transparent;border-radius:calc(var(--mg-switch-track-block-size, var(--mg-switch-size, 1.5rem))/2);box-sizing:border-box;display:inline-flex;flex-shrink:0;inline-size:var(--mg-switch-track-inline-size,calc(var(--mg-switch-track-block-size, var(--mg-switch-size, 1.5rem))*1.75));transition:background-color var(--mg-motion-duration-fast) var(--mg-motion-easing-standard),border-color var(--mg-motion-duration-fast) var(--mg-motion-easing-standard)}.mg-switch__thumb{background-color:var(--mg-switch-thumb-background,rgb(var(--mg-color-neutral-0)));block-size:var(--mg-switch-thumb-size,calc(var(--mg-switch-track-block-size, var(--mg-switch-size, 1.5rem)) - 2 * var(--mg-switch-track-inset, calc(var(--mg-switch-track-block-size, var(--mg-switch-size, 1.5rem)) / 12))));border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.25);display:block;inline-size:var(--mg-switch-thumb-size,calc(var(--mg-switch-track-block-size, var(--mg-switch-size, 1.5rem)) - 2 * var(--mg-switch-track-inset, calc(var(--mg-switch-track-block-size, var(--mg-switch-size, 1.5rem)) / 12))));position:relative;transition:transform var(--mg-motion-duration-fast) var(--mg-motion-easing-standard)}.mg-switch__label{color:rgb(var(--mg-color-neutral-900));font-size:var(--mg-font-size-300)}.mg-switch--small{--mg-switch-size:1.125rem;gap:var(--mg-spacing-50)}@media (prefers-reduced-motion:reduce){.mg-switch__thumb,.mg-switch__track{transition:none}}.mg-switch--error .mg-switch__track,.mg-switch__input--error+.mg-switch__track,.mg-switch__input[aria-invalid=true]+.mg-switch__track{border-color:var(--mg-switch-track-border-color--error,rgb(var(--mg-color-red-900)))}[dir=rtl] .mg-switch__input:checked+.mg-switch__track .mg-switch__thumb{transform:translateX(calc(-1 * (var(--mg-switch-track-inline-size, calc(var(--mg-switch-track-block-size, var(--mg-switch-size, 1.5rem)) * 1.75)) - var(--mg-switch-thumb-size, calc(var(--mg-switch-track-block-size, var(--mg-switch-size, 1.5rem)) - 2 * var(--mg-switch-track-inset, calc(var(--mg-switch-track-block-size, var(--mg-switch-size, 1.5rem)) / 12)))) - 2 * var(--mg-switch-track-inset, calc(var(--mg-switch-track-block-size, var(--mg-switch-size, 1.5rem)) / 12)))))}@media (forced-colors:active){.mg-switch__track{background-color:Canvas;border-color:CanvasText;forced-color-adjust:none}.mg-switch__thumb{background-color:CanvasText;box-shadow:none}.mg-switch__input:checked+.mg-switch__track{background-color:Highlight;border-color:Highlight}.mg-switch__input:checked+.mg-switch__track .mg-switch__thumb{background-color:HighlightText}.mg-switch__input:focus-visible+.mg-switch__track{box-shadow:none;outline:2px solid Highlight;outline-offset:2px}.mg-switch .mg-switch__input:disabled:checked+.mg-switch__track,.mg-switch .mg-switch__input[aria-disabled=true]:checked+.mg-switch__track,.mg-switch__input:disabled+.mg-switch__track,.mg-switch__input[aria-disabled=true]+.mg-switch__track{background-color:Canvas;background-image:none;border-color:GrayText;opacity:1}.mg-switch .mg-switch__input:disabled:checked+.mg-switch__track .mg-switch__thumb,.mg-switch .mg-switch__input[aria-disabled=true]:checked+.mg-switch__track .mg-switch__thumb,.mg-switch__input:disabled+.mg-switch__track .mg-switch__thumb,.mg-switch__input[aria-disabled=true]+.mg-switch__track .mg-switch__thumb{background-color:GrayText;box-shadow:none}.mg-switch .mg-switch__input:disabled:checked+.mg-switch__track .mg-switch__thumb:after,.mg-switch .mg-switch__input[aria-disabled=true]:checked+.mg-switch__track .mg-switch__thumb:after,.mg-switch__input:disabled+.mg-switch__track .mg-switch__thumb:after,.mg-switch__input[aria-disabled=true]+.mg-switch__track .mg-switch__thumb:after{opacity:1}.mg-switch--pending .mg-switch__track,.mg-switch__input[aria-busy=true]+.mg-switch__track{background-image:none}.mg-switch--pending .mg-switch__track .mg-switch__thumb:after,.mg-switch__input[aria-busy=true]+.mg-switch__track .mg-switch__thumb:after{border-color:Canvas}.mg-switch--pending .mg-switch__input[aria-disabled=true]+.mg-switch__track,.mg-switch__input[aria-disabled=true][aria-busy=true]+.mg-switch__track{background-image:none}.mg-switch--pending .mg-switch__input:checked+.mg-switch__track .mg-switch__thumb:after,.mg-switch__input[aria-busy=true]:checked+.mg-switch__track .mg-switch__thumb:after{border-color:Highlight}.mg-switch .mg-switch__input:disabled:checked+.mg-switch__track .mg-switch__thumb:after,.mg-switch .mg-switch__input[aria-disabled=true]:checked+.mg-switch__track .mg-switch__thumb:after{border-color:Canvas}.mg-switch .mg-switch__input--error+.mg-switch__track,.mg-switch .mg-switch__input[aria-invalid=true]+.mg-switch__track,.mg-switch.mg-switch--error .mg-switch__track{border-color:CanvasText;border-style:dashed}}@media (forced-colors:active) and (prefers-reduced-motion:no-preference){.mg-switch .mg-switch__input:disabled:checked+.mg-switch__track .mg-switch__thumb:after,.mg-switch .mg-switch__input[aria-disabled=true]:checked+.mg-switch__track .mg-switch__thumb:after,.mg-switch--pending .mg-switch__input:checked+.mg-switch__track .mg-switch__thumb:after,.mg-switch--pending .mg-switch__track .mg-switch__thumb:after,.mg-switch__input[aria-busy=true]+.mg-switch__track .mg-switch__thumb:after,.mg-switch__input[aria-busy=true]:checked+.mg-switch__track .mg-switch__thumb:after{border-block-start-color:transparent}}@keyframes mg-switch-pending-spin{to{transform:rotate(1turn)}}.mg-form-help{color:rgb(var(--mg-color-neutral-500));font-size:var(--mg-font-size-200)}.mg-form-error,.mg-form-help{margin-bottom:0;margin-top:var(--mg-spacing-25)}.mg-form-error{color:rgb(var(--mg-color-red-900));font-size:var(--mg-font-size-300)}.mg-form-error-summary{background-color:rgb(var(--mg-color-red-50));border-inline-start:4px solid rgb(var(--mg-color-red-900));margin-bottom:var(--mg-spacing-200);padding:var(--mg-spacing-150)}.mg-form-error-summary:focus{box-shadow:0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-color-neutral-0));outline:var(--mg-focus-ring-width) solid rgb(var(--mg-color-focus-ring));outline-offset:var(--mg-focus-ring-offset)}.mg-form-error-summary__title{color:rgb(var(--mg-color-red-900));font-size:var(--mg-font-size-300);font-weight:700;margin-bottom:var(--mg-spacing-75);margin-top:0}.mg-form-error-summary__list{margin:0;padding-inline-start:var(--mg-spacing-100)}.mg-form-error-summary__list li{margin-bottom:var(--mg-spacing-50)}.mg-form-error-summary__list li:last-child{margin-bottom:0}.mg-form-error-summary__list a{color:rgb(var(--mg-color-red-900));font-weight:600;text-decoration:underline}[dir=rtl] .mg-form-input[type=date]::-webkit-calendar-picker-indicator{left:inherit;position:absolute;right:27px}[dir=rtl] .mg-form-input[type=date]::-webkit-date-and-time-value{margin-right:0;text-align:right}
|
|
830
828
|
|
|
831
829
|
/**
|
|
@@ -834,7 +832,7 @@
|
|
|
834
832
|
* Button row and submission action container for web forms.
|
|
835
833
|
*
|
|
836
834
|
* Full documentation:
|
|
837
|
-
* https://github.com/
|
|
835
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/Forms/FormAction/FormAction.mdx
|
|
838
836
|
*/.mg-form-action{align-items:stretch;display:flex;margin-top:var(--mg-spacing-25);max-width:100%}.mg-form-action__control{border-end-end-radius:0;border-start-end-radius:0;flex:1 1 auto;margin-top:0;min-width:0}.mg-form-action>.mg-button.mg-form-action__action,.mg-form-action__action{align-self:stretch;border-end-start-radius:0;border-start-start-radius:0;flex:0 0 auto;margin-inline-start:-1px;min-height:2.875rem;position:relative}.mg-form-action__action:focus-visible,.mg-form-action__control:focus-visible{z-index:1}@media (width <= 480px){.mg-form-action--stack-mobile{flex-direction:column;gap:var(--mg-spacing-50)}.mg-form-action--stack-mobile .mg-form-action__control{border-radius:var(--mg-radius-form-input);margin-inline-start:0;width:100%}.mg-form-action--stack-mobile .mg-form-action__action,.mg-form-action--stack-mobile>.mg-button.mg-form-action__action{border-radius:var(--mg-radius-button);margin-inline-start:0;width:100%}}
|
|
839
837
|
|
|
840
838
|
/**
|
|
@@ -843,7 +841,7 @@
|
|
|
843
841
|
* Field wrapper associating labels, hint helper text, form inputs, and inline error validation messages.
|
|
844
842
|
*
|
|
845
843
|
* Full documentation:
|
|
846
|
-
* https://github.com/
|
|
844
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/Forms/FormGroup/FormGroup.mdx
|
|
847
845
|
*/.mg-form-group{background:rgb(var(--mg-color-neutral-50)/.65);border:1px solid rgb(var(--mg-color-neutral-600)/.18);border-radius:var(--mg-radius-form-input);margin:0 0 var(--mg-spacing-100);min-width:0;padding:var(--mg-spacing-100)}.mg-form-group__legend{display:block;margin-bottom:var(--mg-spacing-25);padding:0 var(--mg-spacing-25)}.mg-form-group--disabled .mg-form-group__legend{color:rgb(var(--mg-color-neutral-400))}.mg-form-group--disabled{background:rgb(var(--mg-color-neutral-50)/.35);border-color:rgb(var(--mg-color-neutral-400)/.35)}.mg-form-group--error .mg-form-group__legend{color:rgb(var(--mg-color-red-900))}.mg-form-group--error{border-color:rgb(var(--mg-color-red-900))}
|
|
848
846
|
|
|
849
847
|
/**
|
|
@@ -852,7 +850,7 @@
|
|
|
852
850
|
* Single-line text input fields supporting prefix/suffix adornments, search variants, and error states.
|
|
853
851
|
*
|
|
854
852
|
* Full documentation:
|
|
855
|
-
* https://github.com/
|
|
853
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/Forms/TextInput/TextInput.mdx
|
|
856
854
|
*/.mg-form-input[type=date]{color:rgb(var(--mg-color-neutral-500))}.mg-form-input[type=date]::-webkit-calendar-picker-indicator{appearance:none;left:3px;opacity:0;position:absolute}
|
|
857
855
|
|
|
858
856
|
/**
|
|
@@ -861,7 +859,7 @@
|
|
|
861
859
|
* Multi-line text input fields with configurable resize behavior and validation styling.
|
|
862
860
|
*
|
|
863
861
|
* Full documentation:
|
|
864
|
-
* https://github.com/
|
|
862
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/Forms/Textarea/Textarea.mdx
|
|
865
863
|
*/
|
|
866
864
|
/**
|
|
867
865
|
* Checkbox
|
|
@@ -869,7 +867,7 @@
|
|
|
869
867
|
* Accessible custom checkbox inputs with focus rings, checked checkmarks, and disabled states.
|
|
870
868
|
*
|
|
871
869
|
* Full documentation:
|
|
872
|
-
* https://github.com/
|
|
870
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/Forms/Checkbox/Checkbox.mdx
|
|
873
871
|
*/
|
|
874
872
|
/**
|
|
875
873
|
* Radio Button
|
|
@@ -877,7 +875,7 @@
|
|
|
877
875
|
* Accessible radio input controls with styled checked indicators and keyboard focus states.
|
|
878
876
|
*
|
|
879
877
|
* Full documentation:
|
|
880
|
-
* https://github.com/
|
|
878
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/Forms/Radio/Radio.mdx
|
|
881
879
|
*/
|
|
882
880
|
/**
|
|
883
881
|
* Segmented control
|
|
@@ -887,7 +885,7 @@
|
|
|
887
885
|
* view shows.
|
|
888
886
|
*
|
|
889
887
|
* Full documentation:
|
|
890
|
-
* https://github.com/
|
|
888
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/Forms/SegmentedControl/SegmentedControl.mdx
|
|
891
889
|
*/.mg-segmented-control{border:0;margin:0 0 var(--mg-spacing-100);min-inline-size:0;padding:0}.mg-segmented-control__legend{display:block;margin-bottom:var(--mg-spacing-25);padding:0}.mg-segmented-control__group{display:inline-flex;flex-wrap:wrap;max-inline-size:100%;position:relative}.mg-segmented-control__input{appearance:none;border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.mg-segmented-control__label{align-items:center;background-color:transparent;border:var(--mg-border-width-button) solid rgb(var(--mg-color-button-outline-primary));color:rgb(var(--mg-color-button-outline-primary));cursor:pointer;display:inline-flex;flex:0 1 auto;font-family:var(--mg-font-family-text);font-size:var(--mg-font-size-button);font-weight:600;justify-content:center;line-height:1.2;min-block-size:var(--mg-segmented-control-min-block-size,2.75rem);min-inline-size:0;overflow-wrap:anywhere;padding:var(--mg-padding-button);position:relative;text-align:center;z-index:0}@media (prefers-reduced-motion:no-preference){.mg-segmented-control__label{transition:background-color var(--mg-motion-duration-fast) var(--mg-motion-easing-standard),border-color var(--mg-motion-duration-fast) var(--mg-motion-easing-standard),color var(--mg-motion-duration-fast) var(--mg-motion-easing-standard)}}.mg-segmented-control__label:first-of-type{border-end-start-radius:var(--mg-segmented-control-radius,var(--mg-radius-button));border-start-start-radius:var(--mg-segmented-control-radius,var(--mg-radius-button))}.mg-segmented-control__label:last-of-type{border-end-end-radius:var(--mg-segmented-control-radius,var(--mg-radius-button));border-start-end-radius:var(--mg-segmented-control-radius,var(--mg-radius-button))}.mg-segmented-control__input:not(:first-of-type)+.mg-segmented-control__label{margin-inline-start:calc(var(--mg-border-width-button)*-1)}.mg-segmented-control--full-width .mg-segmented-control__group{display:flex}.mg-segmented-control--full-width .mg-segmented-control__label{flex:1 1 0}.mg-segmented-control--small{--mg-segmented-control-min-block-size:2.25rem}.mg-segmented-control--small .mg-segmented-control__label{font-size:var(--mg-font-size-200);padding:var(--mg-spacing-50) var(--mg-spacing-100)}.mg-segmented-control__label:hover{background-color:rgb(var(--mg-color-button-outline-primary--hover));border-color:rgb(var(--mg-color-button-outline-primary--hover));color:rgb(var(--mg-color-button));z-index:1}.mg-segmented-control__input:checked+.mg-segmented-control__label{background-color:var(--mg-color-button-background);border-color:var(--mg-color-button-background);color:rgb(var(--mg-color-button));z-index:1}.mg-segmented-control__input:checked+.mg-segmented-control__label:hover{background-color:var(--mg-color-button-background--hover);border-color:var(--mg-color-button-background--hover)}.mg-segmented-control__input:disabled+.mg-segmented-control__label,.mg-segmented-control__input:disabled+.mg-segmented-control__label:hover{background-color:transparent;border-color:rgb(var(--mg-color-neutral-400));color:rgb(var(--mg-color-neutral-400));cursor:not-allowed;z-index:0}.mg-segmented-control__input:disabled:checked+.mg-segmented-control__label,.mg-segmented-control__input:disabled:checked+.mg-segmented-control__label:hover{background-color:rgb(var(--mg-color-neutral-500));border-color:rgb(var(--mg-color-neutral-500));color:rgb(var(--mg-color-neutral-0))}.mg-segmented-control__input:focus-visible+.mg-segmented-control__label{box-shadow:0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-color-neutral-0));outline:var(--mg-focus-ring-width) solid rgb(var(--mg-color-focus-ring));outline-offset:var(--mg-focus-ring-offset);z-index:2}@media (forced-colors:active){.mg-segmented-control .mg-segmented-control__label{background-color:Canvas;border-color:ButtonText;color:ButtonText;forced-color-adjust:none}.mg-segmented-control .mg-segmented-control__input:checked+.mg-segmented-control__label,.mg-segmented-control .mg-segmented-control__input:checked+.mg-segmented-control__label:hover{background-color:Highlight;border-color:Highlight;color:HighlightText}.mg-segmented-control .mg-segmented-control__input:disabled+.mg-segmented-control__label,.mg-segmented-control .mg-segmented-control__input:disabled+.mg-segmented-control__label:hover{background-color:Canvas;border-color:GrayText;color:GrayText}.mg-segmented-control .mg-segmented-control__input:disabled:checked+.mg-segmented-control__label,.mg-segmented-control .mg-segmented-control__input:disabled:checked+.mg-segmented-control__label:hover{background-color:GrayText;border-color:GrayText;color:Canvas}.mg-segmented-control .mg-segmented-control__input:focus-visible+.mg-segmented-control__label{box-shadow:none;outline:var(--mg-focus-ring-width) solid Highlight;outline-offset:var(--mg-focus-ring-offset)}.mg-segmented-control .mg-segmented-control__input:not(:disabled,:focus-visible)+.mg-segmented-control__label:hover{outline:1px solid ButtonText;outline-offset:calc(var(--mg-border-width-button)*-1)}}
|
|
892
890
|
/**
|
|
893
891
|
* Select Dropdown
|
|
@@ -895,7 +893,7 @@
|
|
|
895
893
|
* Custom styled <select> dropdown menus with custom chevron indicator and focus treatment.
|
|
896
894
|
*
|
|
897
895
|
* Full documentation:
|
|
898
|
-
* https://github.com/
|
|
896
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/Forms/Select/Select.mdx
|
|
899
897
|
*/[dir=rtl] .mg-form-select{background-position:left .390625rem center;padding-left:var(--mg-spacing-200);padding-right:.390625rem}
|
|
900
898
|
|
|
901
899
|
/**
|
|
@@ -904,7 +902,7 @@
|
|
|
904
902
|
* Range slider supporting continuous and stepped intervals with labelled tick marks.
|
|
905
903
|
*
|
|
906
904
|
* Full documentation:
|
|
907
|
-
* https://github.com/
|
|
905
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/Forms/Range/Range.mdx
|
|
908
906
|
*/.mg-range{appearance:none;background:transparent;cursor:pointer;display:block;inline-size:100%;margin-block:var(--mg-spacing-200)}.mg-range::-webkit-slider-thumb{appearance:none;background-color:rgb(var(--mg-color-interactive));block-size:1.5rem;border:2px solid rgb(var(--mg-color-neutral-0));border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.3);inline-size:1.5rem;margin-block-start:calc(-.75rem + 2px);transition:background-color var(--mg-motion-duration-fast) var(--mg-motion-easing-standard),transform var(--mg-motion-duration-fast) var(--mg-motion-easing-standard)}@media (prefers-reduced-motion:reduce){.mg-range::-webkit-slider-thumb{transition:none}}.mg-range::-moz-range-thumb{appearance:none;background-color:rgb(var(--mg-color-interactive));block-size:1.5rem;border:2px solid rgb(var(--mg-color-neutral-0));border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.3);inline-size:1.5rem;margin-block-start:calc(-.75rem + 2px);transition:background-color var(--mg-motion-duration-fast) var(--mg-motion-easing-standard),transform var(--mg-motion-duration-fast) var(--mg-motion-easing-standard)}@media (prefers-reduced-motion:reduce){.mg-range::-moz-range-thumb{transition:none}}.mg-range:hover:not(:disabled)::-webkit-slider-thumb{background-color:var(--mg-color-button-background--hover);transform:scale(1.1)}@media (prefers-reduced-motion:reduce){.mg-range:hover:not(:disabled)::-webkit-slider-thumb{transform:none}}.mg-range:hover:not(:disabled)::-moz-range-thumb{background-color:var(--mg-color-button-background--hover);transform:scale(1.1)}@media (prefers-reduced-motion:reduce){.mg-range:hover:not(:disabled)::-moz-range-thumb{transform:none}}.mg-range::-webkit-slider-runnable-track{background-color:rgb(var(--mg-color-neutral-300));block-size:4px;border-radius:999px;inline-size:100%}.mg-range::-moz-range-track{background-color:rgb(var(--mg-color-neutral-300));block-size:4px;border-radius:999px;inline-size:100%}.mg-range:focus-visible{outline:none}.mg-range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-color-neutral-0));outline:var(--mg-focus-ring-width) solid rgb(var(--mg-color-focus-ring));outline-offset:var(--mg-focus-ring-offset)}.mg-range:focus-visible::-moz-range-thumb{box-shadow:0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-color-neutral-0));outline:var(--mg-focus-ring-width) solid rgb(var(--mg-color-focus-ring));outline-offset:var(--mg-focus-ring-offset)}.mg-range:disabled{cursor:not-allowed}.mg-range:disabled::-webkit-slider-thumb{background-color:rgb(var(--mg-color-neutral-400));border-color:rgb(var(--mg-color-neutral-200));box-shadow:none;transform:none}.mg-range:disabled::-moz-range-thumb{background-color:rgb(var(--mg-color-neutral-400));border-color:rgb(var(--mg-color-neutral-200));box-shadow:none;transform:none}.mg-range:disabled::-webkit-slider-runnable-track{background-color:rgb(var(--mg-color-neutral-200))}.mg-range:disabled::-moz-range-track{background-color:rgb(var(--mg-color-neutral-200))}.mg-range__ticks{color:rgb(var(--mg-color-neutral-600));display:flex;font-family:var(--mg-font-family-ui);font-size:var(--mg-font-size-200);justify-content:space-between;margin-block-start:calc(var(--mg-spacing-100)*-1);padding-inline:.75rem}.mg-range__ticks span{align-items:center;display:flex;flex-direction:column}.mg-range__ticks span:before{background-color:rgb(var(--mg-color-neutral-400));block-size:6px;content:"";display:block;inline-size:2px;margin-block-end:var(--mg-spacing-50)}
|
|
909
907
|
|
|
910
908
|
/**
|
|
@@ -913,16 +911,16 @@
|
|
|
913
911
|
* Accessible hierarchical breadcrumb navigation with chevron separators and current-page semantics.
|
|
914
912
|
*
|
|
915
913
|
* Full documentation:
|
|
916
|
-
* https://github.com/
|
|
917
|
-
*/.mg-breadcrumb{font-family:var(--mg-font-family-ui);font-size:var(--mg-font-size-300);font-weight:400;margin-block:var(--mg-spacing-100);margin-inline:0;padding:0}.mg-breadcrumb,.mg-breadcrumb>:is(ul,ol){align-items:baseline;display:flex;flex-wrap:wrap;list-style:none;list-style-type:""
|
|
914
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/Breadcrumbs/Breadcrumbs.mdx
|
|
915
|
+
*/.mg-breadcrumb{font-family:var(--mg-font-family-ui);font-size:var(--mg-font-size-300);font-weight:400;margin-block:var(--mg-spacing-100);margin-inline:0;padding:0}.mg-breadcrumb,.mg-breadcrumb>:is(ul,ol){align-items:baseline;display:flex;flex-wrap:wrap;row-gap:var(--mg-spacing-50);--mg-list-item-indent-rtl:0;list-style:none;list-style-type:""}.mg-breadcrumb>:is(ul,ol){margin:0;max-inline-size:100%;padding:0}.mg-breadcrumb li{display:inline;margin:0;max-inline-size:100%;overflow-wrap:anywhere;padding:0}.mg-breadcrumb li:last-of-type{font-weight:600}.mg-breadcrumb li a{color:rgb(var(--mg-color-text));font-weight:400;text-decoration:underline;text-underline-offset:.15em}.mg-breadcrumb li a:hover{color:rgb(var(--mg-color-interactive))}.mg-breadcrumb li a:focus-visible{box-shadow:0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-color-neutral-0));outline:var(--mg-focus-ring-width) solid rgb(var(--mg-color-focus-ring));outline-offset:var(--mg-focus-ring-offset)}.mg-breadcrumb li+li:before{block-size:.35em;border-block-start:.125em solid currentColor;border-inline-end:.125em solid currentColor;content:"";display:inline-block;inline-size:.35em;margin-inline:.65em .75em;transform:rotate(45deg);vertical-align:middle}.mg-breadcrumb li+li:has(a:empty):before{display:none}.mg-breadcrumb:dir(rtl) li+li:before{transform:rotate(-45deg)}.mg-breadcrumb.mg-breadcrumb--white{color:rgb(var(--mg-color-white))}.mg-breadcrumb.mg-breadcrumb--white li a{color:inherit}.mg-breadcrumb.mg-breadcrumb--white li a:hover{color:inherit;text-decoration-thickness:2px}@media (forced-colors:active){.mg-breadcrumb.mg-breadcrumb--white{color:CanvasText}}
|
|
918
916
|
/**
|
|
919
917
|
* Pager / Pagination
|
|
920
918
|
*
|
|
921
919
|
* Accessible pagination component with numbered pages, previous/next controls, and ellipsis truncation.
|
|
922
920
|
*
|
|
923
921
|
* Full documentation:
|
|
924
|
-
* https://github.com/
|
|
925
|
-
*/.mg-pager{margin-top:var(--mg-spacing-200);padding-top:var(--mg-spacing-150)}.mg-pager__list{align-items:center;display:flex;flex-wrap:wrap;gap:var(--mg-spacing-50);justify-content:center;list-style:none;list-style-type:""}.mg-pager__item,.mg-pager__list{margin:0;padding:0}.mg-pager__item--ellipsis{align-items:center;display:flex;padding:0 var(--mg-spacing-25)}.mg-pager__link{align-items:center;background:transparent;border:0;border-radius:50%;color:rgb(var(--mg-color-text));cursor:pointer;display:inline-flex;font-size:var(--mg-font-size-200);font-weight:600;justify-content:center;min-height:2.75rem;min-width:2.75rem;padding:0}@media (prefers-reduced-motion:no-preference){.mg-pager__link{transition:background-color var(--mg-motion-duration-fast) var(--mg-motion-easing-standard),color var(--mg-motion-duration-fast) var(--mg-motion-easing-standard),scale var(--mg-motion-duration-fast) var(--mg-motion-easing-standard)}}.mg-pager__link:hover:not(:disabled,.mg-pager__link--disabled){background:rgb(var(--mg-color-interactive)/.08);color:rgb(var(--mg-color-interactive-active));text-decoration:none}.mg-pager__link:focus-visible{box-shadow:0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-color-neutral-0));outline:var(--mg-focus-ring-width) solid rgb(var(--mg-color-focus-ring));outline-offset:var(--mg-focus-ring-offset)}.mg-pager__link:active:not(:disabled,.mg-pager__link--disabled,.mg-pager__link--current){scale:.96}.mg-pager__link--current{cursor:default}.mg-pager__link--current,.mg-pager__link--current:hover{background:rgb(var(--mg-color-interactive)/.12);color:rgb(var(--mg-color-text))}.mg-pager__link--disabled,.mg-pager__link:disabled{background:rgb(var(--mg-color-neutral-100)/.7);color:rgb(var(--mg-color-neutral-500));cursor:not-allowed}.mg-pager__link--next,.mg-pager__link--prev{background:rgb(var(--mg-color-interactive)/.06)}.mg-pager__icon{flex-shrink:0}.mg-pager__text{border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.mg-pager__ellipsis{color:rgb(var(--mg-color-neutral-500));font-size:var(--mg-font-size-200)}.mg-pager__bar{align-items:center;display:flex;flex-direction:column;gap:var(--mg-spacing-100)}@media (width >= 900px){.mg-pager__bar{flex-direction:row;justify-content:space-between}}.mg-pager__range{color:rgb(var(--mg-color-neutral-500));font-size:var(--mg-font-size-200);margin:0;white-space:nowrap}.mg-pager__jump{align-items:center;display:inline-flex;gap:var(--mg-spacing-50);margin:0}.mg-pager__jump-label{color:rgb(var(--mg-color-neutral-500));font-size:var(--mg-font-size-200);white-space:nowrap}.mg-pager__jump-input{background:rgb(var(--mg-color-neutral-50));border:1px solid rgb(var(--mg-color-neutral-600)/.22);border-radius:var(--mg-radius-form-input);color:rgb(var(--mg-color-text));font-size:var(--mg-font-size-200);min-height:2.75rem;padding:var(--mg-spacing-25) var(--mg-spacing-50);text-align:center;width:4em}.mg-pager__jump-input:focus-visible{background:rgb(var(--mg-color-neutral-0));border-color:rgb(var(--mg-color-interactive));box-shadow:0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-color-neutral-0));outline:var(--mg-focus-ring-width) solid rgb(var(--mg-color-focus-ring));outline-offset:var(--mg-focus-ring-offset)}.mg-pager__jump-btn{align-items:center;background:rgb(var(--mg-color-interactive));border:1px solid rgb(var(--mg-color-interactive));border-radius:var(--mg-radius-button);color:rgb(var(--mg-color-neutral-0));cursor:pointer;display:inline-flex;font-size:var(--mg-font-size-200);font-weight:500;justify-content:center;min-height:2.75rem;padding:var(--mg-spacing-25) var(--mg-spacing-75)}@media (prefers-reduced-motion:no-preference){.mg-pager__jump-btn{transition:background-color var(--mg-motion-duration-fast) var(--mg-motion-easing-standard),border-color var(--mg-motion-duration-fast) var(--mg-motion-easing-standard),scale var(--mg-motion-duration-fast) var(--mg-motion-easing-standard)}}.mg-pager__jump-btn:hover:not(:disabled){background:rgb(var(--mg-color-interactive-active));border-color:rgb(var(--mg-color-interactive-active))}.mg-pager__jump-btn:focus-visible{box-shadow:0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-color-neutral-0));outline:var(--mg-focus-ring-width) solid rgb(var(--mg-color-focus-ring));outline-offset:var(--mg-focus-ring-offset)}.mg-pager__jump-btn:active:not(:disabled){scale:.96}.mg-pager__jump-btn:disabled{cursor:not-allowed;opacity:.5}.mg-pager__notice{color:rgb(var(--mg-color-neutral-500));font-size:var(--mg-font-size-200);padding:var(--mg-spacing-100) 0;text-align:center}.mg-pager__notice-action{background:none;border:none;color:rgb(var(--mg-color-interactive));cursor:pointer;display:inline;font:inherit;padding:0;text-decoration:underline}.mg-pager__notice-action:hover{color:rgb(var(--mg-color-interactive-active))}.mg-pager__notice-action:focus-visible{box-shadow:0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-color-neutral-0));outline:var(--mg-focus-ring-width) solid rgb(var(--mg-color-focus-ring));outline-offset:var(--mg-focus-ring-offset)}[dir=rtl] .mg-pager__link--next .mg-pager__icon,[dir=rtl] .mg-pager__link--prev .mg-pager__icon{transform:scaleX(-1)}
|
|
922
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/Pager/Pager.mdx
|
|
923
|
+
*/.mg-pager{margin-top:var(--mg-spacing-200);padding-top:var(--mg-spacing-150)}.mg-pager__list{align-items:center;display:flex;flex-wrap:wrap;gap:var(--mg-spacing-50);justify-content:center;--mg-list-item-indent-rtl:0;list-style:none;list-style-type:""}.mg-pager__item,.mg-pager__list{margin:0;padding:0}.mg-pager__item--ellipsis{align-items:center;display:flex;padding:0 var(--mg-spacing-25)}.mg-pager__link{align-items:center;background:transparent;border:0;border-radius:50%;color:rgb(var(--mg-color-text));cursor:pointer;display:inline-flex;font-size:var(--mg-font-size-200);font-weight:600;justify-content:center;min-height:2.75rem;min-width:2.75rem;padding:0}@media (prefers-reduced-motion:no-preference){.mg-pager__link{transition:background-color var(--mg-motion-duration-fast) var(--mg-motion-easing-standard),color var(--mg-motion-duration-fast) var(--mg-motion-easing-standard),scale var(--mg-motion-duration-fast) var(--mg-motion-easing-standard)}}.mg-pager__link:hover:not(:disabled,.mg-pager__link--disabled){background:rgb(var(--mg-color-interactive)/.08);color:rgb(var(--mg-color-interactive-active));text-decoration:none}.mg-pager__link:focus-visible{box-shadow:0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-color-neutral-0));outline:var(--mg-focus-ring-width) solid rgb(var(--mg-color-focus-ring));outline-offset:var(--mg-focus-ring-offset)}.mg-pager__link:active:not(:disabled,.mg-pager__link--disabled,.mg-pager__link--current){scale:.96}.mg-pager__link--current{cursor:default}.mg-pager__link--current,.mg-pager__link--current:hover{background:rgb(var(--mg-color-interactive)/.12);color:rgb(var(--mg-color-text))}.mg-pager__link--disabled,.mg-pager__link:disabled{background:rgb(var(--mg-color-neutral-100)/.7);color:rgb(var(--mg-color-neutral-500));cursor:not-allowed}.mg-pager__link--next,.mg-pager__link--prev{background:rgb(var(--mg-color-interactive)/.06)}.mg-pager__icon{flex-shrink:0}.mg-pager__text{border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.mg-pager__ellipsis{color:rgb(var(--mg-color-neutral-500));font-size:var(--mg-font-size-200)}.mg-pager__bar{align-items:center;display:flex;flex-direction:column;gap:var(--mg-spacing-100)}@media (width >= 900px){.mg-pager__bar{flex-direction:row;justify-content:space-between}}.mg-pager__range{color:rgb(var(--mg-color-neutral-500));font-size:var(--mg-font-size-200);margin:0;white-space:nowrap}.mg-pager__jump{align-items:center;display:inline-flex;gap:var(--mg-spacing-50);margin:0}.mg-pager__jump-label{color:rgb(var(--mg-color-neutral-500));font-size:var(--mg-font-size-200);white-space:nowrap}.mg-pager__jump-input{background:rgb(var(--mg-color-neutral-50));border:1px solid rgb(var(--mg-color-neutral-600)/.22);border-radius:var(--mg-radius-form-input);color:rgb(var(--mg-color-text));font-size:var(--mg-font-size-200);min-height:2.75rem;padding:var(--mg-spacing-25) var(--mg-spacing-50);text-align:center;width:4em}.mg-pager__jump-input:focus-visible{background:rgb(var(--mg-color-neutral-0));border-color:rgb(var(--mg-color-interactive));box-shadow:0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-color-neutral-0));outline:var(--mg-focus-ring-width) solid rgb(var(--mg-color-focus-ring));outline-offset:var(--mg-focus-ring-offset)}.mg-pager__jump-btn{align-items:center;background:rgb(var(--mg-color-interactive));border:1px solid rgb(var(--mg-color-interactive));border-radius:var(--mg-radius-button);color:rgb(var(--mg-color-neutral-0));cursor:pointer;display:inline-flex;font-size:var(--mg-font-size-200);font-weight:500;justify-content:center;min-height:2.75rem;padding:var(--mg-spacing-25) var(--mg-spacing-75)}@media (prefers-reduced-motion:no-preference){.mg-pager__jump-btn{transition:background-color var(--mg-motion-duration-fast) var(--mg-motion-easing-standard),border-color var(--mg-motion-duration-fast) var(--mg-motion-easing-standard),scale var(--mg-motion-duration-fast) var(--mg-motion-easing-standard)}}.mg-pager__jump-btn:hover:not(:disabled){background:rgb(var(--mg-color-interactive-active));border-color:rgb(var(--mg-color-interactive-active))}.mg-pager__jump-btn:focus-visible{box-shadow:0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-color-neutral-0));outline:var(--mg-focus-ring-width) solid rgb(var(--mg-color-focus-ring));outline-offset:var(--mg-focus-ring-offset)}.mg-pager__jump-btn:active:not(:disabled){scale:.96}.mg-pager__jump-btn:disabled{cursor:not-allowed;opacity:.5}.mg-pager__notice{color:rgb(var(--mg-color-neutral-500));font-size:var(--mg-font-size-200);padding:var(--mg-spacing-100) 0;text-align:center}.mg-pager__notice-action{background:none;border:none;color:rgb(var(--mg-color-interactive));cursor:pointer;display:inline;font:inherit;padding:0;text-decoration:underline}.mg-pager__notice-action:hover{color:rgb(var(--mg-color-interactive-active))}.mg-pager__notice-action:focus-visible{box-shadow:0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-color-neutral-0));outline:var(--mg-focus-ring-width) solid rgb(var(--mg-color-focus-ring));outline-offset:var(--mg-focus-ring-offset)}[dir=rtl] .mg-pager__link--next .mg-pager__icon,[dir=rtl] .mg-pager__link--prev .mg-pager__icon{transform:scaleX(-1)}
|
|
926
924
|
|
|
927
925
|
/**
|
|
928
926
|
* Gallery
|
|
@@ -930,26 +928,25 @@
|
|
|
930
928
|
* Thumbnail grid gallery and full-screen lightbox image viewer with keyboard navigation.
|
|
931
929
|
*
|
|
932
930
|
* Full documentation:
|
|
933
|
-
* https://github.com/
|
|
931
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/Gallery/Gallery.mdx
|
|
934
932
|
*/
|
|
935
933
|
/* Photo Gallery Component */.mg-gallery{display:grid;gap:var(--mg-spacing-200);grid-template-areas:"main" "description" "thumbnails";grid-template-columns:1fr;position:relative;width:100%
|
|
936
934
|
/* medium design */}@media (width >= 48em){.mg-gallery{grid-template-areas:"thumbnails main" "thumbnails description";grid-template-columns:200px 1fr;grid-template-rows:auto auto}}.mg-gallery--thumbnails-bottom{
|
|
937
|
-
/* medium design */}@media (width >= 48em){.mg-gallery--thumbnails-bottom{grid-template-areas:"main" "description" "thumbnails";grid-template-columns:1fr;grid-template-rows:auto auto auto}}.mg-gallery__main{background-color:rgb(var(--mg-color-white));grid-area:main;overflow:hidden;position:relative}.mg-gallery:focus{outline:none}.mg-gallery:focus-visible{box-shadow:0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-color-neutral-0));outline:var(--mg-focus-ring-width) solid rgb(var(--mg-color-focus-ring));outline-offset:var(--mg-focus-ring-offset)}.mg-gallery__image-wrapper{align-items:center;aspect-ratio:16/9;background-color:rgb(var(--mg-color-neutral-50));display:flex;justify-content:center;position:relative;width:100%}.mg-gallery__image{display:block;max-height:100%;max-width:100%;object-fit:contain;object-position:center}.mg-gallery__embed,.mg-gallery__video{height:100%;width:100%}.mg-gallery__embed{border:none}.mg-gallery__html{align-items:center;display:flex;flex-direction:column;height:100%;justify-content:center;overflow:auto;padding:var(--mg-spacing-200);text-align:center;width:100%}.mg-gallery__loading{left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);z-index:3}.mg-
|
|
935
|
+
/* medium design */}@media (width >= 48em){.mg-gallery--thumbnails-bottom{grid-template-areas:"main" "description" "thumbnails";grid-template-columns:1fr;grid-template-rows:auto auto auto}}.mg-gallery__main{background-color:rgb(var(--mg-color-white));grid-area:main;overflow:hidden;position:relative}.mg-gallery:focus{outline:none}.mg-gallery:focus-visible{box-shadow:0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-color-neutral-0));outline:var(--mg-focus-ring-width) solid rgb(var(--mg-color-focus-ring));outline-offset:var(--mg-focus-ring-offset)}.mg-gallery__image-wrapper{align-items:center;aspect-ratio:16/9;background-color:rgb(var(--mg-color-neutral-50));display:flex;justify-content:center;position:relative;width:100%}.mg-gallery__image{display:block;max-height:100%;max-width:100%;object-fit:contain;object-position:center}.mg-gallery__embed,.mg-gallery__video{height:100%;width:100%}.mg-gallery__embed{border:none}.mg-gallery__html{align-items:center;display:flex;flex-direction:column;height:100%;justify-content:center;overflow:auto;padding:var(--mg-spacing-200);text-align:center;width:100%}.mg-gallery__loading{color:rgb(var(--mg-color-interactive));font-size:var(--mg-spacing-300);left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);z-index:3}@media (prefers-reduced-motion:reduce){.mg-gallery__loading{background:rgb(var(--mg-color-neutral-0));box-sizing:border-box;color:rgb(var(--mg-color-text));font-size:var(--mg-font-size-300);max-width:calc(100% - (2.75rem + var(--mg-spacing-100) + var(--mg-spacing-50))*2);padding:var(--mg-spacing-75);pointer-events:none;width:max-content}}.mg-gallery__description{grid-area:description;padding:var(--mg-spacing-150) 0
|
|
938
936
|
/* medium design */}@media (width >= 48em){.mg-gallery__description{padding:var(--mg-spacing-150)}}.mg-gallery__title{color:rgb(var(--mg-color-text));font-family:var(--mg-font-family-ui);font-size:var(--mg-font-size-400);font-weight:700;margin-bottom:var(--mg-spacing-50)}.mg-gallery__caption{color:rgb(var(--mg-color-neutral-800));font-size:var(--mg-font-size-300);line-height:1.5;margin:0}.mg-gallery__thumbnails{display:flex;flex-direction:row;gap:var(--mg-spacing-100);grid-area:thumbnails;overflow-x:auto;overflow-y:hidden;padding:var(--mg-spacing-100) 0;-webkit-overflow-scrolling:touch
|
|
939
|
-
/* medium design */}@media (width >= 48em){.mg-gallery__thumbnails{flex-direction:column;max-height:600px;overflow-x:hidden;overflow-y:auto;padding-top:0}}.mg-gallery--thumbnails-bottom .mg-gallery__thumbnails{flex-direction:row;overflow-x:auto;overflow-y:hidden}.mg-gallery__thumbnails{scrollbar-color:rgb(var(--mg-color-neutral-500)) rgb(var(--mg-color-neutral-100));scrollbar-width:thin}.mg-gallery__thumbnails::-webkit-scrollbar{height:var(--mg-spacing-50);width:var(--mg-spacing-50)}.mg-gallery__thumbnails::-webkit-scrollbar-track{background:rgb(var(--mg-color-neutral-100))}.mg-gallery__thumbnails::-webkit-scrollbar-thumb{background:rgb(var(--mg-color-neutral-500))}.mg-gallery__thumbnails::-webkit-scrollbar-thumb:hover{background:rgb(var(--mg-color-neutral-600))}.mg-gallery__thumbnail{background:rgb(var(--mg-color-neutral-100));border:none;border-left:4px solid transparent;cursor:pointer;flex-shrink:0;height:var(--mg-spacing-400);overflow:hidden;padding:0;position:relative;-webkit-transition:border-color
|
|
940
|
-
/* medium design */}@media (width >= 48em){.mg-gallery__thumbnail{aspect-ratio:16/9;height:auto;width:100%}}.mg-gallery--thumbnails-bottom .mg-gallery__thumbnail{border-bottom:4px solid transparent;border-left:none;height:var(--mg-spacing-400);width:var(--mg-spacing-400)}.mg-gallery__thumbnail img{display:block;height:100%;object-fit:cover;object-position:center;width:100%}.mg-gallery__thumbnail:hover{border-left-color:rgb(var(--mg-color-neutral-400))}.mg-gallery--thumbnails-bottom .mg-gallery__thumbnail:hover{border-bottom-color:rgb(var(--mg-color-neutral-400));border-left-color:transparent}.mg-gallery__thumbnail:focus{outline:none}.mg-gallery__thumbnail:focus-visible{box-shadow:0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-color-neutral-0));outline:var(--mg-focus-ring-width) solid rgb(var(--mg-color-focus-ring));outline-offset:var(--mg-focus-ring-offset)}.mg-gallery__thumbnail--active{border-left-color:rgb(var(--mg-color-interactive))}.mg-gallery__thumbnail--active:after{background:rgb(var(--mg-color-white));bottom:0;content:"";left:0;opacity:.5;pointer-events:none;position:absolute;top:0;width:1px}.mg-gallery--thumbnails-bottom .mg-gallery__thumbnail--active{border-bottom-color:rgb(var(--mg-color-interactive));border-left-color:transparent}.mg-gallery--thumbnails-bottom .mg-gallery__thumbnail--active:after{bottom:0;height:2px;left:0;right:0;top:auto;width:auto}.mg-gallery__thumbnail--html{background:rgb(var(--mg-color-neutral-200))}.mg-gallery__thumbnail-placeholder{color:rgb(var(--mg-color-neutral-600));font-size:var(--mg-font-size-400)}.mg-gallery__thumbnail-html-preview,.mg-gallery__thumbnail-placeholder{align-items:center;display:flex;height:100%;justify-content:center;width:100%}.mg-gallery__thumbnail-html-preview{background:rgb(var(--mg-color-neutral-50));left:0;overflow:hidden;position:absolute;top:0}.mg-gallery__thumbnail-html-content{align-items:center;display:flex;flex-direction:column;height:450px;justify-content:center;pointer-events:none;text-align:center;transform:scale(.12);transform-origin:center center;user-select:none;width:800px}.mg-gallery__thumbnail-html-content *{pointer-events:none}.mg-gallery__thumbnail-indicator{background:rgba(0,0,0,.6);font-size:var(--mg-font-size-100);height:var(--mg-spacing-200);left:50%;padding-left:2px;pointer-events:none;transform:translate(-50%,-50%);width:var(--mg-spacing-200)}.mg-gallery__arrow,.mg-gallery__thumbnail-indicator{align-items:center;color:rgb(var(--mg-color-white));display:flex;justify-content:center;position:absolute;top:50%}.mg-gallery__arrow{background:rgb(var(--mg-color-neutral-700));border:none;border-radius:50%;cursor:pointer;font-size:var(--mg-font-size-400);height:2.75rem;transform:translateY(-50%);-webkit-transition:background-color
|
|
941
|
-
/* small design */}@media (width <= 47.9375em){.mg-gallery__arrow{font-size:var(--mg-font-size-300)}.mg-gallery__arrow--prev{left:var(--mg-spacing-50)}.mg-gallery__arrow--next{right:var(--mg-spacing-50)}}.mg-gallery__arrow-controls{bottom:var(--mg-spacing-100);display:flex;gap:var(--mg-spacing-100);position:absolute;right:var(--mg-spacing-100);z-index:2}.mg-gallery__arrow-button{align-items:center;background:rgb(var(--mg-color-neutral-700));border:none;border-radius:50%;color:rgb(var(--mg-color-white));cursor:pointer;display:flex;font-size:var(--mg-font-size-400);height:2.75rem;justify-content:center;-webkit-transition:background-color
|
|
937
|
+
/* medium design */}@media (width >= 48em){.mg-gallery__thumbnails{flex-direction:column;max-height:600px;overflow-x:hidden;overflow-y:auto;padding-top:0}}.mg-gallery--thumbnails-bottom .mg-gallery__thumbnails{flex-direction:row;overflow-x:auto;overflow-y:hidden}.mg-gallery__thumbnails{scrollbar-color:rgb(var(--mg-color-neutral-500)) rgb(var(--mg-color-neutral-100));scrollbar-width:thin}.mg-gallery__thumbnails::-webkit-scrollbar{height:var(--mg-spacing-50);width:var(--mg-spacing-50)}.mg-gallery__thumbnails::-webkit-scrollbar-track{background:rgb(var(--mg-color-neutral-100))}.mg-gallery__thumbnails::-webkit-scrollbar-thumb{background:rgb(var(--mg-color-neutral-500))}.mg-gallery__thumbnails::-webkit-scrollbar-thumb:hover{background:rgb(var(--mg-color-neutral-600))}.mg-gallery__thumbnail{background:rgb(var(--mg-color-neutral-100));border:none;border-left:4px solid transparent;cursor:pointer;flex-shrink:0;height:var(--mg-spacing-400);overflow:hidden;padding:0;position:relative;-webkit-transition:border-color var(--mg-motion-duration-fast) var(--mg-motion-easing-standard);-moz-transition:border-color var(--mg-motion-duration-fast) var(--mg-motion-easing-standard);-ms-transition:border-color var(--mg-motion-duration-fast) var(--mg-motion-easing-standard);-o-transition:border-color var(--mg-motion-duration-fast) var(--mg-motion-easing-standard);transition:border-color var(--mg-motion-duration-fast) var(--mg-motion-easing-standard);width:var(--mg-spacing-400)
|
|
938
|
+
/* medium design */}@media (width >= 48em){.mg-gallery__thumbnail{aspect-ratio:16/9;height:auto;width:100%}}.mg-gallery--thumbnails-bottom .mg-gallery__thumbnail{border-bottom:4px solid transparent;border-left:none;height:var(--mg-spacing-400);width:var(--mg-spacing-400)}.mg-gallery__thumbnail img{display:block;height:100%;object-fit:cover;object-position:center;width:100%}.mg-gallery__thumbnail:hover{border-left-color:rgb(var(--mg-color-neutral-400))}.mg-gallery--thumbnails-bottom .mg-gallery__thumbnail:hover{border-bottom-color:rgb(var(--mg-color-neutral-400));border-left-color:transparent}.mg-gallery__thumbnail:focus{outline:none}.mg-gallery__thumbnail:focus-visible{box-shadow:0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-color-neutral-0));outline:var(--mg-focus-ring-width) solid rgb(var(--mg-color-focus-ring));outline-offset:var(--mg-focus-ring-offset)}.mg-gallery__thumbnail--active{border-left-color:rgb(var(--mg-color-interactive))}.mg-gallery__thumbnail--active:after{background:rgb(var(--mg-color-white));bottom:0;content:"";left:0;opacity:.5;pointer-events:none;position:absolute;top:0;width:1px}.mg-gallery--thumbnails-bottom .mg-gallery__thumbnail--active{border-bottom-color:rgb(var(--mg-color-interactive));border-left-color:transparent}.mg-gallery--thumbnails-bottom .mg-gallery__thumbnail--active:after{bottom:0;height:2px;left:0;right:0;top:auto;width:auto}.mg-gallery__thumbnail--html{background:rgb(var(--mg-color-neutral-200))}.mg-gallery__thumbnail-placeholder{color:rgb(var(--mg-color-neutral-600));font-size:var(--mg-font-size-400)}.mg-gallery__thumbnail-html-preview,.mg-gallery__thumbnail-placeholder{align-items:center;display:flex;height:100%;justify-content:center;width:100%}.mg-gallery__thumbnail-html-preview{background:rgb(var(--mg-color-neutral-50));left:0;overflow:hidden;position:absolute;top:0}.mg-gallery__thumbnail-html-content{align-items:center;display:flex;flex-direction:column;height:450px;justify-content:center;pointer-events:none;text-align:center;transform:scale(.12);transform-origin:center center;user-select:none;width:800px}.mg-gallery__thumbnail-html-content *{pointer-events:none}.mg-gallery__thumbnail-indicator{background:rgba(0,0,0,.6);font-size:var(--mg-font-size-100);height:var(--mg-spacing-200);left:50%;padding-left:2px;pointer-events:none;transform:translate(-50%,-50%);width:var(--mg-spacing-200)}.mg-gallery__arrow,.mg-gallery__thumbnail-indicator{align-items:center;color:rgb(var(--mg-color-white));display:flex;justify-content:center;position:absolute;top:50%}.mg-gallery__arrow{background:rgb(var(--mg-color-neutral-700));border:none;border-radius:50%;cursor:pointer;font-size:var(--mg-font-size-400);height:2.75rem;transform:translateY(-50%);-webkit-transition:background-color var(--mg-motion-duration-fast) var(--mg-motion-easing-standard),opacity var(--mg-motion-duration-fast) var(--mg-motion-easing-standard);-moz-transition:background-color var(--mg-motion-duration-fast) var(--mg-motion-easing-standard),opacity var(--mg-motion-duration-fast) var(--mg-motion-easing-standard);-ms-transition:background-color var(--mg-motion-duration-fast) var(--mg-motion-easing-standard),opacity var(--mg-motion-duration-fast) var(--mg-motion-easing-standard);-o-transition:background-color var(--mg-motion-duration-fast) var(--mg-motion-easing-standard),opacity var(--mg-motion-duration-fast) var(--mg-motion-easing-standard);transition:background-color var(--mg-motion-duration-fast) var(--mg-motion-easing-standard),opacity var(--mg-motion-duration-fast) var(--mg-motion-easing-standard);width:2.75rem;z-index:2}.mg-gallery__arrow:hover{background:rgb(var(--mg-color-neutral-600))}.mg-gallery__arrow:focus{outline:none}.mg-gallery__arrow:focus-visible{box-shadow:0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-color-neutral-0));outline:var(--mg-focus-ring-width) solid rgb(var(--mg-color-focus-ring));outline-offset:var(--mg-focus-ring-offset)}.mg-gallery__arrow:disabled{background:rgb(var(--mg-color-neutral-300));cursor:not-allowed;opacity:.5}.mg-gallery__arrow--prev{left:var(--mg-spacing-100)}.mg-gallery__arrow--next{right:var(--mg-spacing-100)}.mg-gallery__arrow{
|
|
939
|
+
/* small design */}@media (width <= 47.9375em){.mg-gallery__arrow{font-size:var(--mg-font-size-300)}.mg-gallery__arrow--prev{left:var(--mg-spacing-50)}.mg-gallery__arrow--next{right:var(--mg-spacing-50)}}.mg-gallery__arrow-controls{bottom:var(--mg-spacing-100);display:flex;gap:var(--mg-spacing-100);position:absolute;right:var(--mg-spacing-100);z-index:2}.mg-gallery__arrow-button{align-items:center;background:rgb(var(--mg-color-neutral-700));border:none;border-radius:50%;color:rgb(var(--mg-color-white));cursor:pointer;display:flex;font-size:var(--mg-font-size-400);height:2.75rem;justify-content:center;-webkit-transition:background-color var(--mg-motion-duration-fast) var(--mg-motion-easing-standard),opacity var(--mg-motion-duration-fast) var(--mg-motion-easing-standard);-moz-transition:background-color var(--mg-motion-duration-fast) var(--mg-motion-easing-standard),opacity var(--mg-motion-duration-fast) var(--mg-motion-easing-standard);-ms-transition:background-color var(--mg-motion-duration-fast) var(--mg-motion-easing-standard),opacity var(--mg-motion-duration-fast) var(--mg-motion-easing-standard);-o-transition:background-color var(--mg-motion-duration-fast) var(--mg-motion-easing-standard),opacity var(--mg-motion-duration-fast) var(--mg-motion-easing-standard);transition:background-color var(--mg-motion-duration-fast) var(--mg-motion-easing-standard),opacity var(--mg-motion-duration-fast) var(--mg-motion-easing-standard);width:2.75rem}.mg-gallery__arrow-button:hover{background:rgb(var(--mg-color-neutral-600))}.mg-gallery__arrow-button:focus{outline:none}.mg-gallery__arrow-button:focus-visible{box-shadow:0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-color-neutral-0));outline:var(--mg-focus-ring-width) solid rgb(var(--mg-color-focus-ring));outline-offset:var(--mg-focus-ring-offset)}.mg-gallery__arrow-button:disabled{background:rgb(var(--mg-color-neutral-300));cursor:not-allowed;opacity:.5}[dir=rtl] .mg-gallery__thumbnails{
|
|
942
940
|
/* medium design */}@media (width >= 48em){[dir=rtl] .mg-gallery__thumbnails{order:1}}[dir=rtl] .mg-gallery__thumbnail{border-left:none;border-right:4px solid transparent}[dir=rtl] .mg-gallery__thumbnail:hover{border-right-color:rgb(var(--mg-color-neutral-400))}[dir=rtl] .mg-gallery__thumbnail--active{border-right-color:rgb(var(--mg-color-interactive))}[dir=rtl] .mg-gallery__thumbnail--active:after{left:auto;right:0}[dir=rtl] .mg-gallery__arrow--prev{left:auto;right:var(--mg-spacing-100)
|
|
943
941
|
/* small design */}@media (width <= 47.9375em){[dir=rtl] .mg-gallery__arrow--prev{right:var(--mg-spacing-50)}}[dir=rtl] .mg-gallery__arrow--next{left:var(--mg-spacing-100);right:auto
|
|
944
|
-
/* small design */}@media (width <= 47.9375em){[dir=rtl] .mg-gallery__arrow--next{left:var(--mg-spacing-50)}}[dir=rtl] .mg-gallery__arrow-controls{left:var(--mg-spacing-100);right:auto}
|
|
945
|
-
|
|
942
|
+
/* small design */}@media (width <= 47.9375em){[dir=rtl] .mg-gallery__arrow--next{left:var(--mg-spacing-50)}}[dir=rtl] .mg-gallery__arrow-controls{left:var(--mg-spacing-100);right:auto}@media (prefers-reduced-motion:reduce){.mg-gallery__arrow,.mg-gallery__arrow-button,.mg-gallery__thumbnail{transition:none}}
|
|
946
943
|
/**
|
|
947
944
|
* Highlight Box
|
|
948
945
|
*
|
|
949
946
|
* Callout container for highlighted summary points, key takeaways, and secondary editorial callouts.
|
|
950
947
|
*
|
|
951
948
|
* Full documentation:
|
|
952
|
-
* https://github.com/
|
|
949
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/HighlightBox/HighlightBox.mdx
|
|
953
950
|
*/.mg-highlight-box{border:1px solid rgba(0,0,0,.3);box-shadow:inset 0 -8px 0 0 rgba(0,0,0,.3);display:block;padding-block:.625rem;padding-inline:.9375rem;padding-bottom:1.25rem;width:100%}.mg-highlight-box iframe{border:0;display:block;max-width:100%}.mg-highlight-box--primary{background:var(--button-color-background,rgb(var(--mg-color-blue-900)))}.mg-highlight-box--secondary{background:var(--tag-color-background-purple,var(--sendai-purple))}.mg-highlight-box.mg-highlight-box--primary,.mg-highlight-box.mg-highlight-box--secondary{border:none;box-shadow:inset 0 -8px 0 0 hsla(0,0%,100%,.5);color:rgb(var(--mg-color-white))}.mg-highlight-box.mg-highlight-box--primary *,.mg-highlight-box.mg-highlight-box--secondary *{color:inherit}.mg-highlight-box--centered{margin-inline:auto;width:80%}.align-left.custom-media,.align-right.custom-media,.mg-highlight-box--float-end,.mg-highlight-box--float-start,figure.align-left,figure.align-right{float:none;margin-inline:0;width:100%}
|
|
954
951
|
|
|
955
952
|
/* medium design */@media (width >= 48em){.align-left.custom-media,.mg-highlight-box--float-start,figure.align-left{float:inline-start;margin-inline-end:1.25rem;width:30%}.align-right.custom-media,.mg-highlight-box--float-end,figure.align-right{float:inline-end;margin-inline-start:1.25rem;width:30%}}blockquote:has(.mg-highlight-box){border-left:none;margin:unset;padding:unset}
|
|
@@ -960,7 +957,7 @@
|
|
|
960
957
|
* Editorial pull quote banner with prominent quotation marks, author attribution, and source citation.
|
|
961
958
|
*
|
|
962
959
|
* Full documentation:
|
|
963
|
-
* https://github.com/
|
|
960
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/QuoteHighlight/QuoteHighlight.mdx
|
|
964
961
|
*/.mg-quote-highlight{border-radius:var(--mg-spacing-50);box-shadow:0 4px 12px rgba(0,0,0,.08);display:flex;flex-direction:column;overflow:hidden}.mg-quote-highlight :link{text-decoration:underline}.mg-quote-highlight :hover{text-decoration:none}.mg-quote-highlight--full,.mg-quote-highlight--left{margin-bottom:var(--mg-spacing-400);width:100%}.mg-quote-highlight--left{float:left;margin-right:var(--mg-spacing-400)
|
|
965
962
|
/* medium design */}@media (width >= 48em){.mg-quote-highlight--left{max-width:400px;width:40%}}[dir=rtl] .mg-quote-highlight--left{float:right;margin-left:var(--mg-spacing-400);margin-right:0}.mg-quote-highlight--right{float:right;margin-bottom:var(--mg-spacing-400);margin-left:var(--mg-spacing-400);width:100%
|
|
966
963
|
/* medium design */}@media (width >= 48em){.mg-quote-highlight--right{max-width:400px;width:40%}}[dir=rtl] .mg-quote-highlight--right{float:left;margin-left:0;margin-right:var(--mg-spacing-400)}.mg-quote-highlight--line{flex-direction:column}.mg-quote-highlight--line.mg-quote-highlight--has-image{
|
|
@@ -976,7 +973,7 @@
|
|
|
976
973
|
* Interactive filter and selection chip buttons with selected/unselected states.
|
|
977
974
|
*
|
|
978
975
|
* Full documentation:
|
|
979
|
-
* https://github.com/
|
|
976
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/Buttons/Chips/Chips.mdx
|
|
980
977
|
*/.mg-chip{align-items:center;background:rgb(var(--mg-color-neutral-50));border:0;border-radius:999px;box-shadow:var(--mg-shadow-raised);box-sizing:border-box;color:rgb(var(--mg-color-text));cursor:pointer;display:inline-flex;font-family:var(--mg-font-family-text);font-size:var(--mg-font-size-250);font-weight:500;justify-content:center;line-height:1.25;min-height:2.5rem;padding:var(--mg-spacing-50) var(--mg-spacing-150);text-align:start;text-decoration:none}@media (prefers-reduced-motion:no-preference){.mg-chip{transition:background-color var(--mg-motion-duration-fast) var(--mg-motion-easing-standard),box-shadow var(--mg-motion-duration-fast) var(--mg-motion-easing-standard),color var(--mg-motion-duration-fast) var(--mg-motion-easing-standard),scale var(--mg-motion-duration-fast) var(--mg-motion-easing-standard)}}.mg-chip:hover{background-color:rgb(var(--mg-color-neutral-300));color:rgb(var(--mg-color-text));text-decoration:none}.mg-chip:active{scale:.96}.mg-chip:focus-visible{border-radius:999px;box-shadow:0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-color-neutral-0));outline:var(--mg-focus-ring-width) solid rgb(var(--mg-color-focus-ring));outline-offset:var(--mg-focus-ring-offset)}@media (forced-colors:active){.mg-chip{border:1px solid ButtonText}.mg-chip:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.mg-chip.mg-chip__cross:after{content:"×";display:inline-flex;flex:0 0 1.25rem;font-size:1.125rem;font-weight:400;height:1.25rem;margin-inline-end:calc(var(--mg-spacing-50)*-1);margin-inline-start:var(--mg-spacing-50)}
|
|
981
978
|
|
|
982
979
|
/**
|
|
@@ -985,7 +982,7 @@
|
|
|
985
982
|
* Primary, secondary, and tertiary call-to-action button styles with size variants and motion effects.
|
|
986
983
|
*
|
|
987
984
|
* Full documentation:
|
|
988
|
-
* https://github.com/
|
|
985
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/Buttons/CtaButton/CtaButton.mdx
|
|
989
986
|
*/.mg-button,.mg-chip.mg-chip__cross:after{align-items:center;justify-content:center;line-height:1}.mg-button{background:transparent;background-clip:padding-box;border:var(--mg-border-width-button) solid var(--mg-border-color-button);border-radius:var(--mg-radius-button);color:rgb(var(--mg-color-button));cursor:pointer;display:flex;font-family:var(--mg-font-family-text);font-size:var(--mg-font-size-button);font-weight:600;gap:var(--mg-spacing-50);padding:var(--mg-padding-button)}@media (prefers-reduced-motion:no-preference){.mg-button{transition:background-color .2s ease,border-color .2s ease,color .2s ease,scale var(--mg-motion-duration-fast) var(--mg-motion-easing-standard)}}.mg-button:active:not(.disabled){scale:.96}.mg-button:focus-visible{box-shadow:0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-color-neutral-0));outline:var(--mg-focus-ring-width) solid rgb(var(--mg-color-focus-ring));outline-offset:var(--mg-focus-ring-offset)}.mg-button{
|
|
990
987
|
/* medium design */}@media (width >= 48em){.mg-button{display:inline-flex}}.mg-buttons{align-items:center;display:flex;flex-wrap:wrap;gap:var(--mg-spacing-75)}.mg-button__icon{display:inline-block;flex-shrink:0;height:1.15em;pointer-events:none;shape-rendering:geometricPrecision;vertical-align:middle;width:1.15em}.mg-button--icon,.mg-icon-button{align-items:center;aspect-ratio:1;background-clip:padding-box;block-size:2.25rem;border-radius:var(--mg-radius-button);display:inline-flex;inline-size:2.25rem;justify-content:center;min-block-size:2.25rem;min-inline-size:2.25rem;padding:0}.mg-button--icon--round,.mg-icon-button--round{border-radius:50%}.mg-button--icon--small,.mg-icon-button--small{block-size:1.75rem;inline-size:1.75rem;min-block-size:1.75rem;min-inline-size:1.75rem;padding:0}.mg-button--icon svg,.mg-icon-button svg{display:block;flex-shrink:0;pointer-events:none;shape-rendering:geometricPrecision}.mg-button--icon .mg-icon,.mg-icon-button .mg-icon{font-size:1.125rem;line-height:1}.mg-button .mg-icon:not([class*=fa-]):before,.mg-icon-button .mg-icon:not([class*=fa-]):before{display:block}@media (max-width:899px){.mg-button--responsive-icon{aspect-ratio:1;block-size:2.25rem;inline-size:2.25rem;min-block-size:2.25rem;min-inline-size:2.25rem;padding:0}.mg-button--responsive-icon .mg-button__label{clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}}.mg-icon-button{background-color:transparent;border:0;cursor:pointer}.mg-icon-button:hover{background-color:rgb(var(--mg-color-interactive-active));color:rgb(var(--mg-color-button))}@media (forced-colors:active){.mg-icon-button:hover:not(:focus-visible){outline:1px solid ButtonText}}.mg-icon-button:focus-visible{box-shadow:0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-color-neutral-0));outline:var(--mg-focus-ring-width) solid rgb(var(--mg-color-focus-ring));outline-offset:var(--mg-focus-ring-offset)}.mg-icon-button:is(.mg-button-primary,.mg-button-secondary):not(.mg-button-outline){color:rgb(var(--mg-color-button))}.mg-button-primary:not(.mg-button-outline),.mg-button-secondary:not(.mg-button-outline),.mg-button.disabled{background-clip:border-box}.mg-button-primary:not(.mg-button-outline){border-color:var(--mg-border-color-button-primary)}.mg-button-secondary:not(.mg-button-outline){border-color:var(--mg-border-color-button-secondary)}.mg-button.disabled{border-color:transparent}.mg-button-primary{background-color:var(--mg-color-button-background)}.mg-button-primary:hover{background-color:var(--mg-color-button-background--hover);color:rgb(var(--mg-color-button))}.mg-button-secondary{background-color:rgb(var(--mg-color-button-secondary-background))}.mg-button-secondary:hover{background-color:rgb(var(--mg-color-button-secondary-background--hover));color:rgb(var(--mg-color-button))}.mg-button-outline{background-color:transparent}.mg-button-primary.mg-button-outline{border-color:rgb(var(--mg-color-button-outline-primary));color:rgb(var(--mg-color-button-outline-primary))}.mg-button-primary.mg-button-outline:hover{background-color:rgb(var(--mg-color-button-outline-primary--hover));color:rgb(var(--mg-color-button))}.mg-button-secondary.mg-button-outline{border-color:rgb(var(--mg-color-button-outline-secondary));color:rgb(var(--mg-color-button-outline-secondary))}.mg-button-secondary.mg-button-outline:hover{background-color:rgb(var(--mg-color-button-outline-secondary--hover));color:rgb(var(--mg-color-button))}.mg-button.disabled{background-color:rgb(var(--mg-color-neutral-500));color:rgb(var(--mg-color-neutral-0));pointer-events:none}.mg-button.mg-button-cta{background:transparent;border-color:transparent;color:rgb(var(--mg-color-text));flex:0 0 auto;justify-content:flex-start;max-inline-size:100%;min-height:2.75rem;overflow-wrap:anywhere;padding:var(--mg-spacing-50) 0;padding-inline-end:calc(1.375rem + var(--mg-spacing-50));position:relative;text-align:start;white-space:normal}.mg-button.mg-button-cta:active:not(.disabled){scale:1}.mg-button.mg-button-cta:after{align-items:center;background:rgb(var(--mg-color-interactive));border-radius:50%;color:rgb(var(--mg-color-neutral-0));content:"›";display:inline-flex;flex:0 0 1.375rem;font-family:var(--mg-font-family-text);font-size:1.125rem;font-weight:700;height:1.375rem;inline-size:1.375rem;inset-block-start:50%;inset-inline-end:0;justify-content:center;line-height:1;padding-block-end:.06em;padding-inline-start:.03em;position:absolute;translate:var(--mg-cta-arrow-shift,0) -50%}@media (prefers-reduced-motion:no-preference){.mg-button.mg-button-cta:after{transition:background-color var(--mg-motion-duration-fast) var(--mg-motion-easing-standard),translate var(--mg-motion-duration-fast) var(--mg-motion-easing-standard)}}.mg-button.mg-button-cta:hover{background:transparent;border-color:transparent;color:rgb(var(--mg-color-interactive-active));text-decoration:underline;text-underline-offset:.2em}.mg-button.mg-button-cta:hover:after{background:rgb(var(--mg-color-interactive-active))}@media (prefers-reduced-motion:no-preference){.mg-button.mg-button-cta:hover:after{--mg-cta-arrow-shift:0.1875rem}}.mg-button.mg-button-cta:active:after{scale:.96}[dir=rtl] .mg-button.mg-button-cta:after{content:"‹"}@media (prefers-reduced-motion:no-preference){[dir=rtl] .mg-button.mg-button-cta:hover:after{--mg-cta-arrow-shift:-0.1875rem}}
|
|
991
988
|
/**
|
|
@@ -994,8 +991,8 @@
|
|
|
994
991
|
* Social sharing action bar with platform icons (X/Twitter, LinkedIn, Facebook, Email, Copy Link).
|
|
995
992
|
*
|
|
996
993
|
* Full documentation:
|
|
997
|
-
* https://github.com/
|
|
998
|
-
*/.mg-share{display:flex;flex-direction:column;gap:var(--mg-spacing-100);max-inline-size:25rem;min-inline-size:0}.mg-share__header{color:rgb(var(--mg-color-text));font-family:var(--mg-font-family-text);font-size:var(--mg-font-size-300);font-weight:600;margin:0}.mg-share__buttons{align-items:center;display:flex;flex-wrap:wrap;gap:var(--mg-spacing-50)}.mg-share__button,.mg-share__copy-button{align-items:center;background-color:transparent;border:1px solid transparent;border-radius:var(--mg-radius-button);box-sizing:border-box;color:rgb(var(--mg-color-text));cursor:pointer;display:flex;justify-content:center;min-block-size:2.5rem;padding:var(--mg-spacing-100)}@media (prefers-reduced-motion:no-preference){.mg-share__button,.mg-share__copy-button{transition:background-color var(--mg-motion-duration-fast) var(--mg-motion-easing-standard),color var(--mg-motion-duration-fast) var(--mg-motion-easing-standard)}}.mg-share__button:hover,.mg-share__copy-button:hover{background-color:rgb(var(--mg-color-neutral-50));color:rgb(var(--mg-color-text))}.mg-share__button:focus-visible,.mg-share__copy-button:focus-visible{box-shadow:0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-color-neutral-0));outline:var(--mg-focus-ring-width) solid rgb(var(--mg-color-focus-ring));outline-offset:var(--mg-focus-ring-offset)}@media (forced-colors:active){.mg-share__button,.mg-share__copy-button{border:1px solid ButtonText}}.mg-share__button{block-size:2.5rem;flex:0 0 2.5rem;font-size:var(--mg-font-size-400);inline-size:2.5rem}.mg-share__copy-button{background-color:rgb(var(--mg-color-neutral-25));border-color:rgb(var(--mg-color-neutral-300)/.4);font-family:var(--mg-font-family-text);gap:var(--mg-spacing-100);max-inline-size:100%;text-align:start}.mg-share__copy-button:hover .mg-share__copy-text{text-decoration:underline;text-underline-offset:.15em}.mg-share__clip-icon,.mg-share__stack-icon{align-items:center;block-size:1.5rem;display:flex;flex:0 0 1.5rem;inline-size:1.5rem;justify-content:center}.mg-share__clip-icon img,.mg-share__stack-icon img{inline-size:1.125rem}.mg-share__copy-text{flex:1;font-size:var(--mg-font-size-250);line-height:1.5;min-inline-size:0;overflow-wrap:anywhere}
|
|
994
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/Buttons/ShareButtons/ShareButtons.mdx
|
|
995
|
+
*/.mg-share{display:flex;flex-direction:column;gap:var(--mg-spacing-100);max-inline-size:25rem;min-inline-size:0}.mg-share__header{color:rgb(var(--mg-color-text));font-family:var(--mg-font-family-text);font-size:var(--mg-font-size-300);font-weight:600;margin:0}.mg-share__buttons{align-items:center;display:flex;flex-wrap:wrap;gap:var(--mg-spacing-50)}.mg-share__button,.mg-share__copy-button{align-items:center;background-color:transparent;border:1px solid transparent;border-radius:var(--mg-radius-button);box-sizing:border-box;color:rgb(var(--mg-color-text));cursor:pointer;display:flex;justify-content:center;min-block-size:2.5rem;padding:var(--mg-spacing-100)}@media (prefers-reduced-motion:no-preference){.mg-share__button,.mg-share__copy-button{transition:background-color var(--mg-motion-duration-fast) var(--mg-motion-easing-standard),color var(--mg-motion-duration-fast) var(--mg-motion-easing-standard)}}.mg-share__button:hover,.mg-share__copy-button:hover{background-color:rgb(var(--mg-color-neutral-50));color:rgb(var(--mg-color-text))}.mg-share__button:focus-visible,.mg-share__copy-button:focus-visible{box-shadow:0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-color-neutral-0));outline:var(--mg-focus-ring-width) solid rgb(var(--mg-color-focus-ring));outline-offset:var(--mg-focus-ring-offset)}@media (forced-colors:active){.mg-share__button,.mg-share__copy-button{border:1px solid ButtonText}}.mg-share__button{block-size:2.5rem;flex:0 0 2.5rem;font-size:var(--mg-font-size-400);inline-size:2.5rem}.mg-share__copy-button{background-color:rgb(var(--mg-color-neutral-25));border-color:rgb(var(--mg-color-neutral-300)/.4);font-family:var(--mg-font-family-text);gap:var(--mg-spacing-100);max-inline-size:100%;text-align:start}.mg-share__copy-button:hover .mg-share__copy-text{text-decoration:underline;text-underline-offset:.15em}.mg-share__clip-icon,.mg-share__stack-icon{align-items:center;block-size:1.5rem;display:flex;flex:0 0 1.5rem;inline-size:1.5rem;justify-content:center}.mg-share__clip-icon img,.mg-share__stack-icon img{inline-size:1.125rem}.mg-share__copy-text{flex:1;font-size:var(--mg-font-size-250);line-height:1.5;min-inline-size:0;overflow-wrap:anywhere}.mg-share__dialog{background:rgb(var(--mg-color-white));border:0;border-block-start:.25rem solid rgb(var(--mg-color-interactive));border-radius:0;box-shadow:0 .5rem 2rem rgb(var(--mg-color-neutral-900)/.25);box-sizing:border-box;color:rgb(var(--mg-color-text));inline-size:min(100% - 2 * var(--mg-spacing-200),31.25rem);max-block-size:calc(100vh - var(--mg-spacing-200)*2);overflow:auto;padding:var(--mg-spacing-300)}.mg-share__dialog::backdrop{background:var(--mg-color-modal-scrim)}.mg-share__dialog-header{align-items:flex-start;display:flex;gap:var(--mg-spacing-150);justify-content:space-between}.mg-share__dialog-title{font-family:var(--mg-font-family-ui);font-size:var(--mg-font-size-500);line-height:1.2;margin:0}.mg-share__dialog-close{block-size:2.5rem;color:rgb(var(--mg-color-text));flex:none;inline-size:2.5rem;margin-inline-start:auto;min-block-size:2.5rem;min-inline-size:2.5rem}.mg-share__dialog-close:hover{background:rgb(var(--mg-color-neutral-50));color:rgb(var(--mg-color-text))}.mg-share__dialog-description{font-family:var(--mg-font-family-text);margin-block:var(--mg-spacing-150)}.mg-share__dialog-content{min-inline-size:0}.mg-share__dialog-image{block-size:auto;display:block;margin-inline:auto;max-block-size:13.75rem;max-inline-size:100%}.mg-share__dialog-url{overflow-wrap:anywhere}.mg-share__dialog-actions,.mg-share__dialog-actions-primary{display:flex;flex-wrap:wrap;gap:var(--mg-spacing-100)}.mg-share__dialog-actions{justify-content:space-between;margin-block-start:var(--mg-spacing-200)}.mg-share__visually-hidden{block-size:1px;clip-path:inset(50%);inline-size:1px;overflow:hidden;position:absolute;white-space:nowrap}
|
|
999
996
|
|
|
1000
997
|
/**
|
|
1001
998
|
* Copy button
|
|
@@ -1003,7 +1000,7 @@
|
|
|
1003
1000
|
* One-click copy button with a transient feedback tooltip and aria-live announcements.
|
|
1004
1001
|
*
|
|
1005
1002
|
* Full documentation:
|
|
1006
|
-
* https://github.com/
|
|
1003
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/Buttons/CopyButton/CopyButton.mdx
|
|
1007
1004
|
*/.mg-copy-button{position:relative}.mg-copy-button__feedback{background-color:rgb(var(--mg-color-neutral-900));border-radius:var(--mg-radius-button);bottom:calc(100% + var(--mg-spacing-100));box-shadow:0 2px 8px rgba(0,0,0,.2);color:rgb(var(--mg-color-white));font-family:var(--mg-font-family-ui);font-size:var(--mg-font-size-200);font-weight:500;left:50%;line-height:1.2;opacity:0;padding:var(--mg-spacing-50) var(--mg-spacing-100);pointer-events:none;position:absolute;transform:translateX(-50%) translateY(4px);transition:opacity var(--mg-motion-duration-fast) var(--mg-motion-easing-standard),transform var(--mg-motion-duration-fast) var(--mg-motion-easing-standard),visibility var(--mg-motion-duration-fast) var(--mg-motion-easing-standard);visibility:hidden;white-space:nowrap;z-index:10}@media (prefers-reduced-motion:reduce){.mg-copy-button__feedback{transition:none}}.mg-copy-button__feedback:after{border-color:rgb(var(--mg-color-neutral-900)) transparent transparent transparent;border-style:solid;border-width:4px;content:"";left:50%;position:absolute;top:100%;transform:translateX(-50%)}.mg-copy-button__feedback--error{background-color:rgb(var(--mg-color-red-900));inline-size:max-content;max-inline-size:16rem;white-space:normal}.mg-copy-button__feedback--error:after{border-top-color:rgb(var(--mg-color-red-900))}.mg-copy-button__feedback--visible{opacity:1;transform:translateX(-50%) translateY(0);visibility:visible}.mg-copy-button--copied{border-color:rgb(var(--mg-color-interactive))}
|
|
1008
1005
|
|
|
1009
1006
|
/**
|
|
@@ -1012,30 +1009,32 @@
|
|
|
1012
1009
|
* Responsive header navigation bar with multi-level dropdown menus, mobile drawer, and keyboard accessibility.
|
|
1013
1010
|
*
|
|
1014
1011
|
* Full documentation:
|
|
1015
|
-
* https://github.com/
|
|
1016
|
-
*/.mg-mega-wrapper{background:rgb(var(--mg-color-white));box-shadow:inset 0 -1px 0 rgb(var(--mg-color-neutral-600)/.24);position:relative;z-index:var(--mg-z-index-nav)}.mg-mega-topbar{align-items:flex-start;display:flex;list-style:none;list-style-type:"";margin:0 auto;max-width:1164px;padding:0
|
|
1017
|
-
|
|
1018
|
-
/* Brief pulse to draw attention when active becomes visible */@keyframes mg-mega-tab-pulse{0%{box-shadow:inset 4px 0 0 0 rgb(var(--mg-color-button)),0 0 0 0 rgb(var(--mg-color-blue-900)/0)}60%{box-shadow:inset 4px 0 0 0 rgb(var(--mg-color-button)),0 0 0 8px rgb(var(--mg-color-blue-900)/.12)}to{box-shadow:inset 4px 0 0 0 rgb(var(--mg-color-button)),0 0 0 0 rgb(var(--mg-color-blue-900)/0)}}.mg-mega-content__section-list-link--active{animation:mg-mega-tab-pulse .7s ease-out 1}
|
|
1019
|
-
|
|
1020
|
-
/* Slide motion for right content when tab changes */@keyframes mg-mega-content-swap{0%{opacity:.98;transform:translateX(8px)}to{opacity:1;transform:translateX(0)}}.mg-mega-content__right--sliding{animation:mg-mega-content-swap .18s ease-out}
|
|
1012
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/MegaMenu/MegaMenu.mdx
|
|
1013
|
+
*/.mg-mega-wrapper{background:rgb(var(--mg-color-white));box-shadow:inset 0 -1px 0 rgb(var(--mg-color-neutral-600)/.24);position:relative;z-index:var(--mg-z-index-nav)}.mg-mega-topbar{align-items:flex-start;display:flex;width:100%;z-index:var(--mg-z-index-nav);--mg-list-item-indent-rtl:0;list-style:none;list-style-type:"";margin:0 auto;max-width:1164px;padding:0}@media screen and (min-width:1440px){.mg-mega-topbar{max-width:1440px}}@media screen and (max-width:900px){.mg-mega-topbar{overflow-x:hidden;padding-left:2.5rem}}.mg-mega-topbar--branded{align-items:center}@media screen and (max-width:900px){.mg-mega-topbar--branded{overflow-x:hidden;padding-left:0}}.mg-mega-topbar--branded .mg-mega-topbar-mobile__icon-button{background:rgb(var(--mg-color-white));box-shadow:-3px 0 6px -2px rgba(0,0,0,.15);flex-shrink:0;margin-inline-start:auto;position:relative;width:auto}.mg-mega-topbar--branded .mg-mega-topbar-mobile__icon-button:has(.mg-icon-angle-circled-left){background:rgb(var(--mg-color-white));box-shadow:-3px 0 6px -2px rgba(0,0,0,.15)}.mg-mega-topbar--branded .mg-mega-topbar__nav{display:flex;flex:1;justify-content:flex-end;--mg-list-item-indent-rtl:0;list-style:none;list-style-type:"";margin:0;padding:0}.mg-mega-topbar__logo{align-items:center;display:flex;flex-shrink:1;min-width:0;padding:var(--mg-spacing-100) var(--mg-spacing-150)}.mg-mega-topbar__logo-img{display:block;height:1.875rem;max-width:100%;width:auto}@media screen and (min-width:900px){.mg-mega-topbar__logo-img{height:2.1875rem}}.mg-mega-topbar__nav{align-items:flex-start;display:flex;flex:1;margin:0;padding:0;--mg-list-item-indent-rtl:0;list-style:none;list-style-type:""}@media screen and (max-width:900px){.mg-mega-topbar__nav{flex:1;min-width:0;overflow:hidden}}@media screen and (min-width:900px){.mg-mega-topbar__item{display:block}}.mg-mega-topbar__item .mg-mega-content{display:none}@media screen and (min-width:900px){.mg-mega-topbar__item .mg-mega-content{clip-path:ellipse(55% 0 at 50% 0);display:flex;opacity:0;pointer-events:none;transition:opacity var(--mg-motion-duration-medium) var(--mg-motion-easing-standard),clip-path var(--mg-motion-duration-medium) var(--mg-motion-easing-standard),visibility 0s linear var(--mg-motion-duration-medium);visibility:hidden}}.mg-mega-topbar__item{color:rgb(var(--mg-color-interactive));font-size:var(--mg-font-size-300);font-weight:700;--mg-list-item-indent-rtl:0;list-style:none;list-style-type:"";margin:0;padding:0}.mg-mega-topbar__item p{font-weight:400}.mg-mega-topbar__item>a,.mg-mega-topbar__item>button{cursor:pointer;display:block;line-height:1.125rem;padding:var(--mg-spacing-150);width:max-content}@media screen and (min-width:900px){.mg-mega-topbar__item>a,.mg-mega-topbar__item>button{position:relative;width:unset}.mg-mega-topbar__item>a:after,.mg-mega-topbar__item>button:after{background:rgb(var(--mg-color-interactive));block-size:3px;content:"";inset-inline:0;bottom:0;opacity:0;position:absolute;transform:scaleX(0)}.mg-mega-topbar__item--active>a:after,.mg-mega-topbar__item--active>button:after{opacity:1;transform:scaleX(1)}.mg-mega-topbar__item--active .mg-mega-topbar__item-link,.mg-mega-topbar__item--active a{color:rgb(var(--mg-color-interactive));text-decoration:none}.mg-mega-topbar__item--active a.mg-button-primary{color:rgb(var(--mg-color-white));text-decoration:none}.mg-mega-topbar__item--active .mg-mega-content{clip-path:ellipse(150% 150% at 50% 0);opacity:1;pointer-events:auto;transition:opacity var(--mg-motion-duration-medium) var(--mg-motion-easing-standard),clip-path var(--mg-motion-duration-medium) var(--mg-motion-easing-standard),visibility 0s linear 0s;visibility:visible}}.mg-mega-topbar__item-link{background:none;border:none;color:rgb(var(--mg-color-interactive));cursor:pointer;font-family:var(--mg-font-family-ui);font-weight:700;list-style:none}.mg-mega-topbar__item-icon{font-size:.85em;margin-inline-end:.35em;vertical-align:baseline}@media screen and (min-width:900px){.mg-mega-topbar__item-link{font-size:var(--mg-font-size-400)}}.mg-mega-content{align-items:flex-start;background-color:rgb(var(--mg-color-neutral-0));box-shadow:inset 0 1px 0 rgb(var(--mg-color-neutral-600)/.2),0 18px 45px rgb(var(--mg-color-neutral-900)/.14);display:flex;flex-direction:column;height:auto;inset-inline-start:0;justify-content:start;position:relative;top:1px;width:100%;z-index:1}@media screen and (min-width:900px){.mg-mega-content{align-items:stretch;display:none;flex-direction:row;max-height:70vh;min-height:21.875rem;overflow:hidden;position:absolute;top:3rem}}.mg-mega-content.mg-container-full-width{position:absolute}.mg-mega-content__left{background-color:rgb(var(--mg-color-neutral-0)/.8);height:100%;width:100%}@media screen and (min-width:900px){.mg-mega-content__left{flex-basis:33%;height:auto;min-height:0;overflow-y:auto}}.mg-mega-content__banner{padding:var(--mg-spacing-250)}.mg-mega-content__banner header{font-family:var(--mg-font-family-ui);font-size:var(--mg-font-size-500);font-weight:700;padding-bottom:var(--mg-spacing-100)}.mg-mega-content__banner p a{text-decoration:underline}.mg-mega-content__banner p a:hover{text-decoration:none}.mg-mega-content:focus-visible,.mg-mega-content__left:focus-visible,.mg-mega-content__right:focus-visible,.mg-mega-topbar__item-link:focus-visible{box-shadow:0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-color-neutral-0));outline:var(--mg-focus-ring-width) solid rgb(var(--mg-color-focus-ring));outline-offset:var(--mg-focus-ring-offset)}.mg-mega-content__left{border-inline-end:1px solid rgb(var(--mg-color-neutral-600)/.24)}.mg-mega-content__left .mg-mega-content__section-list{display:none}@media screen and (min-width:900px){.mg-mega-content__left .mg-mega-content__section-list{display:block}}.mg-mega-content__left .mg-mega-content__section-list-link,.mg-mega-content__left .mg-mega-content__section-list-link:hover{color:rgb(var(--mg-color-interactive-active))}.mg-mega-content__section-list{padding-inline:var(--mg-spacing-200)}.mg-mega-content__section-list-item{list-style:none;margin:0;padding:0}.mg-mega-content__section-list-item .mg-mega-content__section-list-link{display:block;font-weight:600;letter-spacing:.2px;margin-inline:calc(var(--mg-spacing-200)*-1);padding:var(--mg-spacing-150) var(--mg-spacing-250);position:relative;text-decoration:none;transition:background-color var(--mg-motion-duration-fast) var(--mg-motion-easing-standard),color var(--mg-motion-duration-fast) var(--mg-motion-easing-standard)}.mg-mega-content__section-list-item .mg-mega-content__section-list-link:focus-visible,.mg-mega-content__section-list-item .mg-mega-content__section-list-link:hover{background:rgb(var(--mg-color-interactive)/.15);text-decoration:underline}.mg-mega-content__section-list-item .mg-mega-content__section-list-link:after{content:"›";display:inline-block;font-size:1.875rem;inset-inline-end:auto;margin-inline-end:var(--mg-spacing-150);opacity:.55;padding-inline-start:var(--mg-spacing-150);position:absolute;transition:opacity var(--mg-motion-duration-fast) var(--mg-motion-easing-standard)}.mg-mega-content__section-list-item .mg-mega-content__section-list-link--active{background:rgb(var(--mg-color-interactive)/.15);border-inline-start:4px solid rgb(var(--mg-color-interactive));margin-inline-start:calc(var(--mg-spacing-200)*-1);padding:var(--mg-spacing-150) var(--mg-spacing-250);text-decoration:underline}.mg-mega-content__section-list-item .mg-mega-content__section-list-link--active:after{inset-inline-end:0;opacity:1}[dir=rtl] .mg-mega-content__section-list-item .mg-mega-content__section-list-link:after{content:"‹"}.mg-mega-content__right--sliding{animation:none}
|
|
1021
1014
|
|
|
1022
1015
|
/* Stronger keyboard focus ring for accessibility.
|
|
1023
1016
|
Was a hardcoded white inset ring, which is invisible here: the panel is
|
|
1024
1017
|
--mg-color-neutral-0 and the focused link tints it only 15%, so white
|
|
1025
|
-
measured 1.28:1. The default focus ring measures 4.22-4.58:1 across the five themes on that tint. */.mg-mega-content__section-list-link:focus-visible{box-shadow:0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-color-neutral-0));outline:var(--mg-focus-ring-width) solid rgb(var(--mg-color-focus-ring));outline-offset:var(--mg-focus-ring-offset)}.mg-mega-content__right{display:flex;flex:1;width:100%}.mg-mega-content__right .mg-mega-content__menu--mobile{display:block}.mg-mega-content__right .mg-mega-content__menu--desktop{display:none}@media screen and (min-width:900px){.mg-mega-content__right{align-items:flex-start;min-height:0;min-width:0;overflow-y:auto}.mg-mega-content__right .mg-mega-content__menu--mobile{display:none}.mg-mega-content__right .mg-mega-content__menu--desktop{
|
|
1026
|
-
|
|
1027
|
-
/* Subtle blue gradient flash that fades to transparent on right content area */@keyframes mg-mega-right-flash{0%{background:linear-gradient(to bottom,rgb(var(--mg-color-blue-900)/.06) 0,transparent 100%)}to{background:transparent}}
|
|
1028
|
-
/* Menu items slide in from the left */@keyframes mg-mega-item-slide-in{0%{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:translateX(0)}}.mg-mega-sidebar-section{list-style:none;list-style-type:""}.mg-mega-sidebar-section ol{list-style:none;margin:0}.mg-mega-sidebar-section ol li{margin:0}.mg-mega-sidebar-section ol ol li{list-style:none;margin:0;padding-block:var(--mg-spacing-50);padding-inline-start:var(--mg-spacing-300)}.mg-mega-sidebar-section ol ol li a{color:rgb(var(--mg-color-white));text-decoration:none}.mg-mega-sidebar-section ol ol li:hover{background:rgb(var(--mg-color-interactive-active))}.mg-mega-sidebar-section__item{align-items:center;background:rgb(var(--mg-color-interactive));border:none;border-block-end:1px solid rgb(var(--mg-color-white));color:rgb(var(--mg-color-white));cursor:pointer;display:flex;justify-content:space-between;padding:var(--mg-spacing-100) var(--mg-spacing-250);width:100%}@media screen and (min-width:900px){.mg-mega-sidebar-section__item{background:transparent;border-block-end:none}}.mg-mega-sidebar-section__item:hover{background:rgb(var(--mg-color-interactive-active));color:rgb(var(--mg-color-white))}.mg-mega-sidebar-section__item:focus-visible{box-shadow:inset 0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-color-neutral-0)),inset 0 0 0 calc(var(--mg-focus-ring-offset) + var(--mg-focus-ring-width)) rgb(var(--mg-color-focus-ring));outline:0}@media (forced-colors:active){.mg-mega-sidebar-section__item:focus-visible{outline:var(--mg-focus-ring-width) solid Highlight;outline-offset:calc(var(--mg-focus-ring-width)*-1)}}.mg-mega-sidebar-section__item[aria-expanded=true] .mg-icon-angle-circled-left{transform:rotate(-90deg);transition:transform .3s ease-in-out}.mg-mega-sidebar-section__item .mg-icon-angle-circled-left{transition:transform .3s ease-in-out}[dir=rtl] .mg-mega-sidebar-section__item[aria-expanded=true] .mg-icon-angle-circled-left{transform:rotate(90deg)}.mg-mega-sidebar{background-color:rgb(var(--mg-color-interactive-active));box-shadow:0 5px 8px -4px rgba(0,0,0,.25);height:auto;max-height:80vh;overflow:auto;position:absolute;top:-100%;inset-inline:0;transition:top .4s ease-in-out;width:100%;z-index:var(--mg-z-index-nav)}.mg-mega-sidebar.mg-sidebar-open{top:0}@media screen and (min-width:900px){.mg-mega-sidebar{box-shadow:-5px 0 8px -4px rgba(0,0,0,.25);height:100vh;inset-inline-end:0;inset-inline-start:auto;top:0;width:300px}[dir=rtl] .mg-mega-sidebar{box-shadow:5px 0 8px -4px rgba(0,0,0,.25)}}.mg-mega-sidebar__list{background:rgb(var(--mg-color-white));display:flex;flex-direction:column;inset-inline-end:auto;margin-bottom:0;padding:0;position:relative;width:100%}.mg-mega-sidebar__section{align-items:center;color:rgb(var(--mg-color-white));cursor:pointer;display:flex;justify-content:space-between;padding:var(--mg-spacing-150) var(--mg-spacing-300)}.mg-mega-sidebar__section:hover{background:rgb(var(--mg-color-interactive-active))}.mg-mega-topbar-mobile__icon-button{align-items:center;background:transparent;border:none;color:rgb(var(--mg-color-interactive));cursor:pointer;display:flex;font-size:1.25rem;height:100%;inset-inline:0;justify-content:start;padding:var(--mg-spacing-100);position:absolute;width:auto;z-index:var(--mg-z-index-nav-toggle)}.mg-mega-topbar-mobile__icon-button>.mg-icon{display:flex;line-height:1}@media screen and (min-width:900px){.mg-mega-topbar-mobile__icon-button{display:none}}.mg-mega-topbar-mobile__icon-button:hover{color:rgb(var(--mg-color-blue-900)/.9)}.mg-mega-topbar-mobile__icon-button .mg-mega-topbar{position:relative}.mg-mega-topbar-mobile__icon-button:has(.mg-icon-angle-circled-left){background:hsla(0,0%,100%,.8);box-shadow:0 0 4px rgba(0,0,0,.2);color:rgb(var(--mg-color-interactive-active))}.mg-mega-mobile-sidebar{background-color:rgb(var(--mg-color-interactive));box-shadow:0 5px 8px -4px rgba(0,0,0,.25);display:block;height:80vh;inset-inline-start:0;max-height:80vh;overflow:auto;position:absolute;top:0;transform:translateY(-100vh);transition:transform .4s ease-in-out;width:100%;z-index:calc(var(--mg-z-index-nav) - 1)}.mg-mega-mobile-sidebar.mg-mega-mobile-sidebar--open{transform:translateY(calc(3.125rem - 2px))}@media screen and (min-width:900px){.mg-mega-mobile-sidebar{display:none}}.mg-mega-mobile-sidebar-overlay{background:rgba(0,0,0,.4);border:none;cursor:pointer;display:block;inset:0;padding:0;position:fixed;z-index:calc(var(--mg-z-index-nav) - 1)}@media screen and (min-width:900px){.mg-mega-mobile-sidebar-overlay{display:none}}[dir=rtl] .mg-mega-topbar--branded .mg-mega-topbar-mobile__icon-button{box-shadow:3px 0 6px -2px rgba(0,0,0,.15)}[dir=rtl] .mg-mega-topbar--branded .mg-mega-topbar-mobile__icon-button:has(.mg-icon-angle-circled-left){box-shadow:3px 0 6px -2px rgba(0,0,0,.15)}@media screen and (max-width:900px){.mg-mega-wrapper--js-active .mg-mega-topbar__item,.mg-mega-wrapper--js-active .mg-mega-topbar__nav{pointer-events:none}}.mg-mega-mobile-sidebar--progressive{height:auto;inset:0 0 auto;position:fixed;width:100%;--mg-mega-mobile-viewport:90vh;max-height:min(700px,var(--mg-mega-mobile-viewport));min-height:min(400px,var(--mg-mega-mobile-viewport))
|
|
1018
|
+
measured 1.28:1. The default focus ring measures 4.22-4.58:1 across the five themes on that tint. */.mg-mega-content__section-list-link:focus-visible{box-shadow:0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-color-neutral-0));outline:var(--mg-focus-ring-width) solid rgb(var(--mg-color-focus-ring));outline-offset:var(--mg-focus-ring-offset)}.mg-mega-content__right{display:flex;flex:1;width:100%}.mg-mega-content__right .mg-mega-content__menu--mobile{display:block}.mg-mega-content__right .mg-mega-content__menu--desktop{display:none}@media screen and (min-width:900px){.mg-mega-content__right{align-items:flex-start;min-height:0;min-width:0;overflow-y:auto}.mg-mega-content__right .mg-mega-content__menu--mobile{display:none}.mg-mega-content__right .mg-mega-content__menu--desktop{display:block}}.mg-mega-content__right ul{flex:1;list-style:none;padding:var(--mg-spacing-150)}@media screen and (min-width:900px){.mg-mega-content__right ul{column-fill:balance;column-gap:var(--mg-spacing-200);columns:280px}}.mg-mega-content__right ul ul{break-inside:avoid;opacity:.8;padding-block:0;padding-inline:var(--mg-spacing-150)}.mg-mega-content__right ul li{break-inside:avoid;margin:0;padding:0}.mg-mega-content__right ul li a{color:rgb(var(--mg-color-black));display:block;font-weight:700;overflow:hidden;padding:var(--mg-spacing-50);text-overflow:clip;white-space:wrap}.mg-mega-content__right ul li a:hover{color:rgb(var(--mg-color-black));text-decoration:underline}.mg-mega-sidebar-section{--mg-list-item-indent-rtl:0;list-style:none;list-style-type:""}.mg-mega-sidebar-section ol{list-style:none;margin:0}.mg-mega-sidebar-section ol li{margin:0}.mg-mega-sidebar-section ol ol li{list-style:none;margin:0;padding-block:var(--mg-spacing-50);padding-inline-start:var(--mg-spacing-300)}.mg-mega-sidebar-section ol ol li a{color:rgb(var(--mg-color-white));text-decoration:none}.mg-mega-sidebar-section ol ol li:hover{background:rgb(var(--mg-color-interactive-active))}.mg-mega-sidebar-section__item{align-items:center;background:rgb(var(--mg-color-interactive));border:none;border-block-end:1px solid rgb(var(--mg-color-white));color:rgb(var(--mg-color-white));cursor:pointer;display:flex;justify-content:space-between;padding:var(--mg-spacing-100) var(--mg-spacing-250);width:100%}@media screen and (min-width:900px){.mg-mega-sidebar-section__item{background:transparent;border-block-end:none}}.mg-mega-sidebar-section__item:hover{background:rgb(var(--mg-color-interactive-active));color:rgb(var(--mg-color-white))}.mg-mega-sidebar-section__item:focus-visible{box-shadow:inset 0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-color-neutral-0)),inset 0 0 0 calc(var(--mg-focus-ring-offset) + var(--mg-focus-ring-width)) rgb(var(--mg-color-focus-ring));outline:0}@media (forced-colors:active){.mg-mega-sidebar-section__item:focus-visible{outline:var(--mg-focus-ring-width) solid Highlight;outline-offset:calc(var(--mg-focus-ring-width)*-1)}}.mg-mega-sidebar-section__item[aria-expanded=true] .mg-icon-angle-circled-left{transform:rotate(-90deg)}.mg-mega-sidebar-section__item .mg-icon-angle-circled-left,.mg-mega-sidebar-section__item[aria-expanded=true] .mg-icon-angle-circled-left{transition:transform var(--mg-motion-duration-medium) var(--mg-motion-easing-standard)}[dir=rtl] .mg-mega-sidebar-section__item[aria-expanded=true] .mg-icon-angle-circled-left{transform:rotate(90deg)}.mg-mega-sidebar{background-color:rgb(var(--mg-color-interactive-active));box-shadow:0 5px 8px -4px rgba(0,0,0,.25);height:auto;max-height:80vh;overflow:auto;position:absolute;top:-100%;inset-inline:0;transition:top var(--mg-motion-duration-medium) var(--mg-motion-easing-standard);width:100%;z-index:var(--mg-z-index-nav)}.mg-mega-sidebar.mg-sidebar-open{top:0}@media screen and (min-width:900px){.mg-mega-sidebar{box-shadow:-5px 0 8px -4px rgba(0,0,0,.25);height:100vh;inset-inline-end:0;inset-inline-start:auto;top:0;width:300px}[dir=rtl] .mg-mega-sidebar{box-shadow:5px 0 8px -4px rgba(0,0,0,.25)}}.mg-mega-sidebar__list{background:rgb(var(--mg-color-white));display:flex;flex-direction:column;inset-inline-end:auto;margin-bottom:0;padding:0;position:relative;width:100%}.mg-mega-sidebar__section{align-items:center;color:rgb(var(--mg-color-white));cursor:pointer;display:flex;justify-content:space-between;padding:var(--mg-spacing-150) var(--mg-spacing-300)}.mg-mega-sidebar__section:hover{background:rgb(var(--mg-color-interactive-active))}.mg-mega-topbar-mobile__icon-button{align-items:center;background:transparent;border:none;color:rgb(var(--mg-color-interactive));cursor:pointer;display:flex;font-size:1.25rem;height:100%;inset-inline:0;justify-content:start;padding:var(--mg-spacing-100);position:absolute;width:auto;z-index:var(--mg-z-index-nav-toggle)}.mg-mega-topbar-mobile__icon-button>.mg-icon{display:flex;line-height:1}@media screen and (min-width:900px){.mg-mega-topbar-mobile__icon-button{display:none}}.mg-mega-topbar-mobile__icon-button:hover{color:rgb(var(--mg-color-blue-900)/.9)}.mg-mega-topbar-mobile__icon-button .mg-mega-topbar{position:relative}.mg-mega-topbar-mobile__icon-button:has(.mg-icon-angle-circled-left){background:hsla(0,0%,100%,.8);box-shadow:0 0 4px rgba(0,0,0,.2);color:rgb(var(--mg-color-interactive-active))}.mg-mega-mobile-sidebar{background-color:rgb(var(--mg-color-interactive));box-shadow:0 5px 8px -4px rgba(0,0,0,.25);display:block;height:80vh;inset-inline-start:0;max-height:80vh;overflow:auto;position:absolute;top:0;transform:translateY(-100vh);transition:transform var(--mg-motion-duration-medium) var(--mg-motion-easing-standard);width:100%;z-index:calc(var(--mg-z-index-nav) - 1)}.mg-mega-mobile-sidebar.mg-mega-mobile-sidebar--open{transform:translateY(calc(3.125rem - 2px))}@media screen and (min-width:900px){.mg-mega-mobile-sidebar{display:none}}.mg-mega-mobile-sidebar-overlay{background:rgba(0,0,0,.4);border:none;cursor:pointer;display:block;inset:0;padding:0;position:fixed;z-index:calc(var(--mg-z-index-nav) - 1)}@media screen and (min-width:900px){.mg-mega-mobile-sidebar-overlay{display:none}}[dir=rtl] .mg-mega-topbar--branded .mg-mega-topbar-mobile__icon-button{box-shadow:3px 0 6px -2px rgba(0,0,0,.15)}[dir=rtl] .mg-mega-topbar--branded .mg-mega-topbar-mobile__icon-button:has(.mg-icon-angle-circled-left){box-shadow:3px 0 6px -2px rgba(0,0,0,.15)}@media screen and (max-width:900px){.mg-mega-wrapper--js-active .mg-mega-topbar__item,.mg-mega-wrapper--js-active .mg-mega-topbar__nav{pointer-events:none}}.mg-mega-mobile-sidebar--progressive{height:auto;inset:0 0 auto;position:fixed;width:100%;--mg-mega-mobile-viewport:90vh;max-height:min(700px,var(--mg-mega-mobile-viewport));min-height:min(400px,var(--mg-mega-mobile-viewport))
|
|
1029
1019
|
/* stylelint-disable unit-allowed-list -- dynamic viewport leaves a dismiss area above browser chrome */}@supports (height:100dvh){.mg-mega-mobile-sidebar--progressive{--mg-mega-mobile-viewport:90dvh}}.mg-mega-mobile-sidebar--progressive{
|
|
1030
|
-
/* stylelint-enable unit-allowed-list */background:rgb(var(--mg-color-neutral-0));color:rgb(var(--mg-color-text));opacity:0;overscroll-behavior:contain;pointer-events:none;transform:translateX(var(--mg-mega-enter-offset,8px));transition:opacity
|
|
1020
|
+
/* stylelint-enable unit-allowed-list */background:rgb(var(--mg-color-neutral-0));color:rgb(var(--mg-color-text));opacity:0;overscroll-behavior:contain;pointer-events:none;transform:translateX(var(--mg-mega-enter-offset,8px));transition:opacity var(--mg-motion-duration-fast) var(--mg-motion-easing-standard),transform var(--mg-motion-duration-fast) var(--mg-motion-easing-standard);z-index:var(--mg-z-index-modal)}.mg-mega-mobile-sidebar--progressive[hidden]{display:none}.mg-mega-mobile-sidebar--progressive.mg-mega-mobile-sidebar--open{opacity:1;pointer-events:auto;transform:translateX(0)}@starting-style{.mg-mega-mobile-sidebar--progressive.mg-mega-mobile-sidebar--open{opacity:0;transform:translateX(var(--mg-mega-enter-offset,8px))}}.mg-mega-mobile-sidebar--progressive .mg-mega-mobile-sidebar__header{align-items:center;background:rgb(var(--mg-color-neutral-0));box-shadow:0 1px 0 rgb(var(--mg-color-neutral-600)/.2);display:flex;gap:var(--mg-spacing-100);justify-content:space-between;padding:var(--mg-spacing-100) var(--mg-spacing-200);padding-top:max(var(--mg-spacing-100),env(safe-area-inset-top));position:sticky;top:0;z-index:1}.mg-mega-mobile-sidebar--progressive .mg-mega-mobile-sidebar__page>.mg-mega-mobile-sidebar__back{margin-block:calc(var(--mg-spacing-100)*-1) var(--mg-spacing-150);margin-inline-start:calc(var(--mg-spacing-50)*-1)}.mg-mega-mobile-sidebar--progressive .mg-mega-mobile-sidebar__back,.mg-mega-mobile-sidebar--progressive .mg-mega-mobile-sidebar__close{align-items:center;background:transparent;border:0;color:rgb(var(--mg-color-interactive));cursor:pointer;display:flex;font-family:var(--mg-font-family-text);gap:var(--mg-spacing-100);min-height:2.75rem;padding:var(--mg-spacing-50);text-align:start}.mg-mega-mobile-sidebar--progressive .mg-mega-mobile-sidebar__close{flex-shrink:0;margin-inline-start:auto}.mg-mega-mobile-sidebar--progressive .mg-mega-mobile-sidebar__page{animation:mg-mega-progressive-enter var(--mg-motion-duration-fast) var(--mg-motion-easing-standard);padding:var(--mg-spacing-250);padding-bottom:max(var(--mg-spacing-300),env(safe-area-inset-bottom))}.mg-mega-mobile-sidebar--progressive .mg-mega-mobile-sidebar__title{font-family:var(--mg-font-family-ui);font-size:var(--mg-font-size-500);font-weight:700;line-height:1.25;margin:0 0 var(--mg-spacing-150);overflow-wrap:anywhere;text-wrap:balance}.mg-mega-mobile-sidebar--progressive .mg-mega-sidebar__list{background:transparent;margin-block:var(--mg-spacing-150);margin-inline:calc(var(--mg-spacing-100)*-1);padding:0;width:auto;--mg-list-item-indent-rtl:0;list-style:none;list-style-type:""}.mg-mega-mobile-sidebar--progressive .mg-mega-sidebar-section{margin:0;padding:0}.mg-mega-mobile-sidebar--progressive .mg-mega-sidebar-section__item{background:transparent;border:0;border-radius:var(--mg-spacing-50);color:rgb(var(--mg-color-interactive));font-family:var(--mg-font-family-ui);font-size:var(--mg-font-size-400);font-weight:600;gap:var(--mg-spacing-150);line-height:1.35;min-height:3.25rem;overflow-wrap:anywhere;padding:var(--mg-spacing-150) var(--mg-spacing-100);text-align:start;text-decoration:none}.mg-mega-mobile-sidebar--progressive .mg-mega-sidebar-section__item:hover{background:rgb(var(--mg-color-interactive)/.08)}.mg-mega-mobile-sidebar--progressive .mg-mega-mobile-sidebar__page--section .mg-mega-sidebar-section__item{font-family:var(--mg-font-family-text);font-size:var(--mg-font-size-300);font-weight:400;line-height:1.5;min-height:2.75rem;padding-block:var(--mg-spacing-100)}.mg-mega-mobile-sidebar--progressive .mg-mega-mobile-sidebar__title-link{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.12em}.mg-mega-mobile-sidebar--progressive .mg-mega-mobile-sidebar__overview{align-items:center;color:rgb(var(--mg-color-interactive));display:inline-flex;min-height:2.75rem;text-decoration:underline}.mg-mega-mobile-sidebar--progressive .mg-mega-sidebar__list+.mg-mega-mobile-sidebar__intro{margin-top:var(--mg-spacing-250)}.mg-mega-mobile-sidebar--progressive a:focus-visible,.mg-mega-mobile-sidebar--progressive button:focus-visible,.mg-mega-mobile-sidebar--progressive h2:focus-visible,.mg-mega-mobile-sidebar--progressive summary:focus-visible{box-shadow:inset 0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-color-neutral-0)),inset 0 0 0 calc(var(--mg-focus-ring-offset) + var(--mg-focus-ring-width)) rgb(var(--mg-color-focus-ring));outline:0}@media (forced-colors:active){.mg-mega-mobile-sidebar--progressive a:focus-visible,.mg-mega-mobile-sidebar--progressive button:focus-visible,.mg-mega-mobile-sidebar--progressive h2:focus-visible,.mg-mega-mobile-sidebar--progressive summary:focus-visible{outline:var(--mg-focus-ring-width) solid Highlight;outline-offset:calc(var(--mg-focus-ring-width)*-1)}}.mg-mega-mobile-sidebar--progressive .mg-mega-mobile-sidebar__arrow,.mg-mega-mobile-sidebar--progressive .mg-mega-mobile-sidebar__chevron{flex-shrink:0}.mg-mega-mobile-sidebar--progressive .mg-mega-mobile-sidebar__arrow:dir(rtl),.mg-mega-mobile-sidebar--progressive .mg-mega-mobile-sidebar__chevron:dir(rtl){transform:scaleX(-1)}@keyframes mg-mega-progressive-enter{0%{opacity:0;translate:var(--mg-mega-enter-offset,8px) 0}to{opacity:1;translate:0 0}}.mg-mega-mobile-sidebar--progressive:dir(rtl){--mg-mega-enter-offset:-8px}@media (prefers-reduced-motion:reduce){.mg-mega-mobile-sidebar--progressive .mg-mega-mobile-sidebar__page{animation:none}}.mg-mega-topbar__mobile-trigger{--mg-list-item-indent-rtl:0;list-style:none;list-style-type:"";margin:0;padding:0}@media screen and (min-width:900px){.mg-mega-topbar__mobile-trigger{display:none}}.mg-mega-wrapper--mobile-open{z-index:var(--mg-z-index-modal)}.mg-mega-mobile-sidebar-overlay{background:rgb(var(--mg-color-black)/.16);opacity:0;pointer-events:none;transition:opacity var(--mg-motion-duration-fast) var(--mg-motion-easing-standard)}.mg-mega-mobile-sidebar-overlay--open{opacity:1;pointer-events:auto}@starting-style{.mg-mega-mobile-sidebar-overlay--open{opacity:0}}@supports (backdrop-filter:blur(16px)) or (-webkit-backdrop-filter:blur(16px)){.mg-mega-mobile-sidebar--progressive{backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);background:rgb(var(--mg-color-neutral-0)/.94)}}@media (forced-colors:active),(prefers-contrast:more),(prefers-reduced-motion:reduce),(prefers-reduced-transparency:reduce){.mg-mega-mobile-sidebar--progressive{animation:none;backdrop-filter:none;-webkit-backdrop-filter:none;background:rgb(var(--mg-color-neutral-0));transition:none}.mg-mega-mobile-sidebar--progressive .mg-mega-mobile-sidebar__page,.mg-mega-mobile-sidebar--progressive.mg-mega-mobile-sidebar--open{animation:none}.mg-mega-mobile-sidebar-overlay{animation:none;transition:none}.mg-mega-content__section-list-item .mg-mega-content__section-list-link,.mg-mega-content__section-list-item .mg-mega-content__section-list-link:after,.mg-mega-mobile-sidebar,.mg-mega-sidebar,.mg-mega-sidebar-section__item .mg-icon-angle-circled-left,.mg-mega-sidebar-section__item[aria-expanded=true] .mg-icon-angle-circled-left,.mg-mega-topbar__item .mg-mega-content,.mg-mega-topbar__item--active .mg-mega-content{transition:none}}@media screen and (max-width:900px){.mg-mega-topbar:not(.mg-mega-topbar--branded,:has(.mg-mega-topbar-mobile__icon-button)){overflow-x:auto;overscroll-behavior-inline:contain;padding-inline:0;scrollbar-width:thin}.mg-mega-topbar:not(.mg-mega-topbar--branded,:has(.mg-mega-topbar-mobile__icon-button))>.mg-mega-topbar__item{flex:0 0 auto}.mg-mega-topbar:not(.mg-mega-topbar--branded,:has(.mg-mega-topbar-mobile__icon-button)) .mg-mega-topbar__item-link:focus-visible{box-shadow:inset 0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-color-neutral-0)),inset 0 0 0 calc(var(--mg-focus-ring-offset) + var(--mg-focus-ring-width)) rgb(var(--mg-color-focus-ring));outline:0}}@media screen and (max-width:900px) and (forced-colors:active){.mg-mega-topbar:not(.mg-mega-topbar--branded,:has(.mg-mega-topbar-mobile__icon-button)) .mg-mega-topbar__item-link:focus-visible{outline:var(--mg-focus-ring-width) solid Highlight;outline-offset:calc(var(--mg-focus-ring-width)*-1)}}
|
|
1031
1021
|
/**
|
|
1032
1022
|
* Hub Header
|
|
1033
1023
|
*
|
|
1034
1024
|
* Content hub banner header with theme styling, breadcrumb trail, and description copy.
|
|
1035
1025
|
*
|
|
1036
1026
|
* Full documentation:
|
|
1037
|
-
* https://github.com/
|
|
1038
|
-
*/.mg-hub-header{--mg-hub-header-surface:var(--mg-color-hero);--mg-hub-header-banner-surface:var(--mg-color-hero);--mg-hub-header-ink:var(--mg-color-neutral-0);--mg-hub-header-link:var(--mg-color-neutral-0);--mg-hub-header-link-hover:var(--mg-color-neutral-0);--mg-hub-header-marker:var(--mg-color-neutral-0);--mg-hub-header-rule:var(--mg-color-neutral-0);--mg-hub-header-rule-alpha:0.4;--mg-hub-header-focus:var(--mg-color-focus-ring-inverse);--mg-hub-header-bar-tint:0 0 0;--mg-hub-header-bar-tint-alpha:0.14}.mg-hub-header--surface-secondary .mg-hub-header__bar{border-block-end:.25rem solid rgb(var(--mg-color-hero--secondary))}.mg-hub-header--surface-tertiary{--mg-hub-header-surface:var(--mg-color-hero--tertiary);--mg-hub-header-banner-surface:var(--mg-color-hero--tertiary);--mg-hub-header-bar-tint:255 255 255;--mg-hub-header-bar-tint-alpha:0.1}.mg-hub-header--surface-detached{--mg-hub-header-surface:var(--mg-color-neutral-0);--mg-hub-header-ink:var(--mg-color-text);--mg-hub-header-link:var(--mg-color-interactive);--mg-hub-header-link-hover:var(--mg-color-interactive-active);--mg-hub-header-marker:var(--mg-color-interactive);--mg-hub-header-rule:var(--mg-color-neutral-300);--mg-hub-header-rule-alpha:1;--mg-hub-header-focus:var(--mg-color-focus-ring);--mg-hub-header-bar-tint-alpha:0}@media (width < 48rem){.mg-hub-header__banner-inner,.mg-hub-header__identity{padding-inline:var(--mg-spacing-200)}.mg-hub-header__nav{margin-inline:calc(var(--mg-spacing-200)*-1)}.mg-hub-header__nav ul{padding-inline:calc(var(--mg-spacing-200) - var(--mg-spacing-150));scroll-padding-inline:var(--mg-spacing-200)}}.mg-hub-header__bar{background-color:rgb(var(--mg-hub-header-surface));background-image:linear-gradient(rgb(var(--mg-hub-header-bar-tint)/var(--mg-hub-header-bar-tint-alpha)),rgb(var(--mg-hub-header-bar-tint)/var(--mg-hub-header-bar-tint-alpha)));inline-size:100vw;margin-inline-start:calc(50% - 50vw)}.mg-hub-header__identity{align-items:center;display:flex;flex-wrap:wrap;gap:var(--mg-spacing-100) var(--mg-spacing-150);padding-block:var(--mg-spacing-100)}.mg-hub-header__name{align-items:center;color:rgb(var(--mg-hub-header-ink));display:flex;flex:0 0 auto;font-family:var(--mg-font-family-ui);font-size:1.125rem;font-weight:700;min-block-size:2.75rem;padding-block:0;text-decoration:none}.mg-hub-header__name:hover{color:rgb(var(--mg-hub-header-link-hover));text-decoration:underline}.mg-hub-header__name:focus-visible{box-shadow:0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-hub-header-surface));outline:var(--mg-focus-ring-width) solid rgb(var(--mg-hub-header-focus));outline-offset:var(--mg-focus-ring-offset)}@media (width >= 48rem){.mg-hub-header__name{border-inline-end:1px solid rgb(var(--mg-hub-header-rule)/var(--mg-hub-header-rule-alpha));padding-inline-end:var(--mg-spacing-250)}}.mg-hub-header__nav{flex:1 1 20rem;isolation:isolate;min-inline-size:0;position:relative}.mg-hub-header__nav:after,.mg-hub-header__nav:before{content:"";inline-size:var(--mg-spacing-300);inset-block:0;opacity:0;pointer-events:none;position:absolute;z-index:3}.mg-hub-header__nav:before{background:linear-gradient(to right,rgb(var(--mg-hub-header-surface)),transparent);inset-inline-start:0}.mg-hub-header__nav:after{background:linear-gradient(to left,rgb(var(--mg-hub-header-surface)),transparent);inset-inline-end:0}.mg-hub-header__nav:dir(rtl):before{background:linear-gradient(to left,rgb(var(--mg-hub-header-surface)),transparent)}.mg-hub-header__nav:dir(rtl):after{background:linear-gradient(to right,rgb(var(--mg-hub-header-surface)),transparent)}.mg-hub-header__nav[data-overflow-end]:after,.mg-hub-header__nav[data-overflow-start]:before{opacity:1}.mg-hub-header__nav:has(:focus-visible):after,.mg-hub-header__nav:has(:focus-visible):before{opacity:0}.mg-hub-header__nav ul{display:flex;gap:var(--mg-spacing-50);list-style:none;list-style-type:"";margin:0;
|
|
1027
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Patterns/ContentHub/ContentHub.mdx
|
|
1028
|
+
*/.mg-hub-header{--mg-hub-header-surface:var(--mg-color-hero);--mg-hub-header-banner-surface:var(--mg-color-hero);--mg-hub-header-ink:var(--mg-color-neutral-0);--mg-hub-header-link:var(--mg-color-neutral-0);--mg-hub-header-link-hover:var(--mg-color-neutral-0);--mg-hub-header-marker:var(--mg-color-neutral-0);--mg-hub-header-rule:var(--mg-color-neutral-0);--mg-hub-header-rule-alpha:0.4;--mg-hub-header-focus:var(--mg-color-focus-ring-inverse);--mg-hub-header-bar-tint:0 0 0;--mg-hub-header-bar-tint-alpha:0.14}.mg-hub-header--surface-secondary .mg-hub-header__bar{border-block-end:.25rem solid rgb(var(--mg-color-hero--secondary))}.mg-hub-header--surface-tertiary{--mg-hub-header-surface:var(--mg-color-hero--tertiary);--mg-hub-header-banner-surface:var(--mg-color-hero--tertiary);--mg-hub-header-bar-tint:255 255 255;--mg-hub-header-bar-tint-alpha:0.1}.mg-hub-header--surface-detached{--mg-hub-header-surface:var(--mg-color-neutral-0);--mg-hub-header-ink:var(--mg-color-text);--mg-hub-header-link:var(--mg-color-interactive);--mg-hub-header-link-hover:var(--mg-color-interactive-active);--mg-hub-header-marker:var(--mg-color-interactive);--mg-hub-header-rule:var(--mg-color-neutral-300);--mg-hub-header-rule-alpha:1;--mg-hub-header-focus:var(--mg-color-focus-ring);--mg-hub-header-bar-tint-alpha:0}@media (width < 48rem){.mg-hub-header__banner-inner,.mg-hub-header__identity{padding-inline:var(--mg-spacing-200)}.mg-hub-header__nav{margin-inline:calc(var(--mg-spacing-200)*-1)}.mg-hub-header__nav ul{padding-inline:calc(var(--mg-spacing-200) - var(--mg-spacing-150));scroll-padding-inline:var(--mg-spacing-200)}}.mg-hub-header__bar{background-color:rgb(var(--mg-hub-header-surface));background-image:linear-gradient(rgb(var(--mg-hub-header-bar-tint)/var(--mg-hub-header-bar-tint-alpha)),rgb(var(--mg-hub-header-bar-tint)/var(--mg-hub-header-bar-tint-alpha)));inline-size:100vw;margin-inline-start:calc(50% - 50vw)}.mg-hub-header__identity{align-items:center;display:flex;flex-wrap:wrap;gap:var(--mg-spacing-100) var(--mg-spacing-150);padding-block:var(--mg-spacing-100)}.mg-hub-header__name{align-items:center;color:rgb(var(--mg-hub-header-ink));display:flex;flex:0 0 auto;font-family:var(--mg-font-family-ui);font-size:1.125rem;font-weight:700;min-block-size:2.75rem;padding-block:0;text-decoration:none}.mg-hub-header__name:hover{color:rgb(var(--mg-hub-header-link-hover));text-decoration:underline}.mg-hub-header__name:focus-visible{box-shadow:0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-hub-header-surface));outline:var(--mg-focus-ring-width) solid rgb(var(--mg-hub-header-focus));outline-offset:var(--mg-focus-ring-offset)}@media (width >= 48rem){.mg-hub-header__name{border-inline-end:1px solid rgb(var(--mg-hub-header-rule)/var(--mg-hub-header-rule-alpha));padding-inline-end:var(--mg-spacing-250)}}.mg-hub-header__nav{flex:1 1 20rem;isolation:isolate;min-inline-size:0;position:relative}.mg-hub-header__nav:after,.mg-hub-header__nav:before{content:"";inline-size:var(--mg-spacing-300);inset-block:0;opacity:0;pointer-events:none;position:absolute;z-index:3}.mg-hub-header__nav:before{background:linear-gradient(to right,rgb(var(--mg-hub-header-surface)),transparent);inset-inline-start:0}.mg-hub-header__nav:after{background:linear-gradient(to left,rgb(var(--mg-hub-header-surface)),transparent);inset-inline-end:0}.mg-hub-header__nav:dir(rtl):before{background:linear-gradient(to left,rgb(var(--mg-hub-header-surface)),transparent)}.mg-hub-header__nav:dir(rtl):after{background:linear-gradient(to right,rgb(var(--mg-hub-header-surface)),transparent)}.mg-hub-header__nav[data-overflow-end]:after,.mg-hub-header__nav[data-overflow-start]:before{opacity:1}.mg-hub-header__nav:has(:focus-visible):after,.mg-hub-header__nav:has(:focus-visible):before{opacity:0}.mg-hub-header__nav ul{display:flex;overflow-x:auto;scroll-padding-inline:var(--mg-spacing-150);scrollbar-width:none;--mg-list-item-indent-rtl:0;gap:var(--mg-spacing-50);list-style:none;list-style-type:"";margin:0;padding:0}.mg-hub-header__nav li{margin:0;padding:0}.mg-hub-header__nav a{align-items:center;color:rgb(var(--mg-hub-header-link));display:flex;min-block-size:2.75rem;padding:var(--mg-spacing-100) var(--mg-spacing-150);scroll-margin-inline:var(--mg-spacing-150);text-decoration:none;white-space:nowrap}.mg-hub-header__nav a:hover{color:rgb(var(--mg-hub-header-link-hover));text-decoration:underline}.mg-hub-header__nav a[aria-current],.mg-hub-header__nav-item--ancestor a{color:rgb(var(--mg-hub-header-ink));font-weight:700;text-decoration:underline;text-decoration-color:rgb(var(--mg-hub-header-marker));text-decoration-thickness:var(--mg-spacing-25);text-underline-offset:.4em}.mg-hub-header__nav a[aria-current]:hover,.mg-hub-header__nav-item--ancestor a:hover{color:rgb(var(--mg-hub-header-ink))}.mg-hub-header__nav a:focus-visible{box-shadow:inset 0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-hub-header-surface)),inset 0 0 0 calc(var(--mg-focus-ring-offset) + var(--mg-focus-ring-width)) rgb(var(--mg-hub-header-focus));outline:0}@media (forced-colors:active){.mg-hub-header__nav a:focus-visible{outline:var(--mg-focus-ring-width) solid Highlight;outline-offset:calc(var(--mg-focus-ring-width)*-1)}}.mg-hub-header__banner{background-color:rgb(var(--mg-hub-header-banner-surface));color:rgb(var(--mg-color-neutral-0));inline-size:100vw;margin-inline-start:calc(50% - 50vw)}.mg-hub-header__banner-inner{align-items:center;display:grid;gap:var(--mg-spacing-250);padding-block:var(--mg-spacing-350)}.mg-hub-header__title{font-size:clamp(2rem,4vw,3rem);line-height:1.15;margin-block:0 var(--mg-spacing-150);max-inline-size:18ch;text-wrap:balance}.mg-hub-header__actions{display:flex;flex-wrap:wrap;gap:var(--mg-spacing-150);margin-block-start:var(--mg-spacing-250)}.mg-hub-header__actions a.mg-button.mg-button-cta,.mg-hub-header__actions a.mg-button.mg-button-cta:hover,.mg-hub-header__actions a.mg-button.mg-button-cta:visited{background:transparent;border-color:transparent;color:rgb(var(--mg-color-neutral-0))}.mg-hub-header__actions a.mg-button.mg-button-cta:after,.mg-hub-header__actions a.mg-button.mg-button-cta:hover:after,.mg-hub-header__actions a.mg-button.mg-button-cta:visited:after{background:rgb(var(--mg-color-neutral-0));color:rgb(var(--mg-hub-header-banner-surface))}.mg-hub-header__actions a.mg-button:focus-visible{box-shadow:0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-color-neutral-0));outline:var(--mg-focus-ring-width) solid rgb(var(--mg-color-focus-ring-inverse));outline-offset:var(--mg-focus-ring-offset)}.mg-hub-header__summary{font-size:1.0625rem;line-height:1.65;margin:0;max-inline-size:46ch}.mg-hub-header__media img{aspect-ratio:16/9;block-size:100%;display:block;inline-size:100%;object-fit:cover}@media (width >= 48rem){.mg-hub-header__banner-inner{grid-template-columns:minmax(0,3fr) minmax(0,2fr)}.mg-hub-header__media img{aspect-ratio:4/3}}@media (forced-colors:active){.mg-hub-header__nav a[aria-current],.mg-hub-header__nav-item--ancestor a{text-decoration-color:Highlight}.mg-hub-header__nav:after,.mg-hub-header__nav:before{display:none}.mg-hub-header__nav ul{scrollbar-width:auto}}
|
|
1029
|
+
|
|
1030
|
+
/**
|
|
1031
|
+
* Cite this (CiteThis)
|
|
1032
|
+
*
|
|
1033
|
+
* Citation button and dialog with a readable disclosure fallback.
|
|
1034
|
+
*
|
|
1035
|
+
* Full documentation:
|
|
1036
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/CiteThis/CiteThis.mdx
|
|
1037
|
+
*/.mg-cite-this{color:rgb(var(--mg-color-neutral-800));font-family:var(--mg-font-family-text);max-inline-size:48rem}.mg-cite-this__fallback{background:rgb(var(--mg-color-neutral-50));border-inline-start:var(--mg-spacing-50) solid rgb(var(--mg-color-interactive))}.mg-cite-this__trigger{background:rgb(var(--mg-color-interactive));border:0;border-radius:var(--mg-radius-button);color:rgb(var(--mg-color-white));cursor:pointer;font-family:var(--mg-font-family-text);font-size:var(--mg-font-size-300);font-weight:600;min-block-size:44px;padding:var(--mg-spacing-100) var(--mg-spacing-200);transition:filter var(--mg-motion-duration-fast) var(--mg-motion-easing-standard)}.mg-cite-this__trigger:hover{filter:brightness(.92)}.mg-cite-this__trigger:focus-visible{box-shadow:0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-color-neutral-0));outline:var(--mg-focus-ring-width) solid rgb(var(--mg-color-focus-ring));outline-offset:var(--mg-focus-ring-offset)}@media (prefers-reduced-motion:reduce){.mg-cite-this__trigger{transition:none}}@media (forced-colors:active){.mg-cite-this__trigger{border:1px solid ButtonText}}.mg-cite-this__panel{align-items:flex-start;display:flex;flex-direction:column;gap:var(--mg-spacing-100);max-inline-size:25rem}.mg-cite-this__header{font-size:var(--mg-font-size-300);font-weight:600;margin:0}.mg-cite-this__header,.mg-cite-this__preview{color:rgb(var(--mg-color-text));font-family:var(--mg-font-family-text)}.mg-cite-this__preview{align-items:center;background-color:rgb(var(--mg-color-neutral-25));border:1px solid rgb(var(--mg-color-neutral-300)/.4);border-radius:var(--mg-radius-button);box-sizing:border-box;cursor:pointer;display:flex;gap:var(--mg-spacing-100);inline-size:100%;min-block-size:2.5rem;padding:var(--mg-spacing-100);text-align:start}@media (prefers-reduced-motion:no-preference){.mg-cite-this__preview{transition:background-color var(--mg-motion-duration-fast) var(--mg-motion-easing-standard)}}.mg-cite-this__preview .mg-icon{flex:0 0 1.5rem;text-align:center}.mg-cite-this__preview:hover{background-color:rgb(var(--mg-color-neutral-50))}.mg-cite-this__preview:hover .mg-cite-this__preview-text{text-decoration:underline;text-underline-offset:.15em}.mg-cite-this__preview:focus-visible{box-shadow:0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-color-neutral-0));outline:var(--mg-focus-ring-width) solid rgb(var(--mg-color-focus-ring));outline-offset:var(--mg-focus-ring-offset)}@media (forced-colors:active){.mg-cite-this__preview{border-color:ButtonText}}.mg-cite-this__preview-text{display:-webkit-box;flex:1;font-size:var(--mg-font-size-250);line-height:1.5;min-inline-size:0;overflow:hidden;overflow-wrap:anywhere;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}.mg-cite-this .mg-cite-this__more{background:transparent;color:rgb(var(--mg-color-interactive));font-size:var(--mg-font-size-250);font-weight:400;min-block-size:44px;padding:0;text-decoration:underline;text-underline-offset:.15em}.mg-cite-this .mg-cite-this__more:hover{filter:none;text-decoration-thickness:2px}.mg-cite-this__dialog{background:rgb(var(--mg-color-white));border:0;border-block-start:var(--mg-spacing-50) solid rgb(var(--mg-color-interactive));border-radius:var(--mg-radius-button);box-shadow:0 12px 40px rgba(0,0,0,.2);color:rgb(var(--mg-color-neutral-800));inline-size:min(100% - 2rem,44rem);max-block-size:calc(100vh - 2rem);overflow-y:auto;padding:0}.mg-cite-this__dialog::backdrop{background:var(--mg-color-modal-scrim)}.mg-cite-this__dialog .mg-cite-this__content{padding-block:0 var(--mg-spacing-200)}.mg-cite-this__dialog-header{align-items:center;display:flex;gap:var(--mg-spacing-200);justify-content:space-between;padding:var(--mg-spacing-200) var(--mg-spacing-200) var(--mg-spacing-150)}.mg-cite-this__title{font-family:var(--mg-font-family-ui);font-size:var(--mg-font-size-400);line-height:1.3;margin:0}.mg-cite-this__close{block-size:44px;color:rgb(var(--mg-color-neutral-600));flex-shrink:0;inline-size:44px;min-block-size:44px;min-inline-size:44px}.mg-cite-this__close:hover{background-color:rgb(var(--mg-color-neutral-900)/.08);color:rgb(var(--mg-color-neutral-900))}.mg-cite-this__summary{align-items:center;cursor:pointer;display:flex;font-family:var(--mg-font-family-ui);font-size:var(--mg-font-size-400);font-weight:700;gap:var(--mg-spacing-150);justify-content:space-between;list-style:none;min-block-size:44px;padding:var(--mg-spacing-150) var(--mg-spacing-200)}.mg-cite-this__summary::-webkit-details-marker{display:none}.mg-cite-this__summary:focus-visible{box-shadow:inset 0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-color-neutral-0)),inset 0 0 0 calc(var(--mg-focus-ring-offset) + var(--mg-focus-ring-width)) rgb(var(--mg-color-focus-ring));outline:0}@media (forced-colors:active){.mg-cite-this__summary:focus-visible{outline:var(--mg-focus-ring-width) solid Highlight;outline-offset:calc(var(--mg-focus-ring-width)*-1)}}.mg-cite-this__summary:after{content:"+";font-family:var(--mg-font-family-text);font-size:var(--mg-font-size-400);font-weight:400;line-height:1}.mg-cite-this__fallback[open] .mg-cite-this__summary:after{content:"−"}.mg-cite-this__content{padding:0 var(--mg-spacing-200) var(--mg-spacing-200)}.mg-cite-this .mg-cite-this__text{background:rgb(var(--mg-color-neutral-25));border:1px solid rgb(var(--mg-color-neutral-300)/.4);border-radius:var(--mg-radius-form-input);box-shadow:none;color:rgb(var(--mg-color-neutral-800));font-family:var(--mg-font-family-text);font-size:var(--mg-font-size-300);font-weight:400;line-height:1.6;margin:0;overflow-wrap:anywhere;padding:var(--mg-spacing-150) var(--mg-spacing-200);text-wrap:pretty}.mg-cite-this .mg-cite-this__text a{color:rgb(var(--mg-color-interactive));text-decoration:underline;text-underline-offset:.15em}.mg-cite-this .mg-cite-this__text a:focus-visible{box-shadow:0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-color-neutral-0));outline:var(--mg-focus-ring-width) solid rgb(var(--mg-color-focus-ring));outline-offset:var(--mg-focus-ring-offset)}.mg-cite-this__actions{align-items:center;display:flex;flex-wrap:wrap;gap:var(--mg-spacing-150);margin-block-start:var(--mg-spacing-150)}.mg-cite-this__copy{background:transparent;border:2px solid rgb(var(--mg-color-interactive));border-radius:var(--mg-radius-button);color:rgb(var(--mg-color-interactive));cursor:pointer;font-family:var(--mg-font-family-text);font-size:var(--mg-font-size-250);font-weight:600;min-block-size:44px;padding:var(--mg-spacing-50) var(--mg-spacing-150);transition-duration:var(--mg-motion-duration-fast);transition-property:background-color,color,scale;transition-timing-function:var(--mg-motion-easing-standard)}.mg-cite-this__copy:hover,.mg-cite-this__copy:not(.mg-cite-this__copy-url){background:rgb(var(--mg-color-interactive));color:rgb(var(--mg-color-white))}.mg-cite-this__copy:not(.mg-cite-this__copy-url):hover{filter:brightness(.92)}.mg-cite-this__copy:active{scale:.96}.mg-cite-this__copy:focus-visible{box-shadow:0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-color-neutral-0));outline:var(--mg-focus-ring-width) solid rgb(var(--mg-color-focus-ring));outline-offset:var(--mg-focus-ring-offset)}@media (prefers-reduced-motion:reduce){.mg-cite-this__copy{transition:none}}.mg-cite-this__exports{border-block-start:1px solid rgb(var(--mg-color-neutral-200));display:flex;flex-wrap:wrap;font-size:var(--mg-font-size-250);gap:var(--mg-spacing-50) var(--mg-spacing-200);margin-block-start:var(--mg-spacing-150);padding-block-start:var(--mg-spacing-150)}.mg-cite-this__export{align-items:center;color:rgb(var(--mg-color-interactive));display:inline-flex;min-block-size:44px;text-decoration:underline;text-underline-offset:.15em}.mg-cite-this__export:focus-visible{box-shadow:0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-color-neutral-0));outline:var(--mg-focus-ring-width) solid rgb(var(--mg-color-focus-ring));outline-offset:var(--mg-focus-ring-offset)}.mg-cite-this__status{font-size:var(--mg-font-size-250)}
|
|
1039
1038
|
|
|
1040
1039
|
/**
|
|
1041
1040
|
* Page Patterns
|
|
@@ -1043,7 +1042,7 @@
|
|
|
1043
1042
|
* Composite page layout pattern utilities for standard UNDRR editorial templates.
|
|
1044
1043
|
*
|
|
1045
1044
|
* Full documentation:
|
|
1046
|
-
* https://github.com/
|
|
1045
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Utilities/PagePatterns/PagePatterns.mdx
|
|
1047
1046
|
*/:root{--mg-reading-with-contents-width:calc(62rem + var(--mg-spacing-300))}.mg-reading{display:grid;gap:var(--mg-spacing-250)}.mg-reading__article{max-inline-size:46rem;min-inline-size:0}.mg-reading__article section{margin-block-end:var(--mg-spacing-300);scroll-margin-block-start:var(--mg-spacing-200)}@media (width >= 48rem){.mg-reading--with-contents{max-inline-size:var(--mg-reading-with-contents-width)}.mg-reading--with-contents>div:has(.mg-table-of-contents){grid-column:2;grid-row:1;inset-block-start:var(--mg-spacing-200);position:sticky}.mg-reading--with-contents .mg-reading__article{grid-column:1;grid-row:1}}
|
|
1048
1047
|
/**
|
|
1049
1048
|
* Page Header
|
|
@@ -1051,7 +1050,7 @@
|
|
|
1051
1050
|
* Standardized page heading banner with title, breadcrumbs, category metadata, and intro text.
|
|
1052
1051
|
*
|
|
1053
1052
|
* Full documentation:
|
|
1054
|
-
* https://github.com/
|
|
1053
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/PageHeader/PageHeader.mdx
|
|
1055
1054
|
*/.mg-page-header .mg-page-header__container{padding-inline:.625rem}@media (max-width:900px){.mg-page-header .mg-page-header__container{max-width:100%}}.mg-page-header__toolbar-wrapper{background:rgb(var(--mg-color-neutral-700)) url(https://www.undrr.org/themes/custom/undrr_common/images/toolbar-background.png) no-repeat 50%;border-block-end:1px solid rgb(var(--mg-color-neutral-0)/.16);z-index:var(--mg-z-index-header)}.mg-page-header__region--toolbar{align-items:center;display:flex;flex-wrap:wrap;gap:var(--mg-spacing-50);padding-block:var(--mg-spacing-50)}.mg-page-header__region--toolbar a{align-items:center;color:rgb(var(--mg-color-neutral-0));display:inline-flex;justify-content:center;min-block-size:2.5rem;min-inline-size:2.5rem}.mg-page-header__region--toolbar a:focus-visible{box-shadow:none;outline:none}.mg-page-header__region--toolbar a:focus-visible .mg-page-header__toolbar-icon{box-shadow:0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-color-neutral-0));outline:var(--mg-focus-ring-width) solid rgb(var(--mg-color-focus-ring));outline-offset:var(--mg-focus-ring-offset)}.mg-page-header__region--toolbar .fa{vertical-align:middle}.mg-page-header__region--toolbar>:first-child{flex-grow:1}.mg-page-header__block--logo{flex-grow:1;min-inline-size:0;padding-block:var(--mg-spacing-50)}.mg-page-header__toolbar-icon{font-size:1.2em}.mg-page-header__block--language{align-items:center;block-size:2.5rem;display:flex;inline-size:2.5rem;margin-inline-start:var(--mg-spacing-75);position:relative}.mg-page-header__block--language>form{inset:0;position:absolute}.mg-page-header__block--language:focus-within .mg-page-header__language-icon{box-shadow:0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-color-neutral-0));outline:var(--mg-focus-ring-width) solid rgb(var(--mg-color-focus-ring));outline-offset:var(--mg-focus-ring-offset)}.mg-page-header__language-icon{color:rgb(var(--mg-color-neutral-0));inset-block-start:50%;inset-inline-start:50%;pointer-events:none;position:absolute;transform:translate(-50%,-50%)}.mg-page-header__block--language-links{align-items:center;display:flex;margin-inline-start:var(--mg-spacing-75)}@media (max-width:900px){.mg-page-header__block--language-links{display:none}}@media (min-width:901px){.mg-page-header__block--language-fallback{display:none}}.mg-page-header__language-links{align-items:center;display:flex;flex-wrap:wrap;gap:var(--mg-spacing-100)}.mg-page-header__language-link{align-items:center;background:none;border:none;border-radius:var(--mg-radius-button);color:rgb(var(--mg-color-neutral-0));cursor:pointer;display:inline-flex;font-family:inherit;font-size:var(--mg-font-size-250);min-block-size:2.5rem;padding-inline:var(--mg-spacing-75)}.mg-page-header__language-link:hover{text-decoration:underline}.mg-page-header__language-link:focus-visible{box-shadow:0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-color-neutral-0));outline:var(--mg-focus-ring-width) solid rgb(var(--mg-color-focus-ring));outline-offset:var(--mg-focus-ring-offset)}.mg-page-header__language-link[aria-current=true]{font-weight:700}.mg-page-header__select-wrapper{background:transparent;height:auto;margin:0;min-width:auto}.mg-page-header__select-wrapper:before{background:none!important;border:none;height:30px;line-height:30px;width:30px}.mg-page-header__select,.mg-page-header__select-wrapper:focus:before,.mg-page-header__select-wrapper:hover:before{background-color:transparent}.mg-page-header__select{block-size:100%;border:none;cursor:pointer;direction:inherit;font-size:var(--mg-font-size-300);inline-size:100%;inset:0;min-width:0;opacity:0;outline:none;padding:0;position:absolute}.mg-page-header__select option{background:rgb(var(--mg-color-neutral-0));color:rgb(var(--mg-color-text))}.mg-page-header__decoration{align-content:flex-start;align-items:stretch;display:flex;flex-wrap:wrap;justify-content:space-between}.mg-page-header__decoration div{display:inline-block;height:7px;width:25%}.mg-page-header__decoration div:first-child{background:var(--sendai-red-900)}.mg-page-header__decoration div:nth-child(2){background:var(--sendai-purple-900)}.mg-page-header__decoration div:nth-child(3){background:var(--sendai-orange-900)}.mg-page-header__decoration div:nth-child(4){background:var(--sendai-turquoise-900)}
|
|
1056
1055
|
|
|
1057
1056
|
/**
|
|
@@ -1060,9 +1059,9 @@
|
|
|
1060
1059
|
* Card layouts including VerticalCard, HorizontalCard, BookCard, and HorizontalBookCard with responsive media.
|
|
1061
1060
|
*
|
|
1062
1061
|
* Full documentation:
|
|
1063
|
-
* https://github.com/
|
|
1062
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/Cards/Card/VerticalCard.mdx
|
|
1064
1063
|
*/
|
|
1065
|
-
/* content-card start */.mg-card{background:var(--mg-card-background);border-radius:var(--mg-card-border-radius);box-shadow:var(--mg-card-shadow);display:inline-block;isolation:isolate;margin-bottom:var(--mg-spacing-100);padding:var(--mg-card-padding);position:relative}@media (prefers-reduced-motion:no-preference){.mg-card{transition:box-shadow var(--mg-motion-duration-fast) var(--mg-motion-easing-standard)}}.mg-card:hover{box-shadow:var(--mg-card-shadow-hover)}.mg-card__vc{align-content:flex-start;display:grid;gap:var(--mg-spacing-50)}.mg-card__vc .mg-card__visual{aspect-ratio:16/9;border-radius:calc(var(--mg-card-border-radius)/2);outline:1px solid rgb(var(--mg-color-neutral-900)/.1);overflow:hidden}.mg-card__vc:not(.mg-card__book) .mg-card__image{block-size:100%;inline-size:100%}.mg-card__vc:not(.mg-card__book){block-size:100%;display:flex;flex-direction:column}.mg-card__vc:not(.mg-card__book)>.mg-card__visual{flex-shrink:0}.mg-card__vc:not(.mg-card__book)>.mg-card__content{display:flex;flex:1;flex-direction:column}.mg-card__vc:not(.mg-card__book)>.mg-card__content>.mg-button:last-child{align-self:flex-start;margin-block-start:auto}@media (prefers-reduced-motion:no-preference){.mg-card__vc .mg-card__image{transition:opacity var(--mg-motion-duration-medium) var(--mg-motion-easing-standard),transform var(--mg-motion-duration-medium) var(--mg-motion-easing-standard)}}.mg-card__vc:hover .mg-card__image{opacity:.78}@media (prefers-reduced-motion:no-preference){.mg-card__vc:hover .mg-card__image{transform:scale(1.04)}}.mg-card__hc{color:rgb(var(--mg-color-neutral-800));display:grid;gap:var(--mg-spacing-100);grid-template-columns:1fr}.mg-card__hc .mg-card__content{grid-column:1/3;grid-row:2/3}.mg-card__hc .mg-card__content:only-child{grid-column:1/-1}@media (min-width:480px){.mg-card__hc .mg-card__content{grid-column:2/4;grid-row:1/2}}.mg-card__hc:has(.mg-card__visual){grid-template-rows:300px 1fr auto}@media (min-width:480px){.mg-card__hc:has(.mg-card__visual){grid-template-columns:160px 1fr;grid-template-rows:1fr auto}}@media (min-width:900px){.mg-card__hc:has(.mg-card__visual){grid-template-columns:330px 1fr}}.mg-card__hc:not(.mg-card-book__hc) .mg-card__image{block-size:100%}.mg-card__hc:not(.mg-card-book__hc) .mg-card__visual{border-radius:calc(var(--mg-card-border-radius)/2);outline:1px solid rgb(var(--mg-color-neutral-900)/.1);overflow:hidden}@media (prefers-reduced-motion:no-preference){.mg-card__hc:not(.mg-card-book__hc) .mg-card__image{transition:opacity var(--mg-motion-duration-medium) var(--mg-motion-easing-standard),transform var(--mg-motion-duration-medium) var(--mg-motion-easing-standard)}}.mg-card__hc:not(.mg-card-book__hc):hover .mg-card__image{opacity:.78}@media (prefers-reduced-motion:no-preference){.mg-card__hc:not(.mg-card-book__hc):hover .mg-card__image{transform:scale(1.04)}}.mg-card__hc.mg-card-book__hc .mg-card__visual{align-self:flex-start;border:1px solid rgb(var(--mg-color-neutral-600)/.2);max-width:200px;overflow:hidden}@media (min-width:480px){.mg-card__hc.mg-card-book__hc .mg-card__visual{max-width:unset}}.mg-card__hc.mg-card-book__hc:has(.mg-card__visual){gap:0 var(--mg-spacing-100);grid-template-rows:unset}@media (min-width:480px){.mg-card__hc.mg-card-book__hc:has(.mg-card__visual){grid-template-columns:160px 1fr;grid-template-rows:1fr auto}}.mg-card__visual{align-items:flex-end;display:flex;justify-content:flex-end}.mg-card__image{align-self:flex-start;object-fit:cover;width:100%}.mg-card__label{cursor:pointer;display:inline-block;font-size:var(--mg-font-size-250);margin-inline-end:var(--mg-spacing-50)}.mg-card__label,.mg-card__label:hover{color:rgb(var(--mg-color-tag))}.mg-card__title{font-family:var(--mg-font-family-ui);font-size:var(--mg-font-size-500);font-weight:700;line-height:var(--mg-font-line-height-500);padding-bottom:var(--mg-spacing-75);padding-top:var(--mg-spacing-100);text-wrap:balance}.mg-card__title a{color:rgb(var(--mg-color-interactive));cursor:pointer;display:inline;text-decoration:underline;text-underline-offset:3px}.mg-card__title .active{background:rgb(var(--mg-color-neutral-50));font-weight:700}.mg-card__title a:before{bottom:0;content:"";left:0;position:absolute;right:0;top:0;z-index:1}.mg-card__title a:after{border-color:currentcolor;border-style:solid;border-width:.15em .15em 0 0;content:"";display:inline-block;height:.35em;margin-inline-start:.25em;position:relative;top:-.1em;transform:rotate(45deg);translate:0 0;vertical-align:middle;width:.35em}@media (prefers-reduced-motion:no-preference){.mg-card__title a:after{transition:translate .2s ease}}.mg-card__title a:focus-visible{box-shadow:0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-color-neutral-0));outline:var(--mg-focus-ring-width) solid rgb(var(--mg-color-focus-ring));outline-offset:var(--mg-focus-ring-offset)}.mg-card:hover .mg-card__title a{text-decoration-thickness:2px}@media (prefers-reduced-motion:no-preference){.mg-card:hover .mg-card__title a:after{translate:.15em 0}}[dir=rtl] .mg-card__title a:after{transform:rotate(225deg)}@media (prefers-reduced-motion:no-preference){[dir=rtl] .mg-card:hover .mg-card__title a:after{translate:-.15em 0}}.mg-card--secondary .mg-card__title a{color:rgb(var(--mg-color-interactive))}.mg-card--tertiary .mg-card__title a{color:rgb(var(--mg-color-tertiary))}.mg-card--quaternary .mg-card__title a{color:rgb(var(--mg-color-quaternary))}.mg-card--secondary{border-inline-start:.25rem solid rgb(var(--mg-color-secondary))}.mg-card.mg-card--plain-title .mg-card__title a{color:rgb(var(--mg-color-text));text-decoration:none}.mg-card.mg-card--plain-title .mg-card__title a:after{content:none}.mg-card__title a:not([href]),.mg-card__title a[href=""]{color:rgb(var(--mg-color-text));cursor:default;pointer-events:none;text-decoration:none}.mg-card__title a:not([href]):after,.mg-card__title a:not([href]):before,.mg-card__title a[href=""]:after,.mg-card__title a[href=""]:before{content:none}span.mg-card__label{cursor:auto}.mg-card.mg-card--no-link:hover,.mg-card:has(.mg-card__title a:not([href])):hover,.mg-card:has(.mg-card__title a[href=""]):hover{box-shadow:var(--mg-card-shadow)}.mg-card.mg-card--no-link:hover .mg-card__image,.mg-card:has(.mg-card__title a:not([href])):hover .mg-card__image,.mg-card:has(.mg-card__title a[href=""]):hover .mg-card__image{opacity:1}@media (prefers-reduced-motion:no-preference){.mg-card.mg-card--no-link:hover .mg-card__image,.mg-card:has(.mg-card__title a:not([href])):hover .mg-card__image,.mg-card:has(.mg-card__title a[href=""]):hover .mg-card__image{transform:none}}.mg-card__summary{padding-bottom:var(--mg-spacing-50);text-wrap:pretty}.mg-card__summary a:not(.mg-button),.mg-card__text-link:not(.mg-button){color:rgb(var(--mg-color-interactive));text-decoration:underline;text-underline-offset:.15em}.mg-card .mg-button,.mg-card__label,.mg-card__summary a,.mg-card__text-link{position:relative;z-index:2}.mg-card__label{font-family:var(--mg-font-family-ui);font-weight:700}.mg-card__summary a:not(.mg-button):hover,.mg-card__text-link:not(.mg-button):hover{text-decoration-thickness:2px}.mg-card__book{max-width:200px}.mg-card__book .mg-card__visual{aspect-ratio:3/4;border:1px solid rgb(var(--mg-color-neutral-600)/.2)}.mg-card__book .mg-card__title{font-size:var(--mg-font-size-300);padding-top:var(--mg-spacing-25)}@media (min-width:1164px){.mg-card__book{max-width:400px}}.mg-card__icon{align-items:flex-start;display:flex;flex-direction:column;gap:var(--mg-spacing-100);max-width:300px}@media (min-width:480px){.mg-card__icon{max-width:400px}}@media (min-width:1164px){.mg-card__icon{max-width:500px}}.mg-card__icon .mg-card__visual-label{color:rgb(var(--mg-color-tag));font-size:var(--mg-font-size-250);font-weight:700;width:100%}.mg-card__icon .mg-card__visual{align-items:flex-start;aspect-ratio:3/2;container-type:inline-size;display:flex;flex-direction:column;flex-shrink:0;justify-content:flex-start;overflow:visible;width:100%}.mg-card__icon .mg-card__visual:has(.mg-card__icon-wrap--small),.mg-card__icon .mg-card__visual:has(.mg-card__image--small){aspect-ratio:5/1}.mg-card__icon .mg-card__visual:has(.mg-card__icon-wrap--medium),.mg-card__icon .mg-card__visual:has(.mg-card__image--medium){aspect-ratio:3/1}.mg-card__icon .mg-card__visual:has(.mg-card__icon-wrap--large),.mg-card__icon .mg-card__visual:has(.mg-card__image--large){aspect-ratio:2/1}.mg-card__icon .mg-card__visual:has(.mg-card__icon-wrap--full),.mg-card__icon .mg-card__visual:has(.mg-card__image--full){aspect-ratio:1/1}.mg-card__icon .mg-card__visual:has(.mg-card__icon-wrap--colored){aspect-ratio:auto}.mg-card__icon .mg-card__image{height:auto;max-width:100%;object-fit:contain}.mg-card__icon .mg-card__image--small{height:auto;min-width:72px;width:72px}.mg-card__icon .mg-card__image--medium{height:auto;min-width:50%;width:50%}.mg-card__icon .mg-card__image--large{height:auto;min-width:75%;width:75%}.mg-card__icon .mg-card__image--full{height:auto;min-width:100%;width:100%}.mg-card__icon .mg-card__icon-wrap{align-items:center;color:rgb(var(--mg-color-interactive));display:flex;justify-content:flex-start;line-height:1}.mg-card__icon .mg-card__icon-wrap i,.mg-card__icon .mg-card__icon-wrap span{display:block;font-size:inherit}.mg-card__icon .mg-card__icon-wrap--small .mg-icon{font-size:58px;min-width:72px;width:72px}.mg-card__icon .mg-card__icon-wrap--medium .mg-icon{font-size:50cqi}.mg-card__icon .mg-card__icon-wrap--large .mg-icon{font-size:80cqi}.mg-card__icon .mg-card__icon-wrap--full .mg-icon{font-size:100cqi}.mg-card__icon .mg-card__icon-wrap .mg-icon{margin:0 auto}.mg-card__icon .mg-card__icon-wrap--colored{align-items:center;aspect-ratio:1;background-color:var(--mg-icon-bg);border-radius:var(--mg-card-icon-badge-radius);display:flex;justify-content:center;min-width:72px;width:72px}.mg-card__icon .mg-card__icon-wrap--colored .mg-icon{color:var(--mg-icon-fg,rgb(var(--mg-color-neutral-700)));font-size:32px}.mg-card__icon .mg-card__visual-link{display:block;transition:opacity .2s ease;width:100%}.mg-card__icon .mg-card__visual-link:after{content:"";inset:0;position:absolute;z-index:1}.mg-card__icon .mg-card__visual-link:hover{opacity:.75;text-decoration:none}.mg-card__icon .mg-card__visual-link:focus-visible{outline:none}.mg-card__icon .mg-card__visual-link:focus-visible:after{box-shadow:0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-color-neutral-0));outline:var(--mg-focus-ring-width) solid rgb(var(--mg-color-focus-ring));outline-offset:var(--mg-focus-ring-offset)}.mg-card__icon .mg-card__content{display:flex;flex:1;flex-direction:column}.mg-card__icon .mg-card__title{font-size:var(--mg-font-size-500);font-weight:700;line-height:var(--mg-font-line-height-500);margin:0;padding-top:0}.mg-card__icon .mg-card__title a{color:rgb(var(--mg-color-interactive));text-decoration:underline;text-underline-offset:3px}.mg-card__icon .mg-card__title a:hover{text-decoration-thickness:2px}.mg-card__icon .mg-card__title a:focus-visible{box-shadow:0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-color-neutral-0));outline:var(--mg-focus-ring-width) solid rgb(var(--mg-color-focus-ring));outline-offset:var(--mg-focus-ring-offset)}.mg-card__icon .mg-card__cta{margin-top:auto;padding-top:var(--mg-spacing-100)}.mg-card__icon .mg-card__link{margin-bottom:0;margin-top:auto;padding-top:var(--mg-spacing-75)}.mg-card__icon .mg-card__link a{color:rgb(var(--mg-color-interactive));position:relative;text-decoration:none;z-index:2}.mg-card__icon .mg-card__link a:hover{text-decoration:underline}.mg-card__icon .mg-card__link a:focus-visible{box-shadow:0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-color-neutral-0));outline:var(--mg-focus-ring-width) solid rgb(var(--mg-color-focus-ring));outline-offset:var(--mg-focus-ring-offset)}.mg-card__icon--bordered{border:2px solid var(--mg-card-border,rgb(var(--mg-color-interactive)));padding:max(var(--mg-card-padding),var(--mg-spacing-150))}.mg-card__icon--centered{align-items:center;text-align:center}.mg-card__icon--centered .mg-card__visual{align-items:center;justify-content:center}.mg-card__icon--centered .mg-card__icon-wrap{justify-content:center}.mg-card__icon--centered .mg-card__content{align-items:center}.mg-card__icon--horizontal{align-items:start;column-gap:var(--mg-spacing-200);display:grid;grid-template-columns:auto minmax(0,1fr);max-width:none}.mg-card__icon--horizontal .mg-card__visual{align-items:center;aspect-ratio:auto;block-size:var(--mg-card-icon-size,3rem);inline-size:var(--mg-card-icon-size,3rem);justify-content:center}.mg-card__icon--horizontal .mg-card__icon-wrap{justify-content:center}.mg-card__icon--horizontal .mg-card__icon-wrap .mg-icon,.mg-card__icon--horizontal .mg-card__image{font-size:var(--mg-card-icon-size,3rem);inline-size:var(--mg-card-icon-size,3rem);min-inline-size:0}.mg-card__icon--horizontal .mg-card__content{min-inline-size:0}.mg-card__icon--negative .mg-card__icon-wrap{color:rgb(var(--mg-color-white))}.mg-card__icon--negative .mg-card__label{color:rgb(var(--mg-color-neutral-0)/.8)}.mg-card__icon--negative .mg-card__title,.mg-card__icon--negative .mg-card__title a{color:rgb(var(--mg-color-white))}.mg-card__icon--negative .mg-card__summary{color:rgb(var(--mg-color-neutral-0)/.8)}.mg-card__icon--negative .mg-card__link a{color:rgb(var(--mg-color-white))}.mg-card__icon--negative .mg-card__link a:focus-visible{outline-color:rgb(var(--mg-color-focus-ring-inverse))}[dir=rtl] .mg-card__icon--centered{text-align:center}[dir=rtl] .mg-card__icon--centered .mg-card__visual{align-items:center;justify-content:center}[dir=rtl] .mg-card__icon--centered .mg-card__content{align-items:center}
|
|
1064
|
+
/* content-card start */.mg-card{background:var(--mg-card-background);border-radius:var(--mg-card-border-radius);box-shadow:var(--mg-card-shadow);display:inline-block;isolation:isolate;margin-bottom:var(--mg-spacing-100);padding:var(--mg-card-padding);position:relative}@media (prefers-reduced-motion:no-preference){.mg-card{transition:box-shadow var(--mg-motion-duration-fast) var(--mg-motion-easing-standard)}}.mg-card:hover{box-shadow:var(--mg-card-shadow-hover)}.mg-card__vc{align-content:flex-start;display:grid;gap:var(--mg-spacing-50)}.mg-card__vc .mg-card__visual{aspect-ratio:16/9;border-radius:calc(var(--mg-card-border-radius)/2);outline:1px solid rgb(var(--mg-color-neutral-900)/.1);overflow:hidden}.mg-card__vc:not(.mg-card__book) .mg-card__image{block-size:100%;inline-size:100%}.mg-card__vc:not(.mg-card__book){block-size:100%;display:flex;flex-direction:column}.mg-card__vc:not(.mg-card__book)>.mg-card__visual{flex-shrink:0}.mg-card__vc:not(.mg-card__book)>.mg-card__content{display:flex;flex:1;flex-direction:column}.mg-card__vc:not(.mg-card__book)>.mg-card__content>.mg-button:last-child{align-self:flex-start;margin-block-start:auto}@media (prefers-reduced-motion:no-preference){.mg-card__vc .mg-card__image{transition:opacity var(--mg-motion-duration-medium) var(--mg-motion-easing-standard),transform var(--mg-motion-duration-medium) var(--mg-motion-easing-standard)}}.mg-card__vc:hover .mg-card__image{opacity:.78}@media (prefers-reduced-motion:no-preference){.mg-card__vc:hover .mg-card__image{transform:scale(1.04)}}.mg-card__hc{color:rgb(var(--mg-color-neutral-800));display:grid;gap:var(--mg-spacing-100);grid-template-columns:1fr}.mg-card__hc .mg-card__content{grid-column:1/3;grid-row:2/3}.mg-card__hc .mg-card__content:only-child{grid-column:1/-1}@media (min-width:480px){.mg-card__hc .mg-card__content{grid-column:2/4;grid-row:1/2}}.mg-card__hc:has(.mg-card__visual){grid-template-rows:300px 1fr auto}@media (min-width:480px){.mg-card__hc:has(.mg-card__visual){grid-template-columns:160px 1fr;grid-template-rows:1fr auto}}@media (min-width:900px){.mg-card__hc:has(.mg-card__visual){grid-template-columns:330px 1fr}}.mg-card__hc:not(.mg-card-book__hc) .mg-card__image{block-size:100%}.mg-card__hc:not(.mg-card-book__hc) .mg-card__visual{border-radius:calc(var(--mg-card-border-radius)/2);outline:1px solid rgb(var(--mg-color-neutral-900)/.1);overflow:hidden}@media (prefers-reduced-motion:no-preference){.mg-card__hc:not(.mg-card-book__hc) .mg-card__image{transition:opacity var(--mg-motion-duration-medium) var(--mg-motion-easing-standard),transform var(--mg-motion-duration-medium) var(--mg-motion-easing-standard)}}.mg-card__hc:not(.mg-card-book__hc):hover .mg-card__image{opacity:.78}@media (prefers-reduced-motion:no-preference){.mg-card__hc:not(.mg-card-book__hc):hover .mg-card__image{transform:scale(1.04)}}.mg-card__hc.mg-card-book__hc .mg-card__visual{align-self:flex-start;border:1px solid rgb(var(--mg-color-neutral-600)/.2);max-width:200px;overflow:hidden}@media (min-width:480px){.mg-card__hc.mg-card-book__hc .mg-card__visual{max-width:unset}}.mg-card__hc.mg-card-book__hc:has(.mg-card__visual){gap:0 var(--mg-spacing-100);grid-template-rows:unset}@media (min-width:480px){.mg-card__hc.mg-card-book__hc:has(.mg-card__visual){grid-template-columns:160px 1fr;grid-template-rows:1fr auto}}.mg-card__visual{align-items:flex-end;display:flex;justify-content:flex-end}.mg-card__image{align-self:flex-start;object-fit:cover;width:100%}.mg-card__label{cursor:pointer;display:inline-block;font-size:var(--mg-font-size-250);margin-inline-end:var(--mg-spacing-50)}.mg-card__label,.mg-card__label:hover{color:rgb(var(--mg-color-tag))}.mg-card__title{font-family:var(--mg-font-family-ui);font-size:var(--mg-font-size-500);font-weight:700;line-height:var(--mg-font-line-height-500);padding-bottom:var(--mg-spacing-75);padding-top:var(--mg-spacing-100);text-wrap:balance}.mg-card__title a{color:rgb(var(--mg-color-interactive));cursor:pointer;display:inline;text-decoration:underline;text-underline-offset:3px}.mg-card__title .active{background:rgb(var(--mg-color-neutral-50));font-weight:700}.mg-card__title a:before{bottom:0;content:"";left:0;position:absolute;right:0;top:0;z-index:1}.mg-card__title a:after{border-color:currentcolor;border-style:solid;border-width:.15em .15em 0 0;content:"";display:inline-block;height:.35em;margin-inline-start:.25em;position:relative;top:-.1em;transform:rotate(45deg);translate:0 0;vertical-align:middle;width:.35em}@media (prefers-reduced-motion:no-preference){.mg-card__title a:after{transition:translate var(--mg-motion-duration-fast) var(--mg-motion-easing-standard)}}.mg-card__title a:focus-visible{box-shadow:0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-color-neutral-0));outline:var(--mg-focus-ring-width) solid rgb(var(--mg-color-focus-ring));outline-offset:var(--mg-focus-ring-offset)}.mg-card:hover .mg-card__title a{text-decoration-thickness:2px}@media (prefers-reduced-motion:no-preference){.mg-card:hover .mg-card__title a:after{translate:.15em 0}}[dir=rtl] .mg-card__title a:after{transform:rotate(225deg)}@media (prefers-reduced-motion:no-preference){[dir=rtl] .mg-card:hover .mg-card__title a:after{translate:-.15em 0}}.mg-card--secondary .mg-card__title a{color:rgb(var(--mg-color-interactive))}.mg-card--tertiary .mg-card__title a{color:rgb(var(--mg-color-tertiary))}.mg-card--quaternary .mg-card__title a{color:rgb(var(--mg-color-quaternary))}.mg-card--secondary{border-inline-start:.25rem solid rgb(var(--mg-color-secondary))}.mg-card.mg-card--plain-title .mg-card__title a{color:rgb(var(--mg-color-text));text-decoration:none}.mg-card.mg-card--plain-title .mg-card__title a:after{content:none}.mg-card__title a:not([href]),.mg-card__title a[href=""]{color:rgb(var(--mg-color-text));cursor:default;pointer-events:none;text-decoration:none}.mg-card__title a:not([href]):after,.mg-card__title a:not([href]):before,.mg-card__title a[href=""]:after,.mg-card__title a[href=""]:before{content:none}span.mg-card__label{cursor:auto}.mg-card.mg-card--no-link:hover,.mg-card:has(.mg-card__title a:not([href])):hover,.mg-card:has(.mg-card__title a[href=""]):hover{box-shadow:var(--mg-card-shadow)}.mg-card.mg-card--no-link:hover .mg-card__image,.mg-card:has(.mg-card__title a:not([href])):hover .mg-card__image,.mg-card:has(.mg-card__title a[href=""]):hover .mg-card__image{opacity:1}@media (prefers-reduced-motion:no-preference){.mg-card.mg-card--no-link:hover .mg-card__image,.mg-card:has(.mg-card__title a:not([href])):hover .mg-card__image,.mg-card:has(.mg-card__title a[href=""]):hover .mg-card__image{transform:none}}.mg-card__summary{padding-bottom:var(--mg-spacing-50);text-wrap:pretty}.mg-card__summary a:not(.mg-button),.mg-card__text-link:not(.mg-button){color:rgb(var(--mg-color-interactive));text-decoration:underline;text-underline-offset:.15em}.mg-card .mg-button,.mg-card__label,.mg-card__summary a,.mg-card__text-link{position:relative;z-index:2}.mg-card__label{font-family:var(--mg-font-family-ui);font-weight:700}.mg-card__summary a:not(.mg-button):hover,.mg-card__text-link:not(.mg-button):hover{text-decoration-thickness:2px}.mg-card__book{max-width:200px}.mg-card__book .mg-card__visual{aspect-ratio:3/4;border:1px solid rgb(var(--mg-color-neutral-600)/.2)}.mg-card__book .mg-card__title{font-size:var(--mg-font-size-300);padding-top:var(--mg-spacing-25)}@media (min-width:1164px){.mg-card__book{max-width:400px}}.mg-card__icon{align-items:flex-start;display:flex;flex-direction:column;gap:var(--mg-spacing-100);max-width:300px}@media (min-width:480px){.mg-card__icon{max-width:400px}}@media (min-width:1164px){.mg-card__icon{max-width:500px}}.mg-card__icon .mg-card__visual-label{color:rgb(var(--mg-color-tag));font-size:var(--mg-font-size-250);font-weight:700;width:100%}.mg-card__icon .mg-card__visual{align-items:flex-start;aspect-ratio:3/2;container-type:inline-size;display:flex;flex-direction:column;flex-shrink:0;justify-content:flex-start;overflow:visible;width:100%}.mg-card__icon .mg-card__visual:has(.mg-card__icon-wrap--small),.mg-card__icon .mg-card__visual:has(.mg-card__image--small){aspect-ratio:5/1}.mg-card__icon .mg-card__visual:has(.mg-card__icon-wrap--medium),.mg-card__icon .mg-card__visual:has(.mg-card__image--medium){aspect-ratio:3/1}.mg-card__icon .mg-card__visual:has(.mg-card__icon-wrap--large),.mg-card__icon .mg-card__visual:has(.mg-card__image--large){aspect-ratio:2/1}.mg-card__icon .mg-card__visual:has(.mg-card__icon-wrap--full),.mg-card__icon .mg-card__visual:has(.mg-card__image--full){aspect-ratio:1/1}.mg-card__icon .mg-card__visual:has(.mg-card__icon-wrap--colored){aspect-ratio:auto}.mg-card__icon .mg-card__image{height:auto;max-width:100%;object-fit:contain}.mg-card__icon .mg-card__image--small{height:auto;min-width:72px;width:72px}.mg-card__icon .mg-card__image--medium{height:auto;min-width:50%;width:50%}.mg-card__icon .mg-card__image--large{height:auto;min-width:75%;width:75%}.mg-card__icon .mg-card__image--full{height:auto;min-width:100%;width:100%}.mg-card__icon .mg-card__icon-wrap{align-items:center;color:rgb(var(--mg-color-interactive));display:flex;justify-content:flex-start;line-height:1}.mg-card__icon .mg-card__icon-wrap i,.mg-card__icon .mg-card__icon-wrap span{display:block;font-size:inherit}.mg-card__icon .mg-card__icon-wrap--small .mg-icon{font-size:58px;min-width:72px;width:72px}.mg-card__icon .mg-card__icon-wrap--medium .mg-icon{font-size:50cqi}.mg-card__icon .mg-card__icon-wrap--large .mg-icon{font-size:80cqi}.mg-card__icon .mg-card__icon-wrap--full .mg-icon{font-size:100cqi}.mg-card__icon .mg-card__icon-wrap .mg-icon{margin:0 auto}.mg-card__icon .mg-card__icon-wrap--colored{align-items:center;aspect-ratio:1;background-color:var(--mg-icon-bg);border-radius:var(--mg-card-icon-badge-radius);display:flex;justify-content:center;min-width:72px;width:72px}.mg-card__icon .mg-card__icon-wrap--colored .mg-icon{color:var(--mg-icon-fg,rgb(var(--mg-color-neutral-700)));font-size:32px}.mg-card__icon .mg-card__visual-link{display:block}@media (prefers-reduced-motion:no-preference){.mg-card__icon .mg-card__visual-link{transition:opacity var(--mg-motion-duration-fast) var(--mg-motion-easing-standard)}}.mg-card__icon .mg-card__visual-link{width:100%}.mg-card__icon .mg-card__visual-link:after{content:"";inset:0;position:absolute;z-index:1}.mg-card__icon .mg-card__visual-link:hover{opacity:.75;text-decoration:none}.mg-card__icon .mg-card__visual-link:focus-visible{outline:none}.mg-card__icon .mg-card__visual-link:focus-visible:after{box-shadow:0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-color-neutral-0));outline:var(--mg-focus-ring-width) solid rgb(var(--mg-color-focus-ring));outline-offset:var(--mg-focus-ring-offset)}.mg-card__icon .mg-card__content{display:flex;flex:1;flex-direction:column}.mg-card__icon .mg-card__title{font-size:var(--mg-font-size-500);font-weight:700;line-height:var(--mg-font-line-height-500);margin:0;padding-top:0}.mg-card__icon .mg-card__title a{color:rgb(var(--mg-color-interactive));text-decoration:underline;text-underline-offset:3px}.mg-card__icon .mg-card__title a:hover{text-decoration-thickness:2px}.mg-card__icon .mg-card__title a:focus-visible{box-shadow:0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-color-neutral-0));outline:var(--mg-focus-ring-width) solid rgb(var(--mg-color-focus-ring));outline-offset:var(--mg-focus-ring-offset)}.mg-card__icon .mg-card__cta{margin-top:auto;padding-top:var(--mg-spacing-100)}.mg-card__icon .mg-card__link{margin-bottom:0;margin-top:auto;padding-top:var(--mg-spacing-75)}.mg-card__icon .mg-card__link a{color:rgb(var(--mg-color-interactive));position:relative;text-decoration:none;z-index:2}.mg-card__icon .mg-card__link a:hover{text-decoration:underline}.mg-card__icon .mg-card__link a:focus-visible{box-shadow:0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-color-neutral-0));outline:var(--mg-focus-ring-width) solid rgb(var(--mg-color-focus-ring));outline-offset:var(--mg-focus-ring-offset)}.mg-card__icon--bordered{border:2px solid var(--mg-card-border,rgb(var(--mg-color-interactive)));padding:max(var(--mg-card-padding),var(--mg-spacing-150))}.mg-card__icon--centered{align-items:center;text-align:center}.mg-card__icon--centered .mg-card__visual{align-items:center;justify-content:center}.mg-card__icon--centered .mg-card__icon-wrap{justify-content:center}.mg-card__icon--centered .mg-card__content{align-items:center}.mg-card__icon--horizontal{align-items:start;column-gap:var(--mg-spacing-200);display:grid;grid-template-columns:auto minmax(0,1fr);max-width:none}.mg-card__icon--horizontal .mg-card__visual{align-items:center;aspect-ratio:auto;block-size:var(--mg-card-icon-size,3rem);inline-size:var(--mg-card-icon-size,3rem);justify-content:center}.mg-card__icon--horizontal .mg-card__icon-wrap{justify-content:center}.mg-card__icon--horizontal .mg-card__icon-wrap .mg-icon,.mg-card__icon--horizontal .mg-card__image{font-size:var(--mg-card-icon-size,3rem);inline-size:var(--mg-card-icon-size,3rem);min-inline-size:0}.mg-card__icon--horizontal .mg-card__content{min-inline-size:0}.mg-card__icon--negative .mg-card__icon-wrap{color:rgb(var(--mg-color-white))}.mg-card__icon--negative .mg-card__label{color:rgb(var(--mg-color-neutral-0)/.8)}.mg-card__icon--negative .mg-card__title,.mg-card__icon--negative .mg-card__title a{color:rgb(var(--mg-color-white))}.mg-card__icon--negative .mg-card__summary{color:rgb(var(--mg-color-neutral-0)/.8)}.mg-card__icon--negative .mg-card__link a{color:rgb(var(--mg-color-white))}.mg-card__icon--negative .mg-card__link a:focus-visible{outline-color:rgb(var(--mg-color-focus-ring-inverse))}[dir=rtl] .mg-card__icon--centered{text-align:center}[dir=rtl] .mg-card__icon--centered .mg-card__visual{align-items:center;justify-content:center}[dir=rtl] .mg-card__icon--centered .mg-card__content{align-items:center}
|
|
1066
1065
|
|
|
1067
1066
|
/* content-card end */
|
|
1068
1067
|
/**
|
|
@@ -1071,7 +1070,7 @@
|
|
|
1071
1070
|
* Key metric and statistical callout card with large numeral display and descriptive labels.
|
|
1072
1071
|
*
|
|
1073
1072
|
* Full documentation:
|
|
1074
|
-
* https://github.com/
|
|
1073
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/Cards/StatsCard/StatsCard.mdx
|
|
1075
1074
|
*/
|
|
1076
1075
|
/* Stats Card Component */.mg-stats-card{width:100%}
|
|
1077
1076
|
|
|
@@ -1080,7 +1079,7 @@
|
|
|
1080
1079
|
/* medium design */}@media (width >= 48em){.mg-stats-card-item__value{font-size:var(--mg-font-size-800)}}.mg-stats-card-item__value{
|
|
1081
1080
|
/* small design */}@media (width <= 47.9375em){.mg-stats-card-item__value{font-size:var(--mg-font-size-600)}}.mg-stats-card-item a.mg-stats-card-item__value:after{content:"";inset:0;position:absolute;z-index:1}.mg-stats-card-item a.mg-stats-card-item__value:focus-visible{outline:none}.mg-stats-card-item a.mg-stats-card-item__value:focus-visible:after{box-shadow:0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-color-neutral-0));outline:var(--mg-focus-ring-width) solid rgb(var(--mg-color-focus-ring));outline-offset:var(--mg-focus-ring-offset)}.mg-stats-card-item__bottom-label{color:rgb(var(--mg-color-text));font-family:var(--mg-font-family-ui);font-size:var(--mg-font-size-500);font-weight:600;line-height:1.3;margin-bottom:var(--mg-spacing-50)
|
|
1082
1081
|
/* small design */}@media (width <= 47.9375em){.mg-stats-card-item__bottom-label{font-size:var(--mg-font-size-400)}}.mg-stats-card-item__summary{color:rgb(var(--mg-color-neutral-800));font-size:var(--mg-font-size-400);line-height:1.5}.mg-stats-card-item__summary p{margin:0}.mg-stats-card-item__summary{
|
|
1083
|
-
/* small design */}@media (width <= 47.9375em){.mg-stats-card-item__summary{font-size:var(--mg-font-size-300)}}.mg-stats-card-item__summary a{color:rgb(var(--mg-color-interactive));position:relative;text-decoration:underline;transition:opacity
|
|
1082
|
+
/* small design */}@media (width <= 47.9375em){.mg-stats-card-item__summary{font-size:var(--mg-font-size-300)}}.mg-stats-card-item__summary a{color:rgb(var(--mg-color-interactive));position:relative;text-decoration:underline;transition:opacity var(--mg-motion-duration-fast) var(--mg-motion-easing-standard);z-index:2}.mg-stats-card-item__summary a:hover{opacity:.7}.mg-stats-card-item__summary a:focus{box-shadow:0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-color-neutral-0));outline:var(--mg-focus-ring-width) solid rgb(var(--mg-color-focus-ring));outline-offset:var(--mg-focus-ring-offset)}.mg-stats-card-item--linked{cursor:pointer}
|
|
1084
1083
|
|
|
1085
1084
|
/* Variant: Compact */.mg-stats-card--compact .mg-stats-card-item{padding:var(--mg-spacing-300)
|
|
1086
1085
|
/* small design */}@media (width <= 47.9375em){.mg-stats-card--compact .mg-stats-card-item{padding:var(--mg-spacing-200)}}.mg-stats-card--compact .mg-stats-card-item__value{font-size:var(--mg-font-size-800)
|
|
@@ -1092,7 +1091,7 @@
|
|
|
1092
1091
|
|
|
1093
1092
|
/* Variant: Negative (for dark backgrounds) */.mg-stats-card--negative h2{color:rgb(var(--mg-color-white))}.mg-stats-card--negative .mg-stats-card-item{background-color:transparent;border-color:rgb(var(--mg-color-neutral-0)/.5);border-width:2px}.mg-stats-card--negative .mg-stats-card-item__icon{color:rgb(var(--mg-color-white))}.mg-stats-card--negative .mg-stats-card-item__label{color:rgb(var(--mg-color-neutral-0)/.8)}.mg-stats-card--negative .mg-stats-card-item__bottom-label,.mg-stats-card--negative .mg-stats-card-item__value{color:rgb(var(--mg-color-white))}.mg-stats-card--negative .mg-stats-card-item__summary{color:rgb(var(--mg-color-neutral-0)/.8)}.mg-stats-card--negative .mg-stats-card-item__summary a{color:rgb(var(--mg-color-white))}.mg-stats-card--negative .mg-stats-card-item__summary a:focus{outline-color:rgb(var(--mg-color-focus-ring-inverse))}.mg-stats-card--negative .mg-stats-card-item a.mg-stats-card-item__value:focus-visible:after{outline-color:rgb(var(--mg-color-focus-ring-inverse))}
|
|
1094
1093
|
|
|
1095
|
-
/* RTL support is automatic: the highlighted accent uses `border-inline-start`.
|
|
1094
|
+
/* RTL support is automatic: the highlighted accent uses `border-inline-start`. */@media (prefers-reduced-motion:reduce){.mg-stats-card-item__summary a{transition:none}}
|
|
1096
1095
|
/**
|
|
1097
1096
|
* Snackbar / Toast
|
|
1098
1097
|
*
|
|
@@ -1100,7 +1099,7 @@
|
|
|
1100
1099
|
* The toast body is a Notice (.mg-notice); this file only positions and animates it.
|
|
1101
1100
|
*
|
|
1102
1101
|
* Full documentation:
|
|
1103
|
-
* https://github.com/
|
|
1102
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/Snackbar/Snackbar.mdx
|
|
1104
1103
|
*/.mg-snackbar-wrapper{display:flex;justify-content:center;left:50%;max-width:600px;position:fixed;top:0;transform:translate(-50%,-300%);transition:transform var(--mg-motion-duration-fast) var(--mg-motion-easing-standard);width:calc(100% - var(--mg-spacing-400));z-index:var(--mg-z-index-toast)}.mg-snackbar-wrapper__open{transform:translate(-50%,var(--mg-spacing-100))}@media (max-width:480px){.mg-snackbar-wrapper{width:calc(100% - var(--mg-spacing-200))}}.mg-notice.mg-snackbar{background:linear-gradient(var(--mg-notice-bg),var(--mg-notice-bg)),rgb(var(--mg-color-neutral-0));box-shadow:0 4px 12px rgba(0,0,0,.2);width:100%}.mg-notice.mg-snackbar .mg-snackbar__message{flex:1;overflow-wrap:anywhere}
|
|
1105
1104
|
|
|
1106
1105
|
/**
|
|
@@ -1109,7 +1108,7 @@
|
|
|
1109
1108
|
* Fixed bottom GDPR/privacy compliance consent notice with accept/manage preference controls.
|
|
1110
1109
|
*
|
|
1111
1110
|
* Full documentation:
|
|
1112
|
-
* https://github.com/
|
|
1111
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/CookieConsentBanner/CookieConsentBanner.mdx
|
|
1113
1112
|
*/#cc-main{--cc-bg:var(--mg-surface-raised)!important;--cc-primary-color:rgb(var(--mg-color-text))!important;--cc-secondary-color:rgb(var(--mg-color-neutral-600))!important;--cc-btn-primary-bg:rgb(var(--mg-color-interactive))!important;--cc-btn-primary-color:rgb(var(--mg-color-neutral-0))!important;--cc-btn-primary-border-color:rgb(var(--mg-color-interactive))!important;--cc-btn-primary-hover-bg:rgb(var(--mg-color-interactive-active))!important;--cc-btn-primary-hover-color:rgb(var(--mg-color-neutral-0))!important;--cc-btn-secondary-bg:rgb(var(--mg-color-neutral-50))!important;--cc-btn-secondary-color:rgb(var(--mg-color-text))!important;--cc-btn-secondary-border-color:rgb(var(--mg-color-neutral-200))!important;--cc-btn-secondary-hover-bg:rgb(var(--mg-color-neutral-100))!important;--cc-btn-secondary-hover-color:rgb(var(--mg-color-text))!important;--cc-toggle-on-bg:rgb(var(--mg-color-interactive))!important;--cc-toggle-off-bg:rgb(var(--mg-color-neutral-400))!important;--cc-toggle-readonly-bg:rgb(var(--mg-color-neutral-200))!important;--cc-cookie-category-block-bg:rgb(var(--mg-color-neutral-50))!important;--cc-cookie-category-block-hover-bg:rgb(var(--mg-color-neutral-100))!important;--cc-section-border:rgb(var(--mg-color-neutral-200))!important;--cc-cookie-table-border:rgb(var(--mg-color-neutral-200))!important;--cc-separator-border-color:rgb(var(--mg-color-neutral-200))!important;--cc-overlay-bg:rgb(var(--mg-color-neutral-900)/0.82)!important;--cc-font-family:var(--mg-font-family-text)!important;--cc-modal-border-radius:var(--mg-card-border-radius)!important;--cc-btn-border-radius:var(--mg-radius-button)!important}#cc-main .cc__link,#cc-main a{color:rgb(var(--mg-color-interactive));text-decoration:underline;text-underline-offset:.16em}#cc-main .cc__link:hover,#cc-main a:hover{color:rgb(var(--mg-color-interactive-active))}#cc-main .c-bn,#cc-main .cm__btn,#cc-main .pm__btn{font-family:var(--mg-font-family-text);font-weight:600}@media (prefers-reduced-motion:no-preference){#cc-main .c-bn,#cc-main .cm__btn,#cc-main .pm__btn{transition:background-color var(--mg-motion-duration-fast) var(--mg-motion-easing-standard),border-color var(--mg-motion-duration-fast) var(--mg-motion-easing-standard),color var(--mg-motion-duration-fast) var(--mg-motion-easing-standard),scale var(--mg-motion-duration-fast) var(--mg-motion-easing-standard)}}#cc-main .c-bn:active,#cc-main .cm__btn:active,#cc-main .pm__btn:active{scale:.96}#cc-main .c-bn:focus-visible,#cc-main .cm__btn:focus-visible,#cc-main .pm__btn:focus-visible{box-shadow:0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-color-neutral-0));outline:var(--mg-focus-ring-width) solid rgb(var(--mg-color-focus-ring));outline-offset:var(--mg-focus-ring-offset)}#cc-main #cm.bar,#cc-main .cm--bar{border-block-start:1px solid rgb(var(--mg-color-neutral-600)/.2);box-shadow:0 -8px 24px rgb(var(--mg-color-neutral-900)/.08)}
|
|
1114
1113
|
|
|
1115
1114
|
/**
|
|
@@ -1118,8 +1117,8 @@
|
|
|
1118
1117
|
* Full-bleed and split-column hero banner featuring headline typography, background imagery, and CTAs.
|
|
1119
1118
|
*
|
|
1120
1119
|
* Full documentation:
|
|
1121
|
-
* https://github.com/
|
|
1122
|
-
*/.mg-hero{--mg-border-color-button-primary:rgb(var(--mg-color-neutral-0)/0.72);--mg-border-color-button-secondary:rgb(var(--mg-color-neutral-0)/0.72);--mg-hero-cta-color:var(--mg-color-hero);--mg-hero-gradient-color:var(--mg-color-hero);--mg-hero-gradient-start:var(--mg-hero-gradient-start-opacity);--mg-hero-gradient-middle:var(--mg-hero-gradient-middle-opacity);--mg-hero-gradient-end:var(--mg-hero-gradient-end-opacity);--mg-hero-scrim-color:var(--mg-color-neutral-900);--mg-hero-copy-inline-start:var(--mg-spacing-100);--mg-hero-banner-block-size:min(56vw,20rem);--mg-hero-copy-inline-end:min(100%,calc(var(--mg-hero-copy-inline-start) + var(--mg-hero-overlay-max-width)));background-position:50%;background-size:cover;color:rgb(var(--mg-color-neutral-0));display:grid;grid-template-columns:1fr;margin-inline-start:calc(50% - 50vw);padding-inline-start:var(--mg-hero-copy-inline-start);position:relative;width:100vw}.mg-hero:not(.mg-hero--split):before{background:linear-gradient(90deg,rgb(var(--mg-hero-scrim-color)/0) 0,rgb(var(--mg-hero-scrim-color)/var(--mg-hero-scrim-opacity)) 0,rgb(var(--mg-hero-scrim-color)/var(--mg-hero-scrim-opacity)) var(--mg-hero-copy-inline-end),rgb(var(--mg-hero-scrim-color)/0) calc(var(--mg-hero-copy-inline-end) + var(--mg-hero-scrim-fade))),linear-gradient(90deg,rgb(var(--mg-hero-gradient-color)/0) 0,rgb(var(--mg-hero-gradient-color)/var(--mg-hero-gradient-start)) 0,rgb(var(--mg-hero-gradient-color)/var(--mg-hero-gradient-middle)) var(--mg-hero-copy-inline-end),rgb(var(--mg-hero-gradient-color)/var(--mg-hero-gradient-end)) 100%);content:"";inset:0;pointer-events:none;position:absolute}@media (max-width:900px){.mg-hero:not(.mg-hero--split):before{--mg-hero-gradient-start:1;--mg-hero-gradient-middle:1;--mg-hero-gradient-end:1;background:linear-gradient(180deg,rgb(var(--mg-hero-scrim-color)/0) var(--mg-hero-banner-block-size),rgb(var(--mg-hero-scrim-color)/var(--mg-hero-scrim-opacity)) var(--mg-hero-banner-block-size),rgb(var(--mg-hero-scrim-color)/var(--mg-hero-scrim-opacity)) 100%,rgb(var(--mg-hero-scrim-color)/0) 100%),linear-gradient(180deg,rgb(var(--mg-hero-gradient-color)/0) var(--mg-hero-banner-block-size),rgb(var(--mg-hero-gradient-color)/var(--mg-hero-gradient-start)) var(--mg-hero-banner-block-size),rgb(var(--mg-hero-gradient-color)/var(--mg-hero-gradient-middle)) 100%,rgb(var(--mg-hero-gradient-color)/var(--mg-hero-gradient-end)) 100%)}.mg-hero:not(.mg-hero--split){aspect-ratio:auto;background-color:rgb(var(--mg-color-hero));background-size:0 0;padding-block-start:var(--mg-hero-banner-block-size)}.mg-hero:not(.mg-hero--split):after{background-image:inherit;background-position:50%;background-size:cover;block-size:var(--mg-hero-banner-block-size);content:"";inset-block-start:0;inset-inline:0;pointer-events:none;position:absolute}.mg-hero.mg-hero--no-image:not(.mg-hero--split){--mg-hero-banner-block-size:0px}}@media (min-width:900px){.mg-hero{aspect-ratio:16/4;--mg-hero-copy-inline-start:max(0px,calc(50vw - 582px))}}@media (min-width:1440px){.mg-hero{--mg-hero-copy-inline-start:max(0px,calc(50vw - 720px))}}.mg-hero--contained{--mg-hero-copy-inline-start:0px;margin-inline:0;padding-inline:0;width:100%}.mg-hero--immersive:not(.mg-hero--split){align-items:end;aspect-ratio:unset;min-height:clamp(31rem,62vw,43rem)}@media (max-width:900px){.mg-hero--immersive:not(.mg-hero--split){--mg-hero-banner-block-size:min(78vw,27.5rem);align-items:start;min-height:0}}.mg-hero--immersive:not(.mg-hero--split){--mg-hero-overlay-max-width:48rem}.mg-hero--immersive:not(.mg-hero--split) .mg-hero__overlay{align-items:end;margin:0;max-width:var(--mg-hero-overlay-max-width);padding:clamp(2rem,6vw,5rem)}.mg-hero--immersive:not(.mg-hero--split) .mg-hero__title{font-size:clamp(2.375rem,6vw,5rem);letter-spacing:-.045em;line-height:.98}.mg-hero--immersive:not(.mg-hero--split) .mg-hero__summaryText{font-size:clamp(1rem,1.8vw,1.3125rem);line-height:1.55;max-width:37rem}.mg-hero a.mg-button,.mg-hero a.mg-button:hover,.mg-hero a.mg-button:visited{color:rgb(var(--mg-color-hero))}.mg-hero a.mg-button-primary{background-color:rgb(var(--mg-color-neutral-0))}.mg-hero a.mg-button.mg-button-cta,.mg-hero a.mg-button.mg-button-cta:hover,.mg-hero a.mg-button.mg-button-cta:visited{background:transparent;border-color:transparent;color:rgb(var(--mg-color-neutral-0))}.mg-hero a.mg-button.mg-button-cta:after,.mg-hero a.mg-button.mg-button-cta:hover:after,.mg-hero a.mg-button.mg-button-cta:visited:after{background:rgb(var(--mg-color-neutral-0));color:rgb(var(--mg-hero-cta-color))}.mg-hero a.mg-button-secondary:not(.mg-button-cta),.mg-hero a.mg-button-secondary:not(.mg-button-cta):hover,.mg-hero a.mg-button-secondary:not(.mg-button-cta):visited{background-color:var(--mg-color-hero-button-secondary-background);border-color:rgb(var(--mg-border-color-hero-button-secondary));color:rgb(var(--mg-color-hero-button-secondary-color))}.mg-hero a.mg-button:focus-visible{box-shadow:0 0 0 2px rgb(var(--mg-color-neutral-0));outline:2px solid rgb(var(--mg-color-focus-ring-inverse));outline-offset:2px}.mg-hero__overlay{align-items:center;background:transparent;display:grid;margin:var(--mg-spacing-hero-overlay);max-width:var(--mg-hero-overlay-max-width);padding:var(--mg-hero-overlay-padding);position:relative;z-index:1}.mg-hero__content{display:grid;margin-top:var(--mg-spacing-25);min-width:0;row-gap:.625rem}.mg-hero__logo{height:auto;margin-bottom:clamp(var(--mg-spacing-300),10vw,var(--mg-spacing-800));width:min(13rem,52vw)}.mg-hero__meta{padding-bottom:var(--mg-spacing-25)}.mg-hero__meta.meta-detail{display:flex;flex-direction:column}.mg-hero__label{display:inline-block;font-family:var(--mg-font-family-ui);font-size:var(--mg-font-size-250);font-weight:700;margin-inline-end:var(--mg-spacing-25);max-width:100%;min-width:0;padding:var(--mg-spacing-25) 0}.mg-hero__label.detail{font-weight:400}.mg-hero{--mg-hero-link-color:var(--mg-color-neutral-0)}.mg-hero__content a,.mg-hero__content a:hover,.mg-hero__content a:visited,.mg-hero__overlay a,.mg-hero__overlay a:hover,.mg-hero__overlay a:visited{color:rgb(var(--mg-hero-link-color))}.mg-hero__title{color:rgb(var(--mg-color-hero-title));display:inline-block;font-family:var(--mg-font-family-display);font-size:var(--mg-font-size-800);font-weight:700;line-height:1.2;margin-bottom:var(--mg-spacing-25);max-width:100%;min-width:0;text-wrap:balance}@media (max-width:480px){.mg-hero__title{font-size:var(--mg-font-size-600)}}.mg-hero__title a,.mg-hero__title a:hover,.mg-hero__title a:visited{color:rgb(var(--mg-color-hero-title))}.mg-hero__summaryText{font-size:var(--mg-font-size-400);margin-bottom:var(--mg-spacing-25);max-width:62ch;text-wrap:pretty}.mg-hero__buttons{display:flex;flex-wrap:wrap;gap:var(--mg-spacing-100) var(--mg-spacing-250);padding-bottom:var(--mg-spacing-50);padding-top:var(--mg-spacing-75)}@media (max-width:900px){.mg-hero__buttons{align-items:flex-start;flex-direction:column;flex-wrap:nowrap}.mg-hero__buttons .mg-button.mg-button-cta{inline-size:fit-content;max-inline-size:100%}}.mg-hero__buttons .mg-button+.mg-button{margin-inline-start:0}@media (max-width:900px){.mg-hero--child .mg-hero__overlay{margin-inline-start:0}}.mg-hero--tertiary{--mg-hero-cta-color:var(--mg-color-neutral-900);--mg-hero-gradient-color:var(--mg-color-neutral-900)}.mg-hero--tertiary .mg-hero__overlay a.mg-button:not(.mg-button-cta),.mg-hero--tertiary .mg-hero__overlay a.mg-button:not(.mg-button-cta):hover,.mg-hero--tertiary .mg-hero__overlay a.mg-button:not(.mg-button-cta):visited{color:rgb(var(--mg-color-neutral-900))}.mg-hero--tertiary .mg-hero__overlay a.mg-button-secondary:not(.mg-button-cta),.mg-hero--tertiary .mg-hero__overlay a.mg-button-secondary:not(.mg-button-cta):hover,.mg-hero--tertiary .mg-hero__overlay a.mg-button-secondary:not(.mg-button-cta):visited{background-color:var(--mg-color-hero-button-secondary-background);border-color:rgb(var(--mg-border-color-hero-button-secondary));color:rgb(var(--mg-color-hero-button-secondary-color))}.mg-hero--quaternary{--mg-hero-cta-color:var(--mg-color-red-800);--mg-hero-gradient-color:var(--mg-color-red-800)}.mg-hero--quaternary .mg-hero__overlay a.mg-button:not(.mg-button-cta),.mg-hero--quaternary .mg-hero__overlay a.mg-button:not(.mg-button-cta):hover,.mg-hero--quaternary .mg-hero__overlay a.mg-button:not(.mg-button-cta):visited{color:rgb(var(--mg-color-red-800))}.mg-hero--quaternary .mg-hero__overlay a.mg-button-secondary:not(.mg-button-cta),.mg-hero--quaternary .mg-hero__overlay a.mg-button-secondary:not(.mg-button-cta):hover,.mg-hero--quaternary .mg-hero__overlay a.mg-button-secondary:not(.mg-button-cta):visited{background-color:var(--mg-color-hero-button-secondary-background);border-color:rgb(var(--mg-border-color-hero-button-secondary));color:rgb(var(--mg-color-hero-button-secondary-color))}.mg-hero--secondary{border-inline-start:.5rem solid rgb(var(--mg-color-hero--secondary))}[dir=rtl] .mg-hero:not(.mg-hero--split):before{background:linear-gradient(270deg,rgb(var(--mg-hero-scrim-color)/0) 0,rgb(var(--mg-hero-scrim-color)/var(--mg-hero-scrim-opacity)) 0,rgb(var(--mg-hero-scrim-color)/var(--mg-hero-scrim-opacity)) var(--mg-hero-copy-inline-end),rgb(var(--mg-hero-scrim-color)/0) calc(var(--mg-hero-copy-inline-end) + var(--mg-hero-scrim-fade))),linear-gradient(270deg,rgb(var(--mg-hero-gradient-color)/0) 0,rgb(var(--mg-hero-gradient-color)/var(--mg-hero-gradient-start)) 0,rgb(var(--mg-hero-gradient-color)/var(--mg-hero-gradient-middle)) var(--mg-hero-copy-inline-end),rgb(var(--mg-hero-gradient-color)/var(--mg-hero-gradient-end)) 100%)}@media (max-width:900px){[dir=rtl] .mg-hero:not(.mg-hero--split):before{--mg-hero-gradient-start:1;--mg-hero-gradient-middle:1;--mg-hero-gradient-end:1;background:linear-gradient(180deg,rgb(var(--mg-hero-scrim-color)/0) var(--mg-hero-banner-block-size),rgb(var(--mg-hero-scrim-color)/var(--mg-hero-scrim-opacity)) var(--mg-hero-banner-block-size),rgb(var(--mg-hero-scrim-color)/var(--mg-hero-scrim-opacity)) 100%,rgb(var(--mg-hero-scrim-color)/0) 100%),linear-gradient(180deg,rgb(var(--mg-hero-gradient-color)/0) var(--mg-hero-banner-block-size),rgb(var(--mg-hero-gradient-color)/var(--mg-hero-gradient-start)) var(--mg-hero-banner-block-size),rgb(var(--mg-hero-gradient-color)/var(--mg-hero-gradient-middle)) 100%,rgb(var(--mg-hero-gradient-color)/var(--mg-hero-gradient-end)) 100%)}}.mg-hero--split{aspect-ratio:unset;background-color:rgb(var(--mg-color-hero));background-image:none;padding-inline-start:0}.mg-hero--split a.mg-button,.mg-hero--split a.mg-button:hover,.mg-hero--split a.mg-button:visited{color:rgb(var(--mg-color-hero))}.mg-hero--split a.mg-button-primary{background-color:rgb(var(--mg-color-neutral-0))}.mg-hero--split a.mg-button.mg-button-cta,.mg-hero--split a.mg-button.mg-button-cta:hover,.mg-hero--split a.mg-button.mg-button-cta:visited{background:transparent;border-color:transparent;color:rgb(var(--mg-color-neutral-0))}.mg-hero--split a.mg-button.mg-button-cta:after,.mg-hero--split a.mg-button.mg-button-cta:hover:after,.mg-hero--split a.mg-button.mg-button-cta:visited:after{background:rgb(var(--mg-color-neutral-0));color:rgb(var(--mg-hero-cta-color))}.mg-hero--split a.mg-button-secondary:not(.mg-button-cta),.mg-hero--split a.mg-button-secondary:not(.mg-button-cta):hover,.mg-hero--split a.mg-button-secondary:not(.mg-button-cta):visited{background-color:var(--mg-color-hero-button-secondary-background);border-color:rgb(var(--mg-border-color-hero-button-secondary));color:rgb(var(--mg-color-hero-button-secondary-color))}.mg-hero--split a.mg-button:focus-visible{box-shadow:0 0 0 2px rgb(var(--mg-color-neutral-0));outline:2px solid rgb(var(--mg-color-focus-ring-inverse));outline-offset:2px}.mg-hero--split .mg-hero__split-grid{align-items:stretch;column-gap:var(--mg-spacing-200);display:grid;grid-template-columns:2fr 1fr}@media (max-width:900px){.mg-hero--split .mg-hero__split-grid{grid-template-columns:1fr}}.mg-hero--split.mg-hero--split-1-2 .mg-hero__split-grid{grid-template-columns:1fr 1fr}@media (max-width:900px){.mg-hero--split.mg-hero--split-1-2 .mg-hero__split-grid{grid-template-columns:1fr}}.mg-hero--split.mg-hero--split-1-3 .mg-hero__split-grid{grid-template-columns:1fr 2fr}@media (max-width:900px){.mg-hero--split.mg-hero--split-1-3 .mg-hero__split-grid{grid-template-columns:1fr}}.mg-hero--split .mg-hero__split-grid.mg-hero__split-grid--no-media{grid-template-columns:1fr}.mg-hero--split .mg-hero__content{align-content:center;display:grid;padding-block:var(--mg-spacing-200);row-gap:.625rem}.mg-hero--split .mg-hero__media{overflow:hidden}@media (max-width:900px){.mg-hero--split .mg-hero__media{aspect-ratio:16/9}}.mg-hero--split .mg-hero__media--video{aspect-ratio:16/9}.mg-hero--split .mg-hero__media--html{display:flex}.mg-hero--split .mg-hero__media--html>*{width:100%}.mg-hero--split .mg-hero__media--html>figure{height:100%;margin:0;position:relative;width:100%}.mg-hero--split .mg-hero__media--html>figure>img{display:block;height:100%;object-fit:cover;padding:0;width:100%}.mg-hero--split .mg-hero__media--html>figure>figcaption{align-items:center;background:rgb(var(--mg-color-neutral-900)/.75);color:rgb(var(--mg-color-neutral-0));display:flex;gap:var(--mg-spacing-100);inset-block-end:0;inset-inline:0;justify-content:space-between;padding:var(--mg-spacing-50) var(--mg-spacing-100);position:absolute}.mg-hero--split .mg-hero__media-img{display:block;height:100%;object-fit:cover;width:100%}.mg-hero--split .mg-hero__media-iframe{border:0;display:block;height:100%;width:100%}.mg-hero--split.mg-hero--tertiary{background-color:rgb(var(--mg-color-neutral-900))}.mg-hero--split.mg-hero--tertiary a.mg-button:not(.mg-button-cta),.mg-hero--split.mg-hero--tertiary a.mg-button:not(.mg-button-cta):hover,.mg-hero--split.mg-hero--tertiary a.mg-button:not(.mg-button-cta):visited{color:rgb(var(--mg-color-neutral-900))}.mg-hero--split.mg-hero--quaternary{background-color:rgb(var(--mg-color-red-800))}.mg-hero--split.mg-hero--quaternary a.mg-button:not(.mg-button-cta),.mg-hero--split.mg-hero--quaternary a.mg-button:not(.mg-button-cta):hover,.mg-hero--split.mg-hero--quaternary a.mg-button:not(.mg-button-cta):visited{color:rgb(var(--mg-color-red-800))}[dir=rtl] .mg-hero--split .mg-hero__split-grid{direction:rtl}
|
|
1120
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/Hero/Hero.mdx
|
|
1121
|
+
*/.mg-hero{--mg-border-color-button-primary:rgb(var(--mg-color-neutral-0)/0.72);--mg-border-color-button-secondary:rgb(var(--mg-color-neutral-0)/0.72);--mg-hero-cta-color:var(--mg-color-hero);--mg-hero-gradient-color:var(--mg-color-hero);--mg-hero-gradient-start:var(--mg-hero-gradient-start-opacity);--mg-hero-gradient-middle:var(--mg-hero-gradient-middle-opacity);--mg-hero-gradient-end:var(--mg-hero-gradient-end-opacity);--mg-hero-scrim-color:var(--mg-color-neutral-900);--mg-hero-copy-inline-start:var(--mg-spacing-100);--mg-hero-banner-block-size:min(56vw,20rem);--mg-hero-copy-inline-end:min(100%,calc(var(--mg-hero-copy-inline-start) + var(--mg-hero-overlay-max-width)));background-position:50%;background-size:cover;color:rgb(var(--mg-color-neutral-0));display:grid;grid-template-columns:1fr;margin-inline-start:calc(50% - 50vw);padding-inline-start:var(--mg-hero-copy-inline-start);position:relative;width:100vw}.mg-hero:not(.mg-hero--split):before{background:linear-gradient(90deg,rgb(var(--mg-hero-scrim-color)/0) 0,rgb(var(--mg-hero-scrim-color)/var(--mg-hero-scrim-opacity)) 0,rgb(var(--mg-hero-scrim-color)/var(--mg-hero-scrim-opacity)) var(--mg-hero-copy-inline-end),rgb(var(--mg-hero-scrim-color)/0) calc(var(--mg-hero-copy-inline-end) + var(--mg-hero-scrim-fade))),linear-gradient(90deg,rgb(var(--mg-hero-gradient-color)/0) 0,rgb(var(--mg-hero-gradient-color)/var(--mg-hero-gradient-start)) 0,rgb(var(--mg-hero-gradient-color)/var(--mg-hero-gradient-middle)) var(--mg-hero-copy-inline-end),rgb(var(--mg-hero-gradient-color)/var(--mg-hero-gradient-end)) 100%);content:"";inset:0;pointer-events:none;position:absolute}@media (max-width:900px){.mg-hero:not(.mg-hero--split):before{--mg-hero-gradient-start:1;--mg-hero-gradient-middle:1;--mg-hero-gradient-end:1;background:linear-gradient(180deg,rgb(var(--mg-hero-scrim-color)/0) var(--mg-hero-banner-block-size),rgb(var(--mg-hero-scrim-color)/var(--mg-hero-scrim-opacity)) var(--mg-hero-banner-block-size),rgb(var(--mg-hero-scrim-color)/var(--mg-hero-scrim-opacity)) 100%,rgb(var(--mg-hero-scrim-color)/0) 100%),linear-gradient(180deg,rgb(var(--mg-hero-gradient-color)/0) var(--mg-hero-banner-block-size),rgb(var(--mg-hero-gradient-color)/var(--mg-hero-gradient-start)) var(--mg-hero-banner-block-size),rgb(var(--mg-hero-gradient-color)/var(--mg-hero-gradient-middle)) 100%,rgb(var(--mg-hero-gradient-color)/var(--mg-hero-gradient-end)) 100%)}.mg-hero:not(.mg-hero--split){aspect-ratio:auto;background-color:rgb(var(--mg-color-hero));background-size:0 0;padding-block-start:var(--mg-hero-banner-block-size)}.mg-hero:not(.mg-hero--split):after{background-image:inherit;background-position:50%;background-size:cover;block-size:var(--mg-hero-banner-block-size);content:"";inset-block-start:0;inset-inline:0;pointer-events:none;position:absolute}.mg-hero.mg-hero--no-image:not(.mg-hero--split){--mg-hero-banner-block-size:0px}}@media (min-width:900px){.mg-hero{aspect-ratio:16/4;--mg-hero-copy-inline-start:max(0px,calc(50vw - 582px))}}@media (min-width:1440px){.mg-hero{--mg-hero-copy-inline-start:max(0px,calc(50vw - 720px))}}.mg-hero--contained{--mg-hero-copy-inline-start:0px;margin-inline:0;padding-inline:0;width:100%}.mg-hero--immersive:not(.mg-hero--split){align-items:end;aspect-ratio:unset;min-height:clamp(31rem,62vw,43rem)}@media (max-width:900px){.mg-hero--immersive:not(.mg-hero--split){--mg-hero-banner-block-size:min(78vw,27.5rem);align-items:start;min-height:0}}.mg-hero--immersive:not(.mg-hero--split){--mg-hero-overlay-max-width:48rem}.mg-hero--immersive:not(.mg-hero--split) .mg-hero__overlay{align-items:end;margin:0;max-width:var(--mg-hero-overlay-max-width);padding:clamp(2rem,6vw,5rem)}.mg-hero--immersive:not(.mg-hero--split) .mg-hero__title{font-size:clamp(2.375rem,6vw,5rem);letter-spacing:-.045em;line-height:.98}.mg-hero--immersive:not(.mg-hero--split) .mg-hero__summaryText{font-size:clamp(1rem,1.8vw,1.3125rem);line-height:1.55;max-width:37rem}.mg-hero a.mg-button,.mg-hero a.mg-button:hover,.mg-hero a.mg-button:visited{color:rgb(var(--mg-color-hero))}.mg-hero a.mg-button-primary{background-color:rgb(var(--mg-color-neutral-0))}.mg-hero a.mg-button.mg-button-cta,.mg-hero a.mg-button.mg-button-cta:hover,.mg-hero a.mg-button.mg-button-cta:visited{background:transparent;border-color:transparent;color:rgb(var(--mg-color-neutral-0))}.mg-hero a.mg-button.mg-button-cta:after,.mg-hero a.mg-button.mg-button-cta:hover:after,.mg-hero a.mg-button.mg-button-cta:visited:after{background:rgb(var(--mg-color-neutral-0));color:rgb(var(--mg-hero-cta-color))}.mg-hero a.mg-button-secondary:not(.mg-button-cta),.mg-hero a.mg-button-secondary:not(.mg-button-cta):hover,.mg-hero a.mg-button-secondary:not(.mg-button-cta):visited{background-color:var(--mg-color-hero-button-secondary-background);border-color:rgb(var(--mg-border-color-hero-button-secondary));color:rgb(var(--mg-color-hero-button-secondary-color))}.mg-hero a.mg-button:focus-visible{box-shadow:0 0 0 2px rgb(var(--mg-color-neutral-0));outline:2px solid rgb(var(--mg-color-focus-ring-inverse));outline-offset:2px}.mg-hero__overlay{align-items:center;background:transparent;display:grid;margin:var(--mg-spacing-hero-overlay);max-width:var(--mg-hero-overlay-max-width);padding:var(--mg-hero-overlay-padding);position:relative;z-index:1}.mg-hero__content{display:grid;margin-top:var(--mg-spacing-25);min-width:0;row-gap:.625rem}.mg-hero__logo{height:auto;margin-bottom:clamp(var(--mg-spacing-300),10vw,var(--mg-spacing-800));width:min(13rem,52vw)}.mg-hero__meta{padding-bottom:var(--mg-spacing-25)}.mg-hero__meta.meta-detail{display:flex;flex-direction:column}.mg-hero__label{display:inline-block;font-family:var(--mg-font-family-ui);font-size:var(--mg-font-size-250);font-weight:700;margin-inline-end:var(--mg-spacing-25);max-width:100%;min-width:0;padding:var(--mg-spacing-25) 0}.mg-hero__label.detail{font-weight:400}.mg-hero{--mg-hero-link-color:var(--mg-color-neutral-0)}.mg-hero__content a,.mg-hero__content a:hover,.mg-hero__content a:visited,.mg-hero__overlay a,.mg-hero__overlay a:hover,.mg-hero__overlay a:visited{color:rgb(var(--mg-hero-link-color))}.mg-hero__title{color:rgb(var(--mg-color-hero-title));display:inline-block;font-family:var(--mg-font-family-display);font-size:var(--mg-font-size-800);font-weight:700;line-height:1.2;margin-bottom:var(--mg-spacing-25);max-width:100%;min-width:0;text-wrap:balance}@media (max-width:480px){.mg-hero__title{font-size:var(--mg-font-size-600)}}.mg-hero__title a,.mg-hero__title a:hover,.mg-hero__title a:visited{color:rgb(var(--mg-color-hero-title))}.mg-hero__summaryText{font-size:var(--mg-font-size-400);margin-bottom:var(--mg-spacing-25);max-width:62ch;text-wrap:pretty}.mg-hero__buttons{display:flex;flex-wrap:wrap;gap:var(--mg-spacing-100) var(--mg-spacing-250);padding-bottom:var(--mg-spacing-50);padding-top:var(--mg-spacing-75)}@media (max-width:900px){.mg-hero__buttons{align-items:flex-start;flex-direction:column;flex-wrap:nowrap}.mg-hero__buttons .mg-button.mg-button-cta{inline-size:fit-content;max-inline-size:100%}}.mg-hero__buttons .mg-button+.mg-button{margin-inline-start:0}@media (max-width:900px){.mg-hero--child .mg-hero__overlay{margin-inline-start:0}}.mg-hero--tertiary{--mg-hero-cta-color:var(--mg-color-neutral-900);--mg-hero-gradient-color:var(--mg-color-neutral-900)}.mg-hero--tertiary .mg-hero__overlay a.mg-button:not(.mg-button-cta),.mg-hero--tertiary .mg-hero__overlay a.mg-button:not(.mg-button-cta):hover,.mg-hero--tertiary .mg-hero__overlay a.mg-button:not(.mg-button-cta):visited{color:rgb(var(--mg-color-neutral-900))}.mg-hero--tertiary .mg-hero__overlay a.mg-button-secondary:not(.mg-button-cta),.mg-hero--tertiary .mg-hero__overlay a.mg-button-secondary:not(.mg-button-cta):hover,.mg-hero--tertiary .mg-hero__overlay a.mg-button-secondary:not(.mg-button-cta):visited{background-color:var(--mg-color-hero-button-secondary-background);border-color:rgb(var(--mg-border-color-hero-button-secondary));color:rgb(var(--mg-color-hero-button-secondary-color))}.mg-hero--quaternary{--mg-hero-cta-color:var(--mg-color-red-800);--mg-hero-gradient-color:var(--mg-color-red-800)}.mg-hero--quaternary .mg-hero__overlay a.mg-button:not(.mg-button-cta),.mg-hero--quaternary .mg-hero__overlay a.mg-button:not(.mg-button-cta):hover,.mg-hero--quaternary .mg-hero__overlay a.mg-button:not(.mg-button-cta):visited{color:rgb(var(--mg-color-red-800))}.mg-hero--quaternary .mg-hero__overlay a.mg-button-secondary:not(.mg-button-cta),.mg-hero--quaternary .mg-hero__overlay a.mg-button-secondary:not(.mg-button-cta):hover,.mg-hero--quaternary .mg-hero__overlay a.mg-button-secondary:not(.mg-button-cta):visited{background-color:var(--mg-color-hero-button-secondary-background);border-color:rgb(var(--mg-border-color-hero-button-secondary));color:rgb(var(--mg-color-hero-button-secondary-color))}.mg-hero--secondary{border-inline-start:.5rem solid rgb(var(--mg-color-hero--secondary))}[dir=rtl] .mg-hero:not(.mg-hero--split):before{background:linear-gradient(270deg,rgb(var(--mg-hero-scrim-color)/0) 0,rgb(var(--mg-hero-scrim-color)/var(--mg-hero-scrim-opacity)) 0,rgb(var(--mg-hero-scrim-color)/var(--mg-hero-scrim-opacity)) var(--mg-hero-copy-inline-end),rgb(var(--mg-hero-scrim-color)/0) calc(var(--mg-hero-copy-inline-end) + var(--mg-hero-scrim-fade))),linear-gradient(270deg,rgb(var(--mg-hero-gradient-color)/0) 0,rgb(var(--mg-hero-gradient-color)/var(--mg-hero-gradient-start)) 0,rgb(var(--mg-hero-gradient-color)/var(--mg-hero-gradient-middle)) var(--mg-hero-copy-inline-end),rgb(var(--mg-hero-gradient-color)/var(--mg-hero-gradient-end)) 100%)}@media (max-width:900px){[dir=rtl] .mg-hero:not(.mg-hero--split):before{--mg-hero-gradient-start:1;--mg-hero-gradient-middle:1;--mg-hero-gradient-end:1;background:linear-gradient(180deg,rgb(var(--mg-hero-scrim-color)/0) var(--mg-hero-banner-block-size),rgb(var(--mg-hero-scrim-color)/var(--mg-hero-scrim-opacity)) var(--mg-hero-banner-block-size),rgb(var(--mg-hero-scrim-color)/var(--mg-hero-scrim-opacity)) 100%,rgb(var(--mg-hero-scrim-color)/0) 100%),linear-gradient(180deg,rgb(var(--mg-hero-gradient-color)/0) var(--mg-hero-banner-block-size),rgb(var(--mg-hero-gradient-color)/var(--mg-hero-gradient-start)) var(--mg-hero-banner-block-size),rgb(var(--mg-hero-gradient-color)/var(--mg-hero-gradient-middle)) 100%,rgb(var(--mg-hero-gradient-color)/var(--mg-hero-gradient-end)) 100%)}}.mg-hero--split{aspect-ratio:unset;background-color:rgb(var(--mg-color-hero));background-image:none;padding-inline-start:0}.mg-hero--split a.mg-button,.mg-hero--split a.mg-button:hover,.mg-hero--split a.mg-button:visited{color:rgb(var(--mg-color-hero))}.mg-hero--split a.mg-button-primary{background-color:rgb(var(--mg-color-neutral-0))}.mg-hero--split a.mg-button.mg-button-cta,.mg-hero--split a.mg-button.mg-button-cta:hover,.mg-hero--split a.mg-button.mg-button-cta:visited{background:transparent;border-color:transparent;color:rgb(var(--mg-color-neutral-0))}.mg-hero--split a.mg-button.mg-button-cta:after,.mg-hero--split a.mg-button.mg-button-cta:hover:after,.mg-hero--split a.mg-button.mg-button-cta:visited:after{background:rgb(var(--mg-color-neutral-0));color:rgb(var(--mg-hero-cta-color))}.mg-hero--split a.mg-button-secondary:not(.mg-button-cta),.mg-hero--split a.mg-button-secondary:not(.mg-button-cta):hover,.mg-hero--split a.mg-button-secondary:not(.mg-button-cta):visited{background-color:var(--mg-color-hero-button-secondary-background);border-color:rgb(var(--mg-border-color-hero-button-secondary));color:rgb(var(--mg-color-hero-button-secondary-color))}.mg-hero--split a.mg-button:focus-visible{box-shadow:0 0 0 2px rgb(var(--mg-color-neutral-0));outline:2px solid rgb(var(--mg-color-focus-ring-inverse));outline-offset:2px}.mg-hero--split .mg-hero__split-grid{align-items:stretch;column-gap:var(--mg-spacing-200);display:grid;grid-template-columns:2fr 1fr}@media (max-width:900px){.mg-hero--split .mg-hero__split-grid{grid-template-columns:1fr}}.mg-hero--split.mg-hero--split-1-2 .mg-hero__split-grid{grid-template-columns:1fr 1fr}@media (max-width:900px){.mg-hero--split.mg-hero--split-1-2 .mg-hero__split-grid{grid-template-columns:1fr}}.mg-hero--split.mg-hero--split-1-3 .mg-hero__split-grid{grid-template-columns:1fr 2fr}@media (max-width:900px){.mg-hero--split.mg-hero--split-1-3 .mg-hero__split-grid{grid-template-columns:1fr}}.mg-hero--split .mg-hero__split-grid.mg-hero__split-grid--no-media{grid-template-columns:1fr}.mg-hero--split .mg-hero__content{align-content:center;display:grid;padding-block:var(--mg-spacing-200);row-gap:.625rem}.mg-hero--split .mg-hero__media{overflow:hidden}@media (max-width:900px){.mg-hero--split .mg-hero__media{aspect-ratio:16/9}}.mg-hero--split .mg-hero__media--video{aspect-ratio:16/9}.mg-hero--split .mg-hero__media--html{display:flex}.mg-hero--split .mg-hero__media--html>*{width:100%}.mg-hero--split .mg-hero__media--html>figure{height:100%;margin:0;position:relative;width:100%}.mg-hero--split .mg-hero__media--html>figure>img{display:block;height:100%;object-fit:cover;padding:0;width:100%}.mg-hero--split .mg-hero__media--html>figure>figcaption{align-items:center;background:rgb(var(--mg-color-neutral-900)/.75);color:rgb(var(--mg-color-neutral-0));display:flex;gap:var(--mg-spacing-100);inset-block-end:0;inset-inline:0;justify-content:space-between;padding:var(--mg-spacing-50) var(--mg-spacing-100);position:absolute}.mg-hero--split .mg-hero__media-img{display:block;height:100%;object-fit:cover;width:100%}.mg-hero--split .mg-hero__media-iframe{border:0;display:block;height:100%;width:100%}.mg-hero--split.mg-hero--tertiary{background-color:rgb(var(--mg-color-neutral-900))}.mg-hero--split.mg-hero--tertiary a.mg-button:not(.mg-button-cta),.mg-hero--split.mg-hero--tertiary a.mg-button:not(.mg-button-cta):hover,.mg-hero--split.mg-hero--tertiary a.mg-button:not(.mg-button-cta):visited{color:rgb(var(--mg-color-neutral-900))}.mg-hero--split.mg-hero--quaternary{background-color:rgb(var(--mg-color-red-800))}.mg-hero--split.mg-hero--quaternary a.mg-button:not(.mg-button-cta),.mg-hero--split.mg-hero--quaternary a.mg-button:not(.mg-button-cta):hover,.mg-hero--split.mg-hero--quaternary a.mg-button:not(.mg-button-cta):visited{color:rgb(var(--mg-color-red-800))}[dir=rtl] .mg-hero--split .mg-hero__split-grid{direction:rtl}.mg-hero{--mg-hero-tag-color:var(--mg-color-neutral-0)}.mg-hero__tags{--mg-list-item-indent-rtl:0;display:flex;flex-wrap:wrap;gap:var(--mg-spacing-50);list-style:none;list-style-type:"";margin:0;padding:var(--mg-spacing-50) 0}.mg-hero__tags>li{margin:0;padding:0}.mg-hero__tags .mg-tag:not([class*=mg-tag--]){--mg-tag-foreground:rgb(var(--mg-hero-tag-color));--mg-tag-background:transparent;--mg-tag-background-hover:transparent;background-color:transparent;border-color:currentColor;color:rgb(var(--mg-hero-tag-color))}.mg-hero__tags a.mg-tag:not([class*=mg-tag--]),.mg-hero__tags a.mg-tag:not([class*=mg-tag--]):hover,.mg-hero__tags a.mg-tag:not([class*=mg-tag--]):visited{color:rgb(var(--mg-hero-tag-color))}.mg-hero__tags a.mg-tag:hover{text-decoration:underline;text-underline-offset:.15em}.mg-hero.mg-hero--neutral{--mg-border-color-button-primary:transparent;--mg-border-color-button-secondary:transparent;--mg-hero-link-color:var(--mg-color-interactive);background-color:rgb(var(--mg-color-neutral-0));color:rgb(var(--mg-color-text))}.mg-hero.mg-hero--neutral:before{content:none}.mg-hero.mg-hero--neutral .mg-hero__title,.mg-hero.mg-hero--neutral .mg-hero__title a,.mg-hero.mg-hero--neutral .mg-hero__title a:hover,.mg-hero.mg-hero--neutral .mg-hero__title a:visited{color:rgb(var(--mg-color-text))}.mg-hero.mg-hero--neutral .mg-hero__content a:hover,.mg-hero.mg-hero--neutral .mg-hero__overlay a:hover{color:rgb(var(--mg-color-interactive-active))}.mg-hero.mg-hero--neutral{--mg-hero-tag-color:var(--mg-color-interactive)}.mg-hero.mg-hero--neutral .mg-hero__label a,.mg-hero.mg-hero--neutral .mg-hero__summaryText a{text-decoration:underline;text-underline-offset:.15em}.mg-hero.mg-hero--neutral a.mg-button,.mg-hero.mg-hero--neutral a.mg-button:hover,.mg-hero.mg-hero--neutral a.mg-button:visited{color:rgb(var(--mg-color-button))}.mg-hero.mg-hero--neutral a.mg-button-primary{background-color:var(--mg-color-button-background)}.mg-hero.mg-hero--neutral a.mg-button-primary:hover{background-color:var(--mg-color-button-background--hover)}.mg-hero.mg-hero--neutral a.mg-button-secondary:not(.mg-button-cta),.mg-hero.mg-hero--neutral a.mg-button-secondary:not(.mg-button-cta):hover,.mg-hero.mg-hero--neutral a.mg-button-secondary:not(.mg-button-cta):visited{background-color:rgb(var(--mg-color-button-secondary-background));border-color:var(--mg-border-color-button-secondary);color:rgb(var(--mg-color-button))}.mg-hero.mg-hero--neutral a.mg-button.mg-button-cta,.mg-hero.mg-hero--neutral a.mg-button.mg-button-cta:hover,.mg-hero.mg-hero--neutral a.mg-button.mg-button-cta:visited{background:transparent;border-color:transparent;color:rgb(var(--mg-color-interactive))}.mg-hero.mg-hero--neutral a.mg-button.mg-button-cta:after,.mg-hero.mg-hero--neutral a.mg-button.mg-button-cta:hover:after,.mg-hero.mg-hero--neutral a.mg-button.mg-button-cta:visited:after{background:rgb(var(--mg-color-interactive));color:rgb(var(--mg-color-neutral-0))}.mg-hero.mg-hero--neutral a.mg-button:focus-visible{box-shadow:0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-color-neutral-0));outline:var(--mg-focus-ring-width) solid rgb(var(--mg-color-focus-ring));outline-offset:var(--mg-focus-ring-offset)}.mg-hero.mg-hero--neutral.mg-hero--split .mg-hero__content{padding-block-start:0}.mg-hero.mg-hero--neutral:not(.mg-hero--split){--mg-hero-banner-block-size:0px;background-size:0 0}.mg-hero.mg-hero--neutral:not(.mg-hero--split):after{content:none}@media (max-width:900px){.mg-hero.mg-hero--neutral.mg-hero--split .mg-hero__media{aspect-ratio:3/1;order:-1}}
|
|
1123
1122
|
|
|
1124
1123
|
/**
|
|
1125
1124
|
* Text CTA
|
|
@@ -1127,7 +1126,7 @@
|
|
|
1127
1126
|
* Call-to-action banner supporting color variants, headings, rich text copy, and button groups.
|
|
1128
1127
|
*
|
|
1129
1128
|
* Full documentation:
|
|
1130
|
-
* https://github.com/
|
|
1129
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/TextCta/TextCta.mdx
|
|
1131
1130
|
*/
|
|
1132
1131
|
/* CTA banner start */.mg-cta{--mg-cta-accent:var(--mg-color-hero);background-color:var(--mg-cta-bg,initial);padding:var(--mg-cta-padding)}.mg-cta__body{max-width:800px}.mg-cta .mg-cta__eyebrow{color:rgb(var(--mg-color-neutral-0));font-size:.75rem;font-weight:700;letter-spacing:.09em;margin:0 0 var(--mg-spacing-75)}.mg-cta .mg-cta__headline{color:rgb(var(--mg-color-white));font-weight:700;margin-bottom:var(--mg-spacing-100)}.mg-cta .mg-cta__text{color:rgb(var(--mg-color-neutral-0)/.9);margin-bottom:var(--mg-spacing-150)}.mg-cta .mg-cta__text p{color:inherit;margin-bottom:var(--mg-spacing-75)}.mg-cta .mg-cta__text p:last-child{margin-bottom:0}.mg-cta .mg-cta__text a{color:rgb(var(--mg-color-white));text-decoration:underline}.mg-cta__custom-content{grid-column:1/-1;margin-block-start:var(--mg-spacing-150);min-width:0;text-align:start}.mg-cta__actions{display:flex;flex-wrap:wrap;gap:var(--mg-spacing-100);margin-top:var(--mg-spacing-150)}.mg-cta__image img{display:block;height:auto;width:100%}.mg-cta--centered{text-align:center}.mg-cta--centered .mg-cta__body{margin-inline:auto}.mg-cta--centered .mg-cta__actions{justify-content:center}.mg-cta--inline .mg-cta__body{max-width:none}.mg-cta--inline{
|
|
1133
1132
|
/* medium design */}@media (width >= 48em){.mg-cta--inline .mg-cta__body{align-items:center;display:grid;gap:var(--mg-spacing-300);grid-template-columns:minmax(0,1fr) auto}.mg-cta--inline .mg-cta__actions{justify-content:flex-end;margin-top:0}}.mg-cta--with-image .mg-cta__inner{align-items:center;display:grid;gap:var(--mg-spacing-200);grid-template-columns:1fr}.mg-cta--with-image .mg-cta__body{max-width:none}.mg-cta--with-image .mg-cta__image{margin-inline:auto;max-width:200px}.mg-cta--with-image{
|
|
@@ -1143,16 +1142,26 @@
|
|
|
1143
1142
|
* Actions reuse .mg-buttons and the dismiss control reuses .mg-icon-button.
|
|
1144
1143
|
*
|
|
1145
1144
|
* Full documentation:
|
|
1146
|
-
* https://github.com/
|
|
1145
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/Notice/Notice.mdx
|
|
1147
1146
|
*/.mg-notice{--mg-notice-border-color:rgb(var(--mg-color-blue-900)/0.5);--mg-notice-bg:rgb(var(--mg-color-blue-50));--mg-notice-icon-color:rgb(var(--mg-color-blue-900));--mg-notice-border-width:4px;background-color:var(--mg-notice-bg);border:1px solid var(--mg-notice-border-color);border-inline-start-width:var(--mg-notice-border-width);border-radius:var(--mg-radius-button);box-sizing:border-box;color:rgb(var(--mg-color-neutral-900));display:flex;flex-direction:column;font-family:var(--mg-font-family-text);gap:var(--mg-spacing-100);padding:var(--mg-spacing-150) var(--mg-spacing-200)}.mg-notice--warning{--mg-notice-border-color:rgb(var(--mg-color-gold-800)/0.5);--mg-notice-bg:rgb(var(--mg-color-accent-100)/0.18);--mg-notice-icon-color:rgb(var(--mg-color-gold-800))}.mg-notice--negative{--mg-notice-border-color:rgb(var(--mg-color-red-900)/0.4);--mg-notice-bg:rgb(var(--mg-color-red-50));--mg-notice-icon-color:rgb(var(--mg-color-red-900))}.mg-notice--positive{--mg-notice-border-color:rgb(var(--mg-color-accent-400)/0.5);--mg-notice-bg:rgb(var(--mg-color-accent-400)/0.08);--mg-notice-icon-color:rgb(var(--mg-color-accent-400))}.mg-notice--compact{gap:var(--mg-spacing-75);padding:var(--mg-spacing-75) var(--mg-spacing-100)}.mg-notice--compact .mg-notice__icon{font-size:1.25em}.mg-notice--compact .mg-notice__title{font-size:var(--mg-font-size-250)}.mg-notice--compact .mg-notice__description{font-size:var(--mg-font-size-200)}.mg-notice--prominent{--mg-notice-border-width:8px;border-radius:0;padding:var(--mg-spacing-200) var(--mg-spacing-300)}.mg-notice--prominent .mg-notice__icon{font-size:1.75em}.mg-notice--prominent .mg-notice__title{font-size:var(--mg-font-size-400)}.mg-notice--overlay{--mg-notice-border-width:1px;align-items:center;backdrop-filter:blur(2px);background-color:rgb(var(--mg-color-neutral-0)/.94);border-radius:inherit;inset:0;padding:var(--mg-spacing-250);position:absolute;text-align:center;z-index:10}.mg-notice--overlay,.mg-notice--overlay .mg-notice__header{justify-content:center}.mg-notice--overlay .mg-notice__title{flex-grow:0}.mg-notice--overlay .mg-notice__description{max-inline-size:60ch}.mg-notice--overlay .mg-notice__actions{justify-content:center}.mg-notice__header{align-items:center;display:flex;flex-wrap:wrap;gap:var(--mg-spacing-75);width:100%}.mg-notice__icon{color:var(--mg-notice-icon-color);display:inline-flex;flex-shrink:0;font-size:1.5em;line-height:1}.mg-notice__icon svg{block-size:1em;display:block;fill:currentColor;inline-size:1em}.mg-notice__title{flex-grow:1;font-family:var(--mg-font-family-ui);font-size:var(--mg-font-size-300);font-weight:600;line-height:1.35;margin:0}.mg-notice__actions .mg-button-secondary.mg-button-outline:not(:hover){border-color:var(--mg-notice-action-secondary);color:var(--mg-notice-action-secondary)}.mg-notice__dismiss{background:transparent;border:0;color:rgb(var(--mg-color-neutral-600));cursor:pointer;margin-inline-start:auto}.mg-notice__dismiss:hover{background-color:rgb(var(--mg-color-neutral-900)/.08);color:rgb(var(--mg-color-neutral-900))}.mg-notice__meta{color:rgb(var(--mg-color-neutral-600));font-size:var(--mg-font-size-200);margin:0}.mg-notice__description{color:rgb(var(--mg-color-neutral-700));font-size:var(--mg-font-size-250);line-height:1.5}.mg-notice__description p{margin:0 0 var(--mg-spacing-50)}.mg-notice__description p:last-child{margin-bottom:0}
|
|
1148
1147
|
|
|
1148
|
+
/**
|
|
1149
|
+
* Progress bar
|
|
1150
|
+
*
|
|
1151
|
+
* Determinate and indeterminate progress bar built on the native progress
|
|
1152
|
+
* element, with an optional visible label, value and help text, and a thin
|
|
1153
|
+
* flush variant for the top edge of a region or the viewport.
|
|
1154
|
+
*
|
|
1155
|
+
* Full documentation:
|
|
1156
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/ProgressBar/ProgressBar.mdx
|
|
1157
|
+
*/@keyframes mg-progress-bar-scan{0%{transform:translateX(-100%)}to{transform:translateX(340%)}}@keyframes mg-progress-bar-scan-rtl{0%{transform:translateX(100%)}to{transform:translateX(-340%)}}.mg-progress-bar{--mg-progress-bar-block-size:0.5rem;--mg-progress-bar-indicator:rgb(var(--mg-color-interactive));--mg-progress-bar-track:rgb(var(--mg-color-neutral-50));align-items:baseline;column-gap:var(--mg-spacing-100);display:grid;grid-template-areas:"label value" "track track" "help help";grid-template-columns:1fr auto;row-gap:var(--mg-spacing-50)}.mg-progress-bar__label{font-weight:600;grid-area:label}.mg-progress-bar__label,.mg-progress-bar__value{color:rgb(var(--mg-color-text));font-family:var(--mg-font-family-ui);font-size:var(--mg-font-size-300)}.mg-progress-bar__value{font-variant-numeric:tabular-nums;grid-area:value;text-align:end}.mg-progress-bar__help{color:rgb(var(--mg-color-neutral-500));font-size:var(--mg-font-size-200);grid-area:help}.mg-progress-bar__track{background-color:var(--mg-progress-bar-track);block-size:var(--mg-progress-bar-block-size);border-radius:999px;box-shadow:inset 0 0 0 1px rgb(var(--mg-color-neutral-500));grid-area:track;overflow:hidden;position:relative}.mg-progress-bar__native{appearance:none;background:transparent;block-size:100%;border:0;border-radius:inherit;color:var(--mg-progress-bar-indicator);display:block;inline-size:100%}.mg-progress-bar__native::-webkit-progress-bar{background:transparent}.mg-progress-bar__native::-webkit-progress-value{background-color:var(--mg-progress-bar-indicator);border-radius:inherit}.mg-progress-bar__native::-moz-progress-bar{background-color:var(--mg-progress-bar-indicator);border-radius:inherit}.mg-progress-bar__native:indeterminate::-webkit-progress-value{background:transparent}.mg-progress-bar__native:indeterminate::-moz-progress-bar{background:transparent}@media (prefers-reduced-motion:no-preference){.mg-progress-bar__native::-webkit-progress-value{transition:width var(--mg-motion-duration-fast) var(--mg-motion-easing-standard)}}.mg-progress-bar__track:after{background-color:var(--mg-progress-bar-indicator);border-radius:inherit;content:"";display:none;inline-size:30%;inset-block:0;inset-inline-start:0;position:absolute;transform:translateX(-100%)}.mg-progress-bar__track:has(.mg-progress-bar__native:indeterminate):after{display:block}@media (prefers-reduced-motion:no-preference){.mg-progress-bar__track:after{animation:mg-progress-bar-scan 1.5s ease-in-out infinite}.mg-progress-bar__track:dir(rtl):after{animation-name:mg-progress-bar-scan-rtl}}@media (prefers-reduced-motion:reduce){.mg-progress-bar__track:after{animation:none;background:repeating-linear-gradient(to right,var(--mg-progress-bar-indicator) 0 .75rem,transparent .75rem 1.25rem);border-radius:0;inline-size:100%;transform:none}}.mg-progress-bar--flush{--mg-progress-bar-block-size:0.25rem;display:block}.mg-progress-bar--flush .mg-progress-bar__track{border-radius:0;box-shadow:none}@media (forced-colors:active){.mg-progress-bar__track{--mg-progress-bar-indicator:CanvasText;--mg-progress-bar-track:Canvas;border:1px solid CanvasText;box-shadow:none;forced-color-adjust:none}}
|
|
1149
1158
|
/**
|
|
1150
1159
|
* Scroll Container
|
|
1151
1160
|
*
|
|
1152
1161
|
* Horizontal scroll wrapper with left/right scroll navigation buttons and themed scrollbars.
|
|
1153
1162
|
*
|
|
1154
1163
|
* Full documentation:
|
|
1155
|
-
* https://github.com/
|
|
1164
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/ScrollContainer/ScrollContainer.mdx
|
|
1156
1165
|
*/.mg-scroll{align-items:center;display:flex;max-height:inherit;position:relative;width:100%
|
|
1157
1166
|
/* small design */}@media (width <= 47.9375em){.mg-scroll{height:auto;max-height:inherit;width:100%;-webkit-overflow-scrolling:touch}}.mg-scroll:has(.mg-scroll__nav){margin-bottom:3.5rem}.mg-scroll__nav{bottom:-3rem;display:flex;gap:var(--mg-spacing-50);inset-inline-end:0;position:absolute;z-index:1}.mg-scroll__nav-button{align-items:center;background:rgb(var(--mg-color-interactive)/.06);border:none;border-radius:50%;color:rgb(var(--mg-color-interactive));cursor:pointer;display:flex;font-size:var(--mg-font-size-300);height:2.75rem;justify-content:center;width:2.75rem}@media (prefers-reduced-motion:no-preference){.mg-scroll__nav-button{transition:background-color var(--mg-motion-duration-fast) var(--mg-motion-easing-standard),color var(--mg-motion-duration-fast) var(--mg-motion-easing-standard),scale var(--mg-motion-duration-fast) var(--mg-motion-easing-standard)}}.mg-scroll__nav-button:hover{background:rgb(var(--mg-color-interactive));color:rgb(var(--mg-color-neutral-0))}.mg-scroll__nav-button:focus-visible{box-shadow:0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-color-neutral-0));outline:var(--mg-focus-ring-width) solid rgb(var(--mg-color-focus-ring));outline-offset:var(--mg-focus-ring-offset)}.mg-scroll__nav-button:active{scale:.96}.mg-scroll__nav-button:disabled{background:rgb(var(--mg-color-interactive)/.03);color:rgb(var(--mg-color-neutral-500));cursor:default}.mg-scroll__container{cursor:grab;display:block;max-height:inherit;max-width:100%;overflow-x:auto;overflow-y:hidden;position:relative;scroll-snap-type:inline proximity;width:100%;-webkit-overflow-scrolling:touch;scrollbar-color:rgba(0,79,145,.35) rgba(0,0,0,.005);scrollbar-width:thin
|
|
1158
1167
|
/* small design */}@media (width <= 47.9375em){.mg-scroll__container{height:auto}}.mg-scroll__container:active{cursor:grabbing}.mg-scroll__container:focus-visible{box-shadow:inset 0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-color-neutral-0)),inset 0 0 0 calc(var(--mg-focus-ring-offset) + var(--mg-focus-ring-width)) rgb(var(--mg-color-focus-ring));outline:0}@media (forced-colors:active){.mg-scroll__container:focus-visible{outline:var(--mg-focus-ring-width) solid Highlight;outline-offset:calc(var(--mg-focus-ring-width)*-1)}}.mg-scroll--mobile .mg-scroll__container,.mg-scroll--mobile .mg-scroll__container:active{cursor:default}.mg-scroll__container::-webkit-scrollbar{background:transparent;height:var(--mg-spacing-50)}.mg-scroll__container::-webkit-scrollbar-track{background:rgba(0,0,0,.06);border-radius:var(--mg-radius-form-input)}.mg-scroll__container::-webkit-scrollbar-thumb{background:rgba(0,79,145,.35);border-radius:var(--mg-radius-form-input)}@media (prefers-reduced-motion:no-preference){.mg-scroll__container::-webkit-scrollbar-thumb{transition:background-color var(--mg-motion-duration-fast) var(--mg-motion-easing-standard)}}.mg-scroll__container::-webkit-scrollbar-thumb:hover{background:#004f91}.mg-scroll__container--custom-height{height:var(--scroll-height,auto)}.mg-scroll__container--custom-width{min-width:var(--scroll-min-width,auto)}.mg-scroll__container--custom-padding{padding:var(--scroll-padding,0)}.mg-scroll__container--mobile{height:auto!important;max-height:none!important}.mg-scroll__container--mobile .mg-scroll__content{display:inline-flex;height:auto;width:auto}.mg-scroll__content{align-items:flex-start;display:flex;flex-wrap:nowrap;gap:var(--mg-spacing-150);height:auto
|
|
@@ -1165,8 +1174,8 @@
|
|
|
1165
1174
|
* Accessible tabbed interface panels with keyboard tab switching and scrollable tab strips.
|
|
1166
1175
|
*
|
|
1167
1176
|
* Full documentation:
|
|
1168
|
-
* https://github.com/
|
|
1169
|
-
*/.mg-tabs__list{background:var(--mg-color-tabbar-background);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0;padding:0;position:relative;width:100%}.mg-tabs__list:after{border-bottom:var(--mg-spacing-25) solid var(--mg-color-tab-border);content:" ";height:1px;margin-bottom:calc(var(--mg-spacing-25)*-1);position:relative;top:calc(var(--mg-spacing-25)*-1);width:100%;z-index:1}.mg-tabs__item{display:inline-block;-ms-flex-preferred-size:max-content;flex-basis:max-content;padding:0}.mg-tabs--horizontal .mg-tabs-content,.mg-tabs--stacked .mg-tabs-content{display:grid;list-style-type:none;padding-left:0}.mg-tabs--horizontal .mg-tabs__link.is-active+.mg-tabs-content,.mg-tabs--stacked .mg-tabs__link.is-active+.mg-tabs-content{display:block}.mg-tabs--stacked>.mg-tabs__list,.mg-tabs--stacked>.mg-tabs__panels{display:flex;flex-direction:column}.mg-tabs--stacked>.mg-tabs-content>.mg-tabs__mobile-item,.mg-tabs--stacked>.mg-tabs__list>.mg-tabs-content>.mg-tabs__mobile-item,.mg-tabs--stacked>.mg-tabs__list>.mg-tabs__item,.mg-tabs--stacked>.mg-tabs__panels>.mg-tabs-content>.mg-tabs__mobile-item{margin-bottom:var(--mg-spacing-25);width:100%}.mg-tabs--stacked>.mg-tabs-content>.mg-tabs__section,.mg-tabs--stacked>.mg-tabs__list>.mg-tabs-content>.mg-tabs__section,.mg-tabs--stacked>.mg-tabs__panels>.mg-tabs-content>.mg-tabs__section{padding:var(--mg-spacing-150)}.mg-tabs--stacked>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link,.mg-tabs--stacked>.mg-tabs__list>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link,.mg-tabs--stacked>.mg-tabs__list>.mg-tabs__item>.mg-tabs__link,.mg-tabs--stacked>.mg-tabs__panels>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link{padding-right:2.5rem;position:relative}.mg-tabs--stacked>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link:focus-visible,.mg-tabs--stacked>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link:hover,.mg-tabs--stacked>.mg-tabs__list>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link:focus-visible,.mg-tabs--stacked>.mg-tabs__list>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link:hover,.mg-tabs--stacked>.mg-tabs__list>.mg-tabs__item>.mg-tabs__link:focus-visible,.mg-tabs--stacked>.mg-tabs__list>.mg-tabs__item>.mg-tabs__link:hover,.mg-tabs--stacked>.mg-tabs__panels>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link:focus-visible,.mg-tabs--stacked>.mg-tabs__panels>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link:hover{border:none}.mg-tabs--stacked>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link:before,.mg-tabs--stacked>.mg-tabs__list>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link:before,.mg-tabs--stacked>.mg-tabs__list>.mg-tabs__item>.mg-tabs__link:before,.mg-tabs--stacked>.mg-tabs__panels>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link:before{border-style:solid;border-width:.2em .2em 0 0;content:"";height:.45em;position:absolute;right:var(--mg-spacing-150);transform:rotate(-45deg);transition:transform .3s ease;vertical-align:top;width:.45em}@media (prefers-reduced-motion:reduce){.mg-tabs--stacked>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link:before,.mg-tabs--stacked>.mg-tabs__list>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link:before,.mg-tabs--stacked>.mg-tabs__list>.mg-tabs__item>.mg-tabs__link:before,.mg-tabs--stacked>.mg-tabs__panels>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link:before{transition:none}}.mg-tabs--stacked>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link.mg-tabs__stacked--open:before,.mg-tabs--stacked>.mg-tabs__list>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link.mg-tabs__stacked--open:before,.mg-tabs--stacked>.mg-tabs__list>.mg-tabs__item>.mg-tabs__link.mg-tabs__stacked--open:before,.mg-tabs--stacked>.mg-tabs__panels>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link.mg-tabs__stacked--open:before{top:30%;transform:rotate(135deg)}@media (prefers-reduced-motion:reduce){.mg-tabs--stacked>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link.mg-tabs__stacked--open:before,.mg-tabs--stacked>.mg-tabs__list>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link.mg-tabs__stacked--open:before,.mg-tabs--stacked>.mg-tabs__list>.mg-tabs__item>.mg-tabs__link.mg-tabs__stacked--open:before,.mg-tabs--stacked>.mg-tabs__panels>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link.mg-tabs__stacked--open:before{transition:none}}.mg-tabs--horizontal .mg-tabs-content[hidden]{display:none}.mg-tabs__link{background:var(--mg-color-tab-background--inactive);border:none;border-radius:var(--mg-radius-tab);color:var(--mg-color-text-tab);display:block;font-family:var(--mg-font-family-ui);font-size:var(--mg-font-size-tab);font-weight:600;line-height:1.421;margin:0;padding:var(--mg-padding-tab);position:relative;text-decoration:none}.mg-tabs__link:focus-visible,.mg-tabs__link:hover{background:var(--mg-color-tab-background--hover);border-bottom:var(--mg-spacing-25) solid var(--mg-color-tab-border--hover);color:var(--mg-color-text-tab--hover);text-decoration:none;z-index:2}.mg-tabs__link:focus-visible{box-shadow:inset 0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-color-neutral-0)),inset 0 0 0 calc(var(--mg-focus-ring-offset) + var(--mg-focus-ring-width)) rgb(var(--mg-color-focus-ring));outline:0}@media (forced-colors:active){.mg-tabs__link:focus-visible{outline:var(--mg-focus-ring-width) solid Highlight;outline-offset:calc(var(--mg-focus-ring-width)*-1)}}.mg-tabs__link.is-active{background-color:var(--mg-color-tab-background);border-bottom:var(--mg-spacing-25) solid var(--mg-color-tab-border--active);color:var(--mg-color-text-tab-active);text-shadow:none}.mg-tabs__link.is-active:focus-visible,.mg-tabs__link.is-active:hover{background:var(--mg-color-tab-background);border-bottom:var(--mg-spacing-25) solid var(--mg-color-tab-border--hover);color:var(--mg-color-text-tab-active)}.mg-tabs__section{background-color:var(--mg-color-tab-section-background);border-radius:0 0 var(--mg-radius-tab-section) var(--mg-radius-tab-section);box-shadow:var(--mg-box-shadow-tab-section);padding:var(--mg-padding-tab-section);position:relative}.mg-tabs--horizontal{max-inline-size:100%;min-inline-size:0}.mg-tabs--horizontal>.mg-tabs__rail{background:var(--mg-tab-rail-background);border:1px solid var(--mg-tab-rail-border);border-radius:calc(var(--mg-tab-radius) + var(--mg-tab-rail-padding));box-sizing:border-box;inline-size:max-content;isolation:isolate;margin-inline:auto;max-inline-size:100%;position:relative}.mg-tabs--horizontal>.mg-tabs__rail:after,.mg-tabs--horizontal>.mg-tabs__rail:before{border-radius:inherit;content:"";inline-size:var(--mg-tab-rail-fade-size);inset-block:1px;opacity:0;pointer-events:none;position:absolute;z-index:3}.mg-tabs--horizontal>.mg-tabs__rail:before{background:linear-gradient(to right,var(--mg-tab-rail-background),transparent);inset-inline-start:0}.mg-tabs--horizontal>.mg-tabs__rail:after{background:linear-gradient(to left,var(--mg-tab-rail-background),transparent);inset-inline-end:0}.mg-tabs--horizontal>.mg-tabs__rail[data-mg-tabs-overflow-end]:after,.mg-tabs--horizontal>.mg-tabs__rail[data-mg-tabs-overflow-start]:before{opacity:1}.mg-tabs--horizontal>.mg-tabs__rail:has(:focus-visible):after,.mg-tabs--horizontal>.mg-tabs__rail:has(:focus-visible):before{opacity:0}.mg-tabs--horizontal>.mg-tabs__rail:dir(rtl):before{background:linear-gradient(to left,var(--mg-tab-rail-background),transparent)}.mg-tabs--horizontal>.mg-tabs__rail:dir(rtl):after{background:linear-gradient(to right,var(--mg-tab-rail-background),transparent)}.mg-tabs--horizontal>.mg-tabs__rail>.mg-tabs__scroll{border-radius:inherit;overflow-x:auto;overscroll-behavior-x:contain;scroll-padding-inline:var(--mg-tab-rail-padding);scrollbar-width:none}.mg-tabs--horizontal>.mg-tabs__rail>.mg-tabs__scroll>.mg-tabs__list{background:transparent;box-sizing:border-box;display:flex;flex-direction:row;flex-wrap:nowrap;gap:var(--mg-tab-rail-gap);inline-size:max-content;list-style:none;margin:0;min-inline-size:100%;padding:var(--mg-tab-rail-padding)}.mg-tabs--horizontal>.mg-tabs__rail>.mg-tabs__scroll>.mg-tabs__list:after{display:none}.mg-tabs--horizontal>.mg-tabs__rail>.mg-tabs__scroll>.mg-tabs__list>.mg-tabs__item{display:flex;flex:0 0 auto;margin:0;padding:0}.mg-tabs--horizontal>.mg-tabs__rail>.mg-tabs__scroll>.mg-tabs__list>.mg-tabs__item>.mg-tabs__link{align-items:center;background:transparent;border:1px solid transparent;border-radius:var(--mg-tab-radius);box-shadow:none;box-sizing:border-box;color:var(--mg-tab-color);display:flex;justify-content:center;min-block-size:var(--mg-tab-min-block-size);padding:var(--mg-spacing-75) var(--mg-spacing-150);scroll-margin-inline:var(--mg-tab-rail-padding);text-align:center;white-space:nowrap}@media (prefers-reduced-motion:no-preference){.mg-tabs--horizontal>.mg-tabs__rail>.mg-tabs__scroll>.mg-tabs__list>.mg-tabs__item>.mg-tabs__link{transition:background-color var(--mg-motion-duration-fast) var(--mg-motion-easing-standard),border-color var(--mg-motion-duration-fast) var(--mg-motion-easing-standard),color var(--mg-motion-duration-fast) var(--mg-motion-easing-standard)}}.mg-tabs--horizontal>.mg-tabs__rail>.mg-tabs__scroll>.mg-tabs__list>.mg-tabs__item>.mg-tabs__link:hover{background:var(--mg-tab-background--hover);color:var(--mg-tab-color--hover)}.mg-tabs--horizontal>.mg-tabs__rail>.mg-tabs__scroll>.mg-tabs__list>.mg-tabs__item>.mg-tabs__link.is-active,.mg-tabs--horizontal>.mg-tabs__rail>.mg-tabs__scroll>.mg-tabs__list>.mg-tabs__item>.mg-tabs__link.is-active:hover{background:var(--mg-tab-background--active);border-color:var(--mg-tab-indicator--active);color:var(--mg-tab-color--active)}.mg-tabs--horizontal>.mg-tabs__rail>.mg-tabs__scroll>.mg-tabs__list>.mg-tabs__item>.mg-tabs__link.is-active:focus-visible,.mg-tabs--horizontal>.mg-tabs__rail>.mg-tabs__scroll>.mg-tabs__list>.mg-tabs__item>.mg-tabs__link:focus-visible{box-shadow:0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-color-neutral-0));outline:var(--mg-focus-ring-width) solid rgb(var(--mg-color-focus-ring));outline-offset:var(--mg-focus-ring-offset)}.mg-tabs--horizontal>.mg-tabs__panels{margin-block-start:var(--mg-tab-panel-gap);min-inline-size:0}.mg-tabs--horizontal>.mg-tabs__panels>.mg-tabs-content{max-inline-size:100%;min-inline-size:0}@media (forced-colors:active){.mg-tabs--horizontal>.mg-tabs__rail{border-color:CanvasText}.mg-tabs--horizontal>.mg-tabs__rail:after,.mg-tabs--horizontal>.mg-tabs__rail:before{display:none}.mg-tabs--horizontal>.mg-tabs__rail>.mg-tabs__scroll{scrollbar-width:auto}.mg-tabs--horizontal>.mg-tabs__rail>.mg-tabs__scroll>.mg-tabs__list>.mg-tabs__item>.mg-tabs__link.is-active{border-color:Highlight}}.mg-tabs--stacked>.mg-tabs__list,.mg-tabs--stacked>.mg-tabs__panels{background:transparent}.mg-tabs--stacked>.mg-tabs__list:after,.mg-tabs--stacked>.mg-tabs__panels:after{display:none}.mg-tabs--stacked>.mg-tabs-content>.mg-tabs__mobile-item,.mg-tabs--stacked>.mg-tabs__list>.mg-tabs-content>.mg-tabs__mobile-item,.mg-tabs--stacked>.mg-tabs__list>.mg-tabs__item,.mg-tabs--stacked>.mg-tabs__panels>.mg-tabs-content>.mg-tabs__mobile-item{box-shadow:inset 0 -1px 0 rgb(var(--mg-color-neutral-600)/.24);margin-bottom:0}.mg-tabs--stacked>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link,.mg-tabs--stacked>.mg-tabs__list>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link,.mg-tabs--stacked>.mg-tabs__list>.mg-tabs__item>.mg-tabs__link,.mg-tabs--stacked>.mg-tabs__panels>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link{background:rgb(var(--mg-color-neutral-0));border:0;border-radius:0;color:rgb(var(--mg-color-text));min-height:3rem;padding-block:var(--mg-spacing-150);padding-inline:var(--mg-spacing-200) 2.75rem}@media (prefers-reduced-motion:no-preference){.mg-tabs--stacked>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link,.mg-tabs--stacked>.mg-tabs__list>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link,.mg-tabs--stacked>.mg-tabs__list>.mg-tabs__item>.mg-tabs__link,.mg-tabs--stacked>.mg-tabs__panels>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link{transition:background-color var(--mg-motion-duration-fast) var(--mg-motion-easing-standard),color var(--mg-motion-duration-fast) var(--mg-motion-easing-standard)}}.mg-tabs--stacked>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link.is-active,.mg-tabs--stacked>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link.mg-tabs__stacked--open,.mg-tabs--stacked>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link:focus-visible,.mg-tabs--stacked>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link:hover,.mg-tabs--stacked>.mg-tabs__list>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link.is-active,.mg-tabs--stacked>.mg-tabs__list>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link.mg-tabs__stacked--open,.mg-tabs--stacked>.mg-tabs__list>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link:focus-visible,.mg-tabs--stacked>.mg-tabs__list>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link:hover,.mg-tabs--stacked>.mg-tabs__list>.mg-tabs__item>.mg-tabs__link.is-active,.mg-tabs--stacked>.mg-tabs__list>.mg-tabs__item>.mg-tabs__link.mg-tabs__stacked--open,.mg-tabs--stacked>.mg-tabs__list>.mg-tabs__item>.mg-tabs__link:focus-visible,.mg-tabs--stacked>.mg-tabs__list>.mg-tabs__item>.mg-tabs__link:hover,.mg-tabs--stacked>.mg-tabs__panels>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link.is-active,.mg-tabs--stacked>.mg-tabs__panels>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link.mg-tabs__stacked--open,.mg-tabs--stacked>.mg-tabs__panels>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link:focus-visible,.mg-tabs--stacked>.mg-tabs__panels>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link:hover{background:rgb(var(--mg-color-interactive)/.06);border:0;color:rgb(var(--mg-color-interactive-active))}.mg-tabs--stacked>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link:focus-visible,.mg-tabs--stacked>.mg-tabs__list>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link:focus-visible,.mg-tabs--stacked>.mg-tabs__list>.mg-tabs__item>.mg-tabs__link:focus-visible,.mg-tabs--stacked>.mg-tabs__panels>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link:focus-visible{box-shadow:0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-color-neutral-0));outline:var(--mg-focus-ring-width) solid rgb(var(--mg-color-focus-ring));outline-offset:var(--mg-focus-ring-offset)}.mg-tabs--stacked>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link:before,.mg-tabs--stacked>.mg-tabs__list>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link:before,.mg-tabs--stacked>.mg-tabs__list>.mg-tabs__item>.mg-tabs__link:before,.mg-tabs--stacked>.mg-tabs__panels>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link:before{align-items:center;background:rgb(var(--mg-color-interactive)/.06);border:0;border-radius:50%;content:"+";display:flex;font-family:var(--mg-font-family-text);font-size:var(--mg-font-size-tab);font-weight:400;height:1.875rem;justify-content:center;right:var(--mg-spacing-100);top:50%;transform:translateY(-50%);width:1.875rem}@media (prefers-reduced-motion:no-preference){.mg-tabs--stacked>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link:before,.mg-tabs--stacked>.mg-tabs__list>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link:before,.mg-tabs--stacked>.mg-tabs__list>.mg-tabs__item>.mg-tabs__link:before,.mg-tabs--stacked>.mg-tabs__panels>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link:before{transition:background-color var(--mg-motion-duration-fast) var(--mg-motion-easing-standard),scale var(--mg-motion-duration-fast) var(--mg-motion-easing-standard)}}.mg-tabs--stacked>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link.mg-tabs__stacked--open:before,.mg-tabs--stacked>.mg-tabs__list>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link.mg-tabs__stacked--open:before,.mg-tabs--stacked>.mg-tabs__list>.mg-tabs__item>.mg-tabs__link.mg-tabs__stacked--open:before,.mg-tabs--stacked>.mg-tabs__panels>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link.mg-tabs__stacked--open:before{content:"−";top:50%;transform:translateY(-50%)}.mg-tabs--stacked>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link:hover:before,.mg-tabs--stacked>.mg-tabs__list>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link:hover:before,.mg-tabs--stacked>.mg-tabs__list>.mg-tabs__item>.mg-tabs__link:hover:before,.mg-tabs--stacked>.mg-tabs__panels>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link:hover:before{background:rgb(var(--mg-color-interactive)/.12)}.mg-tabs--stacked>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link:active:before,.mg-tabs--stacked>.mg-tabs__list>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link:active:before,.mg-tabs--stacked>.mg-tabs__list>.mg-tabs__item>.mg-tabs__link:active:before,.mg-tabs--stacked>.mg-tabs__panels>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link:active:before{scale:.96}.mg-tabs--stacked>.mg-tabs-content>.mg-tabs__section,.mg-tabs--stacked>.mg-tabs__list>.mg-tabs-content>.mg-tabs__section,.mg-tabs--stacked>.mg-tabs__panels>.mg-tabs-content>.mg-tabs__section{background:rgb(var(--mg-color-neutral-0));border-radius:0;box-shadow:none;padding:var(--mg-spacing-150) var(--mg-spacing-200) var(--mg-spacing-200);text-wrap:pretty}.mg-tabs--stacked>.mg-tabs-content>.mg-tabs__section>:last-child,.mg-tabs--stacked>.mg-tabs__list>.mg-tabs-content>.mg-tabs__section>:last-child,.mg-tabs--stacked>.mg-tabs__panels>.mg-tabs-content>.mg-tabs__section>:last-child{margin-bottom:0}.mg-tabs--responsive-stacked>.mg-tabs__list>.mg-tabs__item[hidden]{display:none}[dir=rtl] .mg-tabs>ul{padding-right:0
|
|
1177
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/Tab/Tab.mdx
|
|
1178
|
+
*/.mg-tabs__list{background:var(--mg-color-tabbar-background);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0;padding:0;position:relative;width:100%}.mg-tabs__list:after{border-bottom:var(--mg-spacing-25) solid var(--mg-color-tab-border);content:" ";height:1px;margin-bottom:calc(var(--mg-spacing-25)*-1);position:relative;top:calc(var(--mg-spacing-25)*-1);width:100%;z-index:1}.mg-tabs__item{display:inline-block;-ms-flex-preferred-size:max-content;flex-basis:max-content;padding:0}.mg-tabs--horizontal .mg-tabs-content,.mg-tabs--stacked .mg-tabs-content{display:grid;list-style-type:none;padding-left:0}.mg-tabs--horizontal .mg-tabs__link.is-active+.mg-tabs-content,.mg-tabs--stacked .mg-tabs__link.is-active+.mg-tabs-content{display:block}.mg-tabs--stacked>.mg-tabs__list,.mg-tabs--stacked>.mg-tabs__panels{display:flex;flex-direction:column}.mg-tabs--stacked>.mg-tabs-content>.mg-tabs__mobile-item,.mg-tabs--stacked>.mg-tabs__list>.mg-tabs-content>.mg-tabs__mobile-item,.mg-tabs--stacked>.mg-tabs__list>.mg-tabs__item,.mg-tabs--stacked>.mg-tabs__panels>.mg-tabs-content>.mg-tabs__mobile-item{margin-bottom:var(--mg-spacing-25);width:100%}.mg-tabs--stacked>.mg-tabs-content>.mg-tabs__section,.mg-tabs--stacked>.mg-tabs__list>.mg-tabs-content>.mg-tabs__section,.mg-tabs--stacked>.mg-tabs__panels>.mg-tabs-content>.mg-tabs__section{padding:var(--mg-spacing-150)}.mg-tabs--stacked>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link,.mg-tabs--stacked>.mg-tabs__list>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link,.mg-tabs--stacked>.mg-tabs__list>.mg-tabs__item>.mg-tabs__link,.mg-tabs--stacked>.mg-tabs__panels>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link{padding-right:2.5rem;position:relative}.mg-tabs--stacked>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link:focus-visible,.mg-tabs--stacked>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link:hover,.mg-tabs--stacked>.mg-tabs__list>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link:focus-visible,.mg-tabs--stacked>.mg-tabs__list>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link:hover,.mg-tabs--stacked>.mg-tabs__list>.mg-tabs__item>.mg-tabs__link:focus-visible,.mg-tabs--stacked>.mg-tabs__list>.mg-tabs__item>.mg-tabs__link:hover,.mg-tabs--stacked>.mg-tabs__panels>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link:focus-visible,.mg-tabs--stacked>.mg-tabs__panels>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link:hover{border:none}.mg-tabs--stacked>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link:before,.mg-tabs--stacked>.mg-tabs__list>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link:before,.mg-tabs--stacked>.mg-tabs__list>.mg-tabs__item>.mg-tabs__link:before,.mg-tabs--stacked>.mg-tabs__panels>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link:before{border-style:solid;border-width:.2em .2em 0 0;content:"";height:.45em;position:absolute;right:var(--mg-spacing-150);transform:rotate(-45deg);transition:transform var(--mg-motion-duration-medium) var(--mg-motion-easing-standard);vertical-align:top;width:.45em}@media (prefers-reduced-motion:reduce){.mg-tabs--stacked>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link:before,.mg-tabs--stacked>.mg-tabs__list>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link:before,.mg-tabs--stacked>.mg-tabs__list>.mg-tabs__item>.mg-tabs__link:before,.mg-tabs--stacked>.mg-tabs__panels>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link:before{transition:none}}.mg-tabs--stacked>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link.mg-tabs__stacked--open:before,.mg-tabs--stacked>.mg-tabs__list>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link.mg-tabs__stacked--open:before,.mg-tabs--stacked>.mg-tabs__list>.mg-tabs__item>.mg-tabs__link.mg-tabs__stacked--open:before,.mg-tabs--stacked>.mg-tabs__panels>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link.mg-tabs__stacked--open:before{top:30%;transform:rotate(135deg)}@media (prefers-reduced-motion:reduce){.mg-tabs--stacked>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link.mg-tabs__stacked--open:before,.mg-tabs--stacked>.mg-tabs__list>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link.mg-tabs__stacked--open:before,.mg-tabs--stacked>.mg-tabs__list>.mg-tabs__item>.mg-tabs__link.mg-tabs__stacked--open:before,.mg-tabs--stacked>.mg-tabs__panels>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link.mg-tabs__stacked--open:before{transition:none}}.mg-tabs--horizontal .mg-tabs-content[hidden]{display:none}.mg-tabs__link{background:var(--mg-color-tab-background--inactive);border:none;border-radius:var(--mg-radius-tab);color:var(--mg-color-text-tab);display:block;font-family:var(--mg-font-family-ui);font-size:var(--mg-font-size-tab);font-weight:600;line-height:1.421;margin:0;padding:var(--mg-padding-tab);position:relative;text-decoration:none}.mg-tabs__link:focus-visible,.mg-tabs__link:hover{background:var(--mg-color-tab-background--hover);border-bottom:var(--mg-spacing-25) solid var(--mg-color-tab-border--hover);color:var(--mg-color-text-tab--hover);text-decoration:none;z-index:2}.mg-tabs__link:focus-visible{box-shadow:inset 0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-color-neutral-0)),inset 0 0 0 calc(var(--mg-focus-ring-offset) + var(--mg-focus-ring-width)) rgb(var(--mg-color-focus-ring));outline:0}@media (forced-colors:active){.mg-tabs__link:focus-visible{outline:var(--mg-focus-ring-width) solid Highlight;outline-offset:calc(var(--mg-focus-ring-width)*-1)}}.mg-tabs__link.is-active{background-color:var(--mg-color-tab-background);border-bottom:var(--mg-spacing-25) solid var(--mg-color-tab-border--active);color:var(--mg-color-text-tab-active);text-shadow:none}.mg-tabs__link.is-active:focus-visible,.mg-tabs__link.is-active:hover{background:var(--mg-color-tab-background);border-bottom:var(--mg-spacing-25) solid var(--mg-color-tab-border--hover);color:var(--mg-color-text-tab-active)}.mg-tabs__section{background-color:var(--mg-color-tab-section-background);border-radius:0 0 var(--mg-radius-tab-section) var(--mg-radius-tab-section);box-shadow:var(--mg-box-shadow-tab-section);padding:var(--mg-padding-tab-section);position:relative}.mg-tabs--horizontal{max-inline-size:100%;min-inline-size:0}.mg-tabs--horizontal>.mg-tabs__rail{background:var(--mg-tab-rail-background);border:1px solid var(--mg-tab-rail-border);border-radius:calc(var(--mg-tab-radius) + var(--mg-tab-rail-padding));box-sizing:border-box;inline-size:max-content;isolation:isolate;margin-inline:auto;max-inline-size:100%;position:relative}.mg-tabs--horizontal>.mg-tabs__rail:after,.mg-tabs--horizontal>.mg-tabs__rail:before{border-radius:inherit;content:"";inline-size:var(--mg-tab-rail-fade-size);inset-block:1px;opacity:0;pointer-events:none;position:absolute;z-index:3}.mg-tabs--horizontal>.mg-tabs__rail:before{background:linear-gradient(to right,var(--mg-tab-rail-background),transparent);inset-inline-start:0}.mg-tabs--horizontal>.mg-tabs__rail:after{background:linear-gradient(to left,var(--mg-tab-rail-background),transparent);inset-inline-end:0}.mg-tabs--horizontal>.mg-tabs__rail[data-mg-tabs-overflow-end]:after,.mg-tabs--horizontal>.mg-tabs__rail[data-mg-tabs-overflow-start]:before{opacity:1}.mg-tabs--horizontal>.mg-tabs__rail:has(:focus-visible):after,.mg-tabs--horizontal>.mg-tabs__rail:has(:focus-visible):before{opacity:0}.mg-tabs--horizontal>.mg-tabs__rail:dir(rtl):before{background:linear-gradient(to left,var(--mg-tab-rail-background),transparent)}.mg-tabs--horizontal>.mg-tabs__rail:dir(rtl):after{background:linear-gradient(to right,var(--mg-tab-rail-background),transparent)}.mg-tabs--horizontal>.mg-tabs__rail>.mg-tabs__scroll{border-radius:inherit;overflow-x:auto;overscroll-behavior-x:contain;scroll-padding-inline:var(--mg-tab-rail-padding);scrollbar-width:none}.mg-tabs--horizontal>.mg-tabs__rail>.mg-tabs__scroll>.mg-tabs__list{background:transparent;box-sizing:border-box;display:flex;flex-direction:row;flex-wrap:nowrap;gap:var(--mg-tab-rail-gap);inline-size:max-content;list-style:none;margin:0;min-inline-size:100%;padding:var(--mg-tab-rail-padding)}.mg-tabs--horizontal>.mg-tabs__rail>.mg-tabs__scroll>.mg-tabs__list:after{display:none}.mg-tabs--horizontal>.mg-tabs__rail>.mg-tabs__scroll>.mg-tabs__list>.mg-tabs__item{display:flex;flex:0 0 auto;margin:0;padding:0}.mg-tabs--horizontal>.mg-tabs__rail>.mg-tabs__scroll>.mg-tabs__list>.mg-tabs__item>.mg-tabs__link{align-items:center;background:transparent;border:1px solid transparent;border-radius:var(--mg-tab-radius);box-shadow:none;box-sizing:border-box;color:var(--mg-tab-color);display:flex;justify-content:center;min-block-size:var(--mg-tab-min-block-size);padding:var(--mg-spacing-75) var(--mg-spacing-150);scroll-margin-inline:var(--mg-tab-rail-padding);text-align:center;white-space:nowrap}@media (prefers-reduced-motion:no-preference){.mg-tabs--horizontal>.mg-tabs__rail>.mg-tabs__scroll>.mg-tabs__list>.mg-tabs__item>.mg-tabs__link{transition:background-color var(--mg-motion-duration-fast) var(--mg-motion-easing-standard),border-color var(--mg-motion-duration-fast) var(--mg-motion-easing-standard),color var(--mg-motion-duration-fast) var(--mg-motion-easing-standard)}}.mg-tabs--horizontal>.mg-tabs__rail>.mg-tabs__scroll>.mg-tabs__list>.mg-tabs__item>.mg-tabs__link:hover{background:var(--mg-tab-background--hover);color:var(--mg-tab-color--hover)}.mg-tabs--horizontal>.mg-tabs__rail>.mg-tabs__scroll>.mg-tabs__list>.mg-tabs__item>.mg-tabs__link.is-active,.mg-tabs--horizontal>.mg-tabs__rail>.mg-tabs__scroll>.mg-tabs__list>.mg-tabs__item>.mg-tabs__link.is-active:hover{background:var(--mg-tab-background--active);border-color:var(--mg-tab-indicator--active);color:var(--mg-tab-color--active)}.mg-tabs--horizontal>.mg-tabs__rail>.mg-tabs__scroll>.mg-tabs__list>.mg-tabs__item>.mg-tabs__link.is-active:focus-visible,.mg-tabs--horizontal>.mg-tabs__rail>.mg-tabs__scroll>.mg-tabs__list>.mg-tabs__item>.mg-tabs__link:focus-visible{box-shadow:0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-color-neutral-0));outline:var(--mg-focus-ring-width) solid rgb(var(--mg-color-focus-ring));outline-offset:var(--mg-focus-ring-offset)}.mg-tabs--horizontal>.mg-tabs__panels{margin-block-start:var(--mg-tab-panel-gap);min-inline-size:0}.mg-tabs--horizontal>.mg-tabs__panels>.mg-tabs-content{max-inline-size:100%;min-inline-size:0}@media (forced-colors:active){.mg-tabs--horizontal>.mg-tabs__rail{border-color:CanvasText}.mg-tabs--horizontal>.mg-tabs__rail:after,.mg-tabs--horizontal>.mg-tabs__rail:before{display:none}.mg-tabs--horizontal>.mg-tabs__rail>.mg-tabs__scroll{scrollbar-width:auto}.mg-tabs--horizontal>.mg-tabs__rail>.mg-tabs__scroll>.mg-tabs__list>.mg-tabs__item>.mg-tabs__link.is-active{border-color:Highlight}}.mg-tabs--stacked>.mg-tabs__list,.mg-tabs--stacked>.mg-tabs__panels{background:transparent}.mg-tabs--stacked>.mg-tabs__list:after,.mg-tabs--stacked>.mg-tabs__panels:after{display:none}.mg-tabs--stacked>.mg-tabs-content>.mg-tabs__mobile-item,.mg-tabs--stacked>.mg-tabs__list>.mg-tabs-content>.mg-tabs__mobile-item,.mg-tabs--stacked>.mg-tabs__list>.mg-tabs__item,.mg-tabs--stacked>.mg-tabs__panels>.mg-tabs-content>.mg-tabs__mobile-item{box-shadow:inset 0 -1px 0 rgb(var(--mg-color-neutral-600)/.24);margin-bottom:0}.mg-tabs--stacked>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link,.mg-tabs--stacked>.mg-tabs__list>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link,.mg-tabs--stacked>.mg-tabs__list>.mg-tabs__item>.mg-tabs__link,.mg-tabs--stacked>.mg-tabs__panels>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link{background:rgb(var(--mg-color-neutral-0));border:0;border-radius:0;color:rgb(var(--mg-color-text));min-height:3rem;padding-block:var(--mg-spacing-150);padding-inline:var(--mg-spacing-200) 2.75rem}@media (prefers-reduced-motion:no-preference){.mg-tabs--stacked>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link,.mg-tabs--stacked>.mg-tabs__list>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link,.mg-tabs--stacked>.mg-tabs__list>.mg-tabs__item>.mg-tabs__link,.mg-tabs--stacked>.mg-tabs__panels>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link{transition:background-color var(--mg-motion-duration-fast) var(--mg-motion-easing-standard),color var(--mg-motion-duration-fast) var(--mg-motion-easing-standard)}}.mg-tabs--stacked>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link.is-active,.mg-tabs--stacked>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link.mg-tabs__stacked--open,.mg-tabs--stacked>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link:focus-visible,.mg-tabs--stacked>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link:hover,.mg-tabs--stacked>.mg-tabs__list>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link.is-active,.mg-tabs--stacked>.mg-tabs__list>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link.mg-tabs__stacked--open,.mg-tabs--stacked>.mg-tabs__list>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link:focus-visible,.mg-tabs--stacked>.mg-tabs__list>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link:hover,.mg-tabs--stacked>.mg-tabs__list>.mg-tabs__item>.mg-tabs__link.is-active,.mg-tabs--stacked>.mg-tabs__list>.mg-tabs__item>.mg-tabs__link.mg-tabs__stacked--open,.mg-tabs--stacked>.mg-tabs__list>.mg-tabs__item>.mg-tabs__link:focus-visible,.mg-tabs--stacked>.mg-tabs__list>.mg-tabs__item>.mg-tabs__link:hover,.mg-tabs--stacked>.mg-tabs__panels>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link.is-active,.mg-tabs--stacked>.mg-tabs__panels>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link.mg-tabs__stacked--open,.mg-tabs--stacked>.mg-tabs__panels>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link:focus-visible,.mg-tabs--stacked>.mg-tabs__panels>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link:hover{background:rgb(var(--mg-color-interactive)/.06);border:0;color:rgb(var(--mg-color-interactive-active))}.mg-tabs--stacked>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link:focus-visible,.mg-tabs--stacked>.mg-tabs__list>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link:focus-visible,.mg-tabs--stacked>.mg-tabs__list>.mg-tabs__item>.mg-tabs__link:focus-visible,.mg-tabs--stacked>.mg-tabs__panels>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link:focus-visible{box-shadow:0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-color-neutral-0));outline:var(--mg-focus-ring-width) solid rgb(var(--mg-color-focus-ring));outline-offset:var(--mg-focus-ring-offset)}.mg-tabs--stacked>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link:before,.mg-tabs--stacked>.mg-tabs__list>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link:before,.mg-tabs--stacked>.mg-tabs__list>.mg-tabs__item>.mg-tabs__link:before,.mg-tabs--stacked>.mg-tabs__panels>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link:before{align-items:center;background:rgb(var(--mg-color-interactive)/.06);border:0;border-radius:50%;content:"+";display:flex;font-family:var(--mg-font-family-text);font-size:var(--mg-font-size-tab);font-weight:400;height:1.875rem;justify-content:center;right:var(--mg-spacing-100);top:50%;transform:translateY(-50%);width:1.875rem}@media (prefers-reduced-motion:no-preference){.mg-tabs--stacked>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link:before,.mg-tabs--stacked>.mg-tabs__list>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link:before,.mg-tabs--stacked>.mg-tabs__list>.mg-tabs__item>.mg-tabs__link:before,.mg-tabs--stacked>.mg-tabs__panels>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link:before{transition:background-color var(--mg-motion-duration-fast) var(--mg-motion-easing-standard),scale var(--mg-motion-duration-fast) var(--mg-motion-easing-standard)}}.mg-tabs--stacked>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link.mg-tabs__stacked--open:before,.mg-tabs--stacked>.mg-tabs__list>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link.mg-tabs__stacked--open:before,.mg-tabs--stacked>.mg-tabs__list>.mg-tabs__item>.mg-tabs__link.mg-tabs__stacked--open:before,.mg-tabs--stacked>.mg-tabs__panels>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link.mg-tabs__stacked--open:before{content:"−";top:50%;transform:translateY(-50%)}.mg-tabs--stacked>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link:hover:before,.mg-tabs--stacked>.mg-tabs__list>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link:hover:before,.mg-tabs--stacked>.mg-tabs__list>.mg-tabs__item>.mg-tabs__link:hover:before,.mg-tabs--stacked>.mg-tabs__panels>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link:hover:before{background:rgb(var(--mg-color-interactive)/.12)}.mg-tabs--stacked>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link:active:before,.mg-tabs--stacked>.mg-tabs__list>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link:active:before,.mg-tabs--stacked>.mg-tabs__list>.mg-tabs__item>.mg-tabs__link:active:before,.mg-tabs--stacked>.mg-tabs__panels>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link:active:before{scale:.96}.mg-tabs--stacked>.mg-tabs-content>.mg-tabs__section,.mg-tabs--stacked>.mg-tabs__list>.mg-tabs-content>.mg-tabs__section,.mg-tabs--stacked>.mg-tabs__panels>.mg-tabs-content>.mg-tabs__section{background:rgb(var(--mg-color-neutral-0));border-radius:0;box-shadow:none;padding:var(--mg-spacing-150) var(--mg-spacing-200) var(--mg-spacing-200);text-wrap:pretty}.mg-tabs--stacked>.mg-tabs-content>.mg-tabs__section>:last-child,.mg-tabs--stacked>.mg-tabs__list>.mg-tabs-content>.mg-tabs__section>:last-child,.mg-tabs--stacked>.mg-tabs__panels>.mg-tabs-content>.mg-tabs__section>:last-child{margin-bottom:0}.mg-tabs--responsive-stacked>.mg-tabs__list>.mg-tabs__item[hidden]{display:none}[dir=rtl] .mg-tabs>ul{padding-right:0
|
|
1170
1179
|
/* medium design */}@media (width >= 48em){[dir=rtl] .mg-tabs>ul{padding-right:var(--mg-spacing-300)}}[dir=rtl] .mg-tabs>ul li{margin-left:var(--mg-spacing-100);margin-right:0;padding-right:0}[dir=rtl] .mg-tabs--responsive-stacked>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link,[dir=rtl] .mg-tabs--responsive-stacked>.mg-tabs__panels>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link,[dir=rtl] .mg-tabs--stacked>.mg-tabs__list>.mg-tabs__item>.mg-tabs__link,[dir=rtl]>.mg-tabs__list>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link{padding-left:2.5rem;padding-right:var(--mg-spacing-200)}[dir=rtl] .mg-tabs--responsive-stacked>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link:before,[dir=rtl] .mg-tabs--responsive-stacked>.mg-tabs__panels>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link:before,[dir=rtl] .mg-tabs--stacked>.mg-tabs__list>.mg-tabs__item>.mg-tabs__link:before,[dir=rtl]>.mg-tabs__list>.mg-tabs-content>.mg-tabs__mobile-item>.mg-tabs__mobile-link:before{left:var(--mg-spacing-100);right:auto}.mg-tabs__filter{margin-bottom:var(--mg-spacing-150)}.mg-tabs__filter-input{width:100%}.mg-tabs-content--hidden,.mg-tabs__item--hidden{display:none}.mg-tabs__no-results{color:var(--mg-color-text-tab-no-results);font-style:italic;padding:var(--mg-spacing-150)}.mg-tabs__no-results--hidden{display:none}
|
|
1171
1180
|
|
|
1172
1181
|
/* Tab end */
|
|
@@ -1176,7 +1185,7 @@
|
|
|
1176
1185
|
* Binary page satisfaction widget (Was this page helpful? Yes/No) with response confirmation.
|
|
1177
1186
|
*
|
|
1178
1187
|
* Full documentation:
|
|
1179
|
-
* https://github.com/
|
|
1188
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/UserFeedback/UserFeedback.mdx
|
|
1180
1189
|
*/.mg-user-feedback{align-items:center;box-sizing:border-box;min-block-size:4.5rem;padding-block:var(--mg-spacing-100)}.mg-user-feedback__actions,.mg-user-feedback__prompt{align-items:center;display:flex;flex-wrap:wrap}.mg-user-feedback__prompt{gap:var(--mg-spacing-100) var(--mg-spacing-150)}.mg-user-feedback__actions{gap:var(--mg-spacing-100)}.mg-user-feedback__actions .mg-button{min-block-size:2.5rem}.mg-user-feedback__confirmation,.mg-user-feedback__question{margin:0}.mg-user-feedback__question{font-family:var(--mg-font-family-text);font-size:var(--mg-font-size-250);font-weight:700;line-height:1.4}.mg-user-feedback__issue{justify-self:start;text-align:start}.mg-user-feedback__confirmation{grid-column:1/-1}.mg-user-feedback__confirmation:focus{outline:0}.mg-user-feedback__confirmation:focus-visible{border-radius:var(--mg-radius-button);box-shadow:0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-color-neutral-0));outline:var(--mg-focus-ring-width) solid rgb(var(--mg-color-focus-ring));outline-offset:var(--mg-focus-ring-offset)}@media (min-width:900px){.mg-user-feedback__issue{justify-self:end;text-align:end}}
|
|
1181
1190
|
/**
|
|
1182
1191
|
* Table of Contents
|
|
@@ -1184,7 +1193,7 @@
|
|
|
1184
1193
|
* Dynamic in-article table of contents with heading hierarchy detection and scroll-spy tracking.
|
|
1185
1194
|
*
|
|
1186
1195
|
* Full documentation:
|
|
1187
|
-
* https://github.com/
|
|
1196
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/TableOfContents/TableOfContents.mdx
|
|
1188
1197
|
*/.mg-table-of-contents{border-inline-start:2px solid rgb(var(--mg-color-neutral-300));color:rgb(var(--mg-color-text));padding-inline-start:var(--mg-spacing-200)}.mg-table-of-contents>h2{font-size:var(--mg-font-size-400);margin-block:0 var(--mg-spacing-100)}.mg-table-of-contents ol,.mg-table-of-contents ul{margin-block:0;padding-inline-start:var(--mg-spacing-200)}.mg-table-of-contents li{margin-block:var(--mg-spacing-50);overflow-wrap:anywhere;padding-inline-start:var(--mg-spacing-25)}.mg-table-of-contents a{color:rgb(var(--mg-color-interactive));display:inline-block;line-height:1.5;padding-block:var(--mg-spacing-25);text-decoration:underline;text-underline-offset:.15em}.mg-table-of-contents a:hover{color:rgb(var(--mg-color-interactive-active))}.mg-table-of-contents a:focus-visible{box-shadow:0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-color-neutral-0));outline:var(--mg-focus-ring-width) solid rgb(var(--mg-color-focus-ring));outline-offset:var(--mg-focus-ring-offset)}
|
|
1189
1198
|
|
|
1190
1199
|
/**
|
|
@@ -1193,8 +1202,8 @@
|
|
|
1193
1202
|
* In-page table of contents navigation with active section indicator and smooth scrolling.
|
|
1194
1203
|
*
|
|
1195
1204
|
* Full documentation:
|
|
1196
|
-
* https://github.com/
|
|
1197
|
-
*/.mg-on-this-page-nav{align-items:center;background:rgb(var(--mg-color-neutral-0));box-shadow:inset 0 -1px 0 rgb(var(--mg-color-neutral-600)/.24);display:flex;margin-inline-start:calc(50% - 50vw);padding:0 var(--mg-container-spacer);position:sticky;top:var(--mg-on-this-page-nav-offset,0);width:100vw;z-index:var(--mg-z-index-sticky)}@media screen and (height <= 400px){.mg-on-this-page-nav{border-bottom:1px solid rgb(var(--mg-color-neutral-50));box-shadow:none;position:static}}@media screen and (min-width:900px){.mg-on-this-page-nav{padding:0 var(--mg-spacing-200)}}.mg-on-this-page-nav--hidden{display:none}.mg-on-this-page-nav__list{align-items:center;display:flex;flex:1 1 auto;list-style:none;list-style-type:"";margin:0;-webkit-mask-image:linear-gradient(to right,#000 calc(100% - var(--mg-spacing-500)),transparent);mask-image:linear-gradient(to right,#000 calc(100% - var(--mg-spacing-500)),transparent);overflow-x:auto;overscroll-behavior-x:contain;padding:0;padding-inline-end:var(--mg-spacing-300);scrollbar-width:none}.mg-on-this-page-nav__list::-webkit-scrollbar{display:none}.mg-on-this-page-nav--has-left-overflow .mg-on-this-page-nav__list{-webkit-mask-image:linear-gradient(to right,transparent,#000 var(--mg-spacing-500),#000 calc(100% - var(--mg-spacing-500)),transparent);mask-image:linear-gradient(to right,transparent,#000 var(--mg-spacing-500),#000 calc(100% - var(--mg-spacing-500)),transparent);padding-inline-start:var(--mg-spacing-300)}.mg-on-this-page-nav__item{display:flex;flex-shrink:0}.mg-on-this-page-nav__link{border-bottom:3px solid transparent;color:rgb(var(--mg-color-neutral-600));display:block;font-family:var(--mg-font-family-ui);font-size:var(--mg-font-size-300);font-weight:600;padding:var(--mg-spacing-150) var(--mg-spacing-150);text-decoration:none;transition:border-color var(--mg-motion-duration-fast) var(--mg-motion-easing-standard),color var(--mg-motion-duration-fast) var(--mg-motion-easing-standard);white-space:nowrap}@media (prefers-reduced-motion:reduce){.mg-on-this-page-nav__link{transition:none}}.mg-on-this-page-nav__link:hover{border-bottom-color:rgb(var(--mg-color-interactive-active));color:rgb(var(--mg-color-interactive-active));text-decoration:none}.mg-on-this-page-nav__link:focus-visible{box-shadow:0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-color-neutral-0));outline:var(--mg-focus-ring-width) solid rgb(var(--mg-color-focus-ring));outline-offset:var(--mg-focus-ring-offset)}.mg-on-this-page-nav__link--active,.mg-on-this-page-nav__link--active:hover{border-bottom-color:rgb(var(--mg-color-interactive));color:rgb(var(--mg-color-interactive))}.mg-on-this-page-nav__cta{background:rgb(var(--mg-color-interactive));border:0;color:rgb(var(--mg-color-neutral-0));cursor:pointer;flex-shrink:0;font-family:var(--mg-font-family-ui);font-size:var(--mg-font-size-300);font-weight:600;margin-inline-start:auto;padding:var(--mg-spacing-150) var(--mg-spacing-150);text-decoration:none;transition:background-color var(--mg-motion-duration-fast) var(--mg-motion-easing-standard);white-space:nowrap}@media (prefers-reduced-motion:reduce){.mg-on-this-page-nav__cta{transition:none}}.mg-on-this-page-nav__cta:hover{background:rgb(var(--mg-color-interactive-active));color:rgb(var(--mg-color-neutral-0));text-decoration:none}.mg-on-this-page-nav__cta:focus-visible{box-shadow:0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-color-neutral-0));outline:var(--mg-focus-ring-width) solid rgb(var(--mg-color-focus-ring));outline-offset:var(--mg-focus-ring-offset)}.mg-on-this-page-nav__scroll-btn{align-items:center;align-self:stretch;background:rgb(var(--mg-color-neutral-0));border:0;color:rgb(var(--mg-color-neutral-600));cursor:pointer;display:flex;flex-shrink:0;justify-content:center;min-width:var(--mg-spacing-250);padding:0 var(--mg-spacing-150);transition:color var(--mg-motion-duration-fast) var(--mg-motion-easing-standard)}.mg-on-this-page-nav__scroll-btn[hidden]{display:none}@media (prefers-reduced-motion:reduce){.mg-on-this-page-nav__scroll-btn{transition:none}}.mg-on-this-page-nav__scroll-btn:hover{color:rgb(var(--mg-color-interactive-active))}.mg-on-this-page-nav__scroll-btn:focus-visible{box-shadow:0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-color-neutral-0));outline:var(--mg-focus-ring-width) solid rgb(var(--mg-color-focus-ring));outline-offset:var(--mg-focus-ring-offset)}.mg-on-this-page-nav__scroll-btn svg{display:block;pointer-events:none}[dir=rtl] .mg-on-this-page-nav__scroll-btn svg{transform:scaleX(-1)}
|
|
1205
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/OnThisPageNav/OnThisPageNav.mdx
|
|
1206
|
+
*/.mg-on-this-page-nav{align-items:center;background:rgb(var(--mg-color-neutral-0));box-shadow:inset 0 -1px 0 rgb(var(--mg-color-neutral-600)/.24);display:flex;margin-inline-start:calc(50% - 50vw);padding:0 var(--mg-container-spacer);position:sticky;top:var(--mg-on-this-page-nav-offset,0);width:100vw;z-index:var(--mg-z-index-sticky)}@media screen and (height <= 400px){.mg-on-this-page-nav{border-bottom:1px solid rgb(var(--mg-color-neutral-50));box-shadow:none;position:static}}@media screen and (min-width:900px){.mg-on-this-page-nav{padding:0 var(--mg-spacing-200)}}.mg-on-this-page-nav--hidden{display:none}.mg-on-this-page-nav--align-container{--mg-on-this-page-nav-container:100vw;padding-inline:calc((100vw - var(--mg-on-this-page-nav-container))/2 + .625rem)}@media (min-width:480px){.mg-on-this-page-nav--align-container{--mg-on-this-page-nav-container:480px}}@media screen and (min-width:900px){.mg-on-this-page-nav--align-container{--mg-on-this-page-nav-container:900px;padding-inline:calc((100vw - var(--mg-on-this-page-nav-container))/2 + .625rem)}}@media (min-width:1164px){.mg-on-this-page-nav--align-container{--mg-on-this-page-nav-container:1164px}}@media (min-width:1440px){.mg-on-this-page-nav--align-container{--mg-on-this-page-nav-container:1440px}}.mg-on-this-page-nav__list{align-items:center;display:flex;--mg-list-item-indent-rtl:0;flex:1 1 auto;list-style:none;list-style-type:"";margin:0;-webkit-mask-image:linear-gradient(to right,#000 calc(100% - var(--mg-spacing-500)),transparent);mask-image:linear-gradient(to right,#000 calc(100% - var(--mg-spacing-500)),transparent);overflow-x:auto;overscroll-behavior-x:contain;padding:0;padding-inline-end:var(--mg-spacing-300);scrollbar-width:none}.mg-on-this-page-nav__list::-webkit-scrollbar{display:none}.mg-on-this-page-nav--has-left-overflow .mg-on-this-page-nav__list{-webkit-mask-image:linear-gradient(to right,transparent,#000 var(--mg-spacing-500),#000 calc(100% - var(--mg-spacing-500)),transparent);mask-image:linear-gradient(to right,transparent,#000 var(--mg-spacing-500),#000 calc(100% - var(--mg-spacing-500)),transparent);padding-inline-start:var(--mg-spacing-300)}.mg-on-this-page-nav__item{display:flex;flex-shrink:0}.mg-on-this-page-nav__link{border-bottom:3px solid transparent;color:rgb(var(--mg-color-neutral-600));display:block;font-family:var(--mg-font-family-ui);font-size:var(--mg-font-size-300);font-weight:600;padding:var(--mg-spacing-150) var(--mg-spacing-150);text-decoration:none;transition:border-color var(--mg-motion-duration-fast) var(--mg-motion-easing-standard),color var(--mg-motion-duration-fast) var(--mg-motion-easing-standard);white-space:nowrap}@media (prefers-reduced-motion:reduce){.mg-on-this-page-nav__link{transition:none}}.mg-on-this-page-nav__link:hover{border-bottom-color:rgb(var(--mg-color-interactive-active));color:rgb(var(--mg-color-interactive-active));text-decoration:none}.mg-on-this-page-nav__link:focus-visible{box-shadow:0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-color-neutral-0));outline:var(--mg-focus-ring-width) solid rgb(var(--mg-color-focus-ring));outline-offset:var(--mg-focus-ring-offset)}.mg-on-this-page-nav__link--active,.mg-on-this-page-nav__link--active:hover{border-bottom-color:rgb(var(--mg-color-interactive));color:rgb(var(--mg-color-interactive))}.mg-on-this-page-nav__cta{background:rgb(var(--mg-color-interactive));border:0;color:rgb(var(--mg-color-neutral-0));cursor:pointer;flex-shrink:0;font-family:var(--mg-font-family-ui);font-size:var(--mg-font-size-300);font-weight:600;margin-inline-start:auto;padding:var(--mg-spacing-150) var(--mg-spacing-150);text-decoration:none;transition:background-color var(--mg-motion-duration-fast) var(--mg-motion-easing-standard);white-space:nowrap}@media (prefers-reduced-motion:reduce){.mg-on-this-page-nav__cta{transition:none}}.mg-on-this-page-nav__cta:hover{background:rgb(var(--mg-color-interactive-active));color:rgb(var(--mg-color-neutral-0));text-decoration:none}.mg-on-this-page-nav__cta:focus-visible{box-shadow:0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-color-neutral-0));outline:var(--mg-focus-ring-width) solid rgb(var(--mg-color-focus-ring));outline-offset:var(--mg-focus-ring-offset)}.mg-on-this-page-nav__scroll-btn{align-items:center;align-self:stretch;background:rgb(var(--mg-color-neutral-0));border:0;color:rgb(var(--mg-color-neutral-600));cursor:pointer;display:flex;flex-shrink:0;justify-content:center;min-width:var(--mg-spacing-250);padding:0 var(--mg-spacing-150);transition:color var(--mg-motion-duration-fast) var(--mg-motion-easing-standard)}.mg-on-this-page-nav__scroll-btn[hidden]{display:none}@media (prefers-reduced-motion:reduce){.mg-on-this-page-nav__scroll-btn{transition:none}}.mg-on-this-page-nav__scroll-btn:hover{color:rgb(var(--mg-color-interactive-active))}.mg-on-this-page-nav__scroll-btn:focus-visible{box-shadow:0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-color-neutral-0));outline:var(--mg-focus-ring-width) solid rgb(var(--mg-color-focus-ring));outline-offset:var(--mg-focus-ring-offset)}.mg-on-this-page-nav__scroll-btn svg{display:block;pointer-events:none}[dir=rtl] .mg-on-this-page-nav__scroll-btn svg{transform:scaleX(-1)}[dir=rtl] .mg-on-this-page-nav--has-left-overflow .mg-on-this-page-nav__list,[dir=rtl] .mg-on-this-page-nav__list{-webkit-mask-image:linear-gradient(to left,#000 calc(100% - var(--mg-spacing-500)),transparent);mask-image:linear-gradient(to left,#000 calc(100% - var(--mg-spacing-500)),transparent);padding-inline-start:0}[dir=rtl] .mg-on-this-page-nav--has-right-overflow .mg-on-this-page-nav__list{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - var(--mg-spacing-500)),transparent);mask-image:linear-gradient(to right,#000 calc(100% - var(--mg-spacing-500)),transparent);padding-inline-start:var(--mg-spacing-300)}[dir=rtl] .mg-on-this-page-nav--has-left-overflow.mg-on-this-page-nav--has-right-overflow .mg-on-this-page-nav__list{-webkit-mask-image:linear-gradient(to right,transparent,#000 var(--mg-spacing-500),#000 calc(100% - var(--mg-spacing-500)),transparent);mask-image:linear-gradient(to right,transparent,#000 var(--mg-spacing-500),#000 calc(100% - var(--mg-spacing-500)),transparent);padding-inline-start:var(--mg-spacing-300)}:where(html:has(.mg-on-this-page-nav:not(.mg-on-this-page-nav--hidden))){--mg-on-this-page-nav-scroll-padding:calc(var(--mg-on-this-page-nav-scroll-padding-base, 0px) + var(--mg-on-this-page-nav-offset, 0px) + var(--mg-on-this-page-nav-block-size, 0px));scroll-padding-top:var(--mg-on-this-page-nav-scroll-padding)}
|
|
1198
1207
|
|
|
1199
1208
|
/**
|
|
1200
1209
|
* Preview Access
|
|
@@ -1202,7 +1211,7 @@
|
|
|
1202
1211
|
* Protected preview bar and password gate interface for staging and draft content views.
|
|
1203
1212
|
*
|
|
1204
1213
|
* Full documentation:
|
|
1205
|
-
* https://github.com/
|
|
1214
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/PreviewAccess/PreviewAccess.mdx
|
|
1206
1215
|
*/body:has([data-mg-preview-access]:not(.mg-preview-access--unlocked))>:not(.mg-preview-access__overlay){visibility:hidden!important}html:has(body [data-mg-preview-access]:not(.mg-preview-access--unlocked)){overflow:hidden}.mg-preview-access__overlay{align-items:center;background:var(--mg-color-modal-scrim);display:flex;inset:0;justify-content:center;padding:var(--mg-spacing-200);position:fixed;visibility:visible!important;z-index:var(--mg-z-index-modal)}.mg-preview-access__modal{background:rgb(var(--mg-color-white));border-radius:0;border-top:.25rem solid rgb(var(--mg-color-interactive));box-shadow:0 .5rem 2rem rgba(0,0,0,.25);max-width:30rem;padding:var(--mg-spacing-350);width:100%}.mg-preview-access__eyebrow{color:rgb(var(--mg-color-neutral-700));font-family:var(--mg-font-family-ui);font-size:var(--mg-font-size-250);font-weight:700;margin:0 0 var(--mg-spacing-50)}.mg-preview-access__title{color:rgb(var(--mg-color-neutral-800));font-family:var(--mg-font-family-ui);font-size:var(--mg-font-size-500);line-height:1.2;margin:0 0 var(--mg-spacing-150)}.mg-preview-access__body{color:rgb(var(--mg-color-neutral-700));font-family:var(--mg-font-family-text);font-size:var(--mg-font-size-300);line-height:1.5;margin:0 0 var(--mg-spacing-250)}.mg-preview-access__form{margin:0}.mg-preview-access__label{color:rgb(var(--mg-color-neutral-700));display:block;font-family:var(--mg-font-family-ui);font-size:var(--mg-font-size-300);font-weight:700;margin:0 0 var(--mg-spacing-50)}.mg-preview-access__field{display:flex;gap:var(--mg-spacing-50);margin:0 0 var(--mg-spacing-50)}.mg-preview-access__input{background:rgb(var(--mg-color-white));border:1px solid rgb(var(--mg-color-neutral-200));border-radius:0;color:rgb(var(--mg-color-neutral-800));flex:1;font-family:var(--mg-font-family-text);font-size:var(--mg-font-size-300);min-width:0;padding:var(--mg-spacing-100) var(--mg-spacing-150)}.mg-preview-access__input:focus{border-color:rgb(var(--mg-color-form-focus));box-shadow:0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-color-neutral-0));outline:var(--mg-focus-ring-width) solid rgb(var(--mg-color-focus-ring));outline-offset:var(--mg-focus-ring-offset)}.mg-preview-access__submit{background:rgb(var(--mg-color-interactive));border:0;border-radius:0;color:rgb(var(--mg-color-white));cursor:pointer;font-family:var(--mg-font-family-text);font-size:var(--mg-font-size-300);font-weight:600;padding:var(--mg-spacing-100) var(--mg-spacing-200)}.mg-preview-access__submit:hover{background:rgb(var(--mg-color-interactive-active));filter:brightness(.92)}.mg-preview-access__submit:focus-visible{box-shadow:0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-color-neutral-0));outline:var(--mg-focus-ring-width) solid rgb(var(--mg-color-focus-ring));outline-offset:var(--mg-focus-ring-offset)}.mg-preview-access__error{color:rgb(var(--mg-color-red-900));margin:0 0 var(--mg-spacing-150);min-height:var(--mg-spacing-200)}.mg-preview-access__contact,.mg-preview-access__error{font-family:var(--mg-font-family-text);font-size:var(--mg-font-size-250)}.mg-preview-access__contact{border-top:1px solid rgb(var(--mg-color-neutral-100));color:rgb(var(--mg-color-neutral-600));margin:0;padding-top:var(--mg-spacing-150)}.mg-preview-access__contact a{color:rgb(var(--mg-color-interactive));text-decoration:underline}
|
|
1207
1216
|
|
|
1208
1217
|
/**
|
|
@@ -1211,7 +1220,7 @@
|
|
|
1211
1220
|
* Styles for the UNDRR Search Widget component with faceted filtering and responsive layouts.
|
|
1212
1221
|
*
|
|
1213
1222
|
* Full documentation:
|
|
1214
|
-
* https://github.com/
|
|
1223
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/SyndicationSearchWidget/SyndicationSearchWidget.mdx
|
|
1215
1224
|
*/
|
|
1216
1225
|
/**
|
|
1217
1226
|
* Search Widget Teaser Hide (Deprecated)
|
|
@@ -1219,16 +1228,15 @@
|
|
|
1219
1228
|
* Legacy helper styles for hiding syndicated search teaser content.
|
|
1220
1229
|
*
|
|
1221
1230
|
* Full documentation:
|
|
1222
|
-
* https://github.com/
|
|
1223
|
-
*/.mg-search--hide-contentType .mg-card__label,.mg-search--hide-date .mg-card__date,.mg-search--hide-image .mg-card__visual,.mg-search--hide-organization .mg-card__organization,.mg-search--hide-publicationType .mg-card__publication-type,.mg-search--hide-siteName .mg-search__result-site-name,.mg-search--hide-summary .mg-card__description{display:none}.mg-u-sr-only{border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.mg-search-widget{font-family:inherit;line-height:1.5;position:relative}.mg-search__progress{background:rgb(var(--mg-color-neutral-50));height:3px;left:0;overflow:hidden;position:absolute;right:0;top:0;z-index:10}.mg-search__progress-bar{animation:mg-search-progress 1.2s ease-in-out infinite;background:linear-gradient(90deg,rgb(var(--mg-color-interactive)),rgb(var(--mg-color-interactive-active)));height:100%;width:30%}@keyframes mg-search-progress{0%{transform:translateX(-100%)}50%{transform:translateX(200%)}to{transform:translateX(400%)}}.mg-search-bar,.mg-search__form{display:flex;gap:0;margin-bottom:var(--mg-spacing-100);margin-top:0}.mg-search-bar__input-wrapper,.mg-search__input-wrapper{flex:1;position:relative}.mg-search__input{padding-inline-end:2.75rem;transition:border-color .2s,box-shadow .2s}.mg-search__input::placeholder{color:rgb(var(--mg-color-neutral-500))}.mg-search__clear{align-items:center;background:none;border:none;color:rgb(var(--mg-color-text));cursor:pointer;display:inline-flex;font-size:1.125rem;height:2.25rem;inset-inline-end:var(--mg-spacing-50);justify-content:center;line-height:1;padding:0;position:absolute;top:50%;transform:translateY(-50%);width:2.25rem}.mg-search__clear:hover{color:rgb(var(--mg-color-interactive))}@keyframes mg-search-spin{to{transform:rotate(1turn)}}.mg-search__submit{gap:.5rem}.mg-search__submit-icon{align-items:center;display:inline-flex;line-height:1}.mg-search__active-filters{align-items:center;background:rgb(var(--mg-color-blue-50));border-radius:var(--mg-spacing-25);display:flex;flex-wrap:wrap;gap:var(--mg-spacing-50);margin-bottom:var(--mg-spacing-100);padding:var(--mg-spacing-75)}.mg-search__active-filters-label{color:rgb(var(--mg-color-text));font-weight:500;margin-inline-end:var(--mg-spacing-25)}.mg-search__active-filters-list{display:flex;flex-wrap:wrap;gap:var(--mg-spacing-50);list-style:none;list-style-type:"";margin:0;padding:0}.mg-search__filter-chip{align-items:center;background:#fff;border:1px solid rgb(var(--mg-color-neutral-100));border-radius:var(--mg-spacing-25);color:rgb(var(--mg-color-text));cursor:pointer;display:inline-flex;gap:var(--mg-spacing-50);padding:var(--mg-spacing-25) var(--mg-spacing-50);transition:background-color .2s,border-color .2s}.mg-search__filter-chip:hover{background:rgb(var(--mg-color-blue-100));border-color:rgb(var(--mg-color-interactive))}.mg-search__filter-chip:focus-visible{box-shadow:0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-color-neutral-0));outline:var(--mg-focus-ring-width) solid rgb(var(--mg-color-focus-ring));outline-offset:var(--mg-focus-ring-offset)}.mg-search__filter-chip-remove{font-weight:900}.mg-search__clear-all{background:none;border:1px solid rgb(var(--mg-color-interactive));border-radius:var(--mg-spacing-25);color:rgb(var(--mg-color-interactive));cursor:pointer;padding:var(--mg-spacing-25) var(--mg-spacing-75);transition:background-color .2s,color .2s}.mg-search__clear-all:hover{background:rgb(var(--mg-color-interactive));color:#fff}.mg-search__content{display:flex;gap:var(--mg-spacing-200)}.mg-search__main{flex:1;min-width:0}.mg-search__sidebar{flex-shrink:0;width:280px}@media (width <= 768px){.mg-search__sidebar{display:none}}.mg-search__facets-strip{margin-bottom:var(--mg-spacing-150)}.mg-search__facets-strip .mg-search__facets{align-items:flex-end;flex-direction:row;flex-wrap:wrap;gap:var(--mg-spacing-100) var(--mg-spacing-150)}.mg-search__facets-strip .mg-search__facet-containers{display:contents}.mg-search__facets-strip .mg-search__facet,.mg-search__facets-strip .mg-search__sort{flex:1 1 12.5rem;max-width:17.5rem;min-width:11.25rem}@media (width <= 768px){.mg-search__facets-strip{display:none}}.mg-search__results{transition:opacity .2s ease-out}.mg-search__results-header{align-items:center;display:flex;flex-wrap:wrap;gap:var(--mg-spacing-50);justify-content:space-between;margin-bottom:var(--mg-spacing-100)}.mg-search__results-count{color:rgb(var(--mg-color-neutral-500));margin:0}.mg-search__results-count strong{color:rgb(var(--mg-color-text))}.mg-search__results-time{color:rgb(var(--mg-color-neutral-500))}.mg-search__filter-btn{align-items:center;background:transparent;border:1px solid rgb(var(--mg-color-neutral-100));border-radius:var(--mg-spacing-25);color:rgb(var(--mg-color-interactive));cursor:pointer;display:none;font-size:var(--mg-font-size-200);font-weight:500;gap:var(--mg-spacing-25);padding:var(--mg-spacing-50) var(--mg-spacing-75);transition:background-color .15s,border-color .15s;white-space:nowrap}.mg-search__filter-btn:hover{background:rgb(var(--mg-color-blue-50));border-color:rgb(var(--mg-color-interactive))}.mg-search__filter-btn:focus-visible{box-shadow:0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-color-neutral-0));outline:var(--mg-focus-ring-width) solid rgb(var(--mg-color-focus-ring));outline-offset:var(--mg-focus-ring-offset)}.mg-search__filter-btn-icon{flex-shrink:0}.mg-search__filter-btn-badge{align-items:center;background:rgb(var(--mg-color-interactive));border-radius:9px;color:#fff;display:inline-flex;font-size:var(--mg-font-size-200);font-weight:600;height:18px;justify-content:center;min-width:18px;padding:0 var(--mg-spacing-25)}.mg-search__results-list{display:flex;flex-direction:column;gap:var(--mg-spacing-150)}.mg-search__results-more{background:rgb(var(--mg-color-blue-50));border-radius:var(--mg-spacing-25);color:rgb(var(--mg-color-neutral-500));font-size:var(--mg-font-size-200);margin-top:var(--mg-spacing-150);padding:var(--mg-spacing-100);text-align:center}.mg-search__results-empty,.mg-search__results-placeholder{color:rgb(var(--mg-color-neutral-500));padding:var(--mg-spacing-200);text-align:center}.mg-search__results-empty p,.mg-search__results-placeholder p{margin:0 0 var(--mg-spacing-50)}.mg-search__results-hint{font-size:var(--mg-font-size-200)}.mg-search__results-error{background:rgb(var(--mg-color-red-50));border:1px solid rgb(var(--mg-color-red-400));border-radius:var(--mg-spacing-25);padding:var(--mg-spacing-100)}.mg-search__results-error p{margin:0 0 var(--mg-spacing-50)}.mg-search__results-error p:last-child{margin-bottom:0}.mg-search__result{border-bottom:1px solid rgb(var(--mg-color-neutral-50));padding-bottom:var(--mg-spacing-150)}.mg-search__result:last-child{border-bottom:none;padding-bottom:0}.mg-search__result-content{display:flex;gap:var(--mg-spacing-100)}.mg-search__result-image{flex-shrink:0;width:120px}.mg-search__result-image img{border-radius:var(--mg-spacing-25);height:auto;object-fit:cover;width:100%}@media (width <= 480px){.mg-search__result-image{display:none}}.mg-search__result-text{flex:1;min-width:0}.mg-search__result-title{font-size:var(--mg-font-size-200);font-weight:600;line-height:1.3;margin:0 0 var(--mg-spacing-50)}.mg-search__result-title a{color:rgb(var(--mg-color-interactive));text-decoration:none}.mg-search__result-title a:hover{text-decoration:underline}.mg-search__result-title a em{background:rgb(var(--mg-color-blue-900)/.1);font-style:normal;padding:0 2px}.mg-search__result-meta{color:rgb(var(--mg-color-neutral-500));display:flex;flex-wrap:wrap;font-size:var(--mg-font-size-150);gap:var(--mg-spacing-50);margin-bottom:var(--mg-spacing-50)}.mg-search__result-type{background:rgb(var(--mg-color-blue-50));border-radius:var(--mg-spacing-25);letter-spacing:.025em;padding:var(--mg-spacing-25) var(--mg-spacing-50);text-transform:uppercase}.mg-search__result-date:before,.mg-search__result-domain:before{color:rgb(var(--mg-color-neutral-100));content:"•";margin-inline-end:var(--mg-spacing-50)}.mg-search__result-snippet{color:rgb(var(--mg-color-text));font-size:var(--mg-font-size-150);line-height:1.6;margin:0}.mg-search__result-snippet em{background:rgb(var(--mg-color-blue-900)/.1);font-style:normal;padding:0 2px}.mg-search__result-metrics{display:flex;flex-wrap:wrap;gap:var(--mg-spacing-50);margin-bottom:var(--mg-spacing-50)}.mg-search__result-metric{background:var(--mg-color-yellow-light);border-radius:var(--mg-spacing-25);display:inline-block;font-size:var(--mg-font-size-200);padding:var(--mg-spacing-25) var(--mg-spacing-50)}.mg-search__skeleton{display:flex;flex-direction:column;gap:var(--mg-spacing-150)}.mg-search__skeleton-item{border-bottom:1px solid rgb(var(--mg-color-neutral-50));padding-bottom:var(--mg-spacing-150)}.mg-search__skeleton-meta,.mg-search__skeleton-text,.mg-search__skeleton-title{animation:mg-search-shimmer 1.5s infinite;background:linear-gradient(90deg,rgb(var(--mg-color-neutral-25)) 25%,#e8e8e8 50%,rgb(var(--mg-color-neutral-25)) 75%);background-size:200% 100%;border-radius:var(--mg-spacing-25)}.mg-search__skeleton-title{height:var(--mg-spacing-150);margin-bottom:var(--mg-spacing-75);width:70%}.mg-search__skeleton-meta{height:var(--mg-spacing-100);margin-bottom:var(--mg-spacing-75);width:40%}.mg-search__skeleton-text{height:var(--mg-spacing-100);margin-bottom:var(--mg-spacing-50);width:100%}.mg-search__skeleton-text--short{width:60%}.mg-search__skeleton--card{flex-direction:row}.mg-search__skeleton-card{border:1px solid rgb(var(--mg-color-neutral-50));border-radius:var(--mg-spacing-25);display:flex;flex-direction:column;overflow:hidden}.mg-search__skeleton-card-image{animation:mg-search-shimmer 1.5s infinite;aspect-ratio:16/9;background:linear-gradient(90deg,rgb(var(--mg-color-neutral-25)) 25%,#e8e8e8 50%,rgb(var(--mg-color-neutral-25)) 75%);background-size:200% 100%}.mg-search__skeleton-card-body{padding:var(--mg-spacing-100)}.mg-search__skeleton-card-body .mg-search__skeleton-title{width:85%}.mg-search__skeleton-card-body .mg-search__skeleton-meta{margin-bottom:0;width:50%}@keyframes mg-search-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.mg-search__facets-placeholder{background:rgb(var(--mg-color-blue-50));border-radius:var(--mg-spacing-25);padding:var(--mg-spacing-100)}.mg-search__facets-notice{color:rgb(var(--mg-color-neutral-500));font-size:var(--mg-font-size-200);margin:0;text-align:center}.mg-search__facets{display:flex;flex-direction:column;gap:var(--mg-spacing-150)}.mg-search__facets-loading{color:rgb(var(--mg-color-neutral-500));font-size:var(--mg-font-size-200);padding:var(--mg-spacing-100);text-align:center}.mg-search__facet-containers{display:flex;flex-direction:column;gap:var(--mg-spacing-100)}.mg-search__sort{border:none;margin:0;padding:0}.mg-search__sort legend{color:rgb(var(--mg-color-text));font-size:var(--mg-font-size-200);font-weight:600;margin-bottom:var(--mg-spacing-50)}.mg-search__facet{border:none;margin:0;padding:0}.mg-search__facet legend{color:rgb(var(--mg-color-text));font-size:var(--mg-font-size-200);font-weight:600;margin-bottom:var(--mg-spacing-50)}.mg-search__facet-select{background-color:rgb(var(--mg-color-neutral-50));border:1px solid rgb(var(--mg-color-neutral-600)/.22);border-radius:var(--mg-radius-form-input);cursor:pointer;font-size:var(--mg-font-size-200);padding:var(--mg-spacing-50);width:100%}.mg-search__facet-select:focus-visible{background-color:rgb(var(--mg-color-neutral-0));border-color:rgb(var(--mg-color-interactive));box-shadow:0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-color-neutral-0));outline:none;outline:var(--mg-focus-ring-width) solid rgb(var(--mg-color-focus-ring));outline-offset:var(--mg-focus-ring-offset)}.mg-search__facet-select[multiple]{min-height:100px}.mg-search__facet-select[multiple] option{padding:var(--mg-spacing-25) var(--mg-spacing-50)}.mg-search__facet-select[multiple] option:checked{background-color:rgb(var(--mg-color-blue-50))}.mg-search__result-badges{align-items:center;display:inline-flex;flex-wrap:wrap;gap:var(--mg-spacing-50);margin-bottom:var(--mg-spacing-25)}.mg-search__result-site-name{background:rgb(var(--mg-color-blue-50));border-radius:var(--mg-spacing-25);color:rgb(var(--mg-color-neutral-500));display:inline-block;font-size:var(--mg-font-size-200);margin:0;padding:var(--mg-spacing-25) var(--mg-spacing-50)}.mg-search__result--error{background:rgb(var(--mg-color-red-50));border:1px solid rgb(var(--mg-color-red-400));border-radius:var(--mg-spacing-25);padding:var(--mg-spacing-100)}.mg-search__result-error{color:#d32f2f;margin:0}.mg-search__result-error a{color:inherit;text-decoration:underline}.mg-search__results-grid{gap:var(--mg-spacing-150)}.mg-search__results-grid>[role=listitem]{display:flex}.mg-search__results-grid .mg-search__result{border-bottom:0;padding-bottom:0}.mg-search__result--pending{opacity:0;transform:translateX(-20px)}.mg-search__result--visible{opacity:1;transform:translateX(0);transition:opacity .3s ease-out,transform .3s ease-out}.mg-search__results--stale{opacity:.5;pointer-events:none}.mg-search__main--stale{position:relative}.mg-search__main--stale:after{animation:mg-search-pulse 1.5s ease-in-out infinite;background:hsla(0,0%,100%,.4);content:"";inset:0;pointer-events:none;position:absolute}@keyframes mg-search-pulse{0%,to{opacity:.3}50%{opacity:.6}}.mg-search__facet .mg-search__facet-overflow-item{display:none}.mg-search__facet--expanded .mg-search__facet-overflow-item{display:block}.mg-search__facet-toggle{align-items:center;background:none;border:none;color:rgb(var(--mg-color-interactive));cursor:pointer;display:inline-flex;font-size:var(--mg-font-size-200);font-weight:500;gap:var(--mg-spacing-25);margin-top:var(--mg-spacing-50);padding:var(--mg-spacing-50) 0}.mg-search__facet-toggle:hover{text-decoration:underline}.mg-search__facet-toggle:focus-visible{box-shadow:0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-color-neutral-0));outline:var(--mg-focus-ring-width) solid rgb(var(--mg-color-focus-ring));outline-offset:var(--mg-focus-ring-offset)}.mg-search__facet-toggle-icon{border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid;display:inline-block;height:0;transition:transform .2s ease;width:0}.mg-search__facet-toggle[aria-expanded=false] .mg-search__facet-toggle-icon{transform:rotate(-90deg)}.mg-search__facet-toggle[aria-expanded=true] .mg-search__facet-toggle-icon{transform:rotate(0deg)}.mg-search__loader{align-items:center;display:flex;justify-content:center;padding:var(--mg-spacing-200)}.mg-search__spinner{animation:mg-search-spin 1s linear infinite;border-top:4px solid rgb(var(--mg-color-neutral-50));border:4px solid rgb(var(--mg-color-neutral-50));border-radius:50%;border-top-color:rgb(var(--mg-color-interactive));height:40px;width:40px}.mg-search__loader-text{color:rgb(var(--mg-color-neutral-500));margin-top:var(--mg-spacing-100);text-align:center}.mg-select{margin-top:var(--mg-spacing-50);position:relative;width:100%}.mg-select__trigger{align-items:center;background-color:rgb(var(--mg-color-neutral-50));border:1px solid rgb(var(--mg-color-neutral-600)/.22);border-radius:var(--mg-radius-form-input);color:rgb(var(--mg-color-text));cursor:pointer;display:flex;font-size:var(--mg-font-size-300);justify-content:space-between;min-height:44px;padding:var(--mg-spacing-50) var(--mg-spacing-75);text-align:start;transition:border-color .15s,box-shadow .15s;width:100%}.mg-select__trigger:hover{border-color:rgb(var(--mg-color-interactive))}.mg-select__trigger:focus-visible{background-color:rgb(var(--mg-color-neutral-0));border-color:rgb(var(--mg-color-interactive));box-shadow:0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-color-neutral-0));outline:0;outline:var(--mg-focus-ring-width) solid rgb(var(--mg-color-focus-ring));outline-offset:var(--mg-focus-ring-offset)}.mg-select--open .mg-select__trigger{border-bottom-left-radius:0;border-bottom-right-radius:0;border-color:rgb(var(--mg-color-interactive))}.mg-select__trigger-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mg-select__trigger-icon{color:rgb(var(--mg-color-neutral-500));flex-shrink:0;margin-inline-start:var(--mg-spacing-50);transition:transform .2s ease}.mg-select--open .mg-select__trigger-icon{transform:rotate(180deg)}.mg-select__backdrop{background:transparent;cursor:default;inset:0;position:fixed;z-index:calc(var(--mg-z-index-modal) - 1)}.mg-select__dropdown{animation:mg-select-fade-in .15s ease-out;background:#fff;border:1px solid rgb(var(--mg-color-interactive));border-radius:0 0 var(--mg-spacing-25) var(--mg-spacing-25);border-top:none;box-shadow:0 4px 12px rgba(0,0,0,.1);left:0;position:absolute;right:0;top:100%;z-index:var(--mg-z-index-modal)}@keyframes mg-select-fade-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.mg-select__search{border-bottom:1px solid rgb(var(--mg-color-neutral-50));padding:var(--mg-spacing-50)}.mg-select__search-input{background-color:rgb(var(--mg-color-neutral-50));border:1px solid rgb(var(--mg-color-neutral-600)/.22);border-radius:var(--mg-radius-form-input);font-size:var(--mg-font-size-300);padding:var(--mg-spacing-50);width:100%}.mg-select__search-input:focus-visible{background-color:rgb(var(--mg-color-neutral-0));border-color:rgb(var(--mg-color-interactive));box-shadow:0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-color-neutral-0));outline:0;outline:var(--mg-focus-ring-width) solid rgb(var(--mg-color-focus-ring));outline-offset:var(--mg-focus-ring-offset)}.mg-select__search-input::placeholder{color:rgb(var(--mg-color-neutral-500))}.mg-select__list{list-style:none;margin:0;max-height:240px;overflow-y:auto;overscroll-behavior:contain;padding:var(--mg-spacing-25) 0}.mg-select__option{align-items:center;cursor:pointer;display:flex;gap:var(--mg-spacing-50);min-height:40px;padding:var(--mg-spacing-50) var(--mg-spacing-75);transition:background-color .1s ease}.mg-select__option--highlighted,.mg-select__option:hover{background-color:rgb(var(--mg-color-blue-50))}.mg-select__option--selected{background-color:rgb(var(--mg-color-blue-900)/.08)}.mg-select__option--selected .mg-select__option-label{color:rgb(var(--mg-color-interactive));font-weight:600}.mg-select__option--selected.mg-select__option--highlighted{background-color:rgb(var(--mg-color-blue-900)/.12)}.mg-select__indicator{align-items:center;border:2px solid rgb(var(--mg-color-form-check));color:rgb(var(--mg-color-interactive));display:flex;flex-shrink:0;height:16px;justify-content:center;width:16px}.mg-select__indicator--checkbox{border-radius:var(--mg-radius-form-input)}.mg-select__indicator--radio{border-radius:50%}.mg-select__indicator:hover{border-color:rgb(var(--mg-color-form-check--hover))}.mg-select__option--selected .mg-select__indicator{background-color:rgb(var(--mg-color-form-check--checked));border-color:rgb(var(--mg-color-form-check--checked));color:rgb(var(--mg-color-white))}.mg-select__indicator-dot{background:#fff;border-radius:50%;height:8px;width:8px}.mg-select__option-label{color:rgb(var(--mg-color-text));flex:1;font-size:var(--mg-font-size-200);line-height:1.4}.mg-select__option-count{color:rgb(var(--mg-color-neutral-500));flex-shrink:0;font-size:var(--mg-font-size-100)}.mg-select__option--subtype{padding-inline-start:var(--mg-spacing-150)}.mg-select__option--subtype .mg-select__option-label{font-size:var(--mg-font-size-100)}.mg-select__option--subtype .mg-select__option-label:before{color:rgb(var(--mg-color-neutral-500));content:"└";margin-inline-end:var(--mg-spacing-25)}.mg-select__empty{color:rgb(var(--mg-color-neutral-500));font-size:var(--mg-font-size-200);padding:var(--mg-spacing-100);text-align:center}.mg-search__facet-option{align-items:baseline;border-radius:var(--mg-spacing-25);display:grid;gap:0 var(--mg-spacing-25);grid-template-columns:1.25em 1fr auto;padding:var(--mg-spacing-50);transition:background-color .15s ease}.mg-search__facet-option:hover{background-color:rgb(var(--mg-color-blue-900)/.05)}.mg-search__facet-option input[type=checkbox],.mg-search__facet-option input[type=radio]{accent-color:rgb(var(--mg-color-form-check--checked));cursor:pointer;margin:0}.mg-search__facet-option label{color:rgb(var(--mg-color-text));cursor:pointer;font-weight:400;line-height:1.5;padding-inline-start:var(--mg-spacing-25);text-wrap:balance}.mg-search__facet-option label:hover{color:rgb(var(--mg-color-interactive));text-decoration:underline}.mg-search__facet-option:has(input:checked){background-color:rgb(var(--mg-color-blue-900)/.08)}.mg-search__facet-option:has(input:checked) label{color:rgb(var(--mg-color-interactive));font-weight:600}.mg-search__facet-count{color:rgb(var(--mg-color-neutral-500));font-size:var(--mg-font-size-200);white-space:nowrap}.mg-search__drawer-backdrop{animation:mg-search-fade-in .2s ease-out;background:rgba(0,0,0,.5);cursor:pointer;inset:0;position:fixed;z-index:calc(var(--mg-z-index-drawer) - 1)}@keyframes mg-search-fade-in{0%{opacity:0}to{opacity:1}}.mg-search__drawer{--mg-search-drawer-offset:-100%;--mg-search-drawer-shadow-offset:4px;animation:mg-search-slide-in-start .3s ease-out;background:#fff;box-shadow:var(--mg-search-drawer-shadow-offset) 0 20px rgba(0,0,0,.15);cursor:default;display:flex;flex-direction:column;inset-block:0;inset-inline-start:0;position:fixed;width:min(320px,85vw);z-index:var(--mg-z-index-drawer)}.mg-search__drawer:dir(rtl){--mg-search-drawer-offset:100%;--mg-search-drawer-shadow-offset:-4px}@media (prefers-reduced-motion:reduce){.mg-search__drawer{animation:none}}@keyframes mg-search-slide-in-start{0%{transform:translateX(var(--mg-search-drawer-offset))}to{transform:translateX(0)}}.mg-search__drawer-header{align-items:center;border-bottom:1px solid rgb(var(--mg-color-neutral-100));display:flex;flex-shrink:0;justify-content:space-between;min-height:56px;padding:var(--mg-spacing-100) var(--mg-spacing-150)}.mg-search__drawer-title{align-items:center;color:rgb(var(--mg-color-text));display:flex;font-size:var(--mg-font-size-300);font-weight:600;gap:var(--mg-spacing-50);margin:0}.mg-search__drawer-count{align-items:center;background:rgb(var(--mg-color-interactive));border-radius:11px;color:#fff;display:inline-flex;font-size:var(--mg-font-size-200);font-weight:600;height:22px;justify-content:center;min-width:22px;padding:0 var(--mg-spacing-25)}.mg-search__drawer-close{align-items:center;background:none;border:none;border-radius:var(--mg-spacing-25);color:rgb(var(--mg-color-neutral-500));cursor:pointer;display:flex;height:44px;justify-content:center;padding:0;transition:background-color .15s,color .15s;width:44px}.mg-search__drawer-close:hover{background:rgb(var(--mg-color-blue-50));color:rgb(var(--mg-color-text))}.mg-search__drawer-close:focus-visible{box-shadow:0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-color-neutral-0));outline:var(--mg-focus-ring-width) solid rgb(var(--mg-color-focus-ring));outline-offset:var(--mg-focus-ring-offset)}.mg-search__drawer-content{flex:1;overflow-y:auto;padding:var(--mg-spacing-100) var(--mg-spacing-150);-webkit-overflow-scrolling:touch;overscroll-behavior:contain}.mg-search__drawer-footer{background:#fff;border-top:1px solid rgb(var(--mg-color-neutral-100));flex-shrink:0;padding:var(--mg-spacing-100) var(--mg-spacing-150)}.mg-search__drawer-apply{align-items:center;background:rgb(var(--mg-color-interactive));border:none;border-radius:var(--mg-spacing-25);color:#fff;cursor:pointer;display:flex;font-size:var(--mg-font-size-200);font-weight:600;gap:var(--mg-spacing-50);justify-content:center;min-height:48px;padding:var(--mg-spacing-75) var(--mg-spacing-100);transition:background-color .15s;width:100%}.mg-search__drawer-apply:hover{background:rgb(var(--mg-color-interactive-active))}.mg-search__drawer-apply:focus-visible{box-shadow:0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-color-neutral-0));outline:var(--mg-focus-ring-width) solid rgb(var(--mg-color-focus-ring));outline-offset:var(--mg-focus-ring-offset)}.mg-search__drawer-apply-count{font-weight:400;opacity:.9}@media (width <= 800px){.mg-search__filter-btn{display:inline-flex}.mg-search__sidebar{display:none}.mg-search__content{flex-direction:column}}@media (width >= 801px){.mg-search__drawer-backdrop,.mg-search__filter-btn{display:none}}.mg-search__facet input:focus-visible,.mg-search__facet-select:focus-visible{box-shadow:0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-color-neutral-0));outline:var(--mg-focus-ring-width) solid rgb(var(--mg-color-focus-ring));outline-offset:var(--mg-focus-ring-offset)}.mg-search-debug{display:none}[data-mg-search-debug=true] .mg-search-debug{display:block}.mg-search__facet-operator{display:flex;flex-direction:column;font-size:var(--mg-font-size-200);gap:var(--mg-spacing-50);margin-top:var(--mg-spacing-75)}.mg-search__facet-operator-row{align-items:center;display:flex;gap:var(--mg-spacing-50)}.mg-search__facet-operator-label{color:rgb(var(--mg-color-neutral-500));font-weight:500}.mg-search__facet-operator-hint{color:rgb(var(--mg-color-neutral-500));font-style:italic;line-height:1.4;margin:0}.mg-search__facet-operator-toggle{display:inline-flex;gap:var(--mg-spacing-25)}.mg-search__facet-operator-option{align-items:center;border-bottom:2px solid transparent;border-radius:0;color:rgb(var(--mg-color-neutral-500));cursor:pointer;display:flex;font-size:var(--mg-font-size-200);font-weight:400;padding:var(--mg-spacing-25) var(--mg-spacing-50);transition:color .15s,border-color .15s;user-select:none}.mg-search__facet-operator-option input{opacity:0;pointer-events:none;position:absolute}.mg-search__facet-operator-option:hover:not(.mg-search__facet-operator-option--active){color:rgb(var(--mg-color-text))}.mg-search__facet-operator-option--active{border-bottom-color:rgb(var(--mg-color-interactive));color:rgb(var(--mg-color-interactive));font-weight:500}.mg-search__facet-operator-option:focus-within{border-radius:var(--mg-spacing-25);box-shadow:0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-color-neutral-0));outline:var(--mg-focus-ring-width) solid rgb(var(--mg-color-focus-ring));outline-offset:var(--mg-focus-ring-offset)}.mg-search__filter-chip-connector{align-items:center;color:rgb(var(--mg-color-neutral-500));display:inline-flex;font-weight:600;letter-spacing:.05em;margin-inline-end:var(--mg-spacing-25);text-transform:uppercase}
|
|
1224
|
-
|
|
1231
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/SyndicationSearchWidget/SyndicationSearchWidget.mdx
|
|
1232
|
+
*/.mg-search--hide-contentType .mg-card__label,.mg-search--hide-date .mg-card__date,.mg-search--hide-image .mg-card__visual,.mg-search--hide-organization .mg-card__organization,.mg-search--hide-publicationType .mg-card__publication-type,.mg-search--hide-siteName .mg-search__result-site-name,.mg-search--hide-summary .mg-card__description{display:none}.mg-u-sr-only{border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.mg-search-widget{font-family:inherit;line-height:1.5;position:relative}.mg-search__progress{inset-block-start:0;inset-inline:0;position:absolute;z-index:1}.mg-search-bar,.mg-search__form{display:flex;gap:0;margin-bottom:var(--mg-spacing-100);margin-top:0}.mg-search-bar__input-wrapper,.mg-search__input-wrapper{flex:1;position:relative}.mg-search__input{padding-inline-end:2.75rem}@media (prefers-reduced-motion:no-preference){.mg-search__input{transition:border-color var(--mg-motion-duration-fast) var(--mg-motion-easing-standard),box-shadow var(--mg-motion-duration-fast) var(--mg-motion-easing-standard)}}.mg-search__input::placeholder{color:rgb(var(--mg-color-neutral-500))}.mg-search__clear{align-items:center;background:none;border:none;color:rgb(var(--mg-color-text));cursor:pointer;display:inline-flex;font-size:1.125rem;height:2.25rem;inset-inline-end:var(--mg-spacing-50);justify-content:center;line-height:1;padding:0;position:absolute;top:50%;transform:translateY(-50%);width:2.25rem}.mg-search__clear:hover{color:rgb(var(--mg-color-interactive))}.mg-search__submit{gap:.5rem}.mg-search__submit-icon{align-items:center;display:inline-flex;line-height:1}.mg-search__active-filters{align-items:center;background:rgb(var(--mg-color-blue-50));border-radius:var(--mg-spacing-25);display:flex;flex-wrap:wrap;gap:var(--mg-spacing-50);margin-bottom:var(--mg-spacing-100);padding:var(--mg-spacing-75)}.mg-search__active-filters-label{color:rgb(var(--mg-color-text));font-weight:500;margin-inline-end:var(--mg-spacing-25)}.mg-search__active-filters-list{display:flex;flex-wrap:wrap;gap:var(--mg-spacing-50);--mg-list-item-indent-rtl:0;list-style:none;list-style-type:"";margin:0;padding:0}.mg-search__filter-chip{align-items:center;background:#fff;border:1px solid rgb(var(--mg-color-neutral-100));border-radius:var(--mg-spacing-25);color:rgb(var(--mg-color-text));cursor:pointer;display:inline-flex;gap:var(--mg-spacing-50);padding:var(--mg-spacing-25) var(--mg-spacing-50)}@media (prefers-reduced-motion:no-preference){.mg-search__filter-chip{transition:background-color var(--mg-motion-duration-fast) var(--mg-motion-easing-standard),border-color var(--mg-motion-duration-fast) var(--mg-motion-easing-standard)}}.mg-search__filter-chip:hover{background:rgb(var(--mg-color-blue-100));border-color:rgb(var(--mg-color-interactive))}.mg-search__filter-chip:focus-visible{box-shadow:0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-color-neutral-0));outline:var(--mg-focus-ring-width) solid rgb(var(--mg-color-focus-ring));outline-offset:var(--mg-focus-ring-offset)}.mg-search__filter-chip-remove{font-weight:900}.mg-search__clear-all{background:none;border:1px solid rgb(var(--mg-color-interactive));border-radius:var(--mg-spacing-25);color:rgb(var(--mg-color-interactive));cursor:pointer;padding:var(--mg-spacing-25) var(--mg-spacing-75)}@media (prefers-reduced-motion:no-preference){.mg-search__clear-all{transition:background-color var(--mg-motion-duration-fast) var(--mg-motion-easing-standard),color var(--mg-motion-duration-fast) var(--mg-motion-easing-standard)}}.mg-search__clear-all:hover{background:rgb(var(--mg-color-interactive));color:#fff}.mg-search__content{display:flex;gap:var(--mg-spacing-200)}.mg-search__column{flex:1;min-width:0}.mg-search-widget .mg-search__form{max-inline-size:48rem}.mg-search__main{flex:1;min-width:0;position:relative}.mg-search__sidebar{flex-shrink:0;width:280px}@media (width <= 768px){.mg-search__sidebar{display:none}}.mg-search__facets-strip{margin-bottom:var(--mg-spacing-150)}.mg-search__facets-strip .mg-search__facets{align-items:flex-end;flex-direction:row;flex-wrap:wrap;gap:var(--mg-spacing-100) var(--mg-spacing-150)}.mg-search__facets-strip .mg-search__facet-containers{display:contents}.mg-search__facets-strip .mg-search__facet,.mg-search__facets-strip .mg-search__sort{flex:1 1 12.5rem;max-width:17.5rem;min-width:11.25rem}@media (width <= 768px){.mg-search__facets-strip{display:none}}@media (prefers-reduced-motion:no-preference){.mg-search__results{transition:opacity var(--mg-motion-duration-fast) var(--mg-motion-easing-standard)}}.mg-search__results--refreshing .mg-search__results-grid,.mg-search__results--refreshing .mg-search__results-list{opacity:.6}.mg-search__results-loader{align-items:center;color:rgb(var(--mg-color-interactive));display:inline-flex;gap:var(--mg-spacing-50);margin-inline-start:auto;min-inline-size:0;overflow-wrap:anywhere}@media (prefers-reduced-motion:no-preference){.mg-search__enter{animation:mg-search-results-in var(--mg-motion-duration-fast) var(--mg-motion-easing-standard)}}@keyframes mg-search-results-in{0%{opacity:0}to{opacity:1}}[data-mg-search-ssr]{isolation:isolate;position:relative}[data-mg-search-ssr] :where(.mg-card__visual) img{display:block}.mg-search__results-header{align-items:center;display:flex;flex-wrap:wrap;gap:var(--mg-spacing-50);justify-content:space-between;margin-bottom:var(--mg-spacing-100)}.mg-search__results-count{color:rgb(var(--mg-color-neutral-500));margin:0}.mg-search__results-count strong{color:rgb(var(--mg-color-text))}.mg-search__results-time{color:rgb(var(--mg-color-neutral-500))}.mg-search__filter-btn{align-items:center;background:transparent;border:1px solid rgb(var(--mg-color-neutral-100));border-radius:var(--mg-spacing-25);color:rgb(var(--mg-color-interactive));cursor:pointer;display:none;font-size:var(--mg-font-size-200);font-weight:500;gap:var(--mg-spacing-25);padding:var(--mg-spacing-50) var(--mg-spacing-75)}@media (prefers-reduced-motion:no-preference){.mg-search__filter-btn{transition:background-color var(--mg-motion-duration-fast) var(--mg-motion-easing-standard),border-color var(--mg-motion-duration-fast) var(--mg-motion-easing-standard)}}.mg-search__filter-btn{white-space:nowrap}.mg-search__filter-btn:hover{background:rgb(var(--mg-color-blue-50));border-color:rgb(var(--mg-color-interactive))}.mg-search__filter-btn:focus-visible{box-shadow:0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-color-neutral-0));outline:var(--mg-focus-ring-width) solid rgb(var(--mg-color-focus-ring));outline-offset:var(--mg-focus-ring-offset)}.mg-search__filter-btn-icon{flex-shrink:0}.mg-search__filter-btn-badge{align-items:center;background:rgb(var(--mg-color-interactive));border-radius:9px;color:#fff;display:inline-flex;font-size:var(--mg-font-size-200);font-weight:600;height:18px;justify-content:center;min-width:18px;padding:0 var(--mg-spacing-25)}.mg-search__results-list{display:flex;flex-direction:column;gap:var(--mg-spacing-150)}.mg-search__results-more{background:rgb(var(--mg-color-blue-50));border-radius:var(--mg-spacing-25);color:rgb(var(--mg-color-neutral-500));font-size:var(--mg-font-size-200);margin-top:var(--mg-spacing-150);padding:var(--mg-spacing-100);text-align:center}.mg-search__results-empty,.mg-search__results-placeholder{color:rgb(var(--mg-color-neutral-500));padding:var(--mg-spacing-200);text-align:center}.mg-search__results-empty p,.mg-search__results-placeholder p{margin:0 0 var(--mg-spacing-50)}.mg-search__results-hint{font-size:var(--mg-font-size-200)}.mg-search__results-error{background:rgb(var(--mg-color-red-50));border:1px solid rgb(var(--mg-color-red-400));border-radius:var(--mg-spacing-25);padding:var(--mg-spacing-100)}.mg-search__results-error p{margin:0 0 var(--mg-spacing-50)}.mg-search__results-error p:last-child{margin-bottom:0}.mg-search__result{border-bottom:1px solid rgb(var(--mg-color-neutral-50));isolation:isolate;padding-bottom:var(--mg-spacing-150);position:relative}.mg-search__result:last-child{border-bottom:none;padding-bottom:0}.mg-search__result :where(.mg-card__visual) img{display:block}.mg-search__result-content{display:flex;gap:var(--mg-spacing-100)}.mg-search__result-image{flex-shrink:0;width:120px}.mg-search__result-image img{border-radius:var(--mg-spacing-25);height:auto;object-fit:cover;width:100%}@media (width <= 480px){.mg-search__result-image{display:none}}.mg-search__result-text{flex:1;min-width:0}.mg-search__result-title{font-size:var(--mg-font-size-200);font-weight:600;line-height:1.3;margin:0 0 var(--mg-spacing-50)}.mg-search__result-title a{color:rgb(var(--mg-color-interactive));text-decoration:none}.mg-search__result-title a:hover{text-decoration:underline}.mg-search__result-title a em{background:rgb(var(--mg-color-blue-900)/.1);font-style:normal;padding:0 2px}.mg-search__result-meta{color:rgb(var(--mg-color-neutral-500));display:flex;flex-wrap:wrap;font-size:var(--mg-font-size-150);gap:var(--mg-spacing-50);margin-bottom:var(--mg-spacing-50)}.mg-search__result-type{background:rgb(var(--mg-color-blue-50));border-radius:var(--mg-spacing-25);letter-spacing:.025em;padding:var(--mg-spacing-25) var(--mg-spacing-50);text-transform:uppercase}.mg-search__result-date:before,.mg-search__result-domain:before{color:rgb(var(--mg-color-neutral-100));content:"•";margin-inline-end:var(--mg-spacing-50)}.mg-search__result-snippet{color:rgb(var(--mg-color-text));font-size:var(--mg-font-size-150);line-height:1.6;margin:0}.mg-search__result-snippet em{background:rgb(var(--mg-color-blue-900)/.1);font-style:normal;padding:0 2px}.mg-search__result-metrics{display:flex;flex-wrap:wrap;gap:var(--mg-spacing-50);margin-bottom:var(--mg-spacing-50)}.mg-search__result-metric{background:var(--mg-color-yellow-light);border-radius:var(--mg-spacing-25);display:inline-block;font-size:var(--mg-font-size-200);padding:var(--mg-spacing-25) var(--mg-spacing-50)}.mg-search__skeleton{display:flex;flex-direction:column;gap:var(--mg-spacing-150)}.mg-search__skeleton-item{border-bottom:1px solid rgb(var(--mg-color-neutral-50));padding-bottom:var(--mg-spacing-150)}.mg-search__skeleton-meta,.mg-search__skeleton-text,.mg-search__skeleton-title{background:rgb(var(--mg-color-neutral-25));border-radius:var(--mg-spacing-25)}.mg-search__skeleton-title{height:var(--mg-spacing-150);margin-bottom:var(--mg-spacing-75);width:70%}.mg-search__skeleton-meta{height:var(--mg-spacing-100);margin-bottom:var(--mg-spacing-75);width:40%}.mg-search__skeleton-text{height:var(--mg-spacing-100);margin-bottom:var(--mg-spacing-50);width:100%}.mg-search__skeleton-text--short{width:60%}.mg-search__skeleton--card{flex-direction:row}.mg-search__skeleton-card{border:1px solid rgb(var(--mg-color-neutral-50));border-radius:var(--mg-spacing-25);display:flex;flex-direction:column;overflow:hidden}.mg-search__skeleton-card-image{aspect-ratio:16/9;background:rgb(var(--mg-color-neutral-25))}.mg-search__skeleton-card-body{padding:var(--mg-spacing-100)}.mg-search__skeleton-card-body .mg-search__skeleton-title{width:85%}.mg-search__skeleton-card-body .mg-search__skeleton-meta{margin-bottom:0;width:50%}.mg-search__facets-placeholder{background:rgb(var(--mg-color-blue-50));border-radius:var(--mg-spacing-25);padding:var(--mg-spacing-100)}.mg-search__facets-notice{color:rgb(var(--mg-color-neutral-500));font-size:var(--mg-font-size-200);margin:0;text-align:center}.mg-search__facets{display:flex;flex-direction:column;gap:var(--mg-spacing-150)}.mg-search__facets-loading{color:rgb(var(--mg-color-neutral-500));font-size:var(--mg-font-size-200);padding:var(--mg-spacing-100);text-align:center}.mg-search__facet-containers{display:flex;flex-direction:column;gap:var(--mg-spacing-100)}.mg-search__sort{border:none;margin:0;padding:0}.mg-search__sort legend{color:rgb(var(--mg-color-text));font-size:var(--mg-font-size-200);font-weight:600;margin-bottom:var(--mg-spacing-50)}.mg-search__facet{border:none;margin:0;padding:0}.mg-search__facet legend{color:rgb(var(--mg-color-text));font-size:var(--mg-font-size-200);font-weight:600;margin-bottom:var(--mg-spacing-50)}.mg-search__facet-select{background-color:rgb(var(--mg-color-neutral-50));border:1px solid rgb(var(--mg-color-neutral-600)/.22);border-radius:var(--mg-radius-form-input);cursor:pointer;font-size:var(--mg-font-size-200);padding:var(--mg-spacing-50);width:100%}.mg-search__facet-select:focus-visible{background-color:rgb(var(--mg-color-neutral-0));border-color:rgb(var(--mg-color-interactive));box-shadow:0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-color-neutral-0));outline:none;outline:var(--mg-focus-ring-width) solid rgb(var(--mg-color-focus-ring));outline-offset:var(--mg-focus-ring-offset)}.mg-search__facet-select[multiple]{min-height:100px}.mg-search__facet-select[multiple] option{padding:var(--mg-spacing-25) var(--mg-spacing-50)}.mg-search__facet-select[multiple] option:checked{background-color:rgb(var(--mg-color-blue-50))}.mg-search__result-badges{align-items:center;display:inline-flex;flex-wrap:wrap;gap:var(--mg-spacing-50);margin-bottom:var(--mg-spacing-25)}.mg-search__result-site-name{background:rgb(var(--mg-color-blue-50));border-radius:var(--mg-spacing-25);color:rgb(var(--mg-color-neutral-500));display:inline-block;font-size:var(--mg-font-size-200);margin:0;padding:var(--mg-spacing-25) var(--mg-spacing-50)}.mg-search__result--error{background:rgb(var(--mg-color-red-50));border:1px solid rgb(var(--mg-color-red-400));border-radius:var(--mg-spacing-25);padding:var(--mg-spacing-100)}.mg-search__result-error{color:#d32f2f;margin:0}.mg-search__result-error a{color:inherit;text-decoration:underline}.mg-search__results-grid{gap:var(--mg-spacing-150)}.mg-search__results-grid>[role=listitem]{display:flex}.mg-search__results-grid .mg-search__result{border-bottom:0;padding-bottom:0}@media (prefers-reduced-motion:no-preference){.mg-search__result--pending{opacity:0;transform:translateX(-20px)}.mg-search__result--pending:dir(rtl){transform:translateX(20px)}.mg-search__result--visible{opacity:1;transform:translateX(0);transition:opacity var(--mg-motion-duration-fast) var(--mg-motion-easing-standard),transform var(--mg-motion-duration-fast) var(--mg-motion-easing-standard)}}.mg-search__results--stale{opacity:.5;pointer-events:none}.mg-search__facet .mg-search__facet-overflow-item{display:none}.mg-search__facet--expanded .mg-search__facet-overflow-item{display:block}.mg-search__facet-toggle{align-items:center;background:none;border:none;color:rgb(var(--mg-color-interactive));cursor:pointer;display:inline-flex;font-size:var(--mg-font-size-200);font-weight:500;gap:var(--mg-spacing-25);margin-top:var(--mg-spacing-50);padding:var(--mg-spacing-50) 0}.mg-search__facet-toggle:hover{text-decoration:underline}.mg-search__facet-toggle:focus-visible{box-shadow:0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-color-neutral-0));outline:var(--mg-focus-ring-width) solid rgb(var(--mg-color-focus-ring));outline-offset:var(--mg-focus-ring-offset)}.mg-search__facet-toggle-icon{border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid;display:inline-block;height:0;width:0}@media (prefers-reduced-motion:no-preference){.mg-search__facet-toggle-icon{transition:transform var(--mg-motion-duration-fast) var(--mg-motion-easing-standard)}}.mg-search__facet-toggle[aria-expanded=false] .mg-search__facet-toggle-icon{transform:rotate(-90deg)}.mg-search__facet-toggle[aria-expanded=true] .mg-search__facet-toggle-icon{transform:rotate(0deg)}.mg-search__loader{align-items:center;display:flex;justify-content:center;padding:var(--mg-spacing-200)}@keyframes mg-search-spin{to{transform:rotate(1turn)}}.mg-search__spinner{--mg-search-spinner-duration:1s;animation:mg-search-spin var(--mg-search-spinner-duration) linear infinite;border-top:4px solid rgb(var(--mg-color-neutral-50));border:4px solid rgb(var(--mg-color-neutral-50));border-radius:50%;border-top-color:rgb(var(--mg-color-interactive));height:40px;width:40px}@media (prefers-reduced-motion:reduce){.mg-search__spinner{animation-duration:calc(var(--mg-search-spinner-duration)*3)!important;animation-iteration-count:infinite!important}}@media (forced-colors:active){.mg-search__spinner{border-color:CanvasText GrayText GrayText;forced-color-adjust:none}}.mg-search__loader-text{color:rgb(var(--mg-color-neutral-500));margin-top:var(--mg-spacing-100);text-align:center}.mg-select{margin-top:var(--mg-spacing-50);position:relative;width:100%}.mg-select__trigger{align-items:center;background-color:rgb(var(--mg-color-neutral-50));border:1px solid rgb(var(--mg-color-neutral-600)/.22);border-radius:var(--mg-radius-form-input);color:rgb(var(--mg-color-text));cursor:pointer;display:flex;font-size:var(--mg-font-size-300);justify-content:space-between;min-height:44px;padding:var(--mg-spacing-50) var(--mg-spacing-75);text-align:start;width:100%}@media (prefers-reduced-motion:no-preference){.mg-select__trigger{transition:border-color var(--mg-motion-duration-fast) var(--mg-motion-easing-standard),box-shadow var(--mg-motion-duration-fast) var(--mg-motion-easing-standard)}}.mg-select__trigger:hover{border-color:rgb(var(--mg-color-interactive))}.mg-select__trigger:focus-visible{background-color:rgb(var(--mg-color-neutral-0));border-color:rgb(var(--mg-color-interactive));box-shadow:0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-color-neutral-0));outline:0;outline:var(--mg-focus-ring-width) solid rgb(var(--mg-color-focus-ring));outline-offset:var(--mg-focus-ring-offset)}.mg-select--open .mg-select__trigger{border-bottom-left-radius:0;border-bottom-right-radius:0;border-color:rgb(var(--mg-color-interactive))}.mg-select__trigger-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mg-select__trigger-icon{color:rgb(var(--mg-color-neutral-500));flex-shrink:0;margin-inline-start:var(--mg-spacing-50)}@media (prefers-reduced-motion:no-preference){.mg-select__trigger-icon{transition:transform var(--mg-motion-duration-fast) var(--mg-motion-easing-standard)}}.mg-select--open .mg-select__trigger-icon{transform:rotate(180deg)}.mg-select__backdrop{background:transparent;cursor:default;inset:0;position:fixed;z-index:calc(var(--mg-z-index-modal) - 1)}.mg-select__dropdown{background:#fff;border:1px solid rgb(var(--mg-color-interactive));border-radius:0 0 var(--mg-spacing-25) var(--mg-spacing-25);border-top:none;box-shadow:0 4px 12px rgba(0,0,0,.1);left:0;position:absolute;right:0;top:100%;z-index:var(--mg-z-index-modal)}@media (prefers-reduced-motion:no-preference){.mg-select__dropdown{animation:mg-select-fade-in var(--mg-motion-duration-fast) var(--mg-motion-easing-standard)}}@keyframes mg-select-fade-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.mg-select__search{border-bottom:1px solid rgb(var(--mg-color-neutral-50));padding:var(--mg-spacing-50)}.mg-select__search-input{background-color:rgb(var(--mg-color-neutral-50));border:1px solid rgb(var(--mg-color-neutral-600)/.22);border-radius:var(--mg-radius-form-input);font-size:var(--mg-font-size-300);padding:var(--mg-spacing-50);width:100%}.mg-select__search-input:focus-visible{background-color:rgb(var(--mg-color-neutral-0));border-color:rgb(var(--mg-color-interactive));box-shadow:0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-color-neutral-0));outline:0;outline:var(--mg-focus-ring-width) solid rgb(var(--mg-color-focus-ring));outline-offset:var(--mg-focus-ring-offset)}.mg-select__search-input::placeholder{color:rgb(var(--mg-color-neutral-500))}.mg-select__list{list-style:none;margin:0;max-height:240px;overflow-y:auto;overscroll-behavior:contain;padding:var(--mg-spacing-25) 0}.mg-select__option{align-items:center;cursor:pointer;display:flex;gap:var(--mg-spacing-50);min-height:40px;padding:var(--mg-spacing-50) var(--mg-spacing-75)}@media (prefers-reduced-motion:no-preference){.mg-select__option{transition:background-color var(--mg-motion-duration-fast) var(--mg-motion-easing-standard)}}.mg-select__option--highlighted,.mg-select__option:hover{background-color:rgb(var(--mg-color-blue-50))}.mg-select__option--selected{background-color:rgb(var(--mg-color-blue-900)/.08)}.mg-select__option--selected .mg-select__option-label{color:rgb(var(--mg-color-interactive));font-weight:600}.mg-select__option--selected.mg-select__option--highlighted,.mg-select__option--selected:hover{background-color:rgb(var(--mg-color-blue-900)/.12)}.mg-select__indicator{align-items:center;border:2px solid rgb(var(--mg-color-form-check));color:rgb(var(--mg-color-interactive));display:flex;flex-shrink:0;height:16px;justify-content:center;width:16px}.mg-select__indicator--checkbox{border-radius:var(--mg-radius-form-input)}.mg-select__indicator--radio{border-radius:50%}.mg-select__indicator:hover{border-color:rgb(var(--mg-color-form-check--hover))}.mg-select__option--selected .mg-select__indicator{background-color:rgb(var(--mg-color-form-check--checked));border-color:rgb(var(--mg-color-form-check--checked));color:rgb(var(--mg-color-white))}.mg-select__indicator-dot{background:#fff;border-radius:50%;height:8px;width:8px}.mg-select__option-label{color:rgb(var(--mg-color-text));flex:1;font-size:var(--mg-font-size-200);line-height:1.4}.mg-select__option-count{color:rgb(var(--mg-color-neutral-500));flex-shrink:0;font-size:var(--mg-font-size-100)}.mg-select__option--subtype{padding-inline-start:var(--mg-spacing-150)}.mg-select__option--subtype .mg-select__option-label{font-size:var(--mg-font-size-100)}.mg-select__option--subtype .mg-select__option-label:before{color:rgb(var(--mg-color-neutral-500));content:"└";margin-inline-end:var(--mg-spacing-25)}.mg-select__empty{color:rgb(var(--mg-color-neutral-500));font-size:var(--mg-font-size-200);padding:var(--mg-spacing-100);text-align:center}.mg-search__facet-option{align-items:baseline;border-radius:var(--mg-spacing-25);display:grid;gap:0 var(--mg-spacing-25);grid-template-columns:1.25em 1fr auto;padding:var(--mg-spacing-50)}@media (prefers-reduced-motion:no-preference){.mg-search__facet-option{transition:background-color var(--mg-motion-duration-fast) var(--mg-motion-easing-standard)}}.mg-search__facet-option:hover{background-color:rgb(var(--mg-color-blue-900)/.05)}.mg-search__facet-option input[type=checkbox],.mg-search__facet-option input[type=radio]{accent-color:rgb(var(--mg-color-form-check--checked));cursor:pointer;margin:0}.mg-search__facet-option label{color:rgb(var(--mg-color-text));cursor:pointer;font-weight:400;line-height:1.5;padding-inline-start:var(--mg-spacing-25);text-wrap:balance}.mg-search__facet-option label:hover{color:rgb(var(--mg-color-interactive));text-decoration:underline}.mg-search__facet-option:has(input:checked){background-color:rgb(var(--mg-color-blue-900)/.08)}.mg-search__facet-option:has(input:checked) label{color:rgb(var(--mg-color-interactive));font-weight:600}.mg-search__facet-count{color:rgb(var(--mg-color-neutral-500));font-size:var(--mg-font-size-200);white-space:nowrap}.mg-search__drawer-backdrop{background:rgba(0,0,0,.5);inset:0;position:fixed;z-index:calc(var(--mg-z-index-drawer) - 1)}@media (prefers-reduced-motion:no-preference){.mg-search__drawer-backdrop{animation:mg-search-fade-in var(--mg-motion-duration-fast) var(--mg-motion-easing-standard)}}.mg-search__drawer-backdrop{cursor:pointer}@keyframes mg-search-fade-in{0%{opacity:0}to{opacity:1}}.mg-search__drawer{--mg-search-drawer-offset:-100%;--mg-search-drawer-shadow-offset:4px;background:#fff;box-shadow:var(--mg-search-drawer-shadow-offset) 0 20px rgba(0,0,0,.15);cursor:default;display:flex;flex-direction:column;inset-block:0;inset-inline-start:0;position:fixed;width:min(320px,85vw);z-index:var(--mg-z-index-drawer)}@media (prefers-reduced-motion:no-preference){.mg-search__drawer{animation:mg-search-slide-in-start var(--mg-motion-duration-medium) var(--mg-motion-easing-standard)}}.mg-search__drawer:dir(rtl){--mg-search-drawer-offset:100%;--mg-search-drawer-shadow-offset:-4px}@keyframes mg-search-slide-in-start{0%{transform:translateX(var(--mg-search-drawer-offset))}to{transform:translateX(0)}}.mg-search__drawer-header{align-items:center;border-bottom:1px solid rgb(var(--mg-color-neutral-100));display:flex;flex-shrink:0;justify-content:space-between;min-height:56px;padding:var(--mg-spacing-100) var(--mg-spacing-150)}.mg-search__drawer-title{align-items:center;color:rgb(var(--mg-color-text));display:flex;font-size:var(--mg-font-size-300);font-weight:600;gap:var(--mg-spacing-50);margin:0}.mg-search__drawer-count{align-items:center;background:rgb(var(--mg-color-interactive));border-radius:11px;color:#fff;display:inline-flex;font-size:var(--mg-font-size-200);font-weight:600;height:22px;justify-content:center;min-width:22px;padding:0 var(--mg-spacing-25)}.mg-search__drawer-close{align-items:center;background:none;border:none;border-radius:var(--mg-spacing-25);color:rgb(var(--mg-color-neutral-500));cursor:pointer;display:flex;height:44px;justify-content:center;padding:0;width:44px}@media (prefers-reduced-motion:no-preference){.mg-search__drawer-close{transition:background-color var(--mg-motion-duration-fast) var(--mg-motion-easing-standard),color var(--mg-motion-duration-fast) var(--mg-motion-easing-standard)}}.mg-search__drawer-close:hover{background:rgb(var(--mg-color-blue-50));color:rgb(var(--mg-color-text))}.mg-search__drawer-close:focus-visible{box-shadow:0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-color-neutral-0));outline:var(--mg-focus-ring-width) solid rgb(var(--mg-color-focus-ring));outline-offset:var(--mg-focus-ring-offset)}.mg-search__drawer-content{flex:1;overflow-y:auto;padding:var(--mg-spacing-100) var(--mg-spacing-150);-webkit-overflow-scrolling:touch;overscroll-behavior:contain}.mg-search__drawer-footer{background:#fff;border-top:1px solid rgb(var(--mg-color-neutral-100));flex-shrink:0;padding:var(--mg-spacing-100) var(--mg-spacing-150)}.mg-search__drawer-apply{align-items:center;background:rgb(var(--mg-color-interactive));border:none;border-radius:var(--mg-spacing-25);color:#fff;cursor:pointer;display:flex;font-size:var(--mg-font-size-200);font-weight:600;gap:var(--mg-spacing-50);justify-content:center;min-height:48px;padding:var(--mg-spacing-75) var(--mg-spacing-100);width:100%}@media (prefers-reduced-motion:no-preference){.mg-search__drawer-apply{transition:background-color var(--mg-motion-duration-fast) var(--mg-motion-easing-standard)}}.mg-search__drawer-apply:hover{background:rgb(var(--mg-color-interactive-active))}.mg-search__drawer-apply:focus-visible{box-shadow:0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-color-neutral-0));outline:var(--mg-focus-ring-width) solid rgb(var(--mg-color-focus-ring));outline-offset:var(--mg-focus-ring-offset)}.mg-search__drawer-apply-count{font-weight:400;opacity:.9}@media (width <= 800px){.mg-search__filter-btn{display:inline-flex}.mg-search__sidebar{display:none}.mg-search__content{flex-direction:column}}@media (width >= 801px){.mg-search__drawer-backdrop,.mg-search__filter-btn{display:none}}.mg-search__facet input:focus-visible,.mg-search__facet-select:focus-visible{box-shadow:0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-color-neutral-0));outline:var(--mg-focus-ring-width) solid rgb(var(--mg-color-focus-ring));outline-offset:var(--mg-focus-ring-offset)}.mg-search-debug{display:none}[data-mg-search-debug=true] .mg-search-debug{display:block}.mg-search__facet-operator{display:flex;flex-direction:column;font-size:var(--mg-font-size-200);gap:var(--mg-spacing-50);margin-top:var(--mg-spacing-75)}.mg-search__facet-operator-row{align-items:center;display:flex;gap:var(--mg-spacing-50)}.mg-search__facet-operator-label{color:rgb(var(--mg-color-neutral-500));font-weight:500}.mg-search__facet-operator-hint{color:rgb(var(--mg-color-neutral-500));font-style:italic;line-height:1.4;margin:0}.mg-search__facet-operator-toggle{display:inline-flex;gap:var(--mg-spacing-25)}.mg-search__facet-operator-option{align-items:center;cursor:pointer;display:flex;padding:var(--mg-spacing-25) var(--mg-spacing-50)}@media (prefers-reduced-motion:no-preference){.mg-search__facet-operator-option{transition:color var(--mg-motion-duration-fast) var(--mg-motion-easing-standard),border-color var(--mg-motion-duration-fast) var(--mg-motion-easing-standard)}}.mg-search__facet-operator-option{border-bottom:2px solid transparent;border-radius:0;color:rgb(var(--mg-color-neutral-500));font-size:var(--mg-font-size-200);font-weight:400;user-select:none}.mg-search__facet-operator-option input{opacity:0;pointer-events:none;position:absolute}.mg-search__facet-operator-option:hover:not(.mg-search__facet-operator-option--active){color:rgb(var(--mg-color-text))}.mg-search__facet-operator-option--active{border-bottom-color:rgb(var(--mg-color-interactive));color:rgb(var(--mg-color-interactive));font-weight:500}.mg-search__facet-operator-option:focus-within{border-radius:var(--mg-spacing-25);box-shadow:0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-color-neutral-0));outline:var(--mg-focus-ring-width) solid rgb(var(--mg-color-focus-ring));outline-offset:var(--mg-focus-ring-offset)}.mg-search__filter-chip-connector{align-items:center;color:rgb(var(--mg-color-neutral-500));display:inline-flex;font-weight:600;letter-spacing:.05em;margin-inline-end:var(--mg-spacing-25);text-transform:uppercase}@media (forced-colors:active){.mg-search__skeleton-card,.mg-search__skeleton-card-image,.mg-search__skeleton-meta,.mg-search__skeleton-text,.mg-search__skeleton-title{outline:1px solid GrayText;outline-offset:-1px}.mg-search__drawer{border-inline-end:1px solid CanvasText}}
|
|
1225
1233
|
/**
|
|
1226
1234
|
* Error Pages
|
|
1227
1235
|
*
|
|
1228
1236
|
* Branded 404 Not Found and 500 Server Error status page layouts and illustrations.
|
|
1229
1237
|
*
|
|
1230
1238
|
* Full documentation:
|
|
1231
|
-
* https://github.com/
|
|
1239
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/ErrorPages/ErrorPage.mdx
|
|
1232
1240
|
*/.mg-error-page{background-color:rgb(var(--mg-color-blue-900));color:rgb(var(--mg-color-text));min-height:100vh;padding-bottom:1.25rem}.mg-error-page h1{color:rgb(var(--mg-color-blue-900));font-size:.875rem;margin:0;padding:0}.mg-error-page p a:not(.mg-button){text-decoration:underline;text-underline-offset:.15em}.mg-error-page__search{align-items:center;display:flex;gap:.3125rem;margin-bottom:.78125rem}.mg-error-page__search input[type=search]{border:1px solid rgb(var(--mg-color-neutral-100));max-width:300px}.mg-error-page__container{background:rgb(var(--mg-color-neutral-0));margin:1.25rem auto;max-width:900px;padding:1.25rem .9375rem .625rem}.mg-error-page .undrr-logo{background:url(https://assets.undrr.org/logos/undrr/undrr-logo-blue.svg) no-repeat;background-size:contain;height:50px;margin:.625rem 0;width:280px}.mg-error-page--challenge{background-color:rgb(var(--mg-color-neutral-25))}.mg-error-page--challenge .mg-error-page__container{border-radius:var(--mg-card-border-radius);box-shadow:var(--mg-card-shadow);margin-top:2.5rem;max-width:540px;padding:1.875rem 1.5625rem 1.25rem;text-align:center}.mg-error-page--challenge .undrr-logo{background-position:50%;height:35px;margin:0 0 1.5625rem;width:100%}.mg-error-page--challenge h1{color:rgb(var(--mg-color-text));font-size:1.4375rem;font-weight:600;margin:0 0 .3125rem}
|
|
1233
1241
|
|
|
1234
1242
|
/**
|
|
@@ -1237,7 +1245,7 @@
|
|
|
1237
1245
|
* Site-wide mega footer with branding, navigation columns, copyright, and social links.
|
|
1238
1246
|
*
|
|
1239
1247
|
* Full documentation:
|
|
1240
|
-
* https://github.com/
|
|
1248
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/Footer/Footer.mdx
|
|
1241
1249
|
*/.mg-footer{--mg-gutenberg-spacer:0}.mg-footer--about-footer{padding-bottom:var(--mg-spacing-200);padding-top:var(--mg-spacing-200);text-wrap:balance}.mg-footer--about-footer,.mg-footer--about-footer a,.mg-footer--about-footer a:hover{color:rgb(var(--mg-color-white))}.mg-footer--about-footer .container{margin-bottom:0}.mg-footer--about-footer--links{display:inline-flex;flex-wrap:wrap;font-family:var(--mg-font-family-ui);font-size:var(--mg-font-size-500);gap:.46875rem 1.25rem}.mg-footer--about-footer--description{font-size:var(--mg-font-size-400)}.mg-footer-bar{border-top:1px solid rgb(var(--mg-color-neutral-200));color:rgb(var(--mg-color-neutral-600));font-size:var(--mg-font-size-300);padding:var(--mg-spacing-150) 0}.mg-footer-bar__row{align-items:center;display:flex;flex-wrap:wrap;gap:var(--mg-spacing-100);justify-content:space-between}.mg-footer-bar__links{display:flex;flex-wrap:wrap;gap:var(--mg-spacing-50) var(--mg-spacing-200)}.mg-footer-bar__links a{color:rgb(var(--mg-color-interactive))}.mg-footer-bar__text{margin:0;max-width:600px}.mg-footer-bar__divider{border:0;border-top:1px solid rgb(var(--mg-color-neutral-200));margin:var(--mg-spacing-100) 0}.mg-footer--social-links{display:inline-flex;flex-wrap:wrap;gap:.9375rem;padding-left:0}.mg-footer--social-links li{display:inline-block}.mg-footer--social-links li a{text-underline-offset:5px}.mg-footer .mg-button+.mg-button{margin-inline-start:0}@media (max-width:900px){.mg-footer .mg-grid__col--span-2,.mg-footer .mg-grid__col--span-3{grid-column-end:auto}.mg-footer img{max-width:min(300px,76vw)}}@media (max-width:480px){.mg-footer .link-spacer{display:grid;margin-right:0;white-space:normal}}
|
|
1242
1250
|
/**
|
|
1243
1251
|
* Image Caption Molecule
|
|
@@ -1245,16 +1253,16 @@
|
|
|
1245
1253
|
* Composed image figure layout with integrated caption and photographer credit text.
|
|
1246
1254
|
*
|
|
1247
1255
|
* Full documentation:
|
|
1248
|
-
* https://github.com/
|
|
1256
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Atom/Images/ImageCaptionCredit/ImageCaptionCredit.mdx
|
|
1249
1257
|
*/
|
|
1250
1258
|
/* image caption start */.mg-image-caption{border-bottom:2px solid rgb(var(--mg-color-black))
|
|
1251
|
-
/* medium design */}@media (width >= 48em){.mg-image-caption{display:flex;justify-content:space-between;padding-bottom:var(--mg-spacing-150)}}.mg-image-caption p{color:rgb(var(--mg-color-neutral-600));font-size:var(--mg-font-size-200);margin-bottom:var(--mg-spacing-50)
|
|
1252
|
-
/* medium design */}@media (width >= 48em){.mg-image-caption p{border:0;font-size:var(--mg-font-size-300);margin:0}}.mg-image-caption p+.mg-credits{border-top:1px solid rgb(var(--mg-color-neutral-500));display:flex;flex-shrink:0;flex-wrap:wrap;margin-bottom:var(--mg-spacing-50);padding-top:var(--mg-spacing-50)
|
|
1253
|
-
/* medium design */}@media (width >= 48em){.mg-image-caption p+.mg-credits{border-left:1px solid rgb(var(--mg-color-neutral-500));border-top:0;display:block;margin-bottom:0;margin-left:var(--mg-spacing-150);padding-left:var(--mg-spacing-150);padding-top:0}}.mg-image-caption .mg-credits{display:flex;margin-bottom:var(--mg-spacing-50)
|
|
1259
|
+
/* medium design */}@media (width >= 48em){.mg-image-caption{display:flex;justify-content:space-between;padding-bottom:var(--mg-spacing-150)}}.mg-image-caption :where(.mg-image-caption__text),.mg-image-caption p{color:rgb(var(--mg-color-neutral-600));font-size:var(--mg-font-size-200);margin-bottom:var(--mg-spacing-50)
|
|
1260
|
+
/* medium design */}@media (width >= 48em){.mg-image-caption :where(.mg-image-caption__text),.mg-image-caption p{border:0;font-size:var(--mg-font-size-300);margin:0}}.mg-image-caption :where(.mg-image-caption__text)+.mg-credits,.mg-image-caption p+.mg-credits{border-top:1px solid rgb(var(--mg-color-neutral-500));display:flex;flex-shrink:0;flex-wrap:wrap;margin-bottom:var(--mg-spacing-50);padding-top:var(--mg-spacing-50)
|
|
1261
|
+
/* medium design */}@media (width >= 48em){.mg-image-caption :where(.mg-image-caption__text)+.mg-credits,.mg-image-caption p+.mg-credits{border-left:1px solid rgb(var(--mg-color-neutral-500));border-top:0;display:block;margin-bottom:0;margin-left:var(--mg-spacing-150);padding-left:var(--mg-spacing-150);padding-top:0}}.mg-image-caption .mg-image-caption__text p{margin:0 0 var(--mg-spacing-50)}.mg-image-caption .mg-image-caption__text p:last-child{margin-bottom:0}.mg-image-caption .mg-credits{display:flex;margin-bottom:var(--mg-spacing-50)
|
|
1254
1262
|
/* medium design */}@media (width >= 48em){.mg-image-caption .mg-credits{border-top:0;display:block;margin-bottom:0;padding-top:0}}.mg-image-caption .mg-credits strong{margin-left:var(--mg-spacing-25)
|
|
1255
|
-
/* medium design */}@media (width >= 48em){.mg-image-caption .mg-credits strong{margin-left:0}}[dir=rtl] .mg-image-caption p{
|
|
1256
|
-
/* medium design */}@media (width >= 48em){[dir=rtl] .mg-image-caption p{padding-right:0}}[dir=rtl] .mg-image-caption p+.mg-credits{
|
|
1257
|
-
/* medium design */}@media (width >= 48em){[dir=rtl] .mg-image-caption p+.mg-credits{border-right:1px solid rgb(var(--mg-color-neutral-500));border-top:0;display:block;margin-right:var(--mg-spacing-150);padding-right:var(--mg-spacing-150);padding-top:0}}[dir=rtl] .mg-image-caption .mg-credits{
|
|
1263
|
+
/* medium design */}@media (width >= 48em){.mg-image-caption .mg-credits strong{margin-left:0}}[dir=rtl] .mg-image-caption :where(.mg-image-caption__text),[dir=rtl] .mg-image-caption p{
|
|
1264
|
+
/* medium design */}@media (width >= 48em){[dir=rtl] .mg-image-caption :where(.mg-image-caption__text),[dir=rtl] .mg-image-caption p{padding-right:0}}[dir=rtl] .mg-image-caption :where(.mg-image-caption__text)+.mg-credits,[dir=rtl] .mg-image-caption p+.mg-credits{
|
|
1265
|
+
/* medium design */}@media (width >= 48em){[dir=rtl] .mg-image-caption :where(.mg-image-caption__text)+.mg-credits,[dir=rtl] .mg-image-caption p+.mg-credits{border-right:1px solid rgb(var(--mg-color-neutral-500));border-top:0;display:block;margin-right:var(--mg-spacing-150);padding-right:var(--mg-spacing-150);padding-top:0}}[dir=rtl] .mg-image-caption .mg-credits{
|
|
1258
1266
|
/* medium design */}@media (width >= 48em){[dir=rtl] .mg-image-caption .mg-credits{border-left:none;margin-left:0;padding-left:0}}[dir=rtl] .mg-image-caption .mg-credits strong{margin-right:var(--mg-spacing-25)
|
|
1259
1267
|
/* medium design */}@media (width >= 48em){[dir=rtl] .mg-image-caption .mg-credits strong{margin-right:0}}
|
|
1260
1268
|
|
|
@@ -1265,18 +1273,20 @@
|
|
|
1265
1273
|
* Responsive aspect-ratio wrapper for embedded video, iframes, maps, and external widgets.
|
|
1266
1274
|
*
|
|
1267
1275
|
* Full documentation:
|
|
1268
|
-
* https://github.com/
|
|
1276
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Utilities/EmbedContainer/EmbedContainer.mdx
|
|
1269
1277
|
*/.mg-embed-container{height:0;overflow:hidden;padding-bottom:56.25%;position:relative;width:100%}@supports (aspect-ratio:16/9){.mg-embed-container{aspect-ratio:16/9;height:auto;padding-bottom:0}}.mg-embed-container embed,.mg-embed-container iframe,.mg-embed-container object,.mg-embed-container video{border:0;height:100%;left:0;position:absolute;top:0;width:100%}.mg-embed-container--4x3{padding-bottom:75%}@supports (aspect-ratio:4/3){.mg-embed-container--4x3{aspect-ratio:4/3;padding-bottom:0}}.mg-embed-container--1x1{padding-bottom:100%}@supports (aspect-ratio:1/1){.mg-embed-container--1x1{aspect-ratio:1/1;padding-bottom:0}}.mg-embed-container--21x9{padding-bottom:42.857%}@supports (aspect-ratio:21/9){.mg-embed-container--21x9{aspect-ratio:21/9;padding-bottom:0}}
|
|
1270
1278
|
|
|
1271
1279
|
/**
|
|
1272
1280
|
* Loader / Spinner
|
|
1273
1281
|
*
|
|
1274
|
-
*
|
|
1282
|
+
* Loading indicator for asynchronous states, in a default size for
|
|
1283
|
+
* pages and regions and a 1em inline size for text, buttons and form fields.
|
|
1275
1284
|
*
|
|
1276
1285
|
* Full documentation:
|
|
1277
|
-
* https://github.com/
|
|
1278
|
-
*/@keyframes
|
|
1279
|
-
/* medium design */}@media (width >= 48em){.mg-loader{border-top:14px solid rgb(var(--mg-color-
|
|
1286
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Utilities/Loader/Loader.mdx
|
|
1287
|
+
*/@keyframes mg-spin{to{transform:rotate(1turn)}}.mg-loader{--mg-loader-duration:0.9s;animation:mg-spin var(--mg-loader-duration) linear infinite;border-radius:50%;border-top:8px solid rgb(var(--mg-color-interactive));border:8px solid rgb(var(--mg-color-interactive));border-top-color:rgb(var(--mg-color-neutral-300));box-sizing:border-box;height:40px;width:40px
|
|
1288
|
+
/* medium design */}@media (width >= 48em){.mg-loader{border-top:14px solid rgb(var(--mg-color-interactive));border:14px solid rgb(var(--mg-color-interactive));border-top-color:rgb(var(--mg-color-neutral-300));height:96px;width:96px}}.mg-loader--inline{border:max(2px,.125em) solid color-mix(in oklab,currentColor 25%,transparent);border-top:max(2px,.125em) solid;display:inline-block;flex-shrink:0;height:1em;vertical-align:-.125em;width:1em}@media (forced-colors:active){.mg-loader{border-color:CanvasText GrayText GrayText;forced-color-adjust:none}}@media (prefers-reduced-motion:reduce){.mg-loader{animation:none!important;border-color:rgb(var(--mg-color-interactive));border-style:dashed;transform:none}.mg-loader--inline{border-color:currentColor}.mg-loader:not([aria-hidden=true]){align-items:center;border:0;border-radius:0;display:inline-flex;flex-direction:column;gap:var(--mg-spacing-50);height:auto;max-width:100%;text-align:center;vertical-align:middle;width:fit-content}.mg-loader:not([aria-hidden=true]):before{aspect-ratio:1;border:8px dashed rgb(var(--mg-color-interactive));border-radius:50%;box-sizing:border-box;content:"";display:block;flex-shrink:0;max-width:100%;width:40px
|
|
1289
|
+
/* medium design */}}@media (prefers-reduced-motion:reduce) and (width >= 48em){.mg-loader:not([aria-hidden=true]):before{border-width:14px;width:96px}}@media (prefers-reduced-motion:reduce){.mg-loader:not([aria-hidden=true])>.mg-u-sr-only{clip-path:none;height:auto;line-height:var(--mg-font-line-height-700);margin:0;max-width:100%;min-width:0;overflow:visible;overflow-wrap:anywhere;position:static;white-space:normal;width:auto}.mg-loader--inline:not([aria-hidden=true]){align-items:baseline;flex-direction:row;text-align:start}.mg-loader--inline:not([aria-hidden=true]):before{border-color:currentColor;border-width:max(2px,.125em);height:1em;width:1em}}@media (prefers-reduced-motion:reduce) and (forced-colors:active){.mg-loader{border-color:CanvasText}.mg-loader:not([aria-hidden=true]){forced-color-adjust:auto}.mg-loader:not([aria-hidden=true]):before{border-color:CanvasText;forced-color-adjust:none}}
|
|
1280
1290
|
|
|
1281
1291
|
/**
|
|
1282
1292
|
* Full Width Bleed
|
|
@@ -1284,7 +1294,7 @@
|
|
|
1284
1294
|
* Breakout utility allowing content within constrained containers to bleed full width to viewport edges.
|
|
1285
1295
|
*
|
|
1286
1296
|
* Full documentation:
|
|
1287
|
-
* https://github.com/
|
|
1297
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Utilities/FullWidth/FullWidth.mdx
|
|
1288
1298
|
*/.mg-container-full-width{position:relative}.mg-container-full-width:before{background-color:inherit;background-image:inherit;background-position:inherit;background-repeat:inherit;background-size:cover;content:"";grid-column:1/-1;height:100%;margin-left:calc(50% - 50vw);position:absolute;top:0;width:100vw;z-index:var(--mg-z-index-behind)}[dir=rtl] .mg-container-full-width:before{left:50%;margin-left:-50vw;margin-right:0}
|
|
1289
1299
|
|
|
1290
1300
|
/**
|
|
@@ -1293,8 +1303,8 @@
|
|
|
1293
1303
|
* Collapsible content container with progressive Show more / Show less disclosure toggle.
|
|
1294
1304
|
*
|
|
1295
1305
|
* Full documentation:
|
|
1296
|
-
* https://github.com/
|
|
1297
|
-
*/:root{--mg-show-more-height:200px}.mg-show-more--collapsed{mask-image:linear-gradient(to bottom,#000 calc(var(--mg-show-more-height) - 80px),transparent var(--mg-show-more-height));-webkit-mask-image:linear-gradient(to bottom,#000 calc(var(--mg-show-more-height) - 80px),transparent var(--mg-show-more-height));max-height:200px;max-height:var(--mg-show-more-height);overflow:hidden;position:relative}.mg-show-more--button{padding:.625rem 2.5rem;position:relative;z-index:2}
|
|
1306
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Utilities/ShowMore/ShowMore.mdx
|
|
1307
|
+
*/:root{--mg-show-more-height:200px}.mg-show-more--collapsed{mask-image:linear-gradient(to bottom,#000 calc(var(--mg-show-more-height) - 80px),transparent var(--mg-show-more-height));-webkit-mask-image:linear-gradient(to bottom,#000 calc(var(--mg-show-more-height) - 80px),transparent var(--mg-show-more-height));max-height:200px;max-height:var(--mg-show-more-height);overflow:hidden;position:relative}.mg-show-more--button{padding:.625rem 2.5rem;position:relative;z-index:2}.mg-show-more--button[hidden]{display:none}
|
|
1298
1308
|
|
|
1299
1309
|
/**
|
|
1300
1310
|
* Skip Link
|
|
@@ -1302,7 +1312,7 @@
|
|
|
1302
1312
|
* Accessible skip-to-main-content navigation link that reveals on keyboard focus.
|
|
1303
1313
|
*
|
|
1304
1314
|
* Full documentation:
|
|
1305
|
-
* https://github.com/
|
|
1315
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Utilities/SkipLink/SkipLink.mdx
|
|
1306
1316
|
*/.mg-skip-link{block-size:1px;clip-path:inset(50%);inline-size:1px;overflow:hidden;position:absolute;white-space:nowrap}.mg-skip-link:focus{background-color:rgb(var(--mg-color-neutral-0));block-size:auto;border-block-end:2px solid rgb(var(--mg-color-interactive));box-shadow:inset 0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-color-neutral-0)),inset 0 0 0 calc(var(--mg-focus-ring-offset) + var(--mg-focus-ring-width)) rgb(var(--mg-color-focus-ring));clip-path:none;color:rgb(var(--mg-color-text));display:block;font-family:var(--mg-font-family-ui);inline-size:auto;outline:0;overflow:visible;padding:var(--mg-spacing-100) var(--mg-spacing-200);position:static;text-decoration:underline;white-space:normal}@media (forced-colors:active){.mg-skip-link:focus{outline:var(--mg-focus-ring-width) solid Highlight;outline-offset:calc(var(--mg-focus-ring-width)*-1)}}
|
|
1307
1317
|
|
|
1308
1318
|
/**
|
|
@@ -1311,9 +1321,9 @@
|
|
|
1311
1321
|
* Continuous, stepped and categorical legend primitives for maps and charts.
|
|
1312
1322
|
*
|
|
1313
1323
|
* Full documentation:
|
|
1314
|
-
* https://github.com/
|
|
1324
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/DataViz/Legend/Legend.mdx
|
|
1315
1325
|
*/.mg-legend{display:flex;flex-direction:column;gap:var(--mg-spacing-200)}.mg-legend__title{color:rgb(var(--mg-color-neutral-900));font-family:var(--mg-font-family-ui);font-weight:700;margin:0}.mg-legend__label,.mg-legend__tick-label,.mg-legend__value{color:rgb(var(--mg-color-neutral-800));font-family:var(--mg-font-family-ui);font-size:var(--mg-font-size-200)}.mg-legend__bar-wrapper{display:flex;flex-direction:column;gap:var(--mg-spacing-100)}.mg-legend__bar{
|
|
1316
|
-
/* Default continuous ramp */background:linear-gradient(to right,rgb(var(--mg-color-neutral-100)),rgb(var(--mg-color-neutral-900)));border-radius:6px;height:12px;width:100%}.mg-legend__bar--stepped{background:none;border-radius:0;display:flex}.mg-legend__bar--stepped .mg-legend__step{flex:1;height:100%}.mg-legend__bar--stepped .mg-legend__step:first-child{border-end-start-radius:6px;border-start-start-radius:6px}.mg-legend__bar--stepped .mg-legend__step:last-child{border-end-end-radius:6px;border-start-end-radius:6px}.mg-legend__ticks{display:flex;height:1.5rem;position:relative;width:100%}.mg-legend__tick{align-items:center;display:flex;flex-direction:column;inset-inline-start:var(--mg-legend-tick-pos,0);position:absolute;transform:translateX(-50%)}.mg-legend__tick:dir(rtl){transform:translateX(50%)}.mg-legend__tick:first-child{transform:translateX(0)}.mg-legend__tick:last-child{transform:translateX(-100%)}.mg-legend__tick:last-child:dir(rtl){transform:translateX(100%)}.mg-legend__list{flex-direction:column;list-style:none;list-style-type:"";margin:0;padding:0}.mg-legend__item,.mg-legend__list{display:flex;gap:var(--mg-spacing-100)}.mg-legend__item{align-items:center}.mg-legend__swatch{background-color:rgb(var(--mg-color-neutral-500));border-radius:50%;flex-shrink:0;height:1rem;width:1rem}.mg-legend__value{font-weight:600;margin-inline-start:auto}.mg-legend{
|
|
1326
|
+
/* Default continuous ramp */background:linear-gradient(to right,rgb(var(--mg-color-neutral-100)),rgb(var(--mg-color-neutral-900)));border-radius:6px;height:12px;width:100%}.mg-legend__bar--stepped{background:none;border-radius:0;display:flex}.mg-legend__bar--stepped .mg-legend__step{flex:1;height:100%}.mg-legend__bar--stepped .mg-legend__step:first-child{border-end-start-radius:6px;border-start-start-radius:6px}.mg-legend__bar--stepped .mg-legend__step:last-child{border-end-end-radius:6px;border-start-end-radius:6px}.mg-legend__ticks{display:flex;height:1.5rem;position:relative;width:100%}.mg-legend__tick{align-items:center;display:flex;flex-direction:column;inset-inline-start:var(--mg-legend-tick-pos,0);position:absolute;transform:translateX(-50%)}.mg-legend__tick:dir(rtl){transform:translateX(50%)}.mg-legend__tick:first-child{transform:translateX(0)}.mg-legend__tick:last-child{transform:translateX(-100%)}.mg-legend__tick:last-child:dir(rtl){transform:translateX(100%)}.mg-legend__list{--mg-list-item-indent-rtl:0;flex-direction:column;list-style:none;list-style-type:"";margin:0;padding:0}.mg-legend__item,.mg-legend__list{display:flex;gap:var(--mg-spacing-100)}.mg-legend__item{align-items:center}.mg-legend__swatch{background-color:rgb(var(--mg-color-neutral-500));border-radius:50%;flex-shrink:0;height:1rem;width:1rem}.mg-legend__value{font-weight:600;margin-inline-start:auto}.mg-legend{
|
|
1317
1327
|
/* Modifiers */}.mg-legend--vertical{flex-direction:row}.mg-legend--vertical .mg-legend__bar-wrapper{flex-direction:row;height:200px;width:fit-content}.mg-legend--vertical .mg-legend__bar{background:linear-gradient(to bottom,rgb(var(--mg-color-neutral-900)),rgb(var(--mg-color-neutral-100)));height:100%;width:12px}.mg-legend--vertical .mg-legend__bar--stepped{flex-direction:column}.mg-legend--vertical .mg-legend__bar--stepped .mg-legend__step{flex:1;height:auto;width:100%}.mg-legend--vertical .mg-legend__bar--stepped .mg-legend__step:first-child{border-radius:6px 6px 0 0}.mg-legend--vertical .mg-legend__bar--stepped .mg-legend__step:last-child{border-radius:0 0 6px 6px}.mg-legend--vertical .mg-legend__ticks{flex-direction:column;height:100%;min-width:3rem;width:auto}.mg-legend--vertical .mg-legend__tick{inset-block-start:var(--mg-legend-tick-pos,0);inset-inline-start:auto;padding-inline-start:var(--mg-spacing-100);transform:translateY(-50%)}.mg-legend--vertical .mg-legend__tick:first-child{transform:translateY(0)}.mg-legend--vertical .mg-legend__tick:last-child{transform:translateY(-100%)}.mg-legend--inline .mg-legend__list{flex-direction:row;flex-wrap:wrap;gap:var(--mg-spacing-300)}.mg-legend--inline .mg-legend__value{margin-inline-start:var(--mg-spacing-100)}.mg-legend--grid .mg-legend__list{display:grid;gap:var(--mg-spacing-200);grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
|
|
1318
1328
|
|
|
1319
1329
|
/**
|
|
@@ -1323,16 +1333,25 @@
|
|
|
1323
1333
|
* The close control reuses .mg-icon-button and its shared focus ring.
|
|
1324
1334
|
*
|
|
1325
1335
|
* Full documentation:
|
|
1326
|
-
* https://github.com/
|
|
1327
|
-
*/.mg-drawer,.mg-floating-panel{background:var(--mg-surface-raised);box-sizing:border-box;color:rgb(var(--mg-color-neutral-900));flex-direction:column;font-family:var(--mg-font-family-text)}.mg-drawer__header,.mg-floating-panel__header{align-items:center;border-block-end:1px solid rgb(var(--mg-color-neutral-200));display:flex;gap:var(--mg-spacing-100);justify-content:space-between;padding:var(--mg-spacing-150) var(--mg-spacing-200)}.mg-drawer__title,.mg-floating-panel__title{font-family:var(--mg-font-family-ui);font-size:var(--mg-font-size-400);line-height:1.3;margin:0}.mg-drawer__close,.mg-floating-panel__close{background:transparent;border:0;color:rgb(var(--mg-color-neutral-600));cursor:pointer;margin-inline-start:auto}.mg-drawer__close:hover,.mg-floating-panel__close:hover{background-color:rgb(var(--mg-color-neutral-900)/.08);color:rgb(var(--mg-color-neutral-900))}.mg-drawer__body,.mg-floating-panel__body{overflow-y:auto;padding:var(--mg-spacing-200)}.mg-drawer__footer,.mg-floating-panel__footer{border-block-start:1px solid rgb(var(--mg-color-neutral-200));padding:var(--mg-spacing-150) var(--mg-spacing-200)}.mg-drawer{--mg-drawer-size:20rem;--mg-drawer-offset:-100%;box-shadow:0 8px 32px rgba(0,0,0,.2);display:flex;position:fixed;transition:transform var(--mg-motion-duration-medium) var(--mg-motion-easing-standard),visibility 0s linear var(--mg-motion-duration-medium);visibility:hidden;z-index:var(--mg-z-index-drawer)}@media (prefers-reduced-motion:reduce){.mg-drawer{transition:none}}.mg-drawer.is-open{transform:none;transition-delay:0s;visibility:visible}.mg-drawer--end,.mg-drawer--start{inline-size:var(--mg-drawer-size);inset-block:0;max-inline-size:100vw}.mg-drawer--start{inset-inline-start:0;transform:translateX(var(--mg-drawer-offset))}.mg-drawer--start:dir(rtl){--mg-drawer-offset:100%}.mg-drawer--end{--mg-drawer-offset:100%;inset-inline-end:0;transform:translateX(var(--mg-drawer-offset))}.mg-drawer--end:dir(rtl){--mg-drawer-offset:-100%}.mg-drawer--bottom{block-size:var(--mg-drawer-size);inset-block-end:0;inset-inline:0;max-block-size:100vh;transform:translateY(100%)}.mg-drawer__body{flex:1}.mg-drawer__backdrop{background:rgba(0,0,0,.5);inset:0;position:fixed;z-index:calc(var(--mg-z-index-drawer) - 1)}.mg-floating-panel{border-radius:var(--mg-card-border-radius);box-shadow:0 4px 16px rgba(0,0,0,.15);display:none;inline-size:18.75rem;max-inline-size:90vw;position:absolute;z-index:var(--mg-z-index-drawer)}.mg-floating-panel.is-open{display:flex}.mg-floating-panel__title{font-size:var(--mg-font-size-300)}.mg-floating-panel__body{max-block-size:25rem}
|
|
1328
|
-
|
|
1336
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/Navigation/Drawer/Drawer.mdx
|
|
1337
|
+
*/.mg-drawer,.mg-floating-panel{background:var(--mg-surface-raised);box-sizing:border-box;color:rgb(var(--mg-color-neutral-900));flex-direction:column;font-family:var(--mg-font-family-text)}.mg-drawer__header,.mg-floating-panel__header{align-items:center;border-block-end:1px solid rgb(var(--mg-color-neutral-200));display:flex;gap:var(--mg-spacing-100);justify-content:space-between;padding:var(--mg-spacing-150) var(--mg-spacing-200)}.mg-drawer__title,.mg-floating-panel__title{font-family:var(--mg-font-family-ui);font-size:var(--mg-font-size-400);line-height:1.3;margin:0}.mg-drawer__close,.mg-floating-panel__close{background:transparent;border:0;color:rgb(var(--mg-color-neutral-600));cursor:pointer;margin-inline-start:auto}.mg-drawer__close:hover,.mg-floating-panel__close:hover{background-color:rgb(var(--mg-color-neutral-900)/.08);color:rgb(var(--mg-color-neutral-900))}.mg-drawer__body,.mg-floating-panel__body{overflow-y:auto;padding:var(--mg-spacing-200)}.mg-drawer__footer,.mg-floating-panel__footer{border-block-start:1px solid rgb(var(--mg-color-neutral-200));padding:var(--mg-spacing-150) var(--mg-spacing-200)}.mg-drawer{--mg-drawer-size:20rem;--mg-drawer-offset:-100%;box-shadow:0 8px 32px rgba(0,0,0,.2);display:flex;position:fixed;transition:transform var(--mg-motion-duration-medium) var(--mg-motion-easing-standard),visibility 0s linear var(--mg-motion-duration-medium);visibility:hidden;z-index:var(--mg-z-index-drawer)}@media (prefers-reduced-motion:reduce){.mg-drawer{transition:none}}.mg-drawer.is-open{transform:none;transition-delay:0s;visibility:visible}.mg-drawer--end,.mg-drawer--start{inline-size:var(--mg-drawer-size);inset-block:0;max-inline-size:100vw}.mg-drawer--start{inset-inline-start:0;transform:translateX(var(--mg-drawer-offset))}.mg-drawer--start:dir(rtl){--mg-drawer-offset:100%}.mg-drawer--end{--mg-drawer-offset:100%;inset-inline-end:0;transform:translateX(var(--mg-drawer-offset))}.mg-drawer--end:dir(rtl){--mg-drawer-offset:-100%}.mg-drawer--bottom{block-size:var(--mg-drawer-size);inset-block-end:0;inset-inline:0;max-block-size:100vh;transform:translateY(100%)}.mg-drawer__body{flex:1}.mg-drawer__backdrop{background:rgba(0,0,0,.5);inset:0;position:fixed;z-index:calc(var(--mg-z-index-drawer) - 1)}.mg-floating-panel{border-radius:var(--mg-card-border-radius);box-shadow:0 4px 16px rgba(0,0,0,.15);display:none;inline-size:18.75rem;max-inline-size:90vw;position:absolute;z-index:var(--mg-z-index-drawer)}.mg-floating-panel.is-open{display:flex}.mg-floating-panel__title{font-size:var(--mg-font-size-300)}.mg-floating-panel__body{max-block-size:25rem}@media (prefers-reduced-motion:reduce){.mg-drawer *{transition-property:none!important}}
|
|
1329
1338
|
/**
|
|
1330
1339
|
* Tree
|
|
1331
1340
|
*
|
|
1332
1341
|
* Accessible tree and nested hierarchy view with expand/collapse and selection states.
|
|
1333
1342
|
*
|
|
1334
1343
|
* Full documentation:
|
|
1335
|
-
* https://github.com/
|
|
1344
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/Navigation/Tree/Tree.mdx
|
|
1336
1345
|
*/.mg-tree{--mg-tree-item-background--hover:rgb(var(--mg-color-interactive)/0.06);--mg-tree-item-background--selected:rgb(var(--mg-color-interactive)/0.12);--mg-tree-item-color--selected:rgb(var(--mg-color-text));font-family:var(--mg-font-family-text)}.mg-tree,.mg-tree__group{list-style:none;margin:0;padding:0}.mg-tree__group{padding-inline-start:var(--mg-spacing-300)}.mg-tree--guides .mg-tree__group{--mg-tree-guide-offset:calc(var(--mg-spacing-100) + 0.5rem - 0.5px);--mg-tree-group-indent:calc(var(--mg-spacing-100) + var(--mg-spacing-200));border-inline-start:1px dashed rgb(var(--mg-color-neutral-300));margin-inline-start:var(--mg-tree-guide-offset);padding-inline-start:calc(var(--mg-tree-group-indent) - var(--mg-tree-guide-offset))}.mg-tree__item{margin-block:var(--mg-spacing-50);outline:none}.mg-tree__item:focus-visible>.mg-tree__label-container{box-shadow:inset 0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-color-neutral-0)),inset 0 0 0 calc(var(--mg-focus-ring-offset) + var(--mg-focus-ring-width)) rgb(var(--mg-color-focus-ring));outline:0}@media (forced-colors:active){.mg-tree__item:focus-visible>.mg-tree__label-container{outline:var(--mg-focus-ring-width) solid Highlight;outline-offset:calc(var(--mg-focus-ring-width)*-1)}}.mg-tree__item--selected>.mg-tree__label-container,.mg-tree__item--selected>.mg-tree__label-container:hover{background-color:var(--mg-tree-item-background--selected);color:var(--mg-tree-item-color--selected);font-weight:700}.mg-tree__label-container{align-items:center;border-radius:var(--mg-radius-button);cursor:pointer;display:flex;gap:var(--mg-spacing-100);padding:var(--mg-spacing-50) var(--mg-spacing-100)}.mg-tree__label-container:hover{background-color:var(--mg-tree-item-background--hover)}.mg-tree__toggle{align-items:center;background:transparent;block-size:1rem;border:0;color:inherit;cursor:pointer;display:flex;inline-size:1rem;justify-content:center;padding:0}.mg-tree__icon{display:inline-block;font-size:.75rem;transition:transform var(--mg-motion-duration-fast) var(--mg-motion-easing-standard)}@media (prefers-reduced-motion:reduce){.mg-tree__icon{transition:none}}.mg-tree__icon:dir(rtl):before{transform:scaleX(-1)}.mg-tree__icon.is-expanded{transform:rotate(90deg)}.mg-tree__icon.is-expanded:dir(rtl){transform:rotate(-90deg)}.mg-tree__label{color:inherit;font-family:var(--mg-font-family-ui);text-decoration:none;user-select:none}.mg-tree__label:first-child{margin-inline-start:calc(1rem + var(--mg-spacing-100))}.mg-tree a.mg-tree__label{text-decoration:underline;text-underline-offset:.15em}.mg-tree a.mg-tree__label:hover{color:inherit;text-decoration-thickness:2px}
|
|
1337
1346
|
|
|
1347
|
+
/**
|
|
1348
|
+
* Rich content
|
|
1349
|
+
*
|
|
1350
|
+
* Opt-in semantic defaults for trusted editorial HTML. Classed descendants
|
|
1351
|
+
* keep their own presentation; classless structural wrappers pass through.
|
|
1352
|
+
*
|
|
1353
|
+
* Full documentation:
|
|
1354
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Patterns/RichContent/RichContent.mdx
|
|
1355
|
+
*/.mg-content :is(p,ul,ol,dl):not(:where(.mg-content [class]:not(.mg-content__scroll),.mg-content [class]:not(.mg-content__scroll) *,.mg-content :is(nav,form,fieldset,button,[role=navigation],[role=menu],[role=menubar],[role=tablist],[role=dialog],[role=toolbar],[role=listbox],[role=tree]),.mg-content :is(nav,form,fieldset,button,[role=navigation],[role=menu],[role=menubar],[role=tablist],[role=dialog],[role=toolbar],[role=listbox],[role=tree]) *)){margin-block:0 var(--mg-spacing-150)}.mg-content :is(h1,h2,h3,h4,h5,h6):not(:where(.mg-content [class]:not(.mg-content__scroll),.mg-content [class]:not(.mg-content__scroll) *,.mg-content :is(nav,form,fieldset,button,[role=navigation],[role=menu],[role=menubar],[role=tablist],[role=dialog],[role=toolbar],[role=listbox],[role=tree]),.mg-content :is(nav,form,fieldset,button,[role=navigation],[role=menu],[role=menubar],[role=tablist],[role=dialog],[role=toolbar],[role=listbox],[role=tree]) *)){line-height:var(--mg-font-line-height-500);margin-block:var(--mg-spacing-200) var(--mg-spacing-100)}.mg-content :is(ul,ol):not(:where(.mg-content [class]:not(.mg-content__scroll),.mg-content [class]:not(.mg-content__scroll) *,.mg-content :is(nav,form,fieldset,button,[role=navigation],[role=menu],[role=menubar],[role=tablist],[role=dialog],[role=toolbar],[role=listbox],[role=tree]),.mg-content :is(nav,form,fieldset,button,[role=navigation],[role=menu],[role=menubar],[role=tablist],[role=dialog],[role=toolbar],[role=listbox],[role=tree]) *)){padding-inline:0;padding-inline-start:var(--mg-spacing-250)}.mg-content li:not(:where(.mg-content [class]:not(.mg-content__scroll),.mg-content [class]:not(.mg-content__scroll) *,.mg-content :is(nav,form,fieldset,button,[role=navigation],[role=menu],[role=menubar],[role=tablist],[role=dialog],[role=toolbar],[role=listbox],[role=tree]),.mg-content :is(nav,form,fieldset,button,[role=navigation],[role=menu],[role=menubar],[role=tablist],[role=dialog],[role=toolbar],[role=listbox],[role=tree]) *)){margin-block-end:var(--mg-spacing-25);padding-inline:0}.mg-content li>:is(ul,ol):not(:where(.mg-content [class]:not(.mg-content__scroll),.mg-content [class]:not(.mg-content__scroll) *,.mg-content :is(nav,form,fieldset,button,[role=navigation],[role=menu],[role=menubar],[role=tablist],[role=dialog],[role=toolbar],[role=listbox],[role=tree]),.mg-content :is(nav,form,fieldset,button,[role=navigation],[role=menu],[role=menubar],[role=tablist],[role=dialog],[role=toolbar],[role=listbox],[role=tree]) *)){margin-block:var(--mg-spacing-50) 0}.mg-content blockquote:not(:where(:has(.mg-highlight-box))):not(:where(.mg-content [class]:not(.mg-content__scroll),.mg-content [class]:not(.mg-content__scroll) *,.mg-content :is(nav,form,fieldset,button,[role=navigation],[role=menu],[role=menubar],[role=tablist],[role=dialog],[role=toolbar],[role=listbox],[role=tree]),.mg-content :is(nav,form,fieldset,button,[role=navigation],[role=menu],[role=menubar],[role=tablist],[role=dialog],[role=toolbar],[role=listbox],[role=tree]) *)){border-inline-start:3px solid rgb(var(--mg-color-neutral-400));font-size:var(--mg-font-size-300);font-weight:400;line-height:var(--mg-font-line-height-700);margin-block:var(--mg-spacing-200);margin-inline:0;padding-inline-start:var(--mg-spacing-150)}.mg-content cite:not(:where(.mg-content [class]:not(.mg-content__scroll),.mg-content [class]:not(.mg-content__scroll) *,.mg-content :is(nav,form,fieldset,button,[role=navigation],[role=menu],[role=menubar],[role=tablist],[role=dialog],[role=toolbar],[role=listbox],[role=tree]),.mg-content :is(nav,form,fieldset,button,[role=navigation],[role=menu],[role=menubar],[role=tablist],[role=dialog],[role=toolbar],[role=listbox],[role=tree]) *)){display:inline;font-style:italic;margin:0}.mg-content a:not(:where([role=button])):not(:where(.mg-content [class]:not(.mg-content__scroll),.mg-content [class]:not(.mg-content__scroll) *,.mg-content :is(nav,form,fieldset,button,[role=navigation],[role=menu],[role=menubar],[role=tablist],[role=dialog],[role=toolbar],[role=listbox],[role=tree]),.mg-content :is(nav,form,fieldset,button,[role=navigation],[role=menu],[role=menubar],[role=tablist],[role=dialog],[role=toolbar],[role=listbox],[role=tree]) *)){text-decoration:underline;text-underline-offset:.15em}.mg-content hr:not(:where(.mg-content [class]:not(.mg-content__scroll),.mg-content [class]:not(.mg-content__scroll) *,.mg-content :is(nav,form,fieldset,button,[role=navigation],[role=menu],[role=menubar],[role=tablist],[role=dialog],[role=toolbar],[role=listbox],[role=tree]),.mg-content :is(nav,form,fieldset,button,[role=navigation],[role=menu],[role=menubar],[role=tablist],[role=dialog],[role=toolbar],[role=listbox],[role=tree]) *)){margin-block:var(--mg-spacing-200)}.mg-content figure:not(:where(.mg-content [class]:not(.mg-content__scroll),.mg-content [class]:not(.mg-content__scroll) *,.mg-content :is(nav,form,fieldset,button,[role=navigation],[role=menu],[role=menubar],[role=tablist],[role=dialog],[role=toolbar],[role=listbox],[role=tree]),.mg-content :is(nav,form,fieldset,button,[role=navigation],[role=menu],[role=menubar],[role=tablist],[role=dialog],[role=toolbar],[role=listbox],[role=tree]) *)){margin-block:var(--mg-spacing-200);margin-inline:0}.mg-content figure>img:not(:where(.mg-content [class]:not(.mg-content__scroll),.mg-content [class]:not(.mg-content__scroll) *,.mg-content :is(nav,form,fieldset,button,[role=navigation],[role=menu],[role=menubar],[role=tablist],[role=dialog],[role=toolbar],[role=listbox],[role=tree]),.mg-content :is(nav,form,fieldset,button,[role=navigation],[role=menu],[role=menubar],[role=tablist],[role=dialog],[role=toolbar],[role=listbox],[role=tree]) *)){display:block;height:auto;max-width:100%;padding:0}.mg-content :is(figcaption,caption):not(:where(.mg-content [class]:not(.mg-content__scroll),.mg-content [class]:not(.mg-content__scroll) *,.mg-content :is(nav,form,fieldset,button,[role=navigation],[role=menu],[role=menubar],[role=tablist],[role=dialog],[role=toolbar],[role=listbox],[role=tree]),.mg-content :is(nav,form,fieldset,button,[role=navigation],[role=menu],[role=menubar],[role=tablist],[role=dialog],[role=toolbar],[role=listbox],[role=tree]) *)){font-size:var(--mg-font-size-250);line-height:var(--mg-font-line-height-700);text-align:start}.mg-content figcaption:not(:where(.mg-content [class]:not(.mg-content__scroll),.mg-content [class]:not(.mg-content__scroll) *,.mg-content :is(nav,form,fieldset,button,[role=navigation],[role=menu],[role=menubar],[role=tablist],[role=dialog],[role=toolbar],[role=listbox],[role=tree]),.mg-content :is(nav,form,fieldset,button,[role=navigation],[role=menu],[role=menubar],[role=tablist],[role=dialog],[role=toolbar],[role=listbox],[role=tree]) *)){margin-block-start:var(--mg-spacing-50)}.mg-content table:not(:where(.mg-content [class]:not(.mg-content__scroll),.mg-content [class]:not(.mg-content__scroll) *,.mg-content :is(nav,form,fieldset,button,[role=navigation],[role=menu],[role=menubar],[role=tablist],[role=dialog],[role=toolbar],[role=listbox],[role=tree]),.mg-content :is(nav,form,fieldset,button,[role=navigation],[role=menu],[role=menubar],[role=tablist],[role=dialog],[role=toolbar],[role=listbox],[role=tree]) *)){border-collapse:collapse;margin-block:var(--mg-spacing-150);width:100%}.mg-content :is(th,td):not(:where(.mg-content [class]:not(.mg-content__scroll),.mg-content [class]:not(.mg-content__scroll) *,.mg-content :is(nav,form,fieldset,button,[role=navigation],[role=menu],[role=menubar],[role=tablist],[role=dialog],[role=toolbar],[role=listbox],[role=tree]),.mg-content :is(nav,form,fieldset,button,[role=navigation],[role=menu],[role=menubar],[role=tablist],[role=dialog],[role=toolbar],[role=listbox],[role=tree]) *)){border:1px solid rgb(var(--mg-color-neutral-400));padding:var(--mg-spacing-75) var(--mg-spacing-100);text-align:start;vertical-align:top}.mg-content caption:not(:where(.mg-content [class]:not(.mg-content__scroll),.mg-content [class]:not(.mg-content__scroll) *,.mg-content :is(nav,form,fieldset,button,[role=navigation],[role=menu],[role=menubar],[role=tablist],[role=dialog],[role=toolbar],[role=listbox],[role=tree]),.mg-content :is(nav,form,fieldset,button,[role=navigation],[role=menu],[role=menubar],[role=tablist],[role=dialog],[role=toolbar],[role=listbox],[role=tree]) *)){font-weight:600;margin-block-end:var(--mg-spacing-50)}.mg-content code:not(:where(pre code)):not(:where(.mg-content [class]:not(.mg-content__scroll),.mg-content [class]:not(.mg-content__scroll) *,.mg-content :is(nav,form,fieldset,button,[role=navigation],[role=menu],[role=menubar],[role=tablist],[role=dialog],[role=toolbar],[role=listbox],[role=tree]),.mg-content :is(nav,form,fieldset,button,[role=navigation],[role=menu],[role=menubar],[role=tablist],[role=dialog],[role=toolbar],[role=listbox],[role=tree]) *)){background:rgb(var(--mg-color-neutral-50));color:rgb(var(--mg-color-text))}.mg-content pre:not(:where(.mg-content [class]:not(.mg-content__scroll),.mg-content [class]:not(.mg-content__scroll) *,.mg-content :is(nav,form,fieldset,button,[role=navigation],[role=menu],[role=menubar],[role=tablist],[role=dialog],[role=toolbar],[role=listbox],[role=tree]),.mg-content :is(nav,form,fieldset,button,[role=navigation],[role=menu],[role=menubar],[role=tablist],[role=dialog],[role=toolbar],[role=listbox],[role=tree]) *)){direction:ltr;margin-block:var(--mg-spacing-150);max-width:100%;overflow-x:auto;unicode-bidi:isolate}.mg-content pre:focus-visible:not(:where(.mg-content [class]:not(.mg-content__scroll),.mg-content [class]:not(.mg-content__scroll) *,.mg-content :is(nav,form,fieldset,button,[role=navigation],[role=menu],[role=menubar],[role=tablist],[role=dialog],[role=toolbar],[role=listbox],[role=tree]),.mg-content :is(nav,form,fieldset,button,[role=navigation],[role=menu],[role=menubar],[role=tablist],[role=dialog],[role=toolbar],[role=listbox],[role=tree]) *)){box-shadow:inset 0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-color-neutral-0)),inset 0 0 0 calc(var(--mg-focus-ring-offset) + var(--mg-focus-ring-width)) rgb(var(--mg-color-focus-ring));outline:0}@media (forced-colors:active){.mg-content pre:focus-visible:not(:where(.mg-content [class]:not(.mg-content__scroll),.mg-content [class]:not(.mg-content__scroll) *,.mg-content :is(nav,form,fieldset,button,[role=navigation],[role=menu],[role=menubar],[role=tablist],[role=dialog],[role=toolbar],[role=listbox],[role=tree]),.mg-content :is(nav,form,fieldset,button,[role=navigation],[role=menu],[role=menubar],[role=tablist],[role=dialog],[role=toolbar],[role=listbox],[role=tree]) *)){outline:var(--mg-focus-ring-width) solid Highlight;outline-offset:calc(var(--mg-focus-ring-width)*-1)}}.mg-content .mg-content__scroll{margin-block:var(--mg-spacing-150);max-width:100%;overflow-x:auto}.mg-content .mg-content__scroll:focus-visible{box-shadow:inset 0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-color-neutral-0)),inset 0 0 0 calc(var(--mg-focus-ring-offset) + var(--mg-focus-ring-width)) rgb(var(--mg-color-focus-ring));outline:0}@media (forced-colors:active){.mg-content .mg-content__scroll:focus-visible{outline:var(--mg-focus-ring-width) solid Highlight;outline-offset:calc(var(--mg-focus-ring-width)*-1)}}
|
|
1356
|
+
|
|
1338
1357
|
/*# sourceMappingURL=style.css.map */
|