.todo__title {
  /* font-size: 0.875em; */
}

.todo__list {
  margin-block: 0;
  display: flex;
  flex-direction: column;
}

.todo__row {
  display: grid;
  grid-template-columns: var(--checkbox-size) 1fr;
  align-items: start;
  column-gap: var(--checkbox-px);
  padding-block: var(--checkbox-py);
  position: relative;
  flex: 1;
}

.todo__check {
  --checkbox-size: 1.3em;
  border-radius: 20%;
  border: 1px solid var(--tint-ink-25);
  display: inline-block;
  flex-shrink: 0;
  block-size: var(--checkbox-size);
  vertical-align: baseline;
  inline-size: var(--checkbox-size);
}

.todo__check--checked {
  background-color: rgba(0, 0, 0, 0);
  border-color: var(--color-green);
  border-width: 0.1em;
  opacity: 0.75;
  position: relative;
}

.todo__check--checked:after {
  background: url(../../icons/check.svg) no-repeat center center;
  background-size: 65%;
  block-size: 100%;
  content: '';
  inline-size: 100%;
  inset: 0;
  position: absolute;
  filter: brightness(0) saturate(100%) invert(59%) sepia(16%) saturate(1592%) hue-rotate(94deg) brightness(87%) contrast(93%);
}

.todo__asignee {
  display: inline;
  position: relative;
  font-size: 0.875em;
  color: var(--color-uncolor);
}

.todo__assignee .avatar {
  inline-size: 1.21em;
  block-size: 1.21em;
  margin-block-start: -0.245em;
}
