input[type="checkbox"].tag + label {
  cursor: pointer;
}

input[type="checkbox"].tag:focus + label {
  outline-width: 2px;
  outline: 2px auto var(--theme-text);
  outline-offset: 3px;
  border-radius: .25em;
}

input[type="checkbox"].tag:hover + label,
input[type="checkbox"].tag:focus + label {
  background-color: var(--theme-tag-hover-bg);
}

input[type="checkbox"].tag:checked + label {
  background-color: var(--theme-tag-focus-bg);
  color: var(--theme-tag-focus-text);
}

input[type="checkbox"].tag {
  opacity: 0;
  position: absolute;
  left: -99999px;
}

.tag-label {
  display: flex;
  align-items: center;
  border-radius: .25em;
  margin-right: .75em;
}

.tag-name {
  padding: 0 .5em;
  border-right: none;
  border: 1px solid var(--theme-text);
}

.tag-count {
  display: flex;
  align-items: center;
  font-size: .8em;
  background-color: var(--theme-tag-count-bg);;
  color: var(--theme-bg);
  border-radius: 0 .25em .25em 0;
  padding: 0 .5em;
  align-self: stretch;
}

:root {
  --theme-tag-hover-bg: var(--theme-accent-light);
  --theme-tag-focus-bg: var(--theme-accent-dark);
  --theme-tag-focus-text: var(--color-white);
  --theme-tag-count-bg: var(--color-gray-700);
}

:root[data-theme="dark"] {
  --theme-tag-hover-bg: var(--theme-accent-dark);
  --theme-tag-focus-bg: var(--theme-accent-light);
  --theme-tag-focus-text: var(--color-black);
  --theme-tag-count-bg: var(--color-gray-300);
}