{"version":3,"file":"toast.module.mjs","names":[],"sources":["../../../../package/common/toast/toast.module.pcss"],"sourcesContent":[".container {\n  position: fixed;\n  z-index: 9999;\n  display: flex;\n  flex-direction: column;\n  gap: 0.5em;\n  pointer-events: none;\n  padding: 1em;\n  box-sizing: border-box;\n\n  &-top-left {\n    top: 0;\n    left: 0;\n    align-items: flex-start;\n  }\n\n  &-top-center {\n    top: 0;\n    left: 50%;\n    transform: translateX(-50%);\n    align-items: center;\n  }\n\n  &-top-right {\n    top: 0;\n    right: 0;\n    align-items: flex-end;\n  }\n\n  &-bottom-left {\n    bottom: 0;\n    left: 0;\n    align-items: flex-start;\n    flex-direction: column-reverse;\n  }\n\n  &-bottom-center {\n    bottom: 0;\n    left: 50%;\n    transform: translateX(-50%);\n    align-items: center;\n    flex-direction: column-reverse;\n  }\n\n  &-bottom-right {\n    bottom: 0;\n    right: 0;\n    align-items: flex-end;\n    flex-direction: column-reverse;\n  }\n}\n\n.toast {\n  pointer-events: all;\n  display: flex;\n  align-items: flex-start;\n  gap: 0.625em;\n  padding: 0.75em 0.875em;\n  border-radius: var(--default-border-radius);\n  border-left: 0.1875em solid var(--tone);\n  background: var(--background-modal);\n\n  /* Must follow the shorthand above, which resets it. The gradient reaches over border-left only\n     because its origin is the border box; the border is the fallback. */\n  background-image: var(--tone-gradient);\n  background-repeat: no-repeat;\n  background-size: 0.1875em 100%;\n  background-origin: border-box;\n  color: var(--text-color);\n  font-family: var(--default-font);\n  box-shadow: var(--card-shadow);\n\n  /* em, so the line length stays a measure rather than a pixel count. The screen\n     wins over both: below about 270px the minimum alone was wider than the space\n     the container had, and a toast pinned to one edge hung off the other. The 2em\n     is the container's own padding, which is in the same em as these. */\n  min-width: min(15em, calc(100vw - 2em));\n  max-width: min(23.75em, calc(100vw - 2em));\n  box-sizing: border-box;\n  position: relative;\n\n  /* Tells the browser vertical panning is native (so the page can still scroll behind the toast)\n     while horizontal movement is left for useSwipeDismiss's own pointer handling to decide. */\n  touch-action: pan-y;\n  overflow: hidden;\n  animation: toastSlideDown 0.25s ease forwards;\n\n  &-bottom {\n    animation: toastSlideUp 0.25s ease forwards;\n  }\n\n  &-dismissing {\n    animation: toastFadeOut 0.2s ease forwards;\n  }\n\n  &-paused .toastProgressBar {\n    animation-play-state: paused;\n  }\n}\n\n.toastIcon {\n  flex-shrink: 0;\n  color: var(--tone);\n  margin-top: 0.0667em; /* 1px against this element's own 0.9375em */\n  font-size: 0.9375em;\n}\n\n.toastContent {\n  flex: 1;\n  font-size: 0.875em;\n  line-height: 1.4;\n}\n\n/* Two classes, to outrank Button's font-size and ActionIcon's box whichever stylesheet loads\n   first. */\n.toast .toastCloseButton {\n  flex-shrink: 0;\n  width: 1em;\n  height: 1em;\n  font-size: 0.8125em;\n  opacity: 0.6;\n  transition: opacity 0.15s;\n  margin-top: 0.0769em; /* 1px against this element's own 0.8125em */\n\n  &:hover {\n    opacity: 1;\n  }\n}\n\n.toastProgressBar {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  height: 0.1875em;\n  width: 100%;\n  background: currentcolor;\n  opacity: 0.35;\n  transform-origin: left;\n  animation: toastShrink var(--toast-duration) linear forwards;\n}\n\n@keyframes toastSlideDown {\n  from {\n    opacity: 0;\n    transform: translateY(-0.75em);\n  }\n\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes toastSlideUp {\n  from {\n    opacity: 0;\n    transform: translateY(0.75em);\n  }\n\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes toastFadeOut {\n  from {\n    opacity: 1;\n    transform: scale(1);\n  }\n\n  to {\n    opacity: 0;\n    transform: scale(0.92);\n  }\n}\n\n@keyframes toastShrink {\n  from {\n    transform: scaleX(1);\n  }\n\n  to {\n    transform: scaleX(0);\n  }\n}\n\n/* The entrance and exit slide go. `toastShrink` stays: it is the remaining-time indicator, and a\n   progress bar frozen at full width would tell the user the opposite of what is true. Removal is\n   driven by a timer in toastProvider, not by these animations, so dropping them cannot strand a\n   toast on screen. */\n@media (prefers-reduced-motion: reduce) {\n  .toast,\n  .toast-bottom,\n  .toast-dismissing {\n    animation: none;\n  }\n}\n"],"mappings":""}