@guruhotel/aura-ui/esm/toast/toast.styles.js

⚛️ React UI library by GuruHotel

import{styled as t,keyframes as o}from"../theme";import*as e from"@radix-ui/react-toast";import{VIEWPORT_PADDING as a}from"./toast.constants";const r=o({"0%":{opacity:1},"100%":{opacity:0}}),i=o({from:{transform:`translateX(calc(100% + ${a}px))`},to:{transform:"translateX(0)"}}),n=o({from:{transform:"translateX(var(--radix-toast-swipe-end-x))"},to:{transform:`translateX(calc(100% + ${a}px))`}});export const StyledViewport=t(e.Viewport,{position:"fixed",display:"flex",bottom:0,right:0,flexDirection:"column",padding:a,gap:10,width:390,maxWidth:"100vw",margin:0,listStyle:"none",zIndex:2147483647});export const StyledToast=t(e.Root,{backgroundColor:"white",borderRadius:"$md",boxShadow:"$md",padding:"$4",display:"grid",gridTemplateAreas:'"title action" "description action"',gridTemplateColumns:"auto max-content",columnGap:"$4",alignItems:"center","@media (prefers-reduced-motion: no-preference)":{'&[data-state="open"]':{animation:`${i} 150ms cubic-bezier(0.16, 1, 0.3, 1)`},'&[data-state="closed"]':{animation:`${r} 100ms ease-in forwards`},'&[data-swipe="move"]':{transform:"translateX(var(--radix-toast-swipe-move-x))"},'&[data-swipe="cancel"]':{transform:"translateX(0)",transition:"transform 200ms ease-out"},'&[data-swipe="end"]':{animation:`${n} 100ms ease-out forwards`}}});export const StyledTitle=t(e.Title,{gridArea:"title",marginBottom:5,fontWeight:500,color:"$gray12",fontSize:15});export const StyledDescription=t(e.Description,{gridArea:"description",margin:0,color:"$gray11",fontSize:13,lineHeight:1.3});export const StyledAction=t(e.Action,{gridArea:"action"});export const StyledCloseButton=t(e.Close,{all:"unset",fontFamily:"inherit",rounded:"$full",p:"$1",display:"inline-flex",alignItems:"center",justifyContent:"center",color:"$gray11",boxShadow:"0 0 0 1px $colors$gray7","&:hover":{backgroundColor:"$gray4"},"&:focus":{boxShadow:"0 0 0 2px $colors$gray7"}});