{"name":"toast-gooey.css","type":"registry:ui","files":[{"path":"toast-gooey.css","type":"registry:ui","content":"/* -------------------------------- Variables ------------------------------- */\n\n:root {\n\t--gooey-spring-easing: linear(\n\t\t0,\n\t\t0.002 0.6%,\n\t\t0.007 1.2%,\n\t\t0.015 1.8%,\n\t\t0.026 2.4%,\n\t\t0.041 3.1%,\n\t\t0.06 3.8%,\n\t\t0.108 5.3%,\n\t\t0.157 6.6%,\n\t\t0.214 8%,\n\t\t0.467 13.7%,\n\t\t0.577 16.3%,\n\t\t0.631 17.7%,\n\t\t0.682 19.1%,\n\t\t0.73 20.5%,\n\t\t0.771 21.8%,\n\t\t0.808 23.1%,\n\t\t0.844 24.5%,\n\t\t0.874 25.8%,\n\t\t0.903 27.2%,\n\t\t0.928 28.6%,\n\t\t0.952 30.1%,\n\t\t0.972 31.6%,\n\t\t0.988 33.1%,\n\t\t1.01 35.7%,\n\t\t1.025 38.5%,\n\t\t1.034 41.6%,\n\t\t1.038 45%,\n\t\t1.035 50.1%,\n\t\t1.012 64.2%,\n\t\t1.003 73%,\n\t\t0.999 83.7%,\n\t\t1\n\t);\n\n\t--gooey-duration: 600ms;\n\t--gooey-height: 40px;\n\t--gooey-width: 350px;\n\n\t/* Light mode colors - dark toast on light background */\n\t--gooey-bg: oklch(0.2 0.01 264);\n\t--gooey-text: oklch(0.98 0.01 264);\n\t--gooey-description: oklch(0.85 0.01 264);\n\n\t--gooey-state-success: oklch(0.723 0.219 142.136);\n\t--gooey-state-loading: oklch(0.556 0 0);\n\t--gooey-state-error: oklch(0.637 0.237 25.331);\n\t--gooey-state-warning: oklch(0.795 0.184 86.047);\n\t--gooey-state-info: oklch(0.685 0.169 237.323);\n\t--gooey-state-action: oklch(0.623 0.214 259.815);\n}\n\n/* Dark mode colors - light toast on dark background */\n.dark {\n\t--gooey-bg: oklch(0.98 0.01 264);\n\t--gooey-text: oklch(0.2 0.01 264);\n\t--gooey-description: oklch(0.35 0.01 264);\n}\n\n@media (prefers-color-scheme: dark) {\n\t:root:not(.light) {\n\t\t--gooey-bg: oklch(0.98 0.01 264);\n\t\t--gooey-text: oklch(0.2 0.01 264);\n\t\t--gooey-description: oklch(0.35 0.01 264);\n\t}\n}\n\n/* ---------------------------------- Toast --------------------------------- */\n\n[data-gooey-toast] {\n\tposition: relative;\n\tcursor: pointer;\n\tpointer-events: auto;\n\ttouch-action: none;\n\tborder: 0;\n\tbackground: transparent;\n\tpadding: 0;\n\twidth: var(--gooey-width);\n\theight: var(--_h, var(--gooey-height));\n\topacity: 0;\n\ttransform: translateZ(0) scale(0.95);\n\ttransform-origin: center;\n\tcontain: layout style;\n\toverflow: visible;\n}\n\n[data-gooey-toast][data-state=\"loading\"] {\n\tcursor: default;\n}\n\n[data-gooey-toast][data-ready=\"true\"] {\n\topacity: 1;\n\ttransform: translateZ(0) scale(1);\n\ttransition:\n\t\ttransform calc(var(--gooey-duration) * 0.66) var(--gooey-spring-easing),\n\t\topacity calc(var(--gooey-duration) * 0.66) var(--gooey-spring-easing),\n\t\tmargin-bottom calc(var(--gooey-duration) * 0.66) var(--gooey-spring-easing),\n\t\tmargin-top calc(var(--gooey-duration) * 0.66) var(--gooey-spring-easing),\n\t\theight var(--gooey-duration) var(--gooey-spring-easing);\n}\n\n/* Entry animation direction */\n[data-gooey-viewport][data-position^=\"top\"]\n\t[data-gooey-toast]:not([data-ready=\"true\"]) {\n\ttransform: translateY(-6px) scale(0.95);\n}\n\n[data-gooey-viewport][data-position^=\"bottom\"]\n\t[data-gooey-toast]:not([data-ready=\"true\"]) {\n\ttransform: translateY(6px) scale(0.95);\n}\n\n/* Exit */\n[data-gooey-toast][data-ready=\"true\"][data-exiting=\"true\"] {\n\topacity: 0;\n\tpointer-events: none;\n}\n\n[data-gooey-viewport][data-position^=\"top\"]\n\t[data-gooey-toast][data-ready=\"true\"][data-exiting=\"true\"] {\n\ttransform: translateY(-6px) scale(0.95);\n}\n\n[data-gooey-viewport][data-position^=\"bottom\"]\n\t[data-gooey-toast][data-ready=\"true\"][data-exiting=\"true\"] {\n\ttransform: translateY(6px) scale(0.95);\n}\n\n/* ------------------------------- SVG Canvas ------------------------------- */\n\n[data-gooey-canvas] {\n\tposition: absolute;\n\tleft: 0;\n\tright: 0;\n\tpointer-events: none;\n\ttransform: translateZ(0);\n\tcontain: layout style;\n\toverflow: visible;\n}\n\n[data-gooey-canvas][data-edge=\"top\"] {\n\tbottom: 0;\n\ttransform: scaleY(-1) translateZ(0);\n}\n\n[data-gooey-canvas][data-edge=\"bottom\"] {\n\ttop: 0;\n}\n\n[data-gooey-svg] {\n\toverflow: visible;\n}\n\n/* --------------------------------- Shapes --------------------------------- */\n\n[data-gooey-pill],\n[data-gooey-body] {\n\ttransform-box: fill-box;\n\ttransform-origin: 50% 0%;\n}\n\n[data-gooey-pill] {\n\ttransform: scaleY(var(--_sy, 1));\n\twidth: var(--_pw);\n\theight: var(--_ph);\n}\n\n[data-gooey-body] {\n\ttransform: scaleY(var(--_by, 0));\n\topacity: var(--_by, 0);\n}\n\n[data-gooey-toast][data-ready=\"true\"] [data-gooey-pill] {\n\ttransition:\n\t\ttransform var(--gooey-duration) var(--gooey-spring-easing),\n\t\twidth var(--gooey-duration) var(--gooey-spring-easing),\n\t\tx var(--gooey-duration) var(--gooey-spring-easing);\n}\n\n[data-gooey-toast][data-ready=\"true\"][data-expanded=\"true\"] [data-gooey-pill] {\n\ttransition-delay: calc(var(--gooey-duration) * 0.08);\n}\n\n[data-gooey-toast][data-ready=\"true\"] [data-gooey-body] {\n\ttransition:\n\t\ttransform var(--gooey-duration) var(--gooey-spring-easing),\n\t\topacity var(--gooey-duration) var(--gooey-spring-easing);\n}\n\n/* --------------------------------- Header --------------------------------- */\n\n[data-gooey-header] {\n\tposition: absolute;\n\tz-index: 20;\n\tdisplay: flex;\n\talign-items: center;\n\tpadding: 0.5rem;\n\theight: var(--gooey-height);\n\toverflow: hidden;\n\tleft: var(--_px, 0px);\n\ttransform: var(--_ht);\n\tmax-width: var(--_pw);\n}\n\n[data-gooey-toast][data-ready=\"true\"] [data-gooey-header] {\n\ttransition:\n\t\ttransform var(--gooey-duration) var(--gooey-spring-easing),\n\t\tleft var(--gooey-duration) var(--gooey-spring-easing),\n\t\tmax-width var(--gooey-duration) var(--gooey-spring-easing);\n}\n\n[data-gooey-header][data-edge=\"top\"] {\n\tbottom: 0;\n}\n\n[data-gooey-header][data-edge=\"bottom\"] {\n\ttop: 0;\n}\n\n/* Header inner morphing */\n[data-gooey-header-stack] {\n\tposition: relative;\n\tdisplay: inline-flex;\n\talign-items: center;\n\theight: 100%;\n}\n\n[data-gooey-header-inner] {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 0.5rem;\n\twhite-space: nowrap;\n\topacity: 1;\n\tfilter: blur(0px);\n\twill-change: opacity, filter;\n}\n\n[data-gooey-header-inner][data-layer=\"current\"] {\n\tanimation: gooey-header-enter var(--gooey-duration) var(--gooey-spring-easing)\n\t\tboth;\n}\n\n[data-gooey-header-inner][data-layer=\"prev\"] {\n\tposition: absolute;\n\tleft: 0;\n\ttop: 0;\n\tpointer-events: none;\n}\n\n[data-gooey-header-inner][data-exiting=\"true\"] {\n\tanimation: gooey-header-exit 300ms ease forwards;\n}\n\n/* ---------------------------------- Badge --------------------------------- */\n\n[data-gooey-badge] {\n\tdisplay: flex;\n\theight: 24px;\n\twidth: 24px;\n\tflex-shrink: 0;\n\talign-items: center;\n\tjustify-content: center;\n\tpadding: 2px;\n\tbox-sizing: border-box;\n\tborder-radius: 9999px;\n\tcolor: var(--gooey-tone, currentColor);\n\tbackground-color: var(--gooey-tone-bg, transparent);\n}\n\n/* ---------------------------------- Title --------------------------------- */\n\n[data-gooey-title] {\n\tfont-size: 0.825rem;\n\tline-height: 1rem;\n\tfont-weight: 500;\n\ttext-transform: capitalize;\n\tcolor: var(--gooey-tone, var(--gooey-text));\n}\n\n/* ------------------------------ State Colors ------------------------------ */\n\n:is([data-gooey-badge], [data-gooey-title])[data-state] {\n\t--_c: var(--gooey-state-success);\n\t--gooey-tone: var(--_c);\n\t--gooey-tone-bg: color-mix(in oklch, var(--_c) 20%, transparent);\n}\n\n:is([data-gooey-badge], [data-gooey-title])[data-state=\"loading\"] {\n\t--_c: var(--gooey-state-loading);\n}\n\n:is([data-gooey-badge], [data-gooey-title])[data-state=\"error\"] {\n\t--_c: var(--gooey-state-error);\n}\n\n:is([data-gooey-badge], [data-gooey-title])[data-state=\"warning\"] {\n\t--_c: var(--gooey-state-warning);\n}\n\n:is([data-gooey-badge], [data-gooey-title])[data-state=\"info\"] {\n\t--_c: var(--gooey-state-info);\n}\n\n:is([data-gooey-badge], [data-gooey-title])[data-state=\"action\"] {\n\t--_c: var(--gooey-state-action);\n}\n\n/* --------------------------------- Content -------------------------------- */\n\n[data-gooey-content] {\n\tposition: absolute;\n\tleft: 0;\n\tz-index: 10;\n\twidth: 100%;\n\tpointer-events: none;\n\topacity: var(--_co, 0);\n}\n\n[data-gooey-content]:not([data-visible=\"true\"]) {\n\tcontent-visibility: hidden;\n}\n\n[data-gooey-toast][data-ready=\"true\"] [data-gooey-content] {\n\ttransition: opacity calc(var(--gooey-duration) * 0.08)\n\t\tvar(--gooey-spring-easing) calc(var(--gooey-duration) * 0.04);\n}\n\n[data-gooey-content][data-edge=\"top\"] {\n\ttop: 0;\n}\n\n[data-gooey-content][data-edge=\"bottom\"] {\n\ttop: var(--gooey-height);\n}\n\n[data-gooey-content][data-visible=\"true\"] {\n\tpointer-events: auto;\n}\n\n[data-gooey-toast][data-ready=\"true\"]\n\t[data-gooey-content][data-visible=\"true\"] {\n\ttransition: opacity var(--gooey-duration) var(--gooey-spring-easing)\n\t\tcalc(var(--gooey-duration) * 0.25);\n}\n\n[data-gooey-description] {\n\twidth: 100%;\n\ttext-align: left;\n\tpadding: 1rem;\n\tfont-size: 0.875rem;\n\tline-height: 1.25rem;\n\tcontain: layout style;\n\tcontent-visibility: auto;\n\tcolor: var(--gooey-description);\n}\n\n/* --------------------------------- Button --------------------------------- */\n\n[data-gooey-button] {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\theight: 1.75rem;\n\tpadding: 0 0.625rem;\n\tmargin-top: 0.75rem;\n\tborder-radius: 9999px;\n\tborder: 0;\n\tfont-size: 0.75rem;\n\tfont-weight: 500;\n\tcursor: pointer;\n\tcolor: var(--gooey-btn-color, currentColor);\n\tbackground-color: var(--gooey-btn-bg, transparent);\n\ttransition: background-color 150ms ease;\n}\n\n[data-gooey-button]:hover {\n\tbackground-color: var(--gooey-btn-bg-hover, transparent);\n}\n\n[data-gooey-button][data-state] {\n\t--_c: var(--gooey-state-success);\n\t--gooey-btn-color: var(--_c);\n\t--gooey-btn-bg: color-mix(in oklch, var(--_c) 15%, transparent);\n\t--gooey-btn-bg-hover: color-mix(in oklch, var(--_c) 25%, transparent);\n}\n\n[data-gooey-button][data-state=\"loading\"] {\n\t--_c: var(--gooey-state-loading);\n}\n\n[data-gooey-button][data-state=\"error\"] {\n\t--_c: var(--gooey-state-error);\n}\n\n[data-gooey-button][data-state=\"warning\"] {\n\t--_c: var(--gooey-state-warning);\n}\n\n[data-gooey-button][data-state=\"info\"] {\n\t--_c: var(--gooey-state-info);\n}\n\n[data-gooey-button][data-state=\"action\"] {\n\t--_c: var(--gooey-state-action);\n}\n\n/* -------------------------------- Animations ------------------------------ */\n\n[data-gooey-icon=\"spin\"] {\n\tanimation: gooey-spin 1s linear infinite;\n}\n\n@keyframes gooey-spin {\n\tto {\n\t\trotate: 360deg;\n\t}\n}\n\n@keyframes gooey-header-enter {\n\tfrom {\n\t\topacity: 0;\n\t\tfilter: blur(6px);\n\t}\n\tto {\n\t\topacity: 1;\n\t\tfilter: blur(0px);\n\t}\n}\n\n@keyframes gooey-header-exit {\n\tfrom {\n\t\topacity: 1;\n\t\tfilter: blur(0px);\n\t}\n\tto {\n\t\topacity: 0;\n\t\tfilter: blur(6px);\n\t}\n}\n\n/* -------------------------------- Viewports ------------------------------- */\n\n[data-gooey-viewport] {\n\tposition: fixed;\n\tz-index: 50;\n\tdisplay: flex;\n\tgap: 0.75rem;\n\tpadding: 0.75rem;\n\tpointer-events: none;\n\tmax-width: calc(100vw - 1.5rem);\n\tcontain: layout style;\n}\n\n[data-gooey-viewport][data-position^=\"top\"]\n\t[data-gooey-toast]:not([data-ready=\"true\"]) {\n\tmargin-bottom: calc(-1 * (var(--gooey-height) + 0.75rem));\n}\n\n[data-gooey-viewport][data-position^=\"bottom\"]\n\t[data-gooey-toast]:not([data-ready=\"true\"]) {\n\tmargin-top: calc(-1 * (var(--gooey-height) + 0.75rem));\n}\n\n/* Vertical edge */\n[data-gooey-viewport][data-position^=\"top\"] {\n\ttop: 0;\n\tflex-direction: column-reverse;\n}\n\n[data-gooey-viewport][data-position^=\"bottom\"] {\n\tbottom: 0;\n\tflex-direction: column;\n}\n\n/* Horizontal alignment */\n[data-gooey-viewport][data-position$=\"left\"] {\n\tleft: 0;\n\talign-items: flex-start;\n}\n\n[data-gooey-viewport][data-position$=\"right\"] {\n\tright: 0;\n\talign-items: flex-end;\n}\n\n[data-gooey-viewport][data-position$=\"center\"] {\n\tleft: 50%;\n\ttransform: translateX(-50%);\n\talign-items: center;\n}\n\n@media (prefers-reduced-motion: no-preference) {\n\t[data-gooey-toast][data-ready=\"true\"]:hover,\n\t[data-gooey-toast][data-ready=\"true\"][data-exiting=\"true\"] {\n\t\twill-change: transform, opacity, height;\n\t}\n}\n\n@media (prefers-reduced-motion: reduce) {\n\t*,\n\t*::before,\n\t*::after {\n\t\tanimation-duration: 0.01ms;\n\t\tanimation-iteration-count: 1;\n\t\ttransition-duration: 0.01ms;\n\t}\n}","target":"components/ui/toast-gooey.css"}]}