/* docara-shell-source: runtime/component/toast/css/toast.css */
@charset "UTF-8";
/*
 * Main SCSS file for including styles for component.
 *
 * Imports:
 * - Base styles (_css__component_name.scss)
 */
/* The status words are the shared vocabulary: neutral, info, success, warning,
   error. The component renders the canonical class, and the two words this
   component used before — default and primary — are matched beside it so
   existing markup and project CSS keep working. `primary` was a colour inside a
   list of statuses; here it meant info. See contracts/public-api-axes.json. */
@layer sf.components {
  /* utility-hint: display/flex (.flex) flex-direction/row (.flex-row) flex-wrap/nowrap (.flex-nowrap) gap/var(--sf-space-1\/2) justify-content/flex-start (.justify-start) align-items/flex-start (.items-start) */
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-toast{
    border-bottom-right-radius: var(--sf-radius--surface);
    border-bottom-right-radius: var(--sf-toast-radius, var(--sf-toast--border-bottom-right-radius, var(--sf-radius--surface)));
  }
  @supports not (border-end-end-radius: initial){
  html:not([dir="rtl"]) .sf-toast{
    border-bottom-right-radius: var(--sf-radius--surface);
    border-bottom-right-radius: var(--sf-toast-radius, var(--sf-toast--border-bottom-right-radius, var(--sf-radius--surface)));
    }
  }
  .sf-toast:where(:dir(ltr)){
    border-bottom-right-radius: var(--sf-radius--surface);
    border-bottom-right-radius: var(--sf-toast-radius, var(--sf-toast--border-bottom-right-radius, var(--sf-radius--surface)));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-toast{
    border-bottom-left-radius: var(--sf-radius--surface);
    border-bottom-left-radius: var(--sf-toast-radius, var(--sf-toast--border-bottom-right-radius, var(--sf-radius--surface)));
  }
  @supports not (border-end-end-radius: initial){
  [dir="rtl"] .sf-toast{
    border-bottom-left-radius: var(--sf-radius--surface);
    border-bottom-left-radius: var(--sf-toast-radius, var(--sf-toast--border-bottom-right-radius, var(--sf-radius--surface)));
    }
  }
  .sf-toast:where(:dir(rtl)){
    border-bottom-left-radius: var(--sf-radius--surface);
    border-bottom-left-radius: var(--sf-toast-radius, var(--sf-toast--border-bottom-right-radius, var(--sf-radius--surface)));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-toast{
    border-bottom-left-radius: var(--sf-radius--surface);
    border-bottom-left-radius: var(--sf-toast-radius, var(--sf-toast--border-bottom-left-radius, var(--sf-radius--surface)));
  }
  @supports not (border-end-start-radius: initial){
  html:not([dir="rtl"]) .sf-toast{
    border-bottom-left-radius: var(--sf-radius--surface);
    border-bottom-left-radius: var(--sf-toast-radius, var(--sf-toast--border-bottom-left-radius, var(--sf-radius--surface)));
    }
  }
  .sf-toast:where(:dir(ltr)){
    border-bottom-left-radius: var(--sf-radius--surface);
    border-bottom-left-radius: var(--sf-toast-radius, var(--sf-toast--border-bottom-left-radius, var(--sf-radius--surface)));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-toast{
    border-bottom-right-radius: var(--sf-radius--surface);
    border-bottom-right-radius: var(--sf-toast-radius, var(--sf-toast--border-bottom-left-radius, var(--sf-radius--surface)));
  }
  @supports not (border-end-start-radius: initial){
  [dir="rtl"] .sf-toast{
    border-bottom-right-radius: var(--sf-radius--surface);
    border-bottom-right-radius: var(--sf-toast-radius, var(--sf-toast--border-bottom-left-radius, var(--sf-radius--surface)));
    }
  }
  .sf-toast:where(:dir(rtl)){
    border-bottom-right-radius: var(--sf-radius--surface);
    border-bottom-right-radius: var(--sf-toast-radius, var(--sf-toast--border-bottom-left-radius, var(--sf-radius--surface)));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-toast{
    border-top-right-radius: var(--sf-radius--surface);
    border-top-right-radius: var(--sf-toast-radius, var(--sf-toast--border-top-right-radius, var(--sf-radius--surface)));
  }
  @supports not (border-start-end-radius: initial){
  html:not([dir="rtl"]) .sf-toast{
    border-top-right-radius: var(--sf-radius--surface);
    border-top-right-radius: var(--sf-toast-radius, var(--sf-toast--border-top-right-radius, var(--sf-radius--surface)));
    }
  }
  .sf-toast:where(:dir(ltr)){
    border-top-right-radius: var(--sf-radius--surface);
    border-top-right-radius: var(--sf-toast-radius, var(--sf-toast--border-top-right-radius, var(--sf-radius--surface)));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-toast{
    border-top-left-radius: var(--sf-radius--surface);
    border-top-left-radius: var(--sf-toast-radius, var(--sf-toast--border-top-right-radius, var(--sf-radius--surface)));
  }
  @supports not (border-start-end-radius: initial){
  [dir="rtl"] .sf-toast{
    border-top-left-radius: var(--sf-radius--surface);
    border-top-left-radius: var(--sf-toast-radius, var(--sf-toast--border-top-right-radius, var(--sf-radius--surface)));
    }
  }
  .sf-toast:where(:dir(rtl)){
    border-top-left-radius: var(--sf-radius--surface);
    border-top-left-radius: var(--sf-toast-radius, var(--sf-toast--border-top-right-radius, var(--sf-radius--surface)));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-toast{
    border-top-left-radius: var(--sf-radius--surface);
    border-top-left-radius: var(--sf-toast-radius, var(--sf-toast--border-top-left-radius, var(--sf-radius--surface)));
  }
  @supports not (border-start-start-radius: initial){
  html:not([dir="rtl"]) .sf-toast{
    border-top-left-radius: var(--sf-radius--surface);
    border-top-left-radius: var(--sf-toast-radius, var(--sf-toast--border-top-left-radius, var(--sf-radius--surface)));
    }
  }
  .sf-toast:where(:dir(ltr)){
    border-top-left-radius: var(--sf-radius--surface);
    border-top-left-radius: var(--sf-toast-radius, var(--sf-toast--border-top-left-radius, var(--sf-radius--surface)));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-toast{
    border-top-right-radius: var(--sf-radius--surface);
    border-top-right-radius: var(--sf-toast-radius, var(--sf-toast--border-top-left-radius, var(--sf-radius--surface)));
  }
  @supports not (border-start-start-radius: initial){
  [dir="rtl"] .sf-toast{
    border-top-right-radius: var(--sf-radius--surface);
    border-top-right-radius: var(--sf-toast-radius, var(--sf-toast--border-top-left-radius, var(--sf-radius--surface)));
    }
  }
  .sf-toast:where(:dir(rtl)){
    border-top-right-radius: var(--sf-radius--surface);
    border-top-right-radius: var(--sf-toast-radius, var(--sf-toast--border-top-left-radius, var(--sf-radius--surface)));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-toast{
    padding-right: var(--sf-space-1);
    padding-right: var(--sf-toast-padding-inline, var(--sf-toast--padding-right, var(--sf-space-1)));
  }
  @supports not (padding-inline-end: initial){
  html:not([dir="rtl"]) .sf-toast{
    padding-right: var(--sf-space-1);
    padding-right: var(--sf-toast-padding-inline, var(--sf-toast--padding-right, var(--sf-space-1)));
    }
  }
  .sf-toast:where(:dir(ltr)){
    padding-right: var(--sf-space-1);
    padding-right: var(--sf-toast-padding-inline, var(--sf-toast--padding-right, var(--sf-space-1)));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-toast{
    padding-left: var(--sf-space-1);
    padding-left: var(--sf-toast-padding-inline, var(--sf-toast--padding-right, var(--sf-space-1)));
  }
  @supports not (padding-inline-end: initial){
  [dir="rtl"] .sf-toast{
    padding-left: var(--sf-space-1);
    padding-left: var(--sf-toast-padding-inline, var(--sf-toast--padding-right, var(--sf-space-1)));
    }
  }
  .sf-toast:where(:dir(rtl)){
    padding-left: var(--sf-space-1);
    padding-left: var(--sf-toast-padding-inline, var(--sf-toast--padding-right, var(--sf-space-1)));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-toast{
    padding-left: var(--sf-space-1);
    padding-left: var(--sf-toast-padding-inline, var(--sf-toast--padding-left, var(--sf-space-1)));
  }
  @supports not (padding-inline-start: initial){
  html:not([dir="rtl"]) .sf-toast{
    padding-left: var(--sf-space-1);
    padding-left: var(--sf-toast-padding-inline, var(--sf-toast--padding-left, var(--sf-space-1)));
    }
  }
  .sf-toast:where(:dir(ltr)){
    padding-left: var(--sf-space-1);
    padding-left: var(--sf-toast-padding-inline, var(--sf-toast--padding-left, var(--sf-space-1)));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-toast{
    padding-right: var(--sf-space-1);
    padding-right: var(--sf-toast-padding-inline, var(--sf-toast--padding-left, var(--sf-space-1)));
  }
  @supports not (padding-inline-start: initial){
  [dir="rtl"] .sf-toast{
    padding-right: var(--sf-space-1);
    padding-right: var(--sf-toast-padding-inline, var(--sf-toast--padding-left, var(--sf-space-1)));
    }
  }
  .sf-toast:where(:dir(rtl)){
    padding-right: var(--sf-space-1);
    padding-right: var(--sf-toast-padding-inline, var(--sf-toast--padding-left, var(--sf-space-1)));
  }
  .sf-toast {
    box-sizing: border-box;
    min-width: var(--sf-0);
    min-inline-size: var(--sf-0);
    max-width: 100%;
    max-inline-size: 100%;
    border: var(--sf-px) solid var(--sf-outline-variant);
    border: var(--sf-toast-border-width, var(--sf-px)) solid var(--sf-toast-border-color, var(--sf-toast--border-color, var(--sf-outline-variant)));
    border-end-end-radius: var(--sf-radius--surface);
    border-end-end-radius: var(--sf-toast-radius, var(--sf-toast--border-bottom-right-radius, var(--sf-radius--surface)));
    border-end-start-radius: var(--sf-radius--surface);
    border-end-start-radius: var(--sf-toast-radius, var(--sf-toast--border-bottom-left-radius, var(--sf-radius--surface)));
    border-start-end-radius: var(--sf-radius--surface);
    border-start-end-radius: var(--sf-toast-radius, var(--sf-toast--border-top-right-radius, var(--sf-radius--surface)));
    border-start-start-radius: var(--sf-radius--surface);
    border-start-start-radius: var(--sf-toast-radius, var(--sf-toast--border-top-left-radius, var(--sf-radius--surface)));
    gap: var(--sf-space-1\/2);
    gap: var(--sf-toast-gap, var(--sf-toast--gap, var(--sf-space-1\/2)));
    padding-bottom: var(--sf-space-1);
    padding-bottom: var(--sf-toast-padding-block, var(--sf-toast--padding-bottom, var(--sf-space-1)));
    -webkit-padding-end: var(--sf-space-1);
            padding-inline-end: var(--sf-space-1);
    -webkit-padding-end: var(--sf-toast-padding-inline, var(--sf-toast--padding-right, var(--sf-space-1)));
            padding-inline-end: var(--sf-toast-padding-inline, var(--sf-toast--padding-right, var(--sf-space-1)));
    -webkit-padding-start: var(--sf-space-1);
            padding-inline-start: var(--sf-space-1);
    -webkit-padding-start: var(--sf-toast-padding-inline, var(--sf-toast--padding-left, var(--sf-space-1)));
            padding-inline-start: var(--sf-toast-padding-inline, var(--sf-toast--padding-left, var(--sf-space-1)));
    padding-top: var(--sf-space-1);
    padding-top: var(--sf-toast-padding-block, var(--sf-toast--padding-top, var(--sf-space-1)));
    /* A toast floats over the page, and the status containers are
       translucent fills: painted alone they let the table under a toast read
       through its text (owner, 2026-10-12). So the toast stands on the raised
       surface of its step, with its shadow, and the status tints it. */
    background-color: var(--sf-elevation-3--surface);
    --sf-on-surface-variant: var(--sf-on-elevation-3--variant);
    background-image: linear-gradient(var(--sf-toast--background-color), var(--sf-toast--background-color));
    box-shadow: var(--sf-elevation-3--shadow);
    color: var(--sf-on-surface);
    color: var(--sf-toast--content-color, var(--sf-on-surface));
    opacity: 1;
    -webkit-transform: translateY(var(--sf-0));
            transform: translateY(var(--sf-0));
    transition: opacity var(--sf-duration-normal) var(--sf-ease-enter), -webkit-transform var(--sf-duration-normal) var(--sf-ease-enter);
    transition: opacity var(--sf-duration-normal) var(--sf-ease-enter), transform var(--sf-duration-normal) var(--sf-ease-enter);
    transition: opacity var(--sf-duration-normal) var(--sf-ease-enter), transform var(--sf-duration-normal) var(--sf-ease-enter), -webkit-transform var(--sf-duration-normal) var(--sf-ease-enter);
  }
  .sf-toast.closing {
    transition-timing-function: var(--sf-ease-exit);
    opacity: 0;
    -webkit-transform: translateY(var(--sf-space-1\/2));
            transform: translateY(var(--sf-space-1\/2));
  }
  .sf-toast .sf-close-icon {
    background-color: var(--sf-close-icon--background-color);
    border-color: transparent;
    border-color: var(--sf-close-icon--border-color, transparent);
  }
  .sf-toast .sf-icon {
    --sf-icon--font-size: var(--sf-text-size-3);
    --sf-icon--height: var(--sf-text-size-3);
    --sf-icon--width: var(--sf-text-size-3);
    color: var(--sf-on-surface-variant);
    color: var(--sf-icon--color, var(--sf-on-surface-variant));
    font-size: var(--sf-icon--font-size);
    height: var(--sf-icon--height);
    width: var(--sf-icon--width);
  }
  /* utility-hint: flex/1 (.flex-1) display/flex (.flex) flex-direction/column (.flex-col) flex-wrap/nowrap (.flex-nowrap) gap/var(--sf-toast-container--gap) justify-content/flex-start (.justify-start) align-items/flex-start (.items-start) */
  .sf-toast .sf-toast-container {
    --sf-toast-container--background-color: transparent;
    --sf-toast-container--gap: var(--sf-space-1\/2);
    background-color: var(--sf-toast-container--background-color);
    gap: var(--sf-toast-container--gap);
    min-width: var(--sf-0);
    min-inline-size: var(--sf-0);
  }
  /* utility-hint: display/flex (.flex) flex-direction/row (.flex-row) flex-wrap/nowrap (.flex-nowrap) gap/var(--sf-b1) justify-content/flex-start (.justify-start) align-items/center (.items-center) */
  .sf-toast .sf-toast-bottom {
    --sf-toast-bottom--background-color: transparent;
    background-color: var(--sf-toast-bottom--background-color);
    flex-wrap: wrap;
    gap: var(--sf-b1);
  }
  /* utility-hint: display/flex (.flex) flex-direction/column (.flex-col) flex-wrap/nowrap (.flex-nowrap) gap/var(--sf-toast-wrap--gap) justify-content/flex-start (.justify-start) align-items/flex-start (.items-start) */
  .sf-toast .sf-toast-wrap {
    --sf-toast-wrap--background-color: transparent;
    --sf-toast-wrap--gap: var(--sf-space-1\/4);
    background-color: var(--sf-toast-wrap--background-color);
    gap: var(--sf-toast-wrap--gap);
  }
  .sf-toast .sf-toast-supporting-text {
    --sf-toast-supporting-text--font-family: var(--sf-text--family);
    --sf-toast-supporting-text--font-size: var(--sf-text-size-1);
    --sf-toast-supporting-text--font-weight: var(--sf-font-weight-regular);
    --sf-toast-supporting-text--line-height: var(--sf-text-height-1);
    color: var(--sf-toast-supporting-text--color);
    font-family: var(--sf-toast-supporting-text--font-family);
    font-size: var(--sf-toast-supporting-text--font-size);
    font-weight: var(--sf-toast-supporting-text--font-weight);
    line-height: var(--sf-toast-supporting-text--line-height);
    word-wrap: anywhere;
  }
  .sf-toast .sf-toast-text {
    --sf-toast-text--font-family: var(--sf-text--family);
    --sf-toast-text--font-size: var(--sf-text-size-1);
    --sf-toast-text--font-weight: var(--sf-font-weight-medium);
    --sf-toast-text--line-height: var(--sf-text-height-1);
    color: var(--sf-toast-text--color);
    font-family: var(--sf-toast-text--font-family);
    font-size: var(--sf-toast-text--font-size);
    font-weight: var(--sf-toast-text--font-weight);
    line-height: var(--sf-toast-text--line-height);
    word-wrap: anywhere;
  }
  .sf-toast.sf-toast--neutral .sf-icon {
    --sf-icon--color: var(--sf-on-surface);
  }
  .sf-toast.sf-toast--default .sf-icon {
    --sf-icon--color: var(--sf-on-surface);
  }
  .sf-toast.sf-toast--neutral .sf-toast-supporting-text {
    --sf-toast-supporting-text--color: var(--sf-toast-color, var(--sf-on-surface));
  }
  .sf-toast.sf-toast--default .sf-toast-supporting-text {
    --sf-toast-supporting-text--color: var(--sf-toast-color, var(--sf-on-surface));
  }
  .sf-toast.sf-toast--neutral .sf-toast-text {
    --sf-toast-text--color: var(--sf-toast-color, var(--sf-on-surface));
  }
  .sf-toast.sf-toast--default .sf-toast-text {
    --sf-toast-text--color: var(--sf-toast-color, var(--sf-on-surface));
  }
  .sf-toast.sf-toast--info .sf-icon {
    --sf-icon--color: var(--sf-on-primary-container-graphic);
  }
  .sf-toast.sf-toast--primary .sf-icon {
    --sf-icon--color: var(--sf-on-primary-container-graphic);
  }
  .sf-toast.sf-toast--info > .sf-icon-button.sf-icon-button--link > .sf-close > .sf-close-icon {
    --sf-close-icon--background-color: var(--sf-on-primary-container);
  }
  .sf-toast.sf-toast--primary > .sf-icon-button.sf-icon-button--link > .sf-close > .sf-close-icon {
    --sf-close-icon--background-color: var(--sf-on-primary-container);
  }
  .sf-toast.sf-toast--info .sf-toast-supporting-text {
    --sf-toast-supporting-text--color: var(--sf-toast-color, var(--sf-on-primary-container));
  }
  .sf-toast.sf-toast--primary .sf-toast-supporting-text {
    --sf-toast-supporting-text--color: var(--sf-toast-color, var(--sf-on-primary-container));
  }
  .sf-toast.sf-toast--info .sf-toast-text {
    --sf-toast-text--color: var(--sf-toast-color, var(--sf-on-primary-container));
  }
  .sf-toast.sf-toast--primary .sf-toast-text {
    --sf-toast-text--color: var(--sf-toast-color, var(--sf-on-primary-container));
  }
  .sf-toast.sf-toast--error .sf-icon {
    --sf-icon--color: var(--sf-on-error-container-graphic);
  }
  .sf-toast.sf-toast--error > .sf-icon-button.sf-icon-button--link > .sf-close > .sf-close-icon {
    --sf-close-icon--background-color: var(--sf-on-error-container);
  }
  .sf-toast.sf-toast--error .sf-toast-supporting-text {
    --sf-toast-supporting-text--color: var(--sf-toast-color, var(--sf-on-error-container));
  }
  .sf-toast.sf-toast--error .sf-toast-text {
    --sf-toast-text--color: var(--sf-toast-color, var(--sf-on-error-container));
  }
  .sf-toast.sf-toast--warning .sf-icon {
    --sf-icon--color: var(--sf-on-warning-container-graphic);
  }
  .sf-toast.sf-toast--warning > .sf-icon-button.sf-icon-button--link > .sf-close > .sf-close-icon {
    --sf-close-icon--background-color: var(--sf-on-warning-container);
  }
  .sf-toast.sf-toast--warning .sf-toast-supporting-text {
    --sf-toast-supporting-text--color: var(--sf-toast-color, var(--sf-on-warning-container));
  }
  .sf-toast.sf-toast--warning .sf-toast-text {
    --sf-toast-text--color: var(--sf-toast-color, var(--sf-on-warning-container));
  }
  .sf-toast.sf-toast--success .sf-icon {
    --sf-icon--color: var(--sf-on-success-container-graphic);
  }
  .sf-toast.sf-toast--success > .sf-icon-button.sf-icon-button--link > .sf-close > .sf-close-icon {
    --sf-close-icon--background-color: var(--sf-on-success-container);
  }
  .sf-toast.sf-toast--success .sf-toast-supporting-text {
    --sf-toast-supporting-text--color: var(--sf-toast-color, var(--sf-on-success-container));
  }
  .sf-toast.sf-toast--success .sf-toast-text {
    --sf-toast-text--color: var(--sf-toast-color, var(--sf-on-success-container));
  }
  /* utility-hint: flex/1 (.flex-1) */
  .sf-toast--neutral {
    --sf-toast--background-color: var(--sf-toast-background-color, var(--sf-surface-container));
    --sf-on-surface-variant: var(--sf-on-surface-container--variant);
    --sf-toast--content-color: var(--sf-toast-color, var(--sf-on-surface));
    --sf-close-icon--background-color: var(--sf-on-surface);
  }
  .sf-toast--default {
    --sf-toast--background-color: var(--sf-toast-background-color, var(--sf-surface-container));
    --sf-on-surface-variant: var(--sf-on-surface-container--variant);
    --sf-toast--content-color: var(--sf-toast-color, var(--sf-on-surface));
    --sf-close-icon--background-color: var(--sf-on-surface);
  }
  /* utility-hint: flex/1 (.flex-1) */
  .sf-toast--info {
    --sf-toast--background-color: var(--sf-toast-background-color, var(--sf-primary-container));
    --sf-toast--content-color: var(--sf-toast-color, var(--sf-on-primary-container));
    --sf-close-icon--background-color: var(--sf-on-primary-container);
  }
  .sf-toast--primary {
    --sf-toast--background-color: var(--sf-toast-background-color, var(--sf-primary-container));
    --sf-toast--content-color: var(--sf-toast-color, var(--sf-on-primary-container));
    --sf-close-icon--background-color: var(--sf-on-primary-container);
  }
  /* utility-hint: flex/1 (.flex-1) */
  .sf-toast--error {
    --sf-toast--background-color: var(--sf-toast-background-color, var(--sf-error-container));
    --sf-toast--content-color: var(--sf-toast-color, var(--sf-on-error-container));
    --sf-close-icon--background-color: var(--sf-on-error-container);
  }
  .sf-toast--warning {
    --sf-toast--background-color: var(--sf-toast-background-color, var(--sf-warning-container));
    --sf-toast--content-color: var(--sf-toast-color, var(--sf-on-warning-container));
    --sf-close-icon--background-color: var(--sf-on-warning-container);
  }
  .sf-toast--success {
    --sf-toast--background-color: var(--sf-toast-background-color, var(--sf-success-container));
    --sf-toast--content-color: var(--sf-toast-color, var(--sf-on-success-container));
    --sf-close-icon--background-color: var(--sf-on-success-container);
  }
  @media (prefers-reduced-motion: reduce) {
    .sf-toast {
      transition: none;
    }
  }
  @media (forced-colors: active) {
    .sf-toast {
      border-color: CanvasText;
    }
  }
}
/* The page's notification area (core/js/notify.js, SF.notify): one place at an
   edge of the window, in the top layer, where messages stack with a gap. The
   area itself takes no clicks; its toasts do. A popover is otherwise a small
   centred box with the browser's own border, fill and padding. */
@layer sf.components {
  .sf-notifications {
    position: fixed;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    inset: auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    overflow: visible;
    display: flex;
    flex-direction: column;
    gap: var(--sf-space-1\/2);
    width: min(var(--sf-g4), 100vw - 2 * var(--sf-space-1));
    inline-size: min(var(--sf-g4), 100vw - 2 * var(--sf-space-1));
    max-height: calc(100vh - 2 * var(--sf-space-1));
    max-block-size: calc(100vh - 2 * var(--sf-space-1));
    pointer-events: none;
    z-index: var(--sf-z-index-9);
  }
  .sf-notifications:not(:popover-open)[popover] {
    display: none;
  }
  .sf-notifications > * {
    pointer-events: auto;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-notifications[data-placement$=end]{
    right: var(--sf-space-1);
  }
  @supports not (inset-inline-end: initial){
  html:not([dir="rtl"]) .sf-notifications[data-placement$=end]{
    right: var(--sf-space-1);
    }
  }
  .sf-notifications[data-placement$=end]:where(:dir(ltr)){
    right: var(--sf-space-1);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-notifications[data-placement$=end]{
    left: var(--sf-space-1);
  }
  @supports not (inset-inline-end: initial){
  [dir="rtl"] .sf-notifications[data-placement$=end]{
    left: var(--sf-space-1);
    }
  }
  .sf-notifications[data-placement$=end]:where(:dir(rtl)){
    left: var(--sf-space-1);
  }
  .sf-notifications[data-placement$=end] {
    inset-inline-end: var(--sf-space-1);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-notifications[data-placement$=start]{
    left: var(--sf-space-1);
  }
  @supports not (inset-inline-start: initial){
  html:not([dir="rtl"]) .sf-notifications[data-placement$=start]{
    left: var(--sf-space-1);
    }
  }
  .sf-notifications[data-placement$=start]:where(:dir(ltr)){
    left: var(--sf-space-1);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-notifications[data-placement$=start]{
    right: var(--sf-space-1);
  }
  @supports not (inset-inline-start: initial){
  [dir="rtl"] .sf-notifications[data-placement$=start]{
    right: var(--sf-space-1);
    }
  }
  .sf-notifications[data-placement$=start]:where(:dir(rtl)){
    right: var(--sf-space-1);
  }
  .sf-notifications[data-placement$=start] {
    inset-inline-start: var(--sf-space-1);
  }
  .sf-notifications[data-placement^=top] {
    top: var(--sf-space-1);
    inset-block-start: var(--sf-space-1);
  }
  .sf-notifications[data-placement^=bottom] {
    bottom: var(--sf-space-1);
    inset-block-end: var(--sf-space-1);
  }
  /* The same message shown again counts up rather than stacking twice. */
  .sf-notifications .sf-toast[data-count] {
    position: relative;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-notifications .sf-toast[data-count]::before{
    left: calc(-1 * var(--sf-space-1\/4));
  }
  @supports not (inset-inline-start: initial){
  html:not([dir="rtl"]) .sf-notifications .sf-toast[data-count]::before{
    left: calc(-1 * var(--sf-space-1\/4));
    }
  }
  .sf-notifications .sf-toast[data-count]::before:where(:dir(ltr)){
    left: calc(-1 * var(--sf-space-1\/4));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-notifications .sf-toast[data-count]::before{
    right: calc(-1 * var(--sf-space-1\/4));
  }
  @supports not (inset-inline-start: initial){
  [dir="rtl"] .sf-notifications .sf-toast[data-count]::before{
    right: calc(-1 * var(--sf-space-1\/4));
    }
  }
  .sf-notifications .sf-toast[data-count]::before:where(:dir(rtl)){
    right: calc(-1 * var(--sf-space-1\/4));
  }
  .sf-notifications .sf-toast[data-count]::before {
    content: "×" attr(data-count);
    position: absolute;
    top: calc(-1 * var(--sf-space-1\/4));
    inset-block-start: calc(-1 * var(--sf-space-1\/4));
    inset-inline-start: calc(-1 * var(--sf-space-1\/4));
    padding-left: var(--sf-space-1\/4);
    padding-right: var(--sf-space-1\/4);
    padding-inline: var(--sf-space-1\/4);
    border-radius: var(--sf-radius-circle);
    background-color: var(--sf-on-surface);
    color: var(--sf-surface-0);
    font-size: var(--sf-text-size-1\/3);
    line-height: var(--sf-text-height-1\/3);
  }
}