styles.css 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724
  1. html[dir='ltr'],
  2. [data-sonner-toaster][dir='ltr'] {
  3. --toast-icon-margin-start: -3px;
  4. --toast-icon-margin-end: 4px;
  5. --toast-svg-margin-start: -1px;
  6. --toast-svg-margin-end: 0px;
  7. --toast-button-margin-start: auto;
  8. --toast-button-margin-end: 0;
  9. --toast-close-button-start: 0;
  10. --toast-close-button-end: unset;
  11. --toast-close-button-transform: translate(-35%, -35%);
  12. }
  13. html[dir='rtl'],
  14. [data-sonner-toaster][dir='rtl'] {
  15. --toast-icon-margin-start: 4px;
  16. --toast-icon-margin-end: -3px;
  17. --toast-svg-margin-start: 0px;
  18. --toast-svg-margin-end: -1px;
  19. --toast-button-margin-start: 0;
  20. --toast-button-margin-end: auto;
  21. --toast-close-button-start: unset;
  22. --toast-close-button-end: 0;
  23. --toast-close-button-transform: translate(35%, -35%);
  24. }
  25. [data-sonner-toaster] {
  26. position: fixed;
  27. width: var(--width);
  28. font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial,
  29. Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  30. --gray1: hsl(0, 0%, 99%);
  31. --gray2: hsl(0, 0%, 97.3%);
  32. --gray3: hsl(0, 0%, 95.1%);
  33. --gray4: hsl(0, 0%, 93%);
  34. --gray5: hsl(0, 0%, 90.9%);
  35. --gray6: hsl(0, 0%, 88.7%);
  36. --gray7: hsl(0, 0%, 85.8%);
  37. --gray8: hsl(0, 0%, 78%);
  38. --gray9: hsl(0, 0%, 56.1%);
  39. --gray10: hsl(0, 0%, 52.3%);
  40. --gray11: hsl(0, 0%, 43.5%);
  41. --gray12: hsl(0, 0%, 9%);
  42. --border-radius: 8px;
  43. box-sizing: border-box;
  44. padding: 0;
  45. margin: 0;
  46. list-style: none;
  47. outline: none;
  48. z-index: 999999999;
  49. transition: transform 400ms ease;
  50. }
  51. @media (hover: none) and (pointer: coarse) {
  52. [data-sonner-toaster][data-lifted='true'] {
  53. transform: none;
  54. }
  55. }
  56. [data-sonner-toaster][data-x-position='right'] {
  57. right: var(--offset-right);
  58. }
  59. [data-sonner-toaster][data-x-position='left'] {
  60. left: var(--offset-left);
  61. }
  62. [data-sonner-toaster][data-x-position='center'] {
  63. left: 50%;
  64. transform: translateX(-50%);
  65. }
  66. [data-sonner-toaster][data-y-position='top'] {
  67. top: var(--offset-top);
  68. }
  69. [data-sonner-toaster][data-y-position='bottom'] {
  70. bottom: var(--offset-bottom);
  71. }
  72. [data-sonner-toast] {
  73. --y: translateY(100%);
  74. --lift-amount: calc(var(--lift) * var(--gap));
  75. z-index: var(--z-index);
  76. position: absolute;
  77. opacity: 0;
  78. transform: var(--y);
  79. touch-action: none;
  80. transition: transform 400ms, opacity 400ms, height 400ms, box-shadow 200ms;
  81. box-sizing: border-box;
  82. outline: none;
  83. overflow-wrap: anywhere;
  84. }
  85. [data-sonner-toast][data-styled='true'] {
  86. padding: 16px;
  87. background: var(--normal-bg);
  88. border: 1px solid var(--normal-border);
  89. color: var(--normal-text);
  90. border-radius: var(--border-radius);
  91. box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
  92. width: var(--width);
  93. font-size: 13px;
  94. display: flex;
  95. align-items: center;
  96. gap: 6px;
  97. }
  98. [data-sonner-toast]:focus-visible {
  99. box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1), 0 0 0 2px rgba(0, 0, 0, 0.2);
  100. }
  101. [data-sonner-toast][data-y-position='top'] {
  102. top: 0;
  103. --y: translateY(-100%);
  104. --lift: 1;
  105. --lift-amount: calc(1 * var(--gap));
  106. }
  107. [data-sonner-toast][data-y-position='bottom'] {
  108. bottom: 0;
  109. --y: translateY(100%);
  110. --lift: -1;
  111. --lift-amount: calc(var(--lift) * var(--gap));
  112. }
  113. [data-sonner-toast][data-styled='true'] [data-description] {
  114. font-weight: 400;
  115. line-height: 1.4;
  116. color: #3f3f3f;
  117. }
  118. [data-rich-colors='true'][data-sonner-toast][data-styled='true'] [data-description] {
  119. color: inherit;
  120. }
  121. [data-sonner-toaster][data-sonner-theme='dark'] [data-description] {
  122. color: hsl(0, 0%, 91%);
  123. }
  124. [data-sonner-toast][data-styled='true'] [data-title] {
  125. font-weight: 500;
  126. line-height: 1.5;
  127. color: inherit;
  128. }
  129. [data-sonner-toast][data-styled='true'] [data-icon] {
  130. display: flex;
  131. height: 16px;
  132. width: 16px;
  133. position: relative;
  134. justify-content: flex-start;
  135. align-items: center;
  136. flex-shrink: 0;
  137. margin-left: var(--toast-icon-margin-start);
  138. margin-right: var(--toast-icon-margin-end);
  139. }
  140. [data-sonner-toast][data-promise='true'] [data-icon] > svg {
  141. opacity: 0;
  142. transform: scale(0.8);
  143. transform-origin: center;
  144. animation: sonner-fade-in 300ms ease forwards;
  145. }
  146. [data-sonner-toast][data-styled='true'] [data-icon] > * {
  147. flex-shrink: 0;
  148. }
  149. [data-sonner-toast][data-styled='true'] [data-icon] svg {
  150. margin-left: var(--toast-svg-margin-start);
  151. margin-right: var(--toast-svg-margin-end);
  152. }
  153. [data-sonner-toast][data-styled='true'] [data-content] {
  154. display: flex;
  155. flex-direction: column;
  156. gap: 2px;
  157. }
  158. [data-sonner-toast][data-styled='true'] [data-button] {
  159. border-radius: 4px;
  160. padding-left: 8px;
  161. padding-right: 8px;
  162. height: 24px;
  163. font-size: 12px;
  164. color: var(--normal-bg);
  165. background: var(--normal-text);
  166. margin-left: var(--toast-button-margin-start);
  167. margin-right: var(--toast-button-margin-end);
  168. border: none;
  169. font-weight: 500;
  170. cursor: pointer;
  171. outline: none;
  172. display: flex;
  173. align-items: center;
  174. flex-shrink: 0;
  175. transition: opacity 400ms, box-shadow 200ms;
  176. }
  177. [data-sonner-toast][data-styled='true'] [data-button]:focus-visible {
  178. box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.4);
  179. }
  180. [data-sonner-toast][data-styled='true'] [data-button]:first-of-type {
  181. margin-left: var(--toast-button-margin-start);
  182. margin-right: var(--toast-button-margin-end);
  183. }
  184. [data-sonner-toast][data-styled='true'] [data-cancel] {
  185. color: var(--normal-text);
  186. background: rgba(0, 0, 0, 0.08);
  187. }
  188. [data-sonner-toaster][data-sonner-theme='dark'] [data-sonner-toast][data-styled='true'] [data-cancel] {
  189. background: rgba(255, 255, 255, 0.3);
  190. }
  191. [data-sonner-toast][data-styled='true'] [data-close-button] {
  192. position: absolute;
  193. left: var(--toast-close-button-start);
  194. right: var(--toast-close-button-end);
  195. top: 0;
  196. height: 20px;
  197. width: 20px;
  198. display: flex;
  199. justify-content: center;
  200. align-items: center;
  201. padding: 0;
  202. color: var(--gray12);
  203. background: var(--normal-bg);
  204. border: 1px solid var(--gray4);
  205. transform: var(--toast-close-button-transform);
  206. border-radius: 50%;
  207. cursor: pointer;
  208. z-index: 1;
  209. transition: opacity 100ms, background 200ms, border-color 200ms;
  210. }
  211. [data-sonner-toast][data-styled='true'] [data-close-button]:focus-visible {
  212. box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1), 0 0 0 2px rgba(0, 0, 0, 0.2);
  213. }
  214. [data-sonner-toast][data-styled='true'] [data-disabled='true'] {
  215. cursor: not-allowed;
  216. }
  217. [data-sonner-toast][data-styled='true']:hover [data-close-button]:hover {
  218. background: var(--gray2);
  219. border-color: var(--gray5);
  220. }
  221. [data-sonner-toast][data-swiping='true']::before {
  222. content: '';
  223. position: absolute;
  224. left: -100%;
  225. right: -100%;
  226. height: 100%;
  227. z-index: -1;
  228. }
  229. [data-sonner-toast][data-y-position='top'][data-swiping='true']::before {
  230. bottom: 50%;
  231. transform: scaleY(3) translateY(50%);
  232. }
  233. [data-sonner-toast][data-y-position='bottom'][data-swiping='true']::before {
  234. top: 50%;
  235. transform: scaleY(3) translateY(-50%);
  236. }
  237. [data-sonner-toast][data-swiping='false'][data-removed='true']::before {
  238. content: '';
  239. position: absolute;
  240. inset: 0;
  241. transform: scaleY(2);
  242. }
  243. [data-sonner-toast][data-expanded='true']::after {
  244. content: '';
  245. position: absolute;
  246. left: 0;
  247. height: calc(var(--gap) + 1px);
  248. bottom: 100%;
  249. width: 100%;
  250. }
  251. [data-sonner-toast][data-mounted='true'] {
  252. --y: translateY(0);
  253. opacity: 1;
  254. }
  255. [data-sonner-toast][data-expanded='false'][data-front='false'] {
  256. --scale: var(--toasts-before) * 0.05 + 1;
  257. --y: translateY(calc(var(--lift-amount) * var(--toasts-before))) scale(calc(-1 * var(--scale)));
  258. height: var(--front-toast-height);
  259. }
  260. [data-sonner-toast] > * {
  261. transition: opacity 400ms;
  262. }
  263. [data-sonner-toast][data-x-position='right'] {
  264. right: 0;
  265. }
  266. [data-sonner-toast][data-x-position='left'] {
  267. left: 0;
  268. }
  269. [data-sonner-toast][data-expanded='false'][data-front='false'][data-styled='true'] > * {
  270. opacity: 0;
  271. }
  272. [data-sonner-toast][data-visible='false'] {
  273. opacity: 0;
  274. pointer-events: none;
  275. }
  276. [data-sonner-toast][data-mounted='true'][data-expanded='true'] {
  277. --y: translateY(calc(var(--lift) * var(--offset)));
  278. height: var(--initial-height);
  279. }
  280. [data-sonner-toast][data-removed='true'][data-front='true'][data-swipe-out='false'] {
  281. --y: translateY(calc(var(--lift) * -100%));
  282. opacity: 0;
  283. }
  284. [data-sonner-toast][data-removed='true'][data-front='false'][data-swipe-out='false'][data-expanded='true'] {
  285. --y: translateY(calc(var(--lift) * var(--offset) + var(--lift) * -100%));
  286. opacity: 0;
  287. }
  288. [data-sonner-toast][data-removed='true'][data-front='false'][data-swipe-out='false'][data-expanded='false'] {
  289. --y: translateY(40%);
  290. opacity: 0;
  291. transition: transform 500ms, opacity 200ms;
  292. }
  293. [data-sonner-toast][data-removed='true'][data-front='false']::before {
  294. height: calc(var(--initial-height) + 20%);
  295. }
  296. [data-sonner-toast][data-swiping='true'] {
  297. transform: var(--y) translateY(var(--swipe-amount-y, 0px)) translateX(var(--swipe-amount-x, 0px));
  298. transition: none;
  299. }
  300. [data-sonner-toast][data-swiped='true'] {
  301. user-select: none;
  302. }
  303. [data-sonner-toast][data-swipe-out='true'][data-y-position='bottom'],
  304. [data-sonner-toast][data-swipe-out='true'][data-y-position='top'] {
  305. animation-duration: 200ms;
  306. animation-timing-function: ease-out;
  307. animation-fill-mode: forwards;
  308. }
  309. [data-sonner-toast][data-swipe-out='true'][data-swipe-direction='left'] {
  310. animation-name: swipe-out-left;
  311. }
  312. [data-sonner-toast][data-swipe-out='true'][data-swipe-direction='right'] {
  313. animation-name: swipe-out-right;
  314. }
  315. [data-sonner-toast][data-swipe-out='true'][data-swipe-direction='up'] {
  316. animation-name: swipe-out-up;
  317. }
  318. [data-sonner-toast][data-swipe-out='true'][data-swipe-direction='down'] {
  319. animation-name: swipe-out-down;
  320. }
  321. @keyframes swipe-out-left {
  322. from {
  323. transform: var(--y) translateX(var(--swipe-amount-x));
  324. opacity: 1;
  325. }
  326. to {
  327. transform: var(--y) translateX(calc(var(--swipe-amount-x) - 100%));
  328. opacity: 0;
  329. }
  330. }
  331. @keyframes swipe-out-right {
  332. from {
  333. transform: var(--y) translateX(var(--swipe-amount-x));
  334. opacity: 1;
  335. }
  336. to {
  337. transform: var(--y) translateX(calc(var(--swipe-amount-x) + 100%));
  338. opacity: 0;
  339. }
  340. }
  341. @keyframes swipe-out-up {
  342. from {
  343. transform: var(--y) translateY(var(--swipe-amount-y));
  344. opacity: 1;
  345. }
  346. to {
  347. transform: var(--y) translateY(calc(var(--swipe-amount-y) - 100%));
  348. opacity: 0;
  349. }
  350. }
  351. @keyframes swipe-out-down {
  352. from {
  353. transform: var(--y) translateY(var(--swipe-amount-y));
  354. opacity: 1;
  355. }
  356. to {
  357. transform: var(--y) translateY(calc(var(--swipe-amount-y) + 100%));
  358. opacity: 0;
  359. }
  360. }
  361. @media (max-width: 600px) {
  362. [data-sonner-toaster] {
  363. position: fixed;
  364. right: var(--mobile-offset-right);
  365. left: var(--mobile-offset-left);
  366. width: 100%;
  367. }
  368. [data-sonner-toaster][dir='rtl'] {
  369. left: calc(var(--mobile-offset-left) * -1);
  370. }
  371. [data-sonner-toaster] [data-sonner-toast] {
  372. left: 0;
  373. right: 0;
  374. width: calc(100% - var(--mobile-offset-left) * 2);
  375. }
  376. [data-sonner-toaster][data-x-position='left'] {
  377. left: var(--mobile-offset-left);
  378. }
  379. [data-sonner-toaster][data-y-position='bottom'] {
  380. bottom: var(--mobile-offset-bottom);
  381. }
  382. [data-sonner-toaster][data-y-position='top'] {
  383. top: var(--mobile-offset-top);
  384. }
  385. [data-sonner-toaster][data-x-position='center'] {
  386. left: var(--mobile-offset-left);
  387. right: var(--mobile-offset-right);
  388. transform: none;
  389. }
  390. }
  391. [data-sonner-toaster][data-sonner-theme='light'] {
  392. --normal-bg: #fff;
  393. --normal-border: var(--gray4);
  394. --normal-text: var(--gray12);
  395. --success-bg: hsl(143, 85%, 96%);
  396. --success-border: hsl(145, 92%, 87%);
  397. --success-text: hsl(140, 100%, 27%);
  398. --info-bg: hsl(208, 100%, 97%);
  399. --info-border: hsl(221, 91%, 93%);
  400. --info-text: hsl(210, 92%, 45%);
  401. --warning-bg: hsl(49, 100%, 97%);
  402. --warning-border: hsl(49, 91%, 84%);
  403. --warning-text: hsl(31, 92%, 45%);
  404. --error-bg: hsl(359, 100%, 97%);
  405. --error-border: hsl(359, 100%, 94%);
  406. --error-text: hsl(360, 100%, 45%);
  407. }
  408. [data-sonner-toaster][data-sonner-theme='light'] [data-sonner-toast][data-invert='true'] {
  409. --normal-bg: #000;
  410. --normal-border: hsl(0, 0%, 20%);
  411. --normal-text: var(--gray1);
  412. }
  413. [data-sonner-toaster][data-sonner-theme='dark'] [data-sonner-toast][data-invert='true'] {
  414. --normal-bg: #fff;
  415. --normal-border: var(--gray3);
  416. --normal-text: var(--gray12);
  417. }
  418. [data-sonner-toaster][data-sonner-theme='dark'] {
  419. --normal-bg: #000;
  420. --normal-bg-hover: hsl(0, 0%, 12%);
  421. --normal-border: hsl(0, 0%, 20%);
  422. --normal-border-hover: hsl(0, 0%, 25%);
  423. --normal-text: var(--gray1);
  424. --success-bg: hsl(150, 100%, 6%);
  425. --success-border: hsl(147, 100%, 12%);
  426. --success-text: hsl(150, 86%, 65%);
  427. --info-bg: hsl(215, 100%, 6%);
  428. --info-border: hsl(223, 43%, 17%);
  429. --info-text: hsl(216, 87%, 65%);
  430. --warning-bg: hsl(64, 100%, 6%);
  431. --warning-border: hsl(60, 100%, 9%);
  432. --warning-text: hsl(46, 87%, 65%);
  433. --error-bg: hsl(358, 76%, 10%);
  434. --error-border: hsl(357, 89%, 16%);
  435. --error-text: hsl(358, 100%, 81%);
  436. }
  437. [data-sonner-toaster][data-sonner-theme='dark'] [data-sonner-toast] [data-close-button] {
  438. background: var(--normal-bg);
  439. border-color: var(--normal-border);
  440. color: var(--normal-text);
  441. }
  442. [data-sonner-toaster][data-sonner-theme='dark'] [data-sonner-toast] [data-close-button]:hover {
  443. background: var(--normal-bg-hover);
  444. border-color: var(--normal-border-hover);
  445. }
  446. [data-rich-colors='true'][data-sonner-toast][data-type='success'] {
  447. background: var(--success-bg);
  448. border-color: var(--success-border);
  449. color: var(--success-text);
  450. }
  451. [data-rich-colors='true'][data-sonner-toast][data-type='success'] [data-close-button] {
  452. background: var(--success-bg);
  453. border-color: var(--success-border);
  454. color: var(--success-text);
  455. }
  456. [data-rich-colors='true'][data-sonner-toast][data-type='info'] {
  457. background: var(--info-bg);
  458. border-color: var(--info-border);
  459. color: var(--info-text);
  460. }
  461. [data-rich-colors='true'][data-sonner-toast][data-type='info'] [data-close-button] {
  462. background: var(--info-bg);
  463. border-color: var(--info-border);
  464. color: var(--info-text);
  465. }
  466. [data-rich-colors='true'][data-sonner-toast][data-type='warning'] {
  467. background: var(--warning-bg);
  468. border-color: var(--warning-border);
  469. color: var(--warning-text);
  470. }
  471. [data-rich-colors='true'][data-sonner-toast][data-type='warning'] [data-close-button] {
  472. background: var(--warning-bg);
  473. border-color: var(--warning-border);
  474. color: var(--warning-text);
  475. }
  476. [data-rich-colors='true'][data-sonner-toast][data-type='error'] {
  477. background: var(--error-bg);
  478. border-color: var(--error-border);
  479. color: var(--error-text);
  480. }
  481. [data-rich-colors='true'][data-sonner-toast][data-type='error'] [data-close-button] {
  482. background: var(--error-bg);
  483. border-color: var(--error-border);
  484. color: var(--error-text);
  485. }
  486. .sonner-loading-wrapper {
  487. --size: 16px;
  488. height: var(--size);
  489. width: var(--size);
  490. position: absolute;
  491. inset: 0;
  492. z-index: 10;
  493. }
  494. .sonner-loading-wrapper[data-visible='false'] {
  495. transform-origin: center;
  496. animation: sonner-fade-out 0.2s ease forwards;
  497. }
  498. .sonner-spinner {
  499. position: relative;
  500. top: 50%;
  501. left: 50%;
  502. height: var(--size);
  503. width: var(--size);
  504. }
  505. .sonner-loading-bar {
  506. animation: sonner-spin 1.2s linear infinite;
  507. background: var(--gray11);
  508. border-radius: 6px;
  509. height: 8%;
  510. left: -10%;
  511. position: absolute;
  512. top: -3.9%;
  513. width: 24%;
  514. }
  515. .sonner-loading-bar:nth-child(1) {
  516. animation-delay: -1.2s;
  517. transform: rotate(0.0001deg) translate(146%);
  518. }
  519. .sonner-loading-bar:nth-child(2) {
  520. animation-delay: -1.1s;
  521. transform: rotate(30deg) translate(146%);
  522. }
  523. .sonner-loading-bar:nth-child(3) {
  524. animation-delay: -1s;
  525. transform: rotate(60deg) translate(146%);
  526. }
  527. .sonner-loading-bar:nth-child(4) {
  528. animation-delay: -0.9s;
  529. transform: rotate(90deg) translate(146%);
  530. }
  531. .sonner-loading-bar:nth-child(5) {
  532. animation-delay: -0.8s;
  533. transform: rotate(120deg) translate(146%);
  534. }
  535. .sonner-loading-bar:nth-child(6) {
  536. animation-delay: -0.7s;
  537. transform: rotate(150deg) translate(146%);
  538. }
  539. .sonner-loading-bar:nth-child(7) {
  540. animation-delay: -0.6s;
  541. transform: rotate(180deg) translate(146%);
  542. }
  543. .sonner-loading-bar:nth-child(8) {
  544. animation-delay: -0.5s;
  545. transform: rotate(210deg) translate(146%);
  546. }
  547. .sonner-loading-bar:nth-child(9) {
  548. animation-delay: -0.4s;
  549. transform: rotate(240deg) translate(146%);
  550. }
  551. .sonner-loading-bar:nth-child(10) {
  552. animation-delay: -0.3s;
  553. transform: rotate(270deg) translate(146%);
  554. }
  555. .sonner-loading-bar:nth-child(11) {
  556. animation-delay: -0.2s;
  557. transform: rotate(300deg) translate(146%);
  558. }
  559. .sonner-loading-bar:nth-child(12) {
  560. animation-delay: -0.1s;
  561. transform: rotate(330deg) translate(146%);
  562. }
  563. @keyframes sonner-fade-in {
  564. 0% {
  565. opacity: 0;
  566. transform: scale(0.8);
  567. }
  568. 100% {
  569. opacity: 1;
  570. transform: scale(1);
  571. }
  572. }
  573. @keyframes sonner-fade-out {
  574. 0% {
  575. opacity: 1;
  576. transform: scale(1);
  577. }
  578. 100% {
  579. opacity: 0;
  580. transform: scale(0.8);
  581. }
  582. }
  583. @keyframes sonner-spin {
  584. 0% {
  585. opacity: 1;
  586. }
  587. 100% {
  588. opacity: 0.15;
  589. }
  590. }
  591. @media (prefers-reduced-motion) {
  592. [data-sonner-toast],
  593. [data-sonner-toast] > *,
  594. .sonner-loading-bar {
  595. transition: none !important;
  596. animation: none !important;
  597. }
  598. }
  599. .sonner-loader {
  600. position: absolute;
  601. top: 50%;
  602. left: 50%;
  603. transform: translate(-50%, -50%);
  604. transform-origin: center;
  605. transition: opacity 200ms, transform 200ms;
  606. }
  607. .sonner-loader[data-visible='false'] {
  608. opacity: 0;
  609. transform: scale(0.8) translate(-50%, -50%);
  610. }