/* === Tag Pills === */

.cm-hashtag-end, .tag {
  background-color: cadetblue !important;
  border: none;
  color: white !important;
  font-size: 11px;
  font-weight: bold;
  line-height: 1.6em;
  padding: 0px 7px 1px 7px;
  text-align: center;
  text-decoration: none !important;
  display: inline-block;
  margin: 0px 2px;
  cursor: pointer;
  border-radius: 10px;
}

.cm-hashtag-end.cm-tag-important, .tag[href^="#important"] {
  background-color: lightcoral !important;
}

.cm-hashtag-end.cm-tag-inprogress, .tag[href^="#inprogress"] {
  background-color: lightgreen !important;
}

.cm-hashtag-end.cm-tag-home, .tag[href^="#home"] {
  background-color: plum !important;
}

.tag:hover {
  color: white;
  background-color: var(--text-accent-hover);
}

/* Tag pills in tag panel*/
/* Thanks Klaas for idea and some realization */

.tag-pane-tag-text {
  background-color: var(--background-primary);
  color: var(--text-normal);
  border: none;
  font-size: 13px;
  padding: 1px 8px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  border-radius: 14px;
  transition: all 0.2s ease;
}

.tag-pane-tag-count {
  background-color: var(--background-primary);
  color: var(--text-normal);
  border: none;
  font-size: 13px;
  padding: 2px 8px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: 0px 0px;
  cursor: pointer;
  border-radius: 14px;
  transition: all 0.2s ease;
}

.tag-pane-tag:hover > .tag-pane-tag-count,
.tag-pane-tag:hover > .tag-pane-tag-text {
  background-color: var(--text-accent);
  color: white;
  font-weight: bold;
}