#tag-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.tag-container > input {
  display: none;
}

.tag-container > span {
  display: block;
  padding: 0.25rem 0.5rem;
  color: var(--color-link);
  background-color: var(--color-accent);
  border-radius: var(--border-radius);
  cursor: pointer;
}

.tag-container > span::before {
  content: '#';
}

.tag-container:hover > span {
  background-color: var(--color-text-inverse);
}

input[type="checkbox"]:checked + span {
  background: var(--color-link);
  color: var(--color-accent);
}

.hidden {
  display: none;
}