.tag-color-1 {
    background: var(--mte-green-lightest);
    border-color: var(--mte-green-light);
    color: var(--mte-green-darker);
}

.tag-color-2 {
    background: var(--mte-teal-lightest);
    border-color: var(--mte-teal-light);
    color: var(--mte-teal-darker);
}

.tag-color-3 {
    background: var(--mte-blue-lightest);
    border-color: var(--mte-blue-light);
    color: var(--mte-blue-darker);
}

.tag-color-4 {
    background: var(--mte-purple-lightest);
    border-color: var(--mte-purple-light);
    color: var(--mte-purple-darker);
}

.tag-color-5 {
    background: var(--mte-magenta-lightest);
    border-color: var(--mte-magenta-light);
    color: var(--mte-magenta-darker);
}

.tag-color-6 {
    background: var(--mte-red-lightest);
    border-color: var(--mte-red-light);
    color: var(--mte-red-darker);
}

.tag-color-7 {
    background: var(--mte-orange-lightest);
    border-color: var(--mte-orange-light);
    color: var(--mte-orange-darker);
}

.tag-color-8 {
    background: var(--mte-yellow-lightest);
    border-color: var(--mte-yellow-light);
    color: var(--mte-yellow-darker);
}

mte-tag.inactive {
    background: var(--mte-grey-4);
}