user-notification{position:fixed;bottom:32px;left:50%;transform:translateX(-50%) scale(0.87);opacity:0;transform-origin:center bottom;padding:0 16px;border-radius:4px;min-width:340px;max-width:calc(100vw - 64px);box-shadow:0 1px 3px rgba(0,0,0,0.15),0 2px 6px rgba(0,0,0,0.15);animation:popNotification 4000ms cubic-bezier(0, 0, 0.2, 1);background-color:#333;color:rgba(255,255,255,0.87);font-size:14px;line-height:48px;height:48px;z-index:9999}user-notification.is-infinite{animation:popInNotification 150ms cubic-bezier(0, 0, 0.2, 1) forwards}user-notification button{display:inline-block;height:36px;line-height:34px;margin:0;padding:0 16px;border:none;outline:none;box-shadow:none;border-radius:2px;position:absolute;font-size:14px;text-transform:uppercase;user-select:none;top:6px;right:6px;transition:all 150ms cubic-bezier(0.4, 0, 0.2, 1)}button:hover{background-color:#7567d0}button:active{background-color:#604fc9;box-shadow:0 1px 3px rgba(0,0,0,0.15)}p{margin:0;padding:0}@keyframes popInNotification{from{transform:translateX(-50%) scale(0.87);opacity:0}to{transform:translateX(-50%) scale(1);opacity:1}}@keyframes popNotification{0%{transform:translateX(-50%) scale(0.87);opacity:0}3.75%,96.25%{transform:translateX(-50%) scale(1);opacity:1}100%{transform:translateX(-50%) scale(1);animation-timing-function:cubic-bezier(0.4, 0, 1, 1);opacity:0}}
