:is(html.To9GSa_toast-add, html.To9GSa_toast-remove, html.To9GSa_toast-expand, html.To9GSa_toast-collapse, html.To9GSa_toast-clear, html:active-view-transition-type(To9GSa_toast-add, To9GSa_toast-remove, To9GSa_toast-expand, To9GSa_toast-collapse, To9GSa_toast-clear)) {
  view-transition-name: none;

  & .To9GSa_toast-controls {
    view-transition-name: To9GSa_toast-controls;
  }

  & .To9GSa_toast-background {
    view-transition-name: To9GSa_toast-background;
  }

  &::view-transition-group(To9GSa_toast-background) {
    z-index: 0;
    will-change: transform;
  }

  &::view-transition-group(.To9GSa_toast), &::view-transition-group(To9GSa_toast-list-expanded), &::view-transition-group(To9GSa_toast-list-collapsed) {
    z-index: 1;
    will-change: transform;
  }

  &::view-transition-group(To9GSa_toast-controls) {
    z-index: 2;
    will-change: transform;
  }

  &::view-transition-group(To9GSa_toast-content), &::view-transition-group(To9GSa_toast-expand), &::view-transition-group(To9GSa_toast-action), &::view-transition-group(To9GSa_toast-close) {
    z-index: 3;
    will-change: transform;
  }

  &::view-transition-group(*) {
    animation-duration: .4s;
  }
}

:is(html.To9GSa_toast-add, html.To9GSa_toast-remove, html:active-view-transition-type(To9GSa_toast-add, To9GSa_toast-remove)) {
  &:not(.To9GSa_reduceMotion) {
    &::view-transition-new(.To9GSa_toast):only-child {
      animation-name: To9GSa_slide-in;
    }

    &::view-transition-old(.To9GSa_toast):only-child {
      animation-name: To9GSa_slide-out;
    }
  }

  &::view-transition-group(.To9GSa_toast.To9GSa_bottom) {
    --slideX: 0;
    --slideY: calc(100% + 12px);
  }

  &::view-transition-group(.To9GSa_toast.To9GSa_top) {
    --slideX: 0;
    --slideY: calc(-100% - 12px);
  }

  &::view-transition-group(.To9GSa_toast.To9GSa_start) {
    --slideX: calc(-100% - 12px);
    --slideY: 0;
  }

  &::view-transition-group(.To9GSa_toast.To9GSa_end) {
    --slideX: calc(100% + 12px);
    --slideY: 0;
  }
}

:is(html.To9GSa_toast-expand, html:active-view-transition-type(To9GSa_toast-expand)) {
  &::view-transition-group(To9GSa_toast-expand) {
    animation-duration: .3s;
  }
}

:is(html.To9GSa_toast-collapse, html:active-view-transition-type(To9GSa_toast-collapse)) {
  &::view-transition-group(To9GSa_toast-expand) {
    animation-duration: .6s;
  }
}

:is(html.To9GSa_toast-expand, html.To9GSa_toast-collapse, html:active-view-transition-type(To9GSa_toast-expand, To9GSa_toast-collapse)) {
  &:not(.To9GSa_reduceMotion) {
    & .To9GSa_toast-content {
      view-transition-name: To9GSa_toast-content;
    }

    & .To9GSa_toast-expand {
      view-transition-name: To9GSa_toast-expand;
    }

    & .To9GSa_toast-action {
      view-transition-name: To9GSa_toast-action;
    }

    & .To9GSa_toast-close {
      view-transition-name: To9GSa_toast-close;
    }

    & .To9GSa_toast-controls {
      display: flex;
    }

    &::view-transition-old(.To9GSa_toast), &::view-transition-new(.To9GSa_toast) {
      width: 100%;
      height: 100%;
    }

    &::view-transition-old(.To9GSa_background-toast), &::view-transition-new(.To9GSa_background-toast) {
      object-fit: cover;
      object-position: top center;
      clip-path: inset(0 round 10px);
    }
  }

  &.To9GSa_reduceMotion {
    & .To9GSa_toast {
      view-transition-name: none !important;
    }

    & .To9GSa_toast-list-expanded {
      view-transition-name: To9GSa_toast-list-expanded;
    }

    & .To9GSa_toast-list-collapsed {
      view-transition-name: To9GSa_toast-list-collapsed;
    }
  }
}

@keyframes To9GSa_slide-in {
  from {
    translate: var(--slideX) var(--slideY);
    opacity: 0;
  }
}

@keyframes To9GSa_slide-out {
  to {
    translate: var(--slideX) var(--slideY);
    opacity: 0;
  }
}
/*# sourceMappingURL=Toast_module.css.map */
