@layer components {
  /*
    Autonomous custom elements
    https://blog.jim-nielsen.com/2021/custom-elements-without-js/
  */
  l-badge {
    /* Per-variant primitives — set by [variant], consumed by appearance */
    --_text-color: var(--l-color-text-neutral);
    --_background-color: transparent;
    --_border-color: color-mix(in oklab, var(--_text-color) 30%, transparent);

    /* Size defaults (md) */
    --_height: 1.375rem;
    --_font-size: var(--l-text-xs);
    --_padding-inline: 0.375rem;
    --_gap: 0.25rem;

    display: inline-flex;
    align-items: center;
    gap: var(--_gap);
    min-height: var(--_height);
    padding-block: 0.25rem;
    padding-inline: var(--_padding-inline);
    border: 1px solid var(--_border-color);
    border-radius: var(--l-radius-md);
    corner-shape: squircle;
    background-color: var(--_background-color);
    color: var(--_text-color);
    font-family: var(--l-font-neo-grotesque);
    font-size: var(--_font-size);
    font-weight: var(--l-font-weight-medium);
    line-height: 1;
    text-box: trim-both cap alphabetic;

    /*
    ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
     🆂🅸🆉🅴🆂
    ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
    */

    &[size='sm'] {
      --_height: 1.25rem;
      --_padding-inline: 0.25rem;
      --_gap: 0.125rem;
    }
    &[size='lg'] {
      --_height: 1.5rem;
      --_font-size: var(--l-text-sm);
      --_padding-inline: 0.5rem;
    }

    /*
    ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
     🆅🅰🆁🅸🅰🅽🆃🆂
    ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
    */

    &[variant='info'] {
      --_text-color: var(--l-color-text-info);
    }
    &[variant='success'] {
      --_text-color: var(--l-color-text-success);
    }
    &[variant='warning'] {
      --_text-color: var(--l-color-text-warning);
    }
    &[variant='danger'] {
      --_text-color: var(--l-color-text-danger);
    }

    /*
    ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
     🅰🅿🅿🅴🅰🆁🅰🅽🅲🅴
    ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
    */

    &[appearance='filled'] {
      --_background-color: var(--l-color-bg-fill-neutral-subtle);
      --_border-color: transparent;

      &[variant='info'] {
        --_background-color: var(--l-color-bg-fill-info-subtle);
      }
      &[variant='success'] {
        --_background-color: var(--l-color-bg-fill-success-subtle);
      }
      &[variant='warning'] {
        --_background-color: var(--l-color-bg-fill-warning-subtle);
      }
      &[variant='danger'] {
        --_background-color: var(--l-color-bg-fill-danger-subtle);
      }
    }

    &[appearance='filled-outlined'] {
      --_background-color: var(--l-color-bg-fill-neutral-subtle);

      &[variant='info'] {
        --_background-color: var(--l-color-bg-fill-info-subtle);
      }
      &[variant='success'] {
        --_background-color: var(--l-color-bg-fill-success-subtle);
      }
      &[variant='warning'] {
        --_background-color: var(--l-color-bg-fill-warning-subtle);
      }
      &[variant='danger'] {
        --_background-color: var(--l-color-bg-fill-danger-subtle);
      }
    }

    &[appearance='accent'] {
      --_background-color: var(--l-color-bg-fill-neutral-strong);
      --_text-color: var(--l-color-surface);
      --_border-color: transparent;

      &[variant='info'] {
        --_background-color: var(--l-color-bg-fill-info-strong);
        --_text-color: white;
      }
      &[variant='success'] {
        --_background-color: var(--l-color-bg-fill-success-strong);
      }
      &[variant='warning'] {
        --_background-color: var(--l-color-bg-fill-warning-strong);
      }
      &[variant='danger'] {
        --_background-color: var(--l-color-bg-fill-danger-strong);
        --_text-color: white;
      }
    }

    /*
    ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
     🅿🅸🅻🅻
    ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
    */

    &[pill] {
      border-radius: var(--l-radius-full);
      corner-shape: unset;
    }

    /*
    ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
     🅸🅲🅾🅽
    ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
    */

    iconify-icon {
      color: currentColor;
      height: 1em;
    }
  }

  l-badge:has(iconify-icon:first-child) {
    padding-inline-start: 0.25rem;
  }
}