.chip {
  display: flex;
  gap: 3px;
  align-items: baseline;
  width: 100%;
  padding: 2px 5px;
  border: 0;
  border-left: 2px solid var(--c-green);
  border-radius: 3px;
  background: color-mix(in srgb, var(--c-green) 18%, transparent);
  color: inherit;
  font: inherit;
  font-size: 11.5px;
  line-height: 1.45;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: background .12s, transform .08s;
}
.chip:active { transform: scale(.97); }
.chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.chip.is-dragging { opacity: .4; cursor: grabbing; }
.chip.is-done {
  opacity: .45;
  text-decoration: line-through;
}

.chip[data-color="yellow"] { background: color-mix(in srgb, var(--c-yellow) 18%, transparent); border-left-color: var(--c-yellow); }
.chip[data-color="green"]  { background: color-mix(in srgb, var(--c-green) 18%, transparent);  border-left-color: var(--c-green); }
.chip[data-color="pink"]   { background: color-mix(in srgb, var(--c-pink) 18%, transparent);   border-left-color: var(--c-pink); }
.chip[data-color="purple"] { background: color-mix(in srgb, var(--c-purple) 18%, transparent); border-left-color: var(--c-purple); }
.chip[data-color="orange"] { background: color-mix(in srgb, var(--c-orange) 18%, transparent); border-left-color: var(--c-orange); }
.chip[data-color="red"]    { background: color-mix(in srgb, var(--c-red) 18%, transparent);    border-left-color: var(--c-red); }
.chip[data-color="blue"]   { background: color-mix(in srgb, var(--c-blue) 18%, transparent);   border-left-color: var(--c-blue); }
.chip[data-color="cyan"]   { background: color-mix(in srgb, var(--c-cyan) 18%, transparent);   border-left-color: var(--c-cyan); }

.chip[data-color="yellow"]:hover { background: color-mix(in srgb, var(--c-yellow) 32%, transparent); }
.chip[data-color="green"]:hover  { background: color-mix(in srgb, var(--c-green) 32%, transparent); }
.chip[data-color="pink"]:hover   { background: color-mix(in srgb, var(--c-pink) 32%, transparent); }
.chip[data-color="purple"]:hover { background: color-mix(in srgb, var(--c-purple) 32%, transparent); }
.chip[data-color="orange"]:hover { background: color-mix(in srgb, var(--c-orange) 32%, transparent); }
.chip[data-color="red"]:hover    { background: color-mix(in srgb, var(--c-red) 32%, transparent); }
.chip[data-color="blue"]:hover   { background: color-mix(in srgb, var(--c-blue) 32%, transparent); }
.chip[data-color="cyan"]:hover   { background: color-mix(in srgb, var(--c-cyan) 32%, transparent); }

.chip-time {
  flex: 0 0 auto;
  font-size: 10.5px;
  font-weight: 600;
  opacity: .75;
  font-variant-numeric: tabular-nums;
}

.chip-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chip-more {
  font-size: 10.5px;
  color: var(--muted);
  padding-left: 4px;
}