.tag-group .tag:not(.token) {
    display: inline-block;
    padding: var(--space-xxs) var(--space-xs);
    margin-bottom: var(--space-xxs);
    border: 1px solid var(--color-water-darker);
    border-radius: 2rem;
    color: var(--color-water-darker);
    text-transform: uppercase;
    font-size: var(--text-size-xxs);
    font-weight: var(--text-weight-bold);
    line-height: 1;
}

.tag-group .tag.grass {
    color: var(--color-grass-darker);
    border-color: var(--color-grass-darker);
}

.tag-group .tag.lava {
    color: var(--color-lava-darker);
    border-color: var(--color-lava-darker);
}

.tag-group .tag.gold {
    color: var(--color-gold-darker);
    border-color: var(--color-gold-darker);
}

.tag-group .tag.stainless {
    color: var(--color-stainless-darker);
    border-color: var(--color-stainless-darker);
}

.tag-group .tag.selectable {
    box-shadow: var(--elevation-xs);
}

.tag-group .tag.selected {
    box-shadow: var(--elevation-sm);
    border-color: var(--color-water);
    background-color: var(--color-water);
    color: var(--color-white);
}

.tag-group .tag.removable::after {
  content: "\2715";
  display: inline-block;
  margin-left: var(--space-xxs);
}
.tag-group .tag.removable:hover::after {
  opacity: .8;
}

.tag-group .dark-section .tag:not(.token) {
  --color-water-darker: var(--color-water);
  --color-gold-darker: var(--color-gold);
  --color-grass-darker: var(--color-grass);
  --color-lava-darker: var(--color-lava);
  --color-stainless-darker: var(--color-stainless);
}