CSS Dismissible Toast Notification

<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<div class="toast-wrapper">
  <input type="checkbox" id="close-toast" />
  <div class="t-box">
    <span class="t-check">✓</span>
    <div class="t-msg">
      <strong>done successfully :)</strong>
      <p>This is the description section</p>
    </div>
    <label for="close-toast" class="t-close">✕</label>
  </div>
</div>

/*
 * Author: @codepeek
 * License: MIT
 * Tags: #buttons #css #interface #opensource #codepeek
 */

.toast-wrapper input { display: none; }
.t-box { display: flex; align-items: center; gap: 12px; background: #18181b; border: 1px solid #27272a; padding: 10px 14px; border-radius: 10px; color: #f4f4f5; font-family: system-ui, sans-serif; box-shadow: 0 10px 25px rgba(0,0,0,0.4); transition: all 0.3s ease; transform: scale(1); opacity: 1; }
.t-check { color: #22c55e; font-size: 14px; font-weight: 900; background: rgba(34,197,94,0.1); width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.t-msg strong { font-size: 12px; display: block; }
.t-msg p { font-size: 10px; color: #a1a1aa; margin: 0; }
.t-close { color: #71717a; font-size: 12px; cursor: pointer; padding: 2px 6px; border-radius: 4px; transition: color 0.2s, background 0.2s; }
.t-close:hover { color: #ffffff; background: #27272a; }
#close-toast:checked + .t-box { transform: scale(0.8) translateY(-10px); opacity: 0; pointer-events: none; }