/*
 * Overrides vendor/toastr.min.css so a toast matches the design's toast
 * card instead of the library's stock look. toastr is configured (see
 * core/toast.js) to render into #toast-container, which layout.css already
 * positions via .toast-region -- positionClass is turned off there, so this
 * file does not need to fight toastr's own placement styles.
 */

#toast-container {
  position: static;
}

#toast-container > div {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  margin: 0 0 10px;
  padding: 13px 34px 13px 13px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  box-shadow: var(--sh-toast);
  opacity: 1;
  pointer-events: auto;
  animation: oltToastIn .2s ease-out both;
}

#toast-container > div:hover {
  box-shadow: var(--sh-toast);
}

#toast-container .toast-title {
  display: block;
  font: 800 12.5px/1.2 var(--font);
  color: var(--ink);
  margin-bottom: 4px;
}

#toast-container .toast-message {
  display: block;
  font: 500 11.5px/1.45 var(--font);
  color: var(--ink-3);
}

#toast-container .toast-close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 20px;
  height: 20px;
  line-height: 18px;
  border-radius: var(--r-md);
  color: var(--muted);
  opacity: 1;
  text-shadow: none;
  transition: background var(--t-fast);
}

#toast-container .toast-close-button:hover {
  background: var(--line-2);
  color: var(--ink-2);
}

#toast-container .toast-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2.5px;
  background: var(--accent-line);
  transform-origin: left;
  animation: oltToastBar linear both;
}

/* ---------- tones ---------- */
/*
 * The card stays white; the tone lives in the icon square and the timer
 * bar, so a wall of toasts still reads as one surface. The glyph is a
 * masked data URI rather than markup injected through toastr, because
 * that would mean turning off its HTML escaping for every message.
 */
#toast-container > div::before {
  content: "";
  width: 24px;
  height: 24px;
  border-radius: var(--r-sm);
  flex: none;
  background-repeat: no-repeat;
  background-position: center;
}

#toast-container .toast-success::before {
  background-color: var(--ok);
  background-image: url("data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 16 16" fill="none"><path d="M3.2 8.4 6.4 11.6 12.8 4.4" stroke="%23ffffff" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/></svg>");
}

#toast-container .toast-success .toast-progress {
  background: var(--ok);
}

#toast-container .toast-error::before {
  background-color: var(--crit);
  background-image: url("data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 16 16" fill="none"><path d="M5.4 5.4l5.2 5.2M10.6 5.4l-5.2 5.2" stroke="%23ffffff" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/></svg>");
}

#toast-container .toast-error .toast-progress {
  background: var(--crit);
}

#toast-container .toast-warning::before {
  background-color: var(--warn);
  background-image: url("data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 16 16" fill="none"><path d="M8 3.4 14 12.6H2zM8 6.9v3M8 11.3h.01" stroke="%23ffffff" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/></svg>");
}

#toast-container .toast-warning .toast-progress {
  background: var(--warn);
}

#toast-container .toast-info::before {
  background-color: var(--info);
  background-image: url("data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 16 16" fill="none"><path d="M8 7.4v4M8 4.9h.01" stroke="%23ffffff" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/></svg>");
}

#toast-container .toast-info .toast-progress {
  background: var(--info);
}