@react-spectrum/s2/dist/Toast_module.css

Spectrum 2 UI components in React

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

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

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

:is(html.wo0zeG_toast-add, html.wo0zeG_toast-remove, html.wo0zeG_toast-expand, html.wo0zeG_toast-collapse, html.wo0zeG_toast-clear, html:active-view-transition-type(wo0zeG_toast-add, wo0zeG_toast-remove, wo0zeG_toast-expand, wo0zeG_toast-collapse, wo0zeG_toast-clear))::view-transition-group(wo0zeG_toast-background) {
  z-index: -1;
}

:is(html.wo0zeG_toast-add, html.wo0zeG_toast-remove, html.wo0zeG_toast-expand, html.wo0zeG_toast-collapse, html.wo0zeG_toast-clear, html:active-view-transition-type(wo0zeG_toast-add, wo0zeG_toast-remove, wo0zeG_toast-expand, wo0zeG_toast-collapse, wo0zeG_toast-clear))::view-transition-group(*) {
  animation-duration: .4s;
}

@media (prefers-reduced-motion: no-preference) {
  :is(html.wo0zeG_toast-add, html.wo0zeG_toast-remove, html:active-view-transition-type(wo0zeG_toast-add, wo0zeG_toast-remove))::view-transition-new(.wo0zeG_toast):only-child {
    animation-name: wo0zeG_slide-in;
  }

  :is(html.wo0zeG_toast-add, html.wo0zeG_toast-remove, html:active-view-transition-type(wo0zeG_toast-add, wo0zeG_toast-remove))::view-transition-old(.wo0zeG_toast):only-child {
    animation-name: wo0zeG_slide-out;
  }
}

:is(html.wo0zeG_toast-add, html.wo0zeG_toast-remove, html:active-view-transition-type(wo0zeG_toast-add, wo0zeG_toast-remove))::view-transition-group(.wo0zeG_toast.wo0zeG_bottom) {
  --slideX: 0;
  --slideY: calc(100% + 12px);
}

:is(html.wo0zeG_toast-add, html.wo0zeG_toast-remove, html:active-view-transition-type(wo0zeG_toast-add, wo0zeG_toast-remove))::view-transition-group(.wo0zeG_toast.wo0zeG_top) {
  --slideX: 0;
  --slideY: calc(-100% - 12px);
}

:is(html.wo0zeG_toast-add, html.wo0zeG_toast-remove, html:active-view-transition-type(wo0zeG_toast-add, wo0zeG_toast-remove))::view-transition-group(.wo0zeG_toast.wo0zeG_start) {
  --slideX: calc(-100% - 12px);
  --slideY: 0;
}

:is(html.wo0zeG_toast-add, html.wo0zeG_toast-remove, html:active-view-transition-type(wo0zeG_toast-add, wo0zeG_toast-remove))::view-transition-group(.wo0zeG_toast.wo0zeG_end) {
  --slideX: calc(100% + 12px);
  --slideY: 0;
}

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

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

@media (prefers-reduced-motion: no-preference) {
  :is(html.wo0zeG_toast-expand, html.wo0zeG_toast-collapse, html:active-view-transition-type(wo0zeG_toast-expand, wo0zeG_toast-collapse)) .wo0zeG_toast-content {
    view-transition-name: wo0zeG_toast-content;
  }

  :is(html.wo0zeG_toast-expand, html.wo0zeG_toast-collapse, html:active-view-transition-type(wo0zeG_toast-expand, wo0zeG_toast-collapse)) .wo0zeG_toast-expand {
    view-transition-name: wo0zeG_toast-expand;
  }

  :is(html.wo0zeG_toast-expand, html.wo0zeG_toast-collapse, html:active-view-transition-type(wo0zeG_toast-expand, wo0zeG_toast-collapse)) .wo0zeG_toast-action {
    view-transition-name: wo0zeG_toast-action;
  }

  :is(html.wo0zeG_toast-expand, html.wo0zeG_toast-collapse, html:active-view-transition-type(wo0zeG_toast-expand, wo0zeG_toast-collapse)) .wo0zeG_toast-close {
    view-transition-name: wo0zeG_toast-close;
  }

  :is(html.wo0zeG_toast-expand, html.wo0zeG_toast-collapse, html:active-view-transition-type(wo0zeG_toast-expand, wo0zeG_toast-collapse)) .wo0zeG_toast-controls {
    display: flex;
  }

  :is(html.wo0zeG_toast-expand, html.wo0zeG_toast-collapse, html:active-view-transition-type(wo0zeG_toast-expand, wo0zeG_toast-collapse))::view-transition-old(.wo0zeG_toast), :is(html.wo0zeG_toast-expand, html.wo0zeG_toast-collapse, html:active-view-transition-type(wo0zeG_toast-expand, wo0zeG_toast-collapse))::view-transition-new(.wo0zeG_toast) {
    width: 100%;
    height: 100%;
  }

  :is(html.wo0zeG_toast-expand, html.wo0zeG_toast-collapse, html:active-view-transition-type(wo0zeG_toast-expand, wo0zeG_toast-collapse))::view-transition-old(.wo0zeG_background-toast), :is(html.wo0zeG_toast-expand, html.wo0zeG_toast-collapse, html:active-view-transition-type(wo0zeG_toast-expand, wo0zeG_toast-collapse))::view-transition-new(.wo0zeG_background-toast) {
    object-fit: cover;
    object-position: top center;
    clip-path: inset(0 round 10px);
  }
}

@media (prefers-reduced-motion) {
  :is(html.wo0zeG_toast-expand, html.wo0zeG_toast-collapse, html:active-view-transition-type(wo0zeG_toast-expand, wo0zeG_toast-collapse)) .wo0zeG_toast {
    view-transition-name: none !important;
  }

  :is(html.wo0zeG_toast-expand, html.wo0zeG_toast-collapse, html:active-view-transition-type(wo0zeG_toast-expand, wo0zeG_toast-collapse)) .wo0zeG_toast-list-expanded {
    view-transition-name: wo0zeG_toast-list-expanded;
  }

  :is(html.wo0zeG_toast-expand, html.wo0zeG_toast-collapse, html:active-view-transition-type(wo0zeG_toast-expand, wo0zeG_toast-collapse)) .wo0zeG_toast-list-collapsed {
    view-transition-name: wo0zeG_toast-list-collapsed;
  }
}

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

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