.label {
  background: var(--color-mint);
  border-radius: 0.2em;
  color: var(--color-blurple);
  display: inline-block;
  font-feature-settings: 'c2sc', 'smcp';
  font-size: var(--font-size-small);
  font-weight: 500;
  letter-spacing: -0.0175em;
  line-height: 1em;
  margin-right: 0.125em;
  margin-top: -0.175em;
  padding: 0.15em 0.4em 0.2em 0.4em;
  vertical-align: middle;
}

.label--without {
  background: var(--color-black);
  color: var(--color-salmon);
}

.label--with {
  color: var(--color-blurple);
}

.label--done {
  background: linear-gradient(
    135deg,
    var(--color-mint) 0,
    var(--color-sky) 100%
  );
  color: var(--color-black);
}

.label--to-do {
  background: linear-gradient(
    135deg,
    var(--color-peach) 0,
    var(--color-canary) 100%
  );
  color: var(--color-black);
}

.inline-label {
  display: inline-block;
  pointer-events: none;
  width: 0;
}

.inline-label span {
  background: linear-gradient(
    135deg,
    var(--color-coral) 0,
    var(--color-salmon) 100%
  );
  border-radius: 1.25em;
  color: var(--color-white);
  font-family: 'Moniker', Sans-Serif;
  font-feature-settings: 'c2sc', 'smcp';
  font-size: 40%;
  font-weight: 500;
  letter-spacing: -0.0175em;
  line-height: 1em;
  padding: 0.125em 0.45em;
  transform: rotate(-8deg) translate(-50%, -120%);
  vertical-align: top;
}