.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    font-size: 12px;
    font-style: normal;
}

.chips.small-chip {
    font-size: 10px;
}

.chips > span:not(.no-chip) {
    padding: 2px 7px;
    border-radius: 3px;
    font-family: 'Cinzel', serif;
    letter-spacing: 0.05em;
    display: flex;
    gap: 6px;
    align-items: center;
}

.chips > span:not(.no-chip) > .material-symbols-outlined {
    font-size: 12px;
}

.chips .no-chip {
    color: var(--mist-dim);
    font-style: italic;
}

.chips .gold-chip {
    background: rgba(29, 23, 25);
    border: 1px solid rgba(201, 148, 58, 0.16);
    color: var(--gold);
}

.chips .teal-chip {
    align-items: center;
    background: rgba(18, 29, 28);
    border: 1px solid rgba(74, 173, 168, 0.22);
    color: var(--teal);
}

.chips .ember-chip {
    background: rgba(200, 88, 64, 0.1);
    border: 1px solid var(--ember);
    color: var(--ember);
}

.chips .cream-chip {
    color: var(--cream);
    border: 1px solid var(--cream);
    background: color-mix(in lab, var(--cream) 20%, transparent);
}

.chips .green-chip {
    color: var(--green);
    border: 1px solid var(--green);
    background: color-mix(in lab, var(--green) 20%, transparent);
}