/*!
 * 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-avatar-size: 2.5rem;
    --pico-avatar-overlap: .375rem;
    --pico-avatar-background-color: var(--lightningcss-light, color-mix(in oklab, var(--pico-primary) 14%, var(--pico-background-color))) var(--lightningcss-dark, color-mix(in oklab, var(--pico-primary) 24%, var(--pico-background-color)));
    --pico-avatar-color: var(--pico-primary-hover);
    --pico-avatar-ring-color: var(--pico-background-color);
    --pico-avatar-status-online-color: var(--pico-ins-color);
    --pico-avatar-status-offline-color: var(--pico-muted-color);
    --pico-avatar-status-away-color: var(--lightningcss-light, oklch(62% .15 75)) var(--lightningcss-dark, oklch(80% .15 75));
    --pico-avatar-status-busy-color: var(--pico-del-color);
  }

  details.dropdown > summary + ul {
    --pico-avatar-ring-color: var(--pico-dropdown-background-color);
  }

  article {
    --pico-avatar-ring-color: var(--pico-card-background-color);
  }

  article > :is(header, footer) {
    --pico-avatar-ring-color: var(--pico-card-sectioning-background-color);
  }

  :where([data-avatar]) {
    inline-size: var(--pico-avatar-size);
    block-size: var(--pico-avatar-size);
    background-color: var(--pico-avatar-background-color);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--pico-color) 10%, transparent);
    color: var(--pico-avatar-color);
    font-size: calc(var(--pico-avatar-size) * .4);
    text-transform: uppercase;
    vertical-align: middle;
    -webkit-user-select: none;
    user-select: none;
    unicode-bidi: plaintext;
    border-radius: 50%;
    flex: none;
    place-items: center;
    font-weight: 600;
    line-height: 1;
    display: inline-grid;
    position: relative;
  }

  :where([data-avatar]) > img {
    border-radius: inherit;
    object-fit: cover;
    block-size: 100%;
    inline-size: 100%;
    position: absolute;
    inset: 0;
  }

  :where([data-avatar])[data-status]:after {
    content: "";
    box-sizing: border-box;
    inline-size: max(.625rem, calc(var(--pico-avatar-size) * .28));
    block-size: max(.625rem, calc(var(--pico-avatar-size) * .28));
    border: max(.125rem, calc(var(--pico-avatar-size) * .04)) solid
      var(--_status, var(--pico-avatar-status-offline-color));
    background: var(--pico-avatar-ring-color);
    box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-avatar-ring-color);
    border-radius: 50%;
    position: absolute;
    inset-block-end: calc(var(--pico-avatar-size) * -.02);
    inset-inline-end: calc(var(--pico-avatar-size) * -.02);
  }

  :where([data-avatar])[data-status="online"] {
    --_status: var(--pico-avatar-status-online-color);
  }

  :where([data-avatar])[data-status="online"]:after {
    background: var(--_status);
  }

  :where([data-avatar])[data-status="away"] {
    --_status: var(--pico-avatar-status-away-color);
  }

  :where([data-avatar])[data-status="away"]:after {
    background: linear-gradient(to top, var(--_status) 50%, var(--pico-avatar-ring-color) 50%);
  }

  :where([data-avatar])[data-status="busy"] {
    --_status: var(--pico-avatar-status-busy-color);
  }

  :where([data-avatar])[data-status="busy"]:after {
    background: linear-gradient(var(--pico-avatar-ring-color), var(--pico-avatar-ring-color)) center / 60%
          20% no-repeat,
        var(--_status);
  }

  :where(p, li, td, th, dt, dd, label, small, h1, h2, h3, h4, h5, h6) > :where([data-avatar]) {
    margin-inline-end: .5em;
  }

  :where([data-avatar="sm"]) {
    --pico-avatar-size: 2rem;
  }

  :where([data-avatar="lg"]) {
    --pico-avatar-size: 3.5rem;
  }

  :where([data-avatar="xl"]) {
    --pico-avatar-size: 5rem;
  }

  :is(a, button, summary)[aria-label]:has( > [data-avatar]:only-child) {
    inline-size: auto;
    box-shadow: none;
    color: inherit;
    vertical-align: middle;
    cursor: pointer;
    background: none;
    border: 0;
    border-radius: 50%;
    margin: 0;
    padding: 0;
    line-height: 1;
    text-decoration: none;
    list-style: none;
    display: inline-flex;
    position: relative;
  }

  :is(a, button, summary)[aria-label]:has( > [data-avatar]:only-child):after {
    display: none;
  }

  :is(a, button, summary)[aria-label]:has( > [data-avatar]:only-child)::-webkit-details-marker {
    display: none;
  }

  :is(a, button, summary)[aria-label]:has( > [data-avatar]:only-child)::marker {
    content: "";
  }

  :is(a, button, summary)[aria-label]:has( > [data-avatar]:only-child):is(:hover, :active, :focus, :focus-visible) {
    box-shadow: none;
    background: none;
  }

  :is(a, button, summary)[aria-label]:has( > [data-avatar]:only-child):focus-visible {
    z-index: 1;
  }

  :is(a, button, summary)[aria-label]:has( > [data-avatar]:only-child):focus-visible > [data-avatar] {
    outline: var(--pico-outline-width) solid var(--pico-primary);
    outline-offset: .125rem;
  }

  :where([role="group"]):has( > [data-avatar],  > :is(a, button)[aria-label] > [data-avatar]:only-child) {
    inline-size: auto;
    box-shadow: none;
    align-items: center;
    margin-block-end: 0;
  }

  :where([role="group"]):has( > [data-avatar],  > :is(a, button)[aria-label] > [data-avatar]:only-child) > * {
    border-radius: 50%;
    flex: none;
  }

  :where([role="group"]):has( > [data-avatar],  > :is(a, button)[aria-label] > [data-avatar]:only-child) > * + * {
    margin-inline-start: calc(var(--pico-avatar-overlap) * -1);
  }

  :where([role="group"]):has( > [data-avatar],  > :is(a, button)[aria-label] > [data-avatar]:only-child) [data-avatar] {
    box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-avatar-ring-color),
      inset 0 0 0 1px color-mix(in oklab, var(--pico-color) 10%, transparent);
  }
}

@layer pico.utilities;