.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    list-style: none;
}

.chip {
    --chip: var(--border);

    display: inline-block;
    padding: 0 0.6rem;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.6;
    background: var(--surface);
    border: 2px solid var(--chip);
    border-radius: 3px;
    box-shadow: 2px 2px 0 var(--hard-shadow);
}

.chip[data-tone="accent"] {
    --chip: var(--accent);

    background: var(--accent);
    color: var(--bg);
}

.chip[data-tone="accent-2"] {
    --chip: var(--accent-2);
}

/* Status */

.chip[data-status]::before {
    content: "";
    display: inline-block;
    width: 0.55em;
    height: 0.55em;
    margin-right: 0.45em;
    border-radius: 50%;
    background: var(--chip);
}

.chip[data-status="planned"] {
    border-style: dashed;
}

.chip[data-status="planned"]::before {
    background: transparent;
    border: 2px solid var(--chip);
}

.chip[data-status="wip"] {
    --chip: var(--accent-2);
}

.chip[data-status="completed"] {
    color: color-mix(in srgb, var(--text) 70%, transparent);
}

.chip[data-status="on-hold"] {
    --chip: var(--warn);

    border-style: dotted;
}

.chip[data-status="abandoned"] {
    color: color-mix(in srgb, var(--text) 55%, transparent);
    text-decoration: line-through;
}