/* ===========================================================================
   app-notify - the admin panel's notification, everywhere.

   The admin panel gets its notification look from atlantis.css (its `.alert`
   and `.alert-*` rules, which are written specifically for bootstrap-notify's
   [data-notify] markup). The storefront, the customer dashboard and the vendor
   dashboard do not load atlantis.css, so those exact rules are ported here.

   Values below are copied verbatim from atlantis.css - not redesigned. On the
   admin panel this file therefore changes nothing; it just makes the same
   thing available to the other three surfaces.

   Everything is scoped to [data-notify="container"] so ONLY toasts are
   affected. Ordinary inline `.alert` boxes elsewhere in the app - the admin
   login error, for one - keep whatever styling they already had.
   =========================================================================== */

/* ---- the card (atlantis.css `.alert`) ---------------------------------- */

[data-notify="container"].alert {
  position: relative;
  padding: 0.95rem 1.25rem;
  background-color: #ffffff;
  border: 0;
  border-radius: 1px;
  color: inherit;
  box-shadow: 1px 1px 14px 0px rgba(18, 38, 63, 0.26);

  /* Pinned rather than inherited. Atlantis lists `.alert` in its Lato
     typography rule and sets no body line-height, so the admin card resolves
     to Bootstrap's 1.5 at 14px. The dashboard theme sets line-height 30px
     globally, which made the same card render ~50px taller there - pinning
     these keeps every surface on the admin's proportions. */
  font-family: 'Lato', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
}

/* ---- icon, title, message (atlantis.css `.alert [data-notify=...]`) ---- */

[data-notify="container"] [data-notify="icon"] {
  display: block;
}

/* the glyph itself is drawn as a filled circle; the colour comes from the
   per-type rules further down */
[data-notify="container"] [data-notify="icon"]::before {
  position: absolute;
  top: 50%;
  left: 15px;
  display: block;
  width: 35px;
  height: 35px;
  border-radius: 30px;
  line-height: 35px;
  font-size: 22px;
  text-align: center;
  color: #fff;
  transform: translateY(-50%);
}

[data-notify="container"] [data-notify="title"] {
  display: block;
  margin-bottom: 5px;
  color: #2b2b2b;
  font-size: 14px;
  font-weight: 700;
}

[data-notify="container"] [data-notify="message"] {
  color: #908e8e;
  font-size: 13px;
  /* atlantis leaves this at the span default; the dashboard theme turns spans
     into inline-block, which added a stray 5px to the card there */
  display: inline;
}

/* The template always emits a click-through <a>, but bootstrap-notify only
   positions it absolutely when an actual url was passed - otherwise it is left
   as an empty inline element with href="#". The dashboard theme makes anchors
   inline-block, so that empty tag claimed a whole line box and made the card
   21px taller there than in the admin panel. Hidden only in the href="#" case,
   so a notification that really carries a url keeps its overlay. */
[data-notify="container"] [data-notify="url"][href="#"] {
  display: none;
}

/* bootstrap-notify positions the dismiss button inline at top:5px; atlantis
   moves it down with !important, so this has to as well */
[data-notify="container"] .close {
  top: 12px !important;
  width: 25px;
  height: 25px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  line-height: 25px;
}

/* ---- per-type colours (atlantis.css `.alert-*`) ------------------------
   Two classes deep so these win over Bootstrap's own `.alert-success` etc.,
   which paint a tinted background and would otherwise show through on the
   storefront where atlantis.css is not loaded.
   ----------------------------------------------------------------------- */

[data-notify="container"].alert-success { border-left: 4px solid #31CE36; }
[data-notify="container"].alert-success [data-notify="icon"]::before { background: #31CE36; }

[data-notify="container"].alert-warning { border-left: 4px solid #FFAD46; }
[data-notify="container"].alert-warning [data-notify="icon"]::before { background: #FFAD46; }

[data-notify="container"].alert-danger { border-left: 4px solid #F25961; }
[data-notify="container"].alert-danger [data-notify="icon"]::before { background: #F25961; }

[data-notify="container"].alert-info { border-left: 4px solid #48ABF7; }
[data-notify="container"].alert-info [data-notify="icon"]::before { background: #48ABF7; }

[data-notify="container"].alert-primary { border-left: 4px solid #1572E8; }
[data-notify="container"].alert-primary [data-notify="icon"]::before { background: #1572E8; }

[data-notify="container"].alert-secondary { border-left: 4px solid #6861CE; }
[data-notify="container"].alert-secondary [data-notify="icon"]::before { background: #6861CE; }

[data-notify="container"].alert-default { border-left: 4px solid #1a2035; }
[data-notify="container"].alert-default [data-notify="icon"]::before { background: #1a2035; }

/* ---- progress bar ------------------------------------------------------
   Bootstrap 4's `.progress` / `.progress-bar` base, plus the pill radius and
   14px height atlantis.css sets. The bar reads primary blue on every type -
   bootstrap-notify labels it `progress-bar-{type}`, a Bootstrap 3 class with
   no Bootstrap 4 equivalent - which is exactly how the admin panel looks
   today, so it is left that way here on purpose.
   ----------------------------------------------------------------------- */

[data-notify="container"] .progress {
  display: flex;
  height: 14px;
  overflow: hidden;
  background-color: #e9ecef;
  border-radius: 100px;
  font-size: 0.75rem;
}

[data-notify="container"] .progress .progress-bar {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: #007bff;
  border-radius: 100px;
  color: #fff;
  text-align: center;
  white-space: nowrap;
}

/* ---- enter / exit ------------------------------------------------------
   bootstrap-notify was always configured with `animated fadeInDown` /
   `fadeOutUp`, but those class names live in animate.css, which only
   theme3456 loads - so on the admin and vendor panels the animation never
   ran. These are the same two motions under names the app owns, so every
   surface behaves identically. bootstrap-notify listens for animationstart /
   animationend and force-removes the card after 600ms, so both must be real
   animations and shorter than that.
   ----------------------------------------------------------------------- */

@keyframes tl-notify-in {
  from {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes tl-notify-out {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
  }
}

.tl-notify-in {
  animation: tl-notify-in 0.5s both;
}

.tl-notify-out {
  animation: tl-notify-out 0.5s both;
}

@media (prefers-reduced-motion: reduce) {
  /* still animations, so the start/end events bootstrap-notify waits on keep
     firing and cards are still removed from the DOM */
  .tl-notify-in,
  .tl-notify-out {
    animation-duration: 0.01s;
  }
}