@layer components {
  .todo-detail {
    --todo-marker-size: var(--item-marker-size);
    --todo-check-size: var(--item-check-size);

    display: flex;
    flex-direction: column;
    gap: var(--space-5);
  }

  .todo-detail__title {
    font: var(--type-title-1);
    letter-spacing: var(--tracking-display);
    color: var(--color-ink-display);
    text-wrap: balance;
  }

  .todo-detail__status {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    font: var(--type-body);
    color: var(--color-ink-muted);
  }
}