/*!
 * Pico Reforged v2.0.1 (https://pico.rusticstack.com)
 * Copyright 2019-2024 Lucas Larroche and the Pico CSS authors
 * Copyright 2026 rusticstack
 * Licensed under MIT
 */
@layer pico.tokens, pico.theme, pico.core;

@layer pico.extras {
  :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) * .5);
    --pico-toast-width: min(22rem, 100% - 2 * var(--pico-toast-inset));
  }

  [popover][role="status"] {
    z-index: 1000;
    gap: var(--pico-toast-gap);
    width: var(--pico-toast-width);
    box-shadow: none;
    color: inherit;
    opacity: 1;
    pointer-events: none;
    inset: auto;
    background: none;
    border: 0;
    flex-direction: column;
    margin: 0;
    padding: 0;
    transition: none;
    display: flex;
    position: fixed;
    inset-block-end: max(var(--pico-toast-inset), env(safe-area-inset-bottom, 0px));
    inset-inline-end: var(--pico-toast-inset);
    overflow: visible;
    transform: none;
  }

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

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

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

  [popover][role="status"] > article {
    align-items: flex-start;
    gap: calc(var(--pico-spacing) * .5);
    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);
    pointer-events: auto;
    margin: 0;
    padding: .75rem .875rem;
    font-size: .875rem;
    display: flex;
  }

  [popover][role="status"] > article:before {
    background-color: var(--pico-toast-accent);
    content: "";
    border-radius: 50%;
    flex: none;
    block-size: .5rem;
    inline-size: .5rem;
    margin-block-start: calc(.5lh - .25rem);
    margin-inline: .125rem;
  }

  [popover][role="status"] > article[role="alert"] {
    --pico-toast-accent: var(--pico-form-element-invalid-border-color);
  }

  [popover][role="status"] > article > p {
    overflow-wrap: anywhere;
    flex: 1;
    min-width: 0;
    margin: 0;
  }

  [popover][role="status"] > article > p > strong:first-child {
    display: block;
  }

  [popover][role="status"] > article > :is(button, [role="button"]) {
    border-radius: var(--pico-border-radius);
    width: auto;
    box-shadow: none;
    color: var(--pico-primary);
    font-size: inherit;
    font-weight: 500;
    line-height: var(--pico-line-height);
    cursor: pointer;
    background: none;
    border: 0;
    flex: none;
    margin: -.25rem 0;
    padding: .25rem .5rem;
    text-decoration: none;
  }

  [popover][role="status"] > article > :is(button, [role="button"]):hover {
    background-color: color-mix(in oklab, var(--pico-primary) 10%, transparent);
    color: var(--pico-primary-hover);
  }

  [popover][role="status"] > article > :is(button, [role="button"]):focus-visible {
    outline: var(--pico-outline-width) solid var(--pico-primary-focus);
    outline-offset: 0;
  }

  [popover][role="status"] > article > :is(button, [role="button"])[aria-label] {
    min-width: 1.75rem;
    min-height: 1.75rem;
    color: var(--pico-muted-color);
    font-size: 1.25rem;
    font-weight: var(--pico-font-weight);
    place-items: center;
    margin-block: -.25rem;
    padding: 0;
    line-height: 1;
    display: grid;
  }

  [popover][role="status"] > article > :is(button, [role="button"])[aria-label]: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);
    }

    [popover][role="status"] > article[inert] {
      opacity: 0;
      scale: .96;
    }

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

@layer pico.utilities;