/* kit v1.0.0, copied from metaproject/ui/kit */
/* toast.css: a pill above the home indicator (toast.js). */

.kit-toast {
  /* [popover] top-layer reset, like .kit-pop. */
  position: fixed; inset: auto; margin: 0; border: 0; z-index: var(--kit-z-toast);
  left: 50%; bottom: calc(var(--kit-toast-offset, 16px) + env(safe-area-inset-bottom, 0px));
  translate: -50% 12px; opacity: 0; pointer-events: none;
  display: flex; align-items: center; gap: 12px;
  width: max-content; max-width: calc(100vw - 32px);
  padding: 10px 16px; border-radius: 12px;
  background: var(--kit-toast-bg); color: var(--kit-toast-ink);
  font: inherit; font-size: 14px; font-weight: 600;
  box-shadow: var(--kit-shadow);
  transition: opacity var(--kit-dur) ease, translate var(--kit-dur) var(--kit-ease);
}
.kit-toast.is-shown { opacity: 1; translate: -50% 0; pointer-events: auto; }
.kit-toast:empty { display: none; }
.kit-toast__text { min-width: 0; }
.kit-toast__action {
  flex: none; min-height: 32px; padding: 0 4px; margin: -6px -4px -6px 0;
  border: 0; background: none; color: var(--kit-toast-action);
  font: inherit; font-weight: 800; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; /* an action, not only a color */
}
.kit-toast.is-error { background: var(--kit-danger); color: var(--kit-on-danger); }
.kit-toast.is-error .kit-toast__action { color: var(--kit-on-danger); }