ステータスカラー切替トースト

<div class="stage09-12-04">
          <div class="toast09-12-04">
            <span class="ic09-12-04"></span>
            <span class="tx09-12-04"></span>
          </div>
        </div>

.d09-12-04{ background:#f2f3f7; }
        .d09-12-04 .stage09-12-04{ position:absolute; inset:0; overflow:hidden; }
        .d09-12-04 .toast09-12-04{
          position:absolute; right:16px; top:16px; width:210px;
          display:flex; align-items:center; gap:10px;
          background:#fff; border-radius:10px; padding:11px 13px;
          box-shadow:0 10px 24px rgba(20,30,50,.16);
          border-left:4px solid #94a3b8;
          transform:translateY(-130%); opacity:0;
          transition:transform .45s ease, opacity .35s ease, border-color .25s ease;
        }
        .d09-12-04 .toast09-12-04.show09-12-04{ transform:translateY(0); opacity:1; }
        .d09-12-04 .ic09-12-04{ flex:none; width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; color:#fff; background:#94a3b8; }
        .d09-12-04 .tx09-12-04{ font-size:11.8px; color:#2b3444; font-weight:600; }
        .d09-12-04 .toast09-12-04.t-success09-12-04{ border-color:#16a34a; }
        .d09-12-04 .toast09-12-04.t-success09-12-04 .ic09-12-04{ background:#16a34a; }
        .d09-12-04 .toast09-12-04.t-error09-12-04{ border-color:#dc2626; }
        .d09-12-04 .toast09-12-04.t-error09-12-04 .ic09-12-04{ background:#dc2626; }
        .d09-12-04 .toast09-12-04.t-warn09-12-04{ border-color:#d97706; }
        .d09-12-04 .toast09-12-04.t-warn09-12-04 .ic09-12-04{ background:#d97706; }

(function(){
        var root = document.currentScript.closest('.item').querySelector('.d09-12-04');
        var toast = root.querySelector('.toast09-12-04');
        var ic = root.querySelector('.ic09-12-04');
        var tx = root.querySelector('.tx09-12-04');
        var states = [
          {cls:'t-success09-12-04', mark:'✓', text:'保存が完了しました'},
          {cls:'t-error09-12-04', mark:'!', text:'エラーが発生しました'},
          {cls:'t-warn09-12-04', mark:'!', text:'残り容量が少なくなっています'}
        ];
        var i = 0;
        function cycle(){
          toast.classList.remove('show09-12-04','t-success09-12-04','t-error09-12-04','t-warn09-12-04');
          setTimeout(function(){
            var s = states[i % states.length]; i++;
            ic.textContent = s.mark;
            tx.textContent = s.text;
            toast.classList.add(s.cls);
            void toast.offsetWidth;
            toast.classList.add('show09-12-04');
          }, 260);
        }
        cycle();
        setInterval(cycle, 2600);
      })();