Toast de error con cuenta atrás

.card-045 {
  position: relative;
  width: 340px;
  background: #1c1917;
  border-radius: 12px;
  overflow: hidden;
  font-family: system-ui,sans-serif;
  color: #fafaf9;
  box-shadow: 0 12px 32px rgba(0,0,0,.35)
}
.card-045__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px
}
.card-045__dot {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 0 4px rgba(239,68,68,.25)
}
.card-045__text {
  flex: 1;
  display: flex;
  flex-direction: column
}
.card-045 b {
  font-size: 14px
}
.card-045__text span {
  font-size: 12px;
  color: #a8a29e
}
.card-045 a {
  font-size: 13px;
  font-weight: 600;
  color: #fca5a5;
  text-decoration: none
}
.card-045 a:hover {
  text-decoration: underline
}
.card-045__bar {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  background: #ef4444;
  transform-origin: left;
  animation: card-045-drain 5s linear forwards
}
.card-045:hover .card-045__bar {
  animation-play-state: paused
}
@keyframes card-045-drain {
  to {
    transform: scaleX(0)
  }
}
.card-045 :is(a,button,input,select,textarea):focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .card-045, .card-045 * { animation: none; transition: none; }
}

<div class="card-045" role="alert">
  <div class="card-045__row">
    <span class="card-045__dot"></span>
    <div class="card-045__text"><b>Upload failed</b><span>The file is larger than 25 MB.</span></div>
    <a href="#">Retry</a>
  </div>
  <i class="card-045__bar"></i>
</div>