@charset "utf-8";

.notification { --min-block-size: 160px; --min-block-size-ribbon: 50px; --min-block-size-pill: 72px; --margin-inline-pill-desktop: 80px; --margin-inline-ribbon: 30px; --max-inline-size-image: 75px; --max-inline-size-icon: 231px; --inline-size-image: auto; --inline-size-pill: 85%; --border-block-size: 10px; --close-size: 20px; --icon-size-xs: 24px; --icon-size-s: 32px; --icon-size-m: 40px; --icon-size: 56px; --icon-size-xl: 64px; --pill-radius: 16px; --pill-shadow: 0 3px 6px #00000029; --split-shadow: 0 6px 16px 0 rgb(0 0 0 / 0.16); display: flex; inline-size: 100%; position: relative; align-items: center; justify-content: center; flex-wrap: wrap; overflow: hidden; min-block-size: var(--min-block-size); background: var(--color-white); }

.temp-focus { position: absolute; left: -9999px; top: -9999px; }

.notification.ribbon { min-block-size: var(--min-block-size-ribbon); }

.dark .notification, .notification.dark { color: var(--color-white); }

.notification p { margin: 0px; inline-size: 100%; margin-block-end: var(--spacing-xs); }

.notification [class*="heading-"] { margin-block-end: var(--spacing-xxs); }

.notification [class*="heading-"] strong { font-weight: unset; }

.notification .text p:not(.icon-area, .action-area) { margin-block-end: var(--spacing-s); }

.notification.ribbon.space-between [class*="heading-"] + p { margin-block-end: 0px; }

.notification .foreground { display: flex; position: relative; align-items: flex-start; flex-direction: column; gap: var(--spacing-xs); margin-block: var(--spacing-s); box-sizing: border-box; justify-content: flex-start; }

.notification.ribbon .foreground { inline-size: 100%; margin-inline: var(--margin-inline-ribbon); margin-block: 0px; padding-block: var(--spacing-s); }

.notification .foreground [data-align="center"], .notification.center .foreground, .notification.center .foreground > * { text-align: center; justify-content: center; align-items: center; }

.notification.pill .foreground { padding-inline: var(--spacing-xs) var(--spacing-xxs); padding-block: var(--spacing-xs) var(--spacing-xxs); margin: 0px; inline-size: 100%; }

.notification.pill { overflow: unset; }

.notification.pill .background, .notification.pill > :first-child { border-radius: inherit; }

.notification.pill .foreground .text.notification-pill-mobile .milo-tooltip { position: absolute; left: calc(var(--spacing-xs) - 4px); bottom: var(--spacing-xs); margin-inline-start: 0px; }

[dir="rtl"] .notification.pill .foreground .text.notification-pill-mobile .milo-tooltip { left: unset; right: calc(var(--spacing-xs) - 4px); }

.notification.pill .foreground .text span[data-tooltip] .icon-milo { height: 16px; }

.notification.ribbon.xxs-padding .foreground { padding-block: var(--spacing-xxs); }

.notification.ribbon.xs-padding .foreground { padding-block: var(--spacing-xs); }

.notification.split .foreground { padding-inline: var(--spacing-xs); padding-block: var(--spacing-xs); }

.notification:is(.ribbon, .pill) .close { position: absolute; inset-inline: auto var(--spacing-xxs); inset-block: var(--spacing-xxs) auto; block-size: var(--close-size); inline-size: var(--close-size); cursor: pointer; margin: auto; appearance: none; border: none; background: transparent; padding: 0px; }

.notification .close .path { fill: var(--text-color); }

.dark .notification .close .path, .notification.dark .close .path { fill: var(--color-white); }

.notification .border { display: block; block-size: var(--border-block-size); inline-size: 100%; }

.notification .action-area { gap: var(--spacing-s); display: flex; align-items: center; }

.notification .background img { min-block-size: unset; }

.notification .foreground .text { display: flex; flex-wrap: wrap; max-inline-size: none; padding-block: 0px; }

.notification.pill .foreground .text { flex-direction: column; align-items: flex-start; text-align: start; inline-size: 100%; }

.notification.button-full-width { min-block-size: 90px; block-size: 90px; }

.notification.button-full-width .action-area, .notification.button-full-width .con-button { width: 100%; max-width: 328px; align-self: center; }

.notification.ribbon.space-between [class*="heading-"]:only-child { margin-block-end: 0px; }

.notification.ribbon.space-between .foreground .text { flex-wrap: nowrap; inline-size: 100%; }

.notification.ribbon.space-between .foreground .copy-wrap { margin-inline-end: var(--spacing-s); display: flex; flex-direction: column; justify-content: center; flex-basis: 100%; }

.notification .foreground .image { position: relative; display: flex; inline-size: var(--inline-size-image); max-inline-size: var(--max-inline-size-image); margin: 0px; order: -1; }

.notification .foreground > div { flex-grow: 1; flex-basis: 100%; min-inline-size: 0px; }

.notification .foreground .text a { white-space: nowrap; }

.notification .icon-area img { display: flex; align-items: center; inline-size: auto; }

.notification.ribbon .icon-area img { max-block-size: var(--icon-size); }

.notification .icon-area.lockup-area img { max-block-size: unset; }

.notification .lockup-area { flex-wrap: nowrap; }

.notification .foreground .image :is(picture, video), .notification .foreground .image picture img { inline-size: 100%; display: flex; }

.notification:is(.ribbon.m-icon, .pill) .icon-area img { max-block-size: var(--icon-size-m); }

.notification.s-icon:is(.ribbon, .pill) .icon-area img { max-block-size: var(--icon-size-s); }

.notification.xs-icon:is(.ribbon, .pill) .icon-area img { max-block-size: var(--icon-size-xs); }

.notification.ribbon.xl-icon .icon-area img { max-block-size: var(--icon-size-xl); }

.notification .text [class*="heading-"] + .action-area { margin-block-start: var(--spacing-xs); }

.notification.center .foreground .action-area { justify-content: center; }

.notification .foreground .icon-area { block-size: auto; max-inline-size: none; margin-block-end: var(--spacing-xs); flex-shrink: 0; display: flex; }

.notification .foreground .icon-area:not(.lockup-area) { gap: var(--spacing-xs); }

.notification.center .foreground .icon-area { justify-content: center; }

.notification.pill .foreground .icon-area { margin-inline-end: 0px; margin-block-end: var(--spacing-xs); inline-size: auto; }

.notification.ribbon.space-between .foreground .icon-area { align-items: center; inline-size: auto; margin-inline-end: var(--spacing-xs); margin-block-end: 0px; }

.notification .foreground .text a:not(.con-button) { inline-size: auto; font-weight: normal; }

.notification .foreground .text .action-area > a { margin-inline-end: 0px; }

.notification .foreground .text .heading-l { margin-block-end: var(--spacing-xxs); }

.notification .foreground:not(.no-image) .text .body-s.action-area, .notification .foreground:not(.no-image) .text .body-m.action-area { margin-block-end: 0px; }

.notification.center .icon-area picture { display: flex; justify-content: center; }

.notification.pill { border-radius: var(--pill-radius); inline-size: calc(100% - var(--spacing-m)); margin-inline: auto; box-shadow: var(--pill-shadow); }

.notification.split.pill { box-shadow: var(--split-shadow); }

.notification.pill .foreground .action-area { justify-content: flex-end; flex-wrap: wrap; }

.notification.ribbon.space-between .foreground .action-area { flex-wrap: wrap; align-self: center; justify-content: flex-end; inline-size: auto; }

.notification.flexible { background: unset; }

.notification .flexible-inner { inline-size: 100%; box-shadow: var(--pill-shadow); }

.notification.pill.no-shadow, .notification.pill.no-shadow.flexible .flexible-inner { box-shadow: unset; }

.notification .foreground > :is(.tablet-up, .desktop-up) { display: none; }

.notification-visibility-hidden { position: fixed; top: 0px; left: 0px; width: 0px; height: 0px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; z-index: -1; }

.notification.pill .foreground .text > :not(.action-area) { padding-inline-end: var(--spacing-xxs); inline-size: calc(100% - var(--spacing-xxs)); }

.notification.pill .copy-wrap p:first-child:not(:only-child) { margin-block-end: var(--spacing-xxs); }

.notification.pill.max-width-6 { max-width: 600px; }

.notification.pill.max-width-8 { max-width: 800px; }

.notification.pill.max-width-10 { max-width: 1000px; }

.notification.pill.max-width-12 { max-width: 1200px; }

.notification.pill.max-width-auto { max-width: unset; }

.notification.split .copy-wrap > [class^="heading-"] { max-width: 92.6%; }

.notification.split .foreground .text .copy-wrap, .notification.split .foreground .text .split-list-area { display: flex; flex-direction: column; gap: var(--spacing-xs); padding-inline-end: 0px; inline-size: 100%; }

.notification.split .split-list-area .split-list-item { display: flex; justify-content: space-between; width: 100%; }

.notification.split .split-list-area .split-list-item .text-content { display: flex; gap: var(--spacing-xxs); align-items: center; font-weight: 700; }

.notification.split .split-list-area .split-list-item .text-content div { max-width: 79.042%; }

.notification.split .split-list-area .split-list-item .con-button { white-space: normal; text-align: center; min-width: 89px; max-width: 89px; }

.notification.split .split-list-area .split-list-item picture, .notification.split .split-list-area .split-list-item picture img { display: flex; width: auto; height: var(--icon-size-xs); min-width: var(--icon-size-xs); max-width: unset; }

.notification.split.focus { width: 100%; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; z-index: 102; }

.notification-curtain { position: fixed; inset: 0px; background: rgba(50, 50, 50, 0.8); z-index: 101; }

@media screen and (max-width: 600px) {
  .notification.ribbon.inline p { margin: initial; inline-size: initial; margin-block-end: initial; }
  .notification.ribbon.inline [class*="heading-"] { margin-block-end: initial; }
  .notification.ribbon.inline [class*="heading-"] strong { font-size: var(--type-heading-s-size); line-height: var(--type-heading-s-lh); }
  .notification.ribbon.inline .action-area { gap: var(--spacing-xs); order: 2; margin-left: auto; }
  .notification.ribbon:not(.inline) [class*="heading-"]:only-child { margin-block-end: var(--spacing-s); }
  .notification.ribbon.inline .foreground .text { flex-wrap: nowrap; inline-size: 100%; gap: var(--spacing-xxs); }
  .notification.ribbon.inline .foreground .copy-wrap { order: 1; max-width: 152px; margin: auto 0px; }
  .notification.ribbon.inline .icon-area img { max-block-size: var(--icon-size-m); }
  .notification.ribbon.inline .foreground .icon-area { margin: auto 0px; width: var(--icon-size-m); order: 0; height: var(--icon-size-m); }
  .mobile-disable-scroll { overflow: hidden; }
}

@media screen and (max-width: 359px) {
  .notification.ribbon.inline .action-area { flex-wrap: wrap; }
}

@media screen and (min-width: 600px) {
  .notification { --max-inline-size-image: 188px; --max-inline-size-banner: 800px; --min-inline-size-flexible: 300px; --inline-size-image: 35%; --full-width: 1200px; --padding-inline-flexible: 80px; }
  .notification:not(.pill, .ribbon) .foreground { max-inline-size: var(--max-inline-size-banner); }
  .notification .foreground { align-items: center; flex-direction: row; margin-block: 0px; margin-inline: auto; padding-block: var(--spacing-s); padding-inline: 0px; gap: var(--spacing-s); }
  .notification .foreground > :is(.mobile-up, .desktop-up) { display: none; }
  .notification .foreground > .tablet-up { display: flex; }
  .notification:is(.max-width-12-desktop, .ribbon) .foreground { max-inline-size: var(--full-width); margin-inline: var(--grid-margins-width); }
  .notification .foreground .image { margin: 0px; padding: 0px; order: unset; }
  .notification .foreground .text.image { justify-content: flex-start; }
  .notification .background { overflow: hidden; position: absolute; inset: 0px; }
  .notification .foreground .text { margin-block-end: 0px; padding-inline-end: 0px; }
  .notification p .con-button wbr { display: none; }
  .notification .foreground .text + .image { margin-inline-end: 0px; }
  .notification .foreground .icon-area { inline-size: auto; margin-inline-end: var(--spacing-xs); margin-block-end: 0px; }
  .notification.button-full-width { display: none; }
  .notification.ribbon .close { inset-inline: auto var(--spacing-s); inset-block: 0px; }
  .notification.ribbon .foreground .text { flex-flow: row; align-items: center; }
  .notification.ribbon .action-area { inline-size: auto; }
  .notification.ribbon .copy-wrap { margin-inline-end: var(--spacing-s); }
  .notification.space-between .copy-wrap { flex-basis: 100%; }
  .notification.ribbon .copy-wrap :last-child { margin-block-end: 0px; }
  .notification.ribbon:not(.inline) [class*="heading-"]:only-child { margin-block-end: 0px; }
  .notification.center .copy-wrap { text-align: start; }
  .notification.pill .foreground { padding: var(--spacing-s); }
  .notification.pill:not(.flexible) .foreground { inline-size: var(--grid-width); }
  .notification.pill .foreground .text { align-items: center; text-align: center; }
  .notification.pill .foreground .action-area { justify-content: center; }
  .notification.ribbon.space-between .foreground .action-area { flex-wrap: unset; }
  .notification.pill.flexible { pointer-events: none; box-shadow: none; padding-block-end: var(--spacing-xxs); }
  .notification .flexible-inner { position: relative; margin: auto; pointer-events: auto; inline-size: auto; padding-inline: var(--padding-inline-flexible); overflow: hidden; min-inline-size: var(--min-inline-size-flexible); border-radius: var(--pill-radius); }
  .notification.pill .foreground .text > :not(.action-area) { padding-inline-end: unset; inline-size: unset; }
  .notification.pill.max-width-6-tablet { max-width: 600px; }
  .notification.pill.max-width-8-tablet { max-width: 800px; }
  .notification.pill.max-width-10-tablet { max-width: 1000px; }
  .notification.pill.max-width-12-tablet { max-width: 1200px; }
  .notification.pill.max-width-auto-tablet { max-width: unset; }
  .notification.split, .notification-curtain { display: none; }
}

@media screen and (min-width: 1200px) {
  .notification { --inline-size-image: 20%; --inline-size-image-10: 30%; --max-inline-size-image-10: 300px; --inline-size-image-full: 33.333%; --max-inline-size-image-full: 400px; --max-inline-size-pill: 1600px; --pill-radius: 100px; }
  .notification:not(.pill, .ribbon) .foreground { inline-size: calc(var(--grid-width) * (8 / 12)); margin-inline: var(--grid-margins-width-8); gap: var(--spacing-m); }
  .notification:is(.max-width-12-desktop, .max-width-10-desktop) .foreground { inline-size: unset; }
  .notification.max-width-12-desktop .foreground { gap: var(--spacing-xl); margin-inline: var(--grid-margins-width); }
  .notification.ribbon .foreground { gap: var(--spacing-s); }
  .notification.max-width-10-desktop .foreground { margin-inline: var(--grid-margins-width-10); gap: var(--spacing-l); max-inline-size: calc(var(--grid-column-width) * 10); }
  .notification .foreground > :is(.mobile-up, .tablet-up) { display: none; }
  .notification .foreground > .desktop-up { display: flex; }
  .notification .foreground > div { object-fit: cover; padding-inline-start: 0px; }
  .notification .foreground .icon-area { max-inline-size: var(--max-inline-size-icon); margin-inline-end: var(--spacing-s); }
  .notification .foreground .lockup-area { max-inline-size: none; }
  .notification.ribbon .foreground .icon-area { flex-shrink: 0; }
  .notification .foreground .image { inline-size: var(--inline-size-image); }
  .notification.max-width-10-desktop .foreground .image { inline-size: var(--inline-size-image); max-inline-size: var(--max-inline-size-image-10); }
  .notification.max-width-12-desktop .foreground .image { inline-size: var(--inline-size-image-full); max-inline-size: var(--max-inline-size-image-full); }
  .notification .foreground .text + .image { margin-inline-end: 0px; }
  .notification.pill { min-block-size: var(--min-block-size-pill); inline-size: var(--inline-size-pill); max-inline-size: var(--max-inline-size-pill); margin-inline: auto; }
  .notification.pill p { inline-size: auto; }
  .notification.pill .text [class*="heading-"], .notification.pill .text p { flex-shrink: 0; margin-block-end: 0px; }
  .notification.pill .foreground .text [class*="heading-"] { margin-block-end: 0px; }
  .notification.pill .close { inset-inline: auto var(--spacing-s); inset-block: 0px; }
  .notification.pill .foreground { padding-block: var(--spacing-xs); padding-inline: var(--spacing-m); margin: 0px; }
  .notification.pill:not(.flexible) .foreground { inline-size: calc(100% - var(--margin-inline-pill-desktop) * 2); }
  .notification.pill.flexible .foreground { padding-inline: 0px; }
  .notification.pill .foreground .icon-area { margin-inline-end: var(--spacing-s); margin-block-end: 0px; }
  .notification.pill .icon-area img { max-block-size: var(--icon-size-m); }
  .notification.pill .foreground .action-area { margin-inline-start: var(--spacing-s); }
  .notification.pill .foreground .text { flex-flow: row; align-items: center; justify-content: center; }
  .notification.pill.flexible .flexible-inner { border-radius: var(--pill-radius); }
  .notification.pill .copy-wrap { display: flex; flex-wrap: wrap; align-items: baseline; text-align: start; gap: var(--spacing-xxs); }
  .notification.pill .copy-wrap > * { max-inline-size: 100%; }
  .notification.ribbon.space-between .foreground .icon-area { margin-inline-end: var(--spacing-s); }
  .notification.pill .copy-wrap p:first-child:not(:only-child) { margin-block-end: 0px; }
  .notification.pill.max-width-6-desktop { max-width: 600px; }
  .notification.pill.max-width-8-desktop { max-width: 800px; }
  .notification.pill.max-width-10-desktop { max-width: 1000px; }
  .notification.pill.max-width-12-desktop { max-width: 1200px; }
  .notification.pill.max-width-auto-desktop { max-width: unset; }
}