/*
 * Toast na toevoegen aan de winkelwagen (XXL Tweewielers Core, module tegel). De toast wordt door
 * tegel.js gemaakt en bestaat niet in Breakdance, daarom staat de opmaak hier. De producttegel zelf
 * is volledig in Breakdance opgemaakt (Global Block 166, Extra CSS per element).
 * Zie docs/producttegel.md.
 */

.xxlt-toasts {
  position: fixed; right: 24px; bottom: 24px; z-index: 9999;
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
  width: min(400px, calc(100vw - 32px)); pointer-events: none;
}
.xxlt-toast {
  position: relative; overflow: hidden; width: 100%; pointer-events: auto;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; align-items: start;
  padding: 16px 16px 19px; background: #111; color: #fff; font-size: 15px; line-height: 1.4;
  box-shadow: 0 10px 30px rgba(17, 17, 17, 0.25);
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.xxlt-toast.is-open { opacity: 1; transform: translateY(0); }
.xxlt-toast.is-closing { opacity: 0; transform: translateY(16px); }
.xxlt-toast__text { margin: 0; grid-column: 1; }
.xxlt-toast__actions { grid-column: 1; display: flex; flex-wrap: wrap; gap: 16px; }
.xxlt-toast__actions a, .xxlt-toast__undo {
  padding: 0; border: 0; background: none; color: #fff; font: inherit; font-weight: 700;
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.xxlt-toast__actions a:hover, .xxlt-toast__undo:hover { color: #fff; }
.xxlt-toast__close {
  grid-column: 2; grid-row: 1 / span 2; display: grid; place-items: center;
  width: 28px; height: 28px; padding: 0; border: 0; background: none; color: #fff; cursor: pointer;
}
.xxlt-toast__close svg { width: 18px; height: 18px; }
.xxlt-toast__bar {
  position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: #D7141A;
  transform-origin: left; transform: scaleX(0); animation: xxlt-toast-bar linear forwards;
}
.xxlt-toast a:focus-visible, .xxlt-toast button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@keyframes xxlt-toast-bar { to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
  .xxlt-toast, .xxlt-toast.is-open, .xxlt-toast.is-closing { transform: none; }
}