:root {
  --content-moving: 30px;
}

#vivce-toast-container {
  position: fixed;
  top: 120px;
  right: var(--content-moving);
  z-index: 299;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 360px;
  width: calc(100% - (var(--content-moving) * 2));
  pointer-events: none;
  overflow: hidden;
  transition: all 0.2s linear;
}

body.header-fixed #vivce-toast-container {
  top: 80px;
}

.vivce-toast {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
  background: var(--color-white);
  padding: var(--space-sm) var(--space-sm) var(--space-md) var(--space-md);
  box-shadow: 0px 2px 12px 0px #0000001A;
  pointer-events: all;
  opacity: 0;
  transform: translateX(var(--content-moving));
  transition: opacity .25s ease, transform .25s ease;
  border: 1px solid var(--color-grey-90);
  border-radius: 12px;
}

.vivce-toast--visible {
  opacity: 1;
  transform: translateX(0);
}

.vivce-toast__content {
  width: 100%;
  padding-top: var(--space);
}

.vivce-toast__close {
  background: none;
  border: none;
  color: var(--color-grey-50);
  font-size: 34px;
  font-weight: 300;
  line-height: 1;
  padding: 0;
  flex-shrink: 0;
  transition: color .15s;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  z-index: 1;
}

.vivce-toast__close:hover {
  color: #000;
}

@media (max-width: 768px) {
  :root {
    --content-moving: 10px;
  }

  #vivce-toast-container {
    max-width: 100%;
    top: 80px;
  }

  body.header-fixed #vivce-toast-container {
    top: 10px;
  }

  .vivce-toast {
    padding: var(--space-sm);
  }

  .vivce-toast__content {
    padding-top: 0;
  }
}
/* #1603 — bookmark confirmation toast. Same shape as .wizard-toast: icon, title, one line
   of text, one action. */
.bookmark-toast {
  display: flex;
  align-items: flex-start;
  width: 100%;
  gap: var(--space-md);
}

.bookmark-toast__icon {
  flex-shrink: 0;
  display: flex;
  width: 24px;
  height: 24px;
}

.bookmark-toast__icon svg {
  width: 24px;
  height: 24px;
}

/* checkbox-circle-fill.svg hardcodes #0BC546 on its paths (2.1:1 on white), so the
   override has to reach the paths, not just the <svg>. */
.bookmark-toast--add .bookmark-toast__icon svg path {
  fill: var(--color-green-40);
}

.bookmark-toast--remove .bookmark-toast__icon svg {
  fill: var(--color-grey-50);
}

.bookmark-toast__body {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space);
}

.bookmark-toast__title {
  margin: 0;
}

.bookmark-toast__text {
  margin: 0;
}

.bookmark-toast__button {
  cursor: pointer;
  display: inline-flex;
  align-self: flex-start;
  background: none;
  border: none;
  padding: 0;
  margin-top: var(--space-xs);
  color: var(--color-blue-50);
}

.bookmark-toast__button:hover {
  text-decoration: underline;
}

/* #1957 — "Save this search?" offer after a search started from the empty Saved searches
   tab. Reuses the bookmark toast; the heart is the toolbar button's masked icon. */
.save-search-toast .bookmark-toast__icon {
  background-color: var(--color-teal);
  -webkit-mask: url(../img/icons/heart-3-line.svg) center / 24px 24px no-repeat;
  mask: url(../img/icons/heart-3-line.svg) center / 24px 24px no-repeat;
}