/**
 * PILL
 * Small tinted capsule: counters in panel headers, severity of a value, a timestamp...
 * <span class="as-pill as-tone-danger">1.2s</span>
 * Modifiers: as-pill-lg (12px, bold), as-pill-round (fully rounded), as-pill-dot (leading dot), as-pill-border
 */
.as-pill,
span.as-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    white-space: nowrap;
    font-size: 10px;
    color: var(--as-tone, inherit);
    background-color: var(--as-tone-bg, color-mix(in srgb, var(--as-tone, transparent) 8%, transparent));
    border-radius: 4px;
}

.as-pill-lg,
span.as-pill-lg {
    gap: 7px;
    padding: 4px 12px;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: .01em;
}

.as-pill-round {
    border-radius: 99px !important;
}

.as-pill-dot::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.as-pill-border {
    border: var(--border-width) solid color-mix(in srgb, var(--as-tone, transparent) 20%, transparent);
}