/* Toast: a short coloured message with an icon ("Booking saved"). Built by site.js.
   Four types: success (green), info (blue), warning (amber), error (red).
   Success and info leave by themselves; warning and error stay until closed, so nobody misses them.
   Phones: full width at the bottom. From 576px: bottom right. Needs Bootstrap Icons for the icons. */

.toasts {
  position: fixed;
  z-index: var(--z-toast);
  right: var(--sp-4);
  bottom: calc(var(--sp-4) + env(safe-area-inset-bottom, 0px));
  left: var(--sp-4);
  display: grid;
  gap: var(--sp-2);
  pointer-events: none; /* clicks pass through the empty stack, not through the toasts */
}

@media (min-width: 576px) {
  .toasts {
    left: auto;
    width: var(--toast-w);
  }
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  border: var(--border-1) solid;
  border-radius: var(--radius-1);
  box-shadow: var(--shadow-1);
  pointer-events: auto;
  animation: toast-in var(--duration-base) var(--ease);
  transition: opacity var(--duration-base) var(--ease);
}

.toast--success { color: var(--c-success-text); background-color: var(--c-success-bg); border-color: var(--c-success-border); }
.toast--info    { color: var(--c-info-text);    background-color: var(--c-info-bg);    border-color: var(--c-info-border); }
.toast--warning { color: var(--c-warning-text); background-color: var(--c-warning-bg); border-color: var(--c-warning-border); }
.toast--error   { color: var(--c-error-text);   background-color: var(--c-error-bg);   border-color: var(--c-error-border); }

/* Icon sits in the middle of the message, however many lines it wraps to. The × stays top right. */
.toast__icon {
  flex: none;
  align-self: center;
  font-size: var(--fs-lead);
  line-height: 1;
}

.toast__icon::before {
  vertical-align: top; /* Bootstrap Icons lowers each icon to sit on a text line; here it is centred instead */
}

.toast__text {
  flex: 1;
  min-width: 0;
}

.toast__close {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--sp-6);
  height: calc(var(--fs-body) * var(--lh-body));
  color: inherit;
  border-radius: var(--radius-1);
}

.toast--leaving {
  opacity: 0;
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(var(--sp-4));
  }
}