/* Livemark's badges: solid in the accent by default, a tint of their tone otherwise */
@scope (htmlpress-badge) {
  :scope {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    height: 1.25rem;
    padding: 0.125rem 0.5rem;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 2rem;
    background: var(--htmlpress-accent);
    color: var(--htmlpress-accent-text);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1rem;
    vertical-align: middle;
    white-space: nowrap;
  }
  :scope:is([variant="positive"], [variant="warning"], [variant="destructive"]) {
    background: light-dark(
      color-mix(in oklab, var(--tone) 10%, transparent),
      color-mix(in oklab, var(--tone) 20%, transparent)
    );
  }
  :scope[variant="positive"] {
    --tone: var(--htmlpress-success);
    color: light-dark(oklch(0.532 0.157 131.589), oklch(0.841 0.238 128.85));
  }
  :scope[variant="warning"] {
    --tone: var(--htmlpress-warning);
    color: light-dark(oklch(0.476 0.114 61.907), oklch(0.852 0.199 91.936));
  }
  :scope[variant="destructive"] {
    --tone: var(--htmlpress-danger);
    color: var(--htmlpress-danger);
  }
  :scope[variant="secondary"] {
    background: var(--htmlpress-surface);
    color: var(--htmlpress-text);
  }
  :scope[variant="outline"] {
    border-color: var(--htmlpress-border);
    background: transparent;
    color: var(--htmlpress-text);
  }
}