@undrr/undrr-mangrove 2.0.1 → 2.1.1
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 +1 -1
- package/components/BookCard.js +1 -1
- package/components/Breadcrumbs.js +1 -1
- package/components/Checkbox.js +1 -1
- package/components/Chips.js +1 -1
- package/components/CopyButton.js +1 -1
- package/components/CtaButton.js +1 -1
- package/components/Drawer.js +2 -2
- package/components/EmbedContainer.js +1 -1
- package/components/Footer.js +1 -1
- package/components/FormAction.js +1 -1
- package/components/FormErrorSummary.js +1 -1
- package/components/FormGroup.js +1 -1
- package/components/FullWidth.js +1 -1
- package/components/Gallery.js +2 -2
- package/components/Hero.js +2 -2
- package/components/HighlightBox.js +1 -1
- package/components/HorizontalBookCard.js +1 -1
- package/components/HorizontalCard.js +1 -1
- package/components/IconCard.js +1 -1
- package/components/Legend.js +1 -1
- package/components/Loader.js +2 -2
- package/components/MegaMenu.js +2 -2
- package/components/Notice.js +1 -1
- package/components/PageHeader.js +1 -1
- package/components/Pager.js +1 -1
- package/components/ProgressBar.js +2 -2
- package/components/QuoteHighlight.js +1 -1
- package/components/Radio.js +1 -1
- package/components/Range.js +1 -1
- package/components/ScrollContainer.js +1 -1
- package/components/SegmentedControl.js +1 -1
- package/components/Select.js +1 -1
- package/components/ServiceNotice.js +1 -1
- package/components/ShareButtons.js +1 -1
- package/components/ShowMore.js +2 -2
- package/components/SkipLink.js +1 -1
- package/components/StatsCard.js +1 -1
- package/components/SyndicationSearchWidget.js +2 -2
- package/components/Tab.js +1 -1
- package/components/TextCta.js +1 -1
- package/components/TextInput.js +1 -1
- package/components/Textarea.js +1 -1
- package/components/Tree.js +1 -1
- package/components/UserFeedback.js +1 -1
- package/components/VerticalCard.js +1 -1
- package/components/hydrate.js +2 -2
- package/css/style-all.css +41 -42
- package/css/style-all.css.map +1 -1
- package/css/style-delta.css +41 -42
- package/css/style-delta.css.map +1 -1
- package/css/style-gutenberg.css +4 -4
- package/css/style-gutenberg.css.map +1 -1
- package/css/style-irp.css +41 -42
- package/css/style-irp.css.map +1 -1
- package/css/style-mcr.css +41 -42
- package/css/style-mcr.css.map +1 -1
- package/css/style-preventionweb.css +41 -42
- package/css/style-preventionweb.css.map +1 -1
- package/css/style.css +41 -42
- package/css/style.css.map +1 -1
- package/docs/EDITORIAL-MANUAL.md +1 -1
- package/docs/llms-motion.txt +125 -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 +685 -43
- package/js/on-this-page-nav.js +80 -1
- package/js/show-more.js +149 -21
- package/package.json +1 -1
- package/scss/Atom/Images/AuthorImage/author-image.scss +9 -2
- package/scss/Atom/ReachElement/Details/details.scss +4 -2
- package/scss/Components/Cards/Card/card.scss +8 -2
- package/scss/Components/Cards/StatsCard/stats-card.scss +8 -1
- package/scss/Components/CiteThis/cite-this.scss +162 -9
- package/scss/Components/Gallery/gallery.scss +40 -15
- package/scss/Components/Hero/hero.scss +165 -0
- package/scss/Components/MegaMenu/mega-menu.scss +42 -121
- package/scss/Components/Navigation/Drawer/drawer.scss +10 -0
- package/scss/Components/OnThisPageNav/on-this-page-nav.scss +108 -3
- package/scss/Components/SyndicationSearchWidget/syndication-search-widget.scss +258 -127
- package/scss/Components/Tab/tab.scss +2 -1
- package/scss/Patterns/RichContent/rich-content.scss +177 -0
- package/scss/Patterns/_shared/pattern-demo.scss +5 -0
- package/scss/Utilities/Loader/loader.scss +89 -11
- package/scss/Utilities/ShowMore/show-more.scss +6 -0
- package/scss/assets/scss/_components.scss +3 -0
- package/scss/assets/scss/_foundational.scss +23 -8
- package/scss/assets/scss/_mixins.scss +5 -0
- package/scss/assets/scss/_variables.scss +1 -1
package/css/style-irp.css
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
* Storybook: https://mangrove.undrr.org/
|
|
6
6
|
* LLMs context: https://mangrove.undrr.org/llms.txt
|
|
7
7
|
* Repository: https://github.com/PreventionWeb/undrr-mangrove
|
|
8
|
-
* Version: 2.
|
|
8
|
+
* Version: 2.1.1
|
|
9
9
|
*
|
|
10
10
|
* ██╗ ██╗███╗ ██╗██████╗ ██████╗ ██████╗
|
|
11
11
|
* ██║ ██║████╗ ██║██╔══██╗██╔══██╗██╔══██╗
|
|
@@ -373,9 +373,8 @@
|
|
|
373
373
|
|
|
374
374
|
/* Font size utilities end */
|
|
375
375
|
/* 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)
|
|
376
|
-
/* 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
|
|
377
|
-
/* medium design */}@media (width >= 48em){[dir=rtl] ol
|
|
378
|
-
/* 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}
|
|
376
|
+
/* 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
|
|
377
|
+
/* 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}
|
|
379
378
|
|
|
380
379
|
/* typography end */
|
|
381
380
|
/**
|
|
@@ -646,8 +645,7 @@
|
|
|
646
645
|
* Full documentation:
|
|
647
646
|
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Atom/Images/AuthorImage/AuthorImages.mdx
|
|
648
647
|
*/
|
|
649
|
-
/* 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
|
|
650
|
-
|
|
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 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}}
|
|
651
649
|
/**
|
|
652
650
|
* Responsive Image
|
|
653
651
|
*
|
|
@@ -731,7 +729,7 @@
|
|
|
731
729
|
/* details tag start */
|
|
732
730
|
/* 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)}
|
|
733
731
|
|
|
734
|
-
/* 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
|
|
732
|
+
/* 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}}
|
|
735
733
|
/* ==========================================================================
|
|
736
734
|
Accordion Pattern (.mg-accordion)
|
|
737
735
|
Grouped <details> disclosures with flush separators, chevron rotation,
|
|
@@ -766,7 +764,7 @@
|
|
|
766
764
|
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Atom/StatusLabel/StatusLabel.mdx
|
|
767
765
|
*/@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(
|
|
768
766
|
--mg-status-label-indicator-border-width
|
|
769
|
-
);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:""
|
|
767
|
+
);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}
|
|
770
768
|
|
|
771
769
|
/**
|
|
772
770
|
* Table
|
|
@@ -915,7 +913,7 @@
|
|
|
915
913
|
*
|
|
916
914
|
* Full documentation:
|
|
917
915
|
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/Breadcrumbs/Breadcrumbs.mdx
|
|
918
|
-
*/.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:""
|
|
916
|
+
*/.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}}
|
|
919
917
|
/**
|
|
920
918
|
* Pager / Pagination
|
|
921
919
|
*
|
|
@@ -923,7 +921,7 @@
|
|
|
923
921
|
*
|
|
924
922
|
* Full documentation:
|
|
925
923
|
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/Pager/Pager.mdx
|
|
926
|
-
*/.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)}
|
|
924
|
+
*/.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)}
|
|
927
925
|
|
|
928
926
|
/**
|
|
929
927
|
* Gallery
|
|
@@ -935,15 +933,14 @@
|
|
|
935
933
|
*/
|
|
936
934
|
/* 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%
|
|
937
935
|
/* 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{
|
|
938
|
-
/* 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-
|
|
936
|
+
/* 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
|
|
939
937
|
/* 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
|
|
940
|
-
/* 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
|
|
941
|
-
/* 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
|
|
942
|
-
/* 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
|
|
938
|
+
/* 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)
|
|
939
|
+
/* 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{
|
|
940
|
+
/* 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{
|
|
943
941
|
/* 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)
|
|
944
942
|
/* 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
|
|
945
|
-
/* 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}
|
|
946
|
-
|
|
943
|
+
/* 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}}
|
|
947
944
|
/**
|
|
948
945
|
* Highlight Box
|
|
949
946
|
*
|
|
@@ -1014,21 +1011,14 @@
|
|
|
1014
1011
|
*
|
|
1015
1012
|
* Full documentation:
|
|
1016
1013
|
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/MegaMenu/MegaMenu.mdx
|
|
1017
|
-
*/.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
|
|
1018
|
-
|
|
1019
|
-
/* 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}
|
|
1020
|
-
|
|
1021
|
-
/* 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}
|
|
1014
|
+
*/.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}
|
|
1022
1015
|
|
|
1023
1016
|
/* Stronger keyboard focus ring for accessibility.
|
|
1024
1017
|
Was a hardcoded white inset ring, which is invisible here: the panel is
|
|
1025
1018
|
--mg-color-neutral-0 and the focused link tints it only 15%, so white
|
|
1026
|
-
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{
|
|
1027
|
-
|
|
1028
|
-
/* 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}}
|
|
1029
|
-
/* 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))
|
|
1019
|
+
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))
|
|
1030
1020
|
/* 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{
|
|
1031
|
-
/* 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
|
|
1021
|
+
/* 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)}}
|
|
1032
1022
|
/**
|
|
1033
1023
|
* Hub Header
|
|
1034
1024
|
*
|
|
@@ -1036,7 +1026,7 @@
|
|
|
1036
1026
|
*
|
|
1037
1027
|
* Full documentation:
|
|
1038
1028
|
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Patterns/ContentHub/ContentHub.mdx
|
|
1039
|
-
*/.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;
|
|
1029
|
+
*/.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}}
|
|
1040
1030
|
|
|
1041
1031
|
/**
|
|
1042
1032
|
* Cite this (CiteThis)
|
|
@@ -1045,7 +1035,7 @@
|
|
|
1045
1035
|
*
|
|
1046
1036
|
* Full documentation:
|
|
1047
1037
|
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/CiteThis/CiteThis.mdx
|
|
1048
|
-
*/.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}}.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-
|
|
1038
|
+
*/.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)}
|
|
1049
1039
|
|
|
1050
1040
|
/**
|
|
1051
1041
|
* Page Patterns
|
|
@@ -1072,7 +1062,7 @@
|
|
|
1072
1062
|
* Full documentation:
|
|
1073
1063
|
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/Cards/Card/VerticalCard.mdx
|
|
1074
1064
|
*/
|
|
1075
|
-
/* 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}
|
|
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 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}
|
|
1076
1066
|
|
|
1077
1067
|
/* content-card end */
|
|
1078
1068
|
/**
|
|
@@ -1090,7 +1080,7 @@
|
|
|
1090
1080
|
/* medium design */}@media (width >= 48em){.mg-stats-card-item__value{font-size:var(--mg-font-size-800)}}.mg-stats-card-item__value{
|
|
1091
1081
|
/* 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)
|
|
1092
1082
|
/* 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{
|
|
1093
|
-
/* 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
|
|
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 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}
|
|
1094
1084
|
|
|
1095
1085
|
/* Variant: Compact */.mg-stats-card--compact .mg-stats-card-item{padding:var(--mg-spacing-300)
|
|
1096
1086
|
/* 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)
|
|
@@ -1102,7 +1092,7 @@
|
|
|
1102
1092
|
|
|
1103
1093
|
/* 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))}
|
|
1104
1094
|
|
|
1105
|
-
/* RTL support is automatic: the highlighted accent uses `border-inline-start`.
|
|
1095
|
+
/* RTL support is automatic: the highlighted accent uses `border-inline-start`. */@media (prefers-reduced-motion:reduce){.mg-stats-card-item__summary a{transition:none}}
|
|
1106
1096
|
/**
|
|
1107
1097
|
* Snackbar / Toast
|
|
1108
1098
|
*
|
|
@@ -1129,7 +1119,7 @@
|
|
|
1129
1119
|
*
|
|
1130
1120
|
* Full documentation:
|
|
1131
1121
|
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/Hero/Hero.mdx
|
|
1132
|
-
*/.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}
|
|
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}.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}}
|
|
1133
1123
|
|
|
1134
1124
|
/**
|
|
1135
1125
|
* Text CTA
|
|
@@ -1186,7 +1176,7 @@
|
|
|
1186
1176
|
*
|
|
1187
1177
|
* Full documentation:
|
|
1188
1178
|
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/Tab/Tab.mdx
|
|
1189
|
-
*/.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
|
|
1179
|
+
*/.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
|
|
1190
1180
|
/* 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}
|
|
1191
1181
|
|
|
1192
1182
|
/* Tab end */
|
|
@@ -1214,7 +1204,7 @@
|
|
|
1214
1204
|
*
|
|
1215
1205
|
* Full documentation:
|
|
1216
1206
|
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/OnThisPageNav/OnThisPageNav.mdx
|
|
1217
|
-
*/.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)}
|
|
1207
|
+
*/.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)}
|
|
1218
1208
|
|
|
1219
1209
|
/**
|
|
1220
1210
|
* Preview Access
|
|
@@ -1240,8 +1230,7 @@
|
|
|
1240
1230
|
*
|
|
1241
1231
|
* Full documentation:
|
|
1242
1232
|
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/SyndicationSearchWidget/SyndicationSearchWidget.mdx
|
|
1243
|
-
*/.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}
|
|
1244
|
-
|
|
1233
|
+
*/.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-card__book{block-size:100%}.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}}
|
|
1245
1234
|
/**
|
|
1246
1235
|
* Error Pages
|
|
1247
1236
|
*
|
|
@@ -1291,13 +1280,14 @@
|
|
|
1291
1280
|
/**
|
|
1292
1281
|
* Loader / Spinner
|
|
1293
1282
|
*
|
|
1294
|
-
*
|
|
1283
|
+
* Loading indicator for asynchronous states, in a default size for
|
|
1295
1284
|
* pages and regions and a 1em inline size for text, buttons and form fields.
|
|
1296
1285
|
*
|
|
1297
1286
|
* Full documentation:
|
|
1298
1287
|
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Utilities/Loader/Loader.mdx
|
|
1299
1288
|
*/@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
|
|
1300
|
-
/* 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 (prefers-reduced-motion:reduce){.mg-loader{animation-
|
|
1289
|
+
/* 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
|
|
1290
|
+
/* 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}}
|
|
1301
1291
|
|
|
1302
1292
|
/**
|
|
1303
1293
|
* Full Width Bleed
|
|
@@ -1315,7 +1305,7 @@
|
|
|
1315
1305
|
*
|
|
1316
1306
|
* Full documentation:
|
|
1317
1307
|
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Utilities/ShowMore/ShowMore.mdx
|
|
1318
|
-
*/: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}
|
|
1308
|
+
*/: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}
|
|
1319
1309
|
|
|
1320
1310
|
/**
|
|
1321
1311
|
* Skip Link
|
|
@@ -1334,7 +1324,7 @@
|
|
|
1334
1324
|
* Full documentation:
|
|
1335
1325
|
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/DataViz/Legend/Legend.mdx
|
|
1336
1326
|
*/.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{
|
|
1337
|
-
/* 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{
|
|
1327
|
+
/* 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{
|
|
1338
1328
|
/* 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))}
|
|
1339
1329
|
|
|
1340
1330
|
/**
|
|
@@ -1345,8 +1335,7 @@
|
|
|
1345
1335
|
*
|
|
1346
1336
|
* Full documentation:
|
|
1347
1337
|
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/Navigation/Drawer/Drawer.mdx
|
|
1348
|
-
*/.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}
|
|
1349
|
-
|
|
1338
|
+
*/.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}}
|
|
1350
1339
|
/**
|
|
1351
1340
|
* Tree
|
|
1352
1341
|
*
|
|
@@ -1356,4 +1345,14 @@
|
|
|
1356
1345
|
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/Navigation/Tree/Tree.mdx
|
|
1357
1346
|
*/.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}
|
|
1358
1347
|
|
|
1348
|
+
/**
|
|
1349
|
+
* Rich content
|
|
1350
|
+
*
|
|
1351
|
+
* Opt-in semantic defaults for trusted editorial HTML. Classed descendants
|
|
1352
|
+
* keep their own presentation; classless structural wrappers pass through.
|
|
1353
|
+
*
|
|
1354
|
+
* Full documentation:
|
|
1355
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Patterns/RichContent/RichContent.mdx
|
|
1356
|
+
*/.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)}}
|
|
1357
|
+
|
|
1359
1358
|
/*# sourceMappingURL=style-irp.css.map */
|