.tag-item {
  display: inline-block;
  position: relative;
}

.tag-selector {
  position: absolute;
  transform: scale(0);
}

.tag-selector + label {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85em;
  font-weight: 600;
  border-radius: 6px;
  padding: 0.3rem 0.5rem;
  background-color: var(--btn-background, var(--color-subtle-light));
  color: var(--btn-color, var(--color-subtle-dark));
  border: var(--btn-border-size, 1px) solid
    var(--btn-border-color, var(--color-subtle));
  margin-right: 0.2rem;
  margin-bottom: 0.4rem;
  transition:
    background-color var(--transition, 300ms ease),
    border var(--transition, 300ms ease),
    color var(--transition, 300ms ease);
}

/* Checked state */
.tag-selector:checked + label {
  background-color: var(--btn-background-checked, var(--color-ink));
  color: var(--btn-color-checked, var(--color-ink-reversed));
  border-color: var(--color-ink);
}

.tag-selector + label:hover {
  filter: brightness(1.03);
}

.tag-selector:focus + label {
  outline: 2px solid var(--color-link);
  outline-offset: 2px;
}

@media (prefers-color-scheme: dark) {
  .tag-selector + label {
    background-color: var(--color-subtle);
    color: var(--color-ink);
    border-color: var(--color-subtle-dark);
  }

  .tag-selector:checked + label {
    background-color: var(--color-ink);
    color: var(--color-ink-reversed);
    border-color: var(--color-ink);
  }
}