/* Toast: <section popover="manual" role="status"> stack with one <article> per notification */

:root,
:host,
[data-theme] {
  --pico-toast-accent: var(--pico-primary-background);
}

:root,
:host {
  --pico-toast-inset: var(--pico-spacing);
  --pico-toast-gap: calc(var(--pico-spacing) * 0.5);
  --pico-toast-width: min(22rem, 100% - 2 * var(--pico-toast-inset));
}

/* The stack never hides, so it sets display itself and also works before showPopover() runs */
[popover][role="status"] {
  display: flex;
  z-index: 1000;
  position: fixed;
  inset: auto;
  inset-block-end: max(var(--pico-toast-inset), env(safe-area-inset-bottom, 0px));
  inset-inline-end: var(--pico-toast-inset);
  flex-direction: column;
  gap: var(--pico-toast-gap);
  width: var(--pico-toast-width);
  margin: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  background: none;
  box-shadow: none;
  color: inherit;
  opacity: 1;
  transform: none;
  transition: none;
  /* Only the toasts take clicks, the page stays usable around them */
  pointer-events: none;

  &[data-placement^="top"] {
    inset-block: max(var(--pico-toast-inset), env(safe-area-inset-top, 0px)) auto;
  }

  &[data-placement$="start"] {
    inset-inline: var(--pico-toast-inset) auto;
  }

  &[data-placement$="center"] {
    inset-inline: 0;
    margin-inline: auto;
  }

  > article {
    display: flex;
    align-items: flex-start;
    gap: calc(var(--pico-spacing) * 0.5);
    margin: 0;
    padding: 0.75rem 0.875rem;
    border: var(--pico-border-width) solid var(--pico-dropdown-border-color);
    border-radius: var(--pico-card-border-radius);
    background-color: var(--pico-dropdown-background-color);
    box-shadow: var(--pico-dropdown-box-shadow);
    color: var(--pico-color);
    font-size: 0.875rem;
    pointer-events: auto;

    /* Status dot, centered on the first line */
    &::before {
      flex: none;
      inline-size: 0.5rem;
      block-size: 0.5rem;
      margin-block-start: calc(0.5lh - 0.25rem);
      margin-inline: 0.125rem;
      border-radius: 50%;
      background-color: var(--pico-toast-accent);
      content: "";
    }

    /* role="alert" is the semantic way to ask for the danger look */
    &[role="alert"] {
      --pico-toast-accent: var(--pico-form-element-invalid-border-color);
    }

    > p {
      flex: 1;
      min-width: 0;
      margin: 0;
      overflow-wrap: anywhere;
    }

    > p > strong:first-child {
      display: block;
    }
  }
}

/* Action: a text button next to the message */
[popover][role="status"] > article > :is(button, [role="button"]) {
  flex: none;
  width: auto;
  margin: -0.25rem 0;
  padding: 0.25rem 0.5rem;
  border: 0;
  border-radius: var(--pico-border-radius);
  background: none;
  box-shadow: none;
  color: var(--pico-primary);
  font-size: inherit;
  font-weight: 500;
  line-height: var(--pico-line-height);
  text-decoration: none;
  cursor: pointer;

  &:hover {
    background-color: color-mix(in oklab, var(--pico-primary) 10%, transparent);
    color: var(--pico-primary-hover);
  }

  &:focus-visible {
    outline: var(--pico-outline-width) solid var(--pico-primary-focus);
    outline-offset: 0;
  }
}

/* Icon only, named by aria-label: the dismiss button */
[popover][role="status"] > article > :is(button, [role="button"])[aria-label] {
  display: grid;
  place-items: center;
  min-width: 1.75rem;
  min-height: 1.75rem;
  margin-block: -0.25rem;
  padding: 0;
  color: var(--pico-muted-color);
  font-size: 1.25rem;
  font-weight: var(--pico-font-weight);
  line-height: 1;

  &:hover {
    background-color: color-mix(in oklab, var(--pico-color) 8%, transparent);
    color: var(--pico-color);
  }
}

@media (prefers-reduced-motion: no-preference) {
  [popover][role="status"] > article {
    transition:
      opacity var(--pico-transition),
      scale var(--pico-transition);
  }

  /* inert marks a toast that is leaving, the script removes it after the transition */
  [popover][role="status"] > article[inert] {
    opacity: 0;
    scale: 0.96;
  }

  @starting-style {
    [popover][role="status"] > article {
      opacity: 0;
      scale: 0.96;
    }
  }
}