body:has(.page-flash) #toaster {
  display: none !important;
}

#toaster {
  position: fixed;
  top: calc(75px + var(--pico-spacing));
  right: var(--pico-spacing);
  left: var(--pico-spacing);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(var(--pico-spacing) * 0.5);
  pointer-events: none;
}

#toaster .flash-toast {
  position: relative;
  width: min(100%, 22rem);
  padding: 0.75rem 2.25rem 0.75rem 1rem;
  margin: 0;
  border: 1px solid transparent;
  border-radius: var(--pico-border-radius);
  background-color: var(--pico-card-background-color, var(--pico-background-color));
  box-shadow: 0 8px 24px rgb(0 0 0 / 12%);
  pointer-events: auto;
}

#toaster .flash-toast > [role="close"] {
  position: absolute;
  top: 0.35rem;
  right: 0.65rem;
  color: inherit;
  cursor: pointer;
}

#toaster .flash-toast.notice {
  color: rgb(85, 194, 30);
  border-color: rgb(44, 108, 12);
}

#toaster .flash-toast.info {
  color: rgb(156, 167, 250);
  border-color: rgb(29, 89, 208);
}

#toaster .flash-toast.error {
  color: rgb(243, 143, 121);
  border-color: rgb(175, 41, 29);
}

#toaster .flash-toast.warning,
#toaster .flash-toast.alert {
  color: rgb(187, 172, 0);
  border-color: rgb(104, 95, 0);
}

.page-flash {
  margin: 0 0 calc(var(--pico-spacing) * 1.25);
  padding: 0.85rem 1rem;
  border: 1px solid transparent;
  border-radius: var(--pico-border-radius);
  background-color: var(--pico-card-background-color, var(--pico-background-color));
}

.page-flash--error,
.page-flash--alert {
  color: rgb(243, 143, 121);
  border-color: rgb(175, 41, 29);
}

.page-flash--notice {
  color: rgb(85, 194, 30);
  border-color: rgb(44, 108, 12);
}

.page-flash--warning {
  color: rgb(187, 172, 0);
  border-color: rgb(104, 95, 0);
}

.page-flash--info {
  color: rgb(156, 167, 250);
  border-color: rgb(29, 89, 208);
}