/*!
 * 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-alert-warning-accent: var(--lightningcss-light, oklch(70% .15 70)) var(--lightningcss-dark, oklch(80% .14 80));
    --pico-alert-success-accent: var(--lightningcss-light, var(--pico-form-element-valid-border-color)) var(--lightningcss-dark, oklch(79% .13 168));
    --pico-alert-danger-accent: var(--lightningcss-light, var(--pico-form-element-invalid-border-color)) var(--lightningcss-dark, oklch(76% .14 22));
  }

  :where([role="alert"], [role="status"], output)[data-variant] {
    --pico-alert-accent: var(--pico-primary);
    --pico-alert-background-color: var(--lightningcss-light, color-mix(in oklab, var(--pico-alert-accent) 8%, var(--pico-background-color))) var(--lightningcss-dark, color-mix(in oklab, var(--pico-alert-accent) 14%, var(--pico-background-color)));
    margin-block: 0 var(--pico-typography-spacing-vertical);
    border: var(--pico-border-width) solid
    color-mix(in oklab, var(--pico-alert-accent) 35%, transparent);
    border-radius: var(--pico-card-border-radius);
    background-color: var(--pico-alert-background-color);
    --pico-alert-color: var(--pico-color);
    color: var(--pico-alert-color);
    font-size: 1rem;
    line-height: var(--pico-line-height);
    overflow-wrap: anywhere;
    padding: .875rem 1rem;
    display: block;
    position: relative;
  }

  :where([role="alert"], [role="status"], output)[data-variant]:where([data-variant="success"]) {
    --pico-alert-accent: var(--pico-alert-success-accent);
  }

  :where([role="alert"], [role="status"], output)[data-variant]:where([data-variant="warning"]) {
    --pico-alert-accent: var(--pico-alert-warning-accent);
  }

  :where([role="alert"], [role="status"], output)[data-variant]:where([data-variant="danger"]) {
    --pico-alert-accent: var(--pico-alert-danger-accent);
  }

  :where([role="alert"], [role="status"], output)[data-variant]:where(:has( > button[data-dismiss])) {
    padding-inline-end: calc(var(--pico-spacing) * 2.5);
  }

  :where([role="alert"], [role="status"], output)[data-variant]:where([hidden]) {
    display: none;
  }

  :where([role="alert"], [role="status"], output)[data-variant] > :where(:first-child) {
    margin-block-start: 0;
  }

  :where([role="alert"], [role="status"], output)[data-variant] > :where(:last-child, :has( + button[data-dismiss]:last-child)), :where([role="alert"], [role="status"], output)[data-variant] > :where(ul, ol):where(:last-child, :has( + button[data-dismiss]:last-child)) > li:last-child {
    margin-block-end: 0;
  }

  :where([role="alert"], [role="status"], output)[data-variant] > :where(h1, h2, h3, h4, h5, h6) {
    margin-block-end: calc(var(--pico-spacing) * .25);
    font-size: 1rem;
  }

  :where([role="alert"], [role="status"], output)[data-variant] :where(a) {
    color: inherit;
    text-decoration-line: underline;
  }

  :where([role="alert"], [role="status"], output)[data-variant] > :where(strong:first-child) {
    color: var(--lightningcss-light, color-mix(in oklab, var(--pico-alert-accent) 55%, var(--pico-alert-color))) var(--lightningcss-dark, color-mix(in oklab, var(--pico-alert-accent) 45%, var(--pico-alert-color)));
    font-weight: 600;
  }

  :where([role="alert"], [role="status"], output)[data-variant] :where(button:not([data-dismiss]), [role="button"], input:is([type="submit"], [type="button"])) {
    vertical-align: middle;
    margin-block: -.25rem;
    margin-inline-start: .5rem;
    padding: .25rem .75rem;
    font-size: .875em;
  }

  :where([role="alert"], [role="status"], output)[data-variant] > :where(button[data-dismiss]) {
    border-radius: var(--pico-border-radius);
    block-size: 1.75rem;
    inline-size: 1.75rem;
    box-shadow: none;
    color: color-mix(in oklab, var(--pico-alert-color) 75%, transparent);
    background-color: #0000;
    border: 0;
    place-items: center;
    margin: 0;
    padding: 0;
    font-size: 1.25rem;
    line-height: 1;
    display: grid;
    position: absolute;
    inset-block-start: .5rem;
    inset-inline-end: .5rem;
  }

  :where([role="alert"], [role="status"], output)[data-variant] > :where(button[data-dismiss]):before {
    content: "×";
    content: "×" / "";
  }

  :where([role="alert"], [role="status"], output)[data-variant] > :where(button[data-dismiss]):where(:hover, :active) {
    background-color: color-mix(in oklab, var(--pico-alert-color) 8%, transparent);
    color: var(--pico-alert-color);
  }

  :where([role="alert"], [role="status"], output)[data-variant] > :where(button[data-dismiss]):where(:focus-visible) {
    outline: var(--pico-outline-width) solid var(--pico-primary-focus);
    outline-offset: 0;
  }

  @media (prefers-reduced-motion: no-preference) {
    :where([role="alert"], [role="status"], output)[data-variant] {
      transition: opacity var(--pico-transition),
      translate var(--pico-transition);
    }

    @starting-style {
      :where([role="alert"], [role="status"], output)[data-variant] {
        opacity: 0;
        translate: 0 -.25rem;
      }
    }
  }
}

@layer pico.utilities;