/*!
 * 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-badge-background-color: color-mix(in oklab, var(--pico-primary) 14%, transparent);
    --pico-badge-color: var(--lightningcss-light, color-mix(in oklab, var(--pico-primary), #000 35%)) var(--lightningcss-dark, color-mix(in oklab, var(--pico-primary), #fff 35%));
    --pico-badge-success-background-color: oklch(60% .12 165 / .14);
    --pico-badge-success-color: var(--lightningcss-light, oklch(39% .078 165)) var(--lightningcss-dark, oklch(74% .078 165));
    --pico-badge-warning-background-color: oklch(72% .15 75 / .16);
    --pico-badge-warning-color: var(--lightningcss-light, oklch(45% .097 75)) var(--lightningcss-dark, oklch(82% .097 75));
    --pico-badge-danger-background-color: oklch(58% .18 25 / .14);
    --pico-badge-danger-color: var(--lightningcss-light, oklch(42% .13 25)) var(--lightningcss-dark, oklch(75% .117 25));
  }

  [data-badge] {
    box-sizing: border-box;
    background-color: var(--pico-badge-background-color);
    block-size: 1.75em;
    min-inline-size: 1.75em;
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--pico-badge-color) 25%, transparent);
    color: var(--pico-badge-color);
    font-variant-numeric: tabular-nums;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    border: 0;
    border-radius: 100vmax;
    justify-content: center;
    align-items: center;
    margin-block: 0;
    margin-inline-start: .4em;
    padding-block: 0;
    padding-inline: .6em;
    font-size: .8em;
    font-style: normal;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    display: inline-flex;
  }

  [data-badge][hidden] {
    display: none;
  }

  @supports (text-box: trim-both cap alphabetic) {
    [data-badge] {
      text-box: trim-both cap alphabetic;
    }
  }

  [data-badge]:empty {
    block-size: .65em;
    inline-size: .65em;
    min-inline-size: 0;
    margin-inline-end: .4em;
    padding: 0;
  }

  [data-badge]:empty:not([data-badge="contrast"]) {
    background-color: var(--pico-badge-color);
  }

  [data-badge][data-badge="secondary"] {
    --pico-badge-background-color: var(--pico-secondary-background);
    --pico-badge-color: var(--pico-secondary-inverse);
  }

  [data-badge][data-badge="contrast"] {
    --pico-badge-background-color: var(--pico-contrast-background);
    --pico-badge-color: var(--pico-contrast-inverse);
    box-shadow: none;
  }

  [data-badge][data-badge="success"] {
    --pico-badge-background-color: var(--pico-badge-success-background-color);
    --pico-badge-color: var(--pico-badge-success-color);
  }

  [data-badge][data-badge="warning"] {
    --pico-badge-background-color: var(--pico-badge-warning-background-color);
    --pico-badge-color: var(--pico-badge-warning-color);
  }

  [data-badge][data-badge="danger"] {
    --pico-badge-background-color: var(--pico-badge-danger-background-color);
    --pico-badge-color: var(--pico-badge-danger-color);
  }

  [data-badge] > span {
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
    block-size: 1px;
    inline-size: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    overflow: hidden;
  }

  :is(button, [role="button"], input[type="submit"], input[type="button"]) > [data-badge] {
    vertical-align: .1em;
  }

  :is(button, [role="button"], input[type="submit"], input[type="button"]):not(.outline) {
    --pico-badge-ring-color: var(--pico-primary-inverse);
  }

  :is(button, [role="button"], input[type="submit"], input[type="button"]):not(.outline).secondary {
    --pico-badge-ring-color: var(--pico-secondary-inverse);
  }

  :is(button, [role="button"], input[type="submit"], input[type="button"]):not(.outline).contrast {
    --pico-badge-ring-color: var(--pico-contrast-inverse);
  }

  :is(button, [role="button"], input[type="submit"], input[type="button"]):not(.outline) > [data-badge]:not([data-badge="success"], [data-badge="warning"], [data-badge="danger"]) {
    --pico-badge-background-color: var(--pico-badge-ring-color);
    --pico-badge-color: var(--pico-primary-background);
  }

  :is(button, [role="button"], input[type="submit"], input[type="button"]):not(.outline).secondary > [data-badge]:not([data-badge="success"], [data-badge="warning"], [data-badge="danger"]) {
    --pico-badge-color: var(--pico-secondary-background);
  }

  :is(button, [role="button"], input[type="submit"], input[type="button"]):not(.outline).contrast > [data-badge]:not([data-badge="success"], [data-badge="warning"], [data-badge="danger"]) {
    --pico-badge-color: var(--pico-contrast-background);
  }

  :is(button, [role="button"], input[type="submit"], input[type="button"]):not(.outline) > [data-badge]:is([data-badge="success"], [data-badge="warning"], [data-badge="danger"]) {
    background-color: var(--_badge-solid);
    box-shadow: 0 0 0 .125rem var(--pico-badge-ring-color);
    color: var(--_badge-solid-color, oklch(100% 0 0));
  }

  :is(button, [role="button"], input[type="submit"], input[type="button"]):not(.outline) > [data-badge="success"] {
    --_badge-solid: oklch(50% .11 165);
  }

  :is(button, [role="button"], input[type="submit"], input[type="button"]):not(.outline) > [data-badge="warning"] {
    --_badge-solid: oklch(80% .15 75);
    --_badge-solid-color: oklch(20% .02 75);
  }

  :is(button, [role="button"], input[type="submit"], input[type="button"]):not(.outline) > [data-badge="danger"] {
    --_badge-solid: oklch(54% .19 25);
  }

  li:has( > [data-badge]:empty:first-child) {
    list-style: none;
  }

  li:has( > [data-badge]:empty:first-child) > [data-badge]:first-child {
    margin-inline-start: 0;
  }

  a[data-badge]:hover, a[data-badge]:focus-visible {
    text-decoration: none;
  }

  @media (forced-colors: active) {
    [data-badge] {
      border: 1px solid;
    }
  }
}

@layer pico.utilities;