/* ==========================================================================
   raavi-toast.css — the one look for every toast in the product.

   window.TAlert renders through toastr, and toastr ships its own 2012-era
   styling: a saturated #51a351 green, 3px corners, and — because it sets no
   font-family at all — whatever the document's default face is. The Materio
   template papers over this with `.light-style #toast-container` rules, which
   only apply on pages that carry `.light-style` on an ancestor. The sign-in
   screen does not: it renders through layouts/raavi-auth, which deliberately
   loads no template CSS. So its toasts came out in Times New Roman on a 2012
   green, next to a page set in Peyda.

   Two looks for one component is the drift AD-30 is about, so this file is
   loaded by both layouts and styles the toast from brand tokens rather than
   leaving the panel on the template's version and the auth pages on toastr's.

   Specificity note: every rule is prefixed `html`. The template's own
   `.light-style #toast-container > div` scores (1,1,1) — `#toast-container` is
   an id — which *ties* with a bare `#toast-container > .toast`, and a tie is
   decided by source order. The panel happens to load toastr.css first today,
   so the tie resolved our way; any page that loaded it later would silently
   get the template's 8px corners back. `html` makes it (1,1,2) and takes
   order out of it. !important appears only where the vendor used it first,
   which can be answered no other way.
   ========================================================================== */

html #toast-container {
  /* Semantic accents, re-pointed per state below. */
  --t-accent: var(--blue);
}

html #toast-container > .toast {
  /* Layout */
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-sizing: border-box;
  width: auto !important;
  min-width: 300px;
  max-width: 420px;
  margin: 0 0 10px;
  padding: 13px 44px 13px 40px !important;
  overflow: hidden;

  /* Surface */
  background-color: var(--white);
  background-image: none !important;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--sh-md);
  opacity: 1;

  /* Type */
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.7;
  color: var(--body);
}

/* The gutters are asymmetric on purpose: the icon takes the leading side and
   the close button the trailing one, so neither can sit on the text. Logical
   so both follow the writing direction. */
html #toast-container > .toast {
  padding-inline: 44px 40px !important;
}

html #toast-container > .toast:hover {
  box-shadow: var(--sh-lg);
  opacity: 1;
}

/* The icon, drawn as a tinted mask rather than a coloured PNG, so the colour
   stays on the token instead of being baked into an image (FE-2). */
html #toast-container > .toast::before {
  content: '';
  position: absolute;
  inset-inline-start: 16px;
  top: 14px;
  width: 18px;
  height: 18px;
  background-color: var(--t-accent);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 18px 18px;
  mask-size: 18px 18px;
}

html #toast-container > .toast-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

html #toast-container > .toast .toast-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

/* TAlert composes «<strong>title</strong><br>text» into the message body, so
   the emphasis carries the title styling wherever it renders. */
html #toast-container > .toast .toast-message {
  word-break: normal;
  overflow-wrap: break-word;
}

html #toast-container > .toast .toast-message strong {
  display: block;
  margin-bottom: 1px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

html #toast-container > .toast .toast-message strong + br {
  display: none;
}

html #toast-container > .toast .toast-message a {
  color: var(--blue);
  text-decoration: underline;
}

/* Numbers inside a Persian sentence keep their own order — a phone number or a
   clock reordered by the bidi algorithm reads with its leading digit on the
   wrong side. */
html #toast-container > .toast bdi {
  unicode-bidi: isolate;
}

/* ------------------------------------------------------------------ close */

html #toast-container > .toast .toast-close-button {
  position: absolute;
  top: 9px;
  right: 10px !important;
  left: auto !important;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted) !important;
  font-size: 17px;
  font-weight: 400;
  line-height: 20px;
  text-align: center;
  text-shadow: none;
  opacity: 1;
  float: none;
}

html[dir='rtl'] #toast-container > .toast .toast-close-button {
  left: 10px !important;
  right: auto !important;
}

html #toast-container > .toast .toast-close-button:hover,
html #toast-container > .toast .toast-close-button:focus {
  background: var(--paper);
  color: var(--ink) !important;
  opacity: 1;
}

/* --------------------------------------------------------------- progress */

html #toast-container > .toast .toast-progress {
  position: absolute;
  inset-block-end: 0;
  inset-block-start: auto;
  inset-inline: 0;
  height: 2px;
  background-color: var(--t-accent);
  opacity: .35;
}

/* ----------------------------------------------------------------- states */

html #toast-container > .toast-success { --t-accent: var(--success); }
html #toast-container > .toast-error   { --t-accent: var(--danger); }
html #toast-container > .toast-warning { --t-accent: var(--warning); }
html #toast-container > .toast-info    { --t-accent: var(--blue); }

html #toast-container > .toast-success::before {
  -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm-1.2 14.3-4-4 1.4-1.4 2.6 2.6 5.6-5.6 1.4 1.4-7 7Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm-1.2 14.3-4-4 1.4-1.4 2.6 2.6 5.6-5.6 1.4 1.4-7 7Z'/%3E%3C/svg%3E");
}

html #toast-container > .toast-error::before {
  -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm1 15h-2v-2h2Zm0-4h-2V7h2Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm1 15h-2v-2h2Zm0-4h-2V7h2Z'/%3E%3C/svg%3E");
}

html #toast-container > .toast-warning::before {
  -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 1 21h22ZM13 18h-2v-2h2Zm0-4h-2V9h2Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 1 21h22ZM13 18h-2v-2h2Zm0-4h-2V9h2Z'/%3E%3C/svg%3E");
}

html #toast-container > .toast-info::before {
  -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm1 15h-2v-6h2Zm0-8h-2V7h2Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm1 15h-2v-6h2Zm0-8h-2V7h2Z'/%3E%3C/svg%3E");
}

/* A browser without mask-image would show a bare accent square, which looks
   like damage. Better to show no icon and reclaim the gutter. */
@supports not ((-webkit-mask-image: none) or (mask-image: none)) {
  html #toast-container > .toast::before { display: none; }
  html #toast-container > .toast { padding-inline: 16px 40px !important; }
}

/* ------------------------------------------------------------ narrow ---- */

@media (max-width: 480px) {
  html #toast-container > .toast {
    min-width: 0;
    max-width: none;
    width: calc(100vw - 24px) !important;
  }
}