@layer components {
  .todo-row {
    --todo-marker-size: var(--space-6);
    --todo-check-size: var(--space-5);

    position: relative;
    display: grid;
    grid-template-columns: var(--todo-marker-size) minmax(var(--space-0), var(--track-fill)) max-content;
    align-items: baseline;
    column-gap: var(--space-4);
    padding-block: var(--space-2);
    font: var(--type-body-sm);
    color: var(--color-ink);
  }

  .todo-row > .todo-marker {
    align-self: start;
    margin-block-start: var(--space-1);
  }

  a.todo-row__title::after {
    content: "";
    position: absolute;
    inset: var(--space-0);
  }

  @media (any-hover: hover) {
    a.todo-row__title:hover {
      color: var(--color-link);
    }
  }

  .todo-row--completed .todo-row__title {
    color: var(--color-ink-faint);
    text-decoration: line-through;
    text-decoration-color: var(--color-border-strong);
  }

  .todo-row__detail {
    grid-column: 2 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-0) var(--space-4);
    font: var(--type-caption);
    color: var(--color-ink-faint);
  }

  .todo-row__when {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
  }

  .todo-row--folding {
    overflow: clip;
    interpolate-size: allow-keywords;
    animation: todo-row-fold var(--dur-celebrate) var(--ease-exit) var(--dur-slow) both;
  }

  .todo-row--folding .todo-row__title {
    animation: todo-row-strike var(--dur-slow) var(--ease-calm) both;
  }

  @keyframes todo-row-strike {
    from {
      text-decoration-color: transparent;
    }
  }

  @keyframes todo-row-fold {
    to {
      opacity: var(--opacity-none);
      block-size: var(--space-0);
      padding-block: var(--space-0);
    }
  }
}