:root {
  --vlan-10: #378add;
  --vlan-20: #1d9e75;
  --vlan-30: #ba7517;
  --vlan-40: #d85a30;
  --vlan-100: #888780;
  --vlan-mgmt: #534ab7;
}

.vlan-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border-radius: 999px;
  padding: 0.15rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid #d8d8d8;
}

.vlan-pill::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #999;
}

.vlan-10::before { background: var(--vlan-10); }
.vlan-20::before { background: var(--vlan-20); }
.vlan-30::before { background: var(--vlan-30); }
.vlan-40::before { background: var(--vlan-40); }
.vlan-100::before { background: var(--vlan-100); }
.vlan-mgmt::before { background: var(--vlan-mgmt); }