@keyframes toastTimeout 0% left: -100% 100% left: 0% .toast-container margin: 0 padding: 0 width: 100% height: auto max-width: 400px position: fixed bottom: 0.5rem left: 50% transform: translateX(-50%) display: flex flex-direction: column gap: 0.5rem font-size: 1rem font-weight: 500 line-height: 1 text-align: center z-index: 9999 .toast margin: 0 padding: 0.5rem 1rem min-height: 2.5rem position: relative display: flex justify-content: center align-items: center transform: scaleY(0) color: $white background-color: $dark border-radius: 2px opacity: 0 transition: all 0.3s ease-in-out overflow: hidden &:hover cursor: pointer .toast-show opacity: 1 transform: scaleY(1) .toast-hide opacity: 0 tansform: translateY(5rem) .toast-time margin: 0 padding: 0 width: 100% height: 2px position: absolute bottom: 0 left: 0% background-color: $primary animation: toastTimeout 5s linear forwards @media (max-width: 669px) .toast-container padding: 0.5rem width: 100% max-width: 100% bottom: 0 left: 0 transform: none